{{#let
  (dom-position (set this 'style') offset=true)
  "tab"
as |select name|}}
<nav
  style={{{if this.style (concat
      '--selected-width:' this.style.width ';'
      '--selected-left:' this.style.left ';'
      '--selected-height:' this.style.height ';'
      '--selected-top:' this.style.top
    )
    undefined
  }}}
  aria-label="Secondary"
  class={{concat 'tab-nav' ' animatable'}}
  ...attributes
>
  <ul>
{{#each @items as |item|}}
  <li
    {{on 'click' (fn select)}}
    {{did-upsert
      (if item.selected
        (fn select)
        (noop)
      )
      @items.length
    }}
    data-test-tab={{concat name '_' (if item.label (slugify item.label) (slugify item))}}
    class={{if (or item.selected (eq selected (if item.label (slugify item.label) (slugify item)))) 'selected'}}
  >
    <Action
      {{on 'click'
        (if (not-eq @onclick undefined)
          (fn @onclick (uppercase item.label))
          (noop)
        )
      }}
      @href={{item.href}}
    >
      {{item.label}}
    </Action>
  </li>
{{/each}}
  </ul>
</nav>
{{/let}}