_update_layout(): void {
    const loc = this.model.tabs_location

    this.header = new LayoutItem()
    const size = Math.max(...children(this.header_el).map((el) => outer_size(el).height))
    if (loc == "above" || loc == "below")
      this.header.set_sizing({width_policy: "fit", height_policy: "fixed", height: size})
    else
      this.header.set_sizing({width_policy: "fixed", width: size, height_policy: "fit"})

    let row = 1
    let col = 1
    switch (loc) {
      case "above": row -= 1; break
      case "below": row += 1; break
      case "left":  col -= 1; break
      case "right": col += 1; break
    }

    const header = {layout: this.header, row, col}

    const panels = this.child_views.map((child_view) => {
      return {layout: child_view.layout, row: 1, col: 1}
    })

    this.layout = new Grid([header, ...panels])
    this.layout.set_sizing(this.box_sizing())
  }

      return () => {
        const ntabs = this.model.tabs.length

        if (dir == "left")
          scroll_index = Math.max(scroll_index - 1, 0)
        else
          scroll_index = Math.min(scroll_index + 1, ntabs - 1)

        if (scroll_index == 0)
          left_el.setAttribute("disabled", "")
        else
          left_el.removeAttribute("disabled")

        if (scroll_index == ntabs - 1)
          right_el.setAttribute("disabled", "")
        else
          right_el.removeAttribute("disabled")

        const sizes = children(this.headers_el)
          .slice(0, scroll_index)
          .map((el) => el.getBoundingClientRect())

        if (vertical) {
          const left = -sum(sizes.map((size) => size.width))
          this.headers_el.style.left = `${left}px`
        } else {
          const top = -sum(sizes.map((size) => size.height))
          this.headers_el.style.top = `${top}px`
        }
      }

  on_active_change(): void {
    const i = this.model.active

    const headers = children(this.header_el)
    for (const el of headers)
      el.classList.remove("bk-active")

    headers[i].classList.add("bk-active")

    const {child_views} = this
    for (const child_view of child_views)
      hide(child_view.el)

    show(child_views[i].el)
  }

      protected _measure(viewport: Sizeable) {
        const min_headers = 3

        const scroll = size(scroll_el)
        const headers = children(headers_el).slice(0, min_headers).map((el) => size(el))

        const {width, height} = super._measure(viewport)
        if (vertical) {
          const min_width = scroll.width + sum(headers.map((size) => size.width))
          return {width: viewport.width != Infinity ? viewport.width : min_width, height}
        } else {
          const min_height = scroll.height + sum(headers.map((size) => size.height))
          return {width, height: viewport.height != Infinity ? viewport.height : min_height}
        }
      }