@let labelContent = label();

<a
  bitTabListItem
  [routerLink]="disabled ? null : route()"
  routerLinkActive
  [routerLinkActiveOptions]="routerLinkMatchOptions"
  #rla="routerLinkActive"
  [active]="rla.isActive"
  [state]="{ focusAfterNav: false }"
  [disabled]="disabled"
  [attr.aria-disabled]="disabled"
  [attr.tabindex]="tabIndex()"
  ariaCurrentWhenActive="page"
  role="link"
>
  <span [class]="tabLabelContentClasses">
    @if (startIcon()) {
      <bit-icon [name]="startIcon()" class="tw-text-base" />
    }
    <span #labelText class="tw-min-w-0 tw-truncate">
      @if (labelContent) {
        {{ labelContent }}
      } @else {
        <ng-content></ng-content>
      }
    </span>
    @if (berryValue()) {
      <bit-berry [value]="berryValue()" />
    }
    @if (endIcon()) {
      <bit-icon [name]="endIcon()" class="tw-text-base" />
    }
    <ng-content select="[slot=end]"></ng-content>
  </span>
</a>