@scope (tabs-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --tabs-border-default:          transparent;
    --tabs-bg-default:              transparent;
    --tabs-radius-default:          var(--a-radius-md);
    --tabs-button-height-default:   var(--a-size);
    --tabs-button-px-default:       var(--a-space-2);
    --tabs-font-size-default:       var(--a-ui-md);
    --tabs-gap-default:             var(--a-space-1);
    --tabs-indicator-color-default: var(--a-primary);
    --tabs-indicator-height-default: 2px;
    --tabs-fg-default:              var(--a-fg-subtle);
    --tabs-fg-hover-default:        var(--a-fg);
    --tabs-fg-active-default:       var(--a-fg-selected);
    --tabs-fg-disabled-default:     var(--a-ui-text-disabled);

    /* ── Spacing ── */
    --tabs-vertical-gap-default:    var(--a-space-4);
    --tabs-button-gap-default:      var(--a-space-1);

    /* ── Transitions ── */
    --tabs-duration-default:        var(--a-duration);
    --tabs-duration-fast-default:   var(--a-duration-fast);
    --tabs-easing-default:          var(--a-easing);
    --tabs-easing-out-default:      var(--a-easing-out);

    /* ── Focus ── */
    --tabs-focus-ring-default:      var(--a-focus-ring);
    --tabs-focus-radius-default:    var(--a-radius-sm);

    /* ── Vertical strip min-width ── */
    /* Component-intrinsic visual constant; no --a-space-* equivalent
       (8.75rem ≈ 140px at 1rem=16px). */
    --tabs-vertical-strip-min-width-default: 8.75rem;
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--tabs-bg, var(--tabs-bg-default));
    border-radius: var(--tabs-radius, var(--tabs-radius-default));
  }

  /* Bordered variant — baseline border under the tab strip.
     The active indicator sits on top of the border for a clean join. */
  :scope[variant="bordered"] { --tabs-border-default: var(--a-border-subtle); }
  :scope[divider]            { --tabs-border-default: var(--a-border-subtle); }

  /* Vertical orientation: strip on the left, panels on the right */
  :scope[orientation="vertical"] {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--tabs-vertical-gap, var(--tabs-vertical-gap-default));
  }

  /* ── Button strip ── */
  [slot="strip"] {
    box-sizing: border-box;
    display: flex;
    gap: var(--tabs-gap, var(--tabs-gap-default));
    height: var(--tabs-button-height, var(--tabs-button-height-default));
    box-shadow: inset 0 -1px 0 var(--tabs-border, var(--tabs-border-default));
    position: relative;
  }

  :scope[orientation="vertical"] > [slot="strip"] {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    box-shadow: inset 1px 0 0 var(--tabs-border, var(--tabs-border-default));
    flex-shrink: 0;
    min-width: var(--tabs-vertical-strip-min-width, var(--tabs-vertical-strip-min-width-default));
  }

  /* ── Sliding indicator ── */
  [slot="indicator"] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--tabs-indicator-height, var(--tabs-indicator-height-default));
    background: var(--tabs-indicator-color, var(--tabs-indicator-color-default));
    border-radius: var(--tabs-indicator-height, var(--tabs-indicator-height-default));
    pointer-events: none;
    transition:
      transform var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default)),
      width var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default));
  }

  :scope[orientation="vertical"] [slot="indicator"] {
    bottom: auto;
    left: -1px;
    top: 0;
    width: var(--tabs-indicator-height, var(--tabs-indicator-height-default));
    height: auto;
    transition:
      transform var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default)),
      height var(--tabs-duration, var(--tabs-duration-default)) var(--tabs-easing-out, var(--tabs-easing-out-default));
  }

  /* Vertical panel area takes remaining space */
  :scope[orientation="vertical"] > tab-ui {
    flex: 1;
    min-width: 0;
  }

  /* ── Tab buttons ── */
  [slot="tab-button"] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--tabs-button-gap, var(--tabs-button-gap-default));
    height: var(--tabs-button-height, var(--tabs-button-height-default));
    padding-inline: var(--tabs-button-px, var(--tabs-button-px-default));
    border: none;
    background: none;
    color: var(--tabs-fg, var(--tabs-fg-default));
    font: inherit;
    font-size: var(--tabs-font-size, var(--tabs-font-size-default));
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--tabs-duration-fast, var(--tabs-duration-fast-default)) var(--tabs-easing, var(--tabs-easing-default));
  }

  :scope[orientation="vertical"] [slot="tab-button"] {
    justify-content: flex-start;
    text-align: start;
    width: 100%;
  }

  [slot="tab-button"]:not([disabled]):hover {
    color: var(--tabs-fg-hover, var(--tabs-fg-hover-default));
  }

  [slot="tab-button"][data-active] {
    color: var(--tabs-fg-active, var(--tabs-fg-active-default));
  }

  [slot="tab-button"][disabled] {
    color: var(--tabs-fg-disabled, var(--tabs-fg-disabled-default));
    cursor: not-allowed;
    pointer-events: none;
  }

  [slot="tab-button"]:focus-visible {
    outline: none;
    box-shadow: var(--tabs-focus-ring, var(--tabs-focus-ring-default));
    border-radius: var(--tabs-focus-radius, var(--tabs-focus-radius-default));
  }

  /* ── Tab panels ── */
  tab-ui {
    box-sizing: border-box;
    display: block;
  }

  tab-ui[hidden] {
    display: none;
  }
}
