@besaitech/ng-design-system 0.0.63 → 0.0.64

package/fesm2022/besaitech-ng-design-system.mjs

@@ -13109,6 +13109,8 @@ class SdsTabsStore {
     id = `sds-tabs-${nextId$3++}`;
     /** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
     scrollable = signal(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
+    /** Header style (mirrors [variant]). */
+    variant = signal('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /** Controlled mode (mirrors [controlled]): a click only REQUESTS a tab, the host sets [value]. */
     controlled = signal(false, ...(ngDevMode ? [{ debugName: "controlled" }] : []));
     /** Called with every tab the user picks (wired to the host's (tabSelect) output). */
@@ -13120,6 +13122,8 @@ class SdsTabsStore {
     connect(value) {
         this.value = value;
     }
+    /** Bumped when a tab's size may have changed (label, icon or count updated), so the indicator re-measures. */
+    layoutVersion = signal(0, ...(ngDevMode ? [{ debugName: "layoutVersion" }] : []));
     activeValue() {
         return this.value();
     }
@@ -13175,6 +13179,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * `?tab=` query param — or when switching can be refused (an unsaved-changes guard): the tab never
  * shows as selected before the host agrees. `(tabSelect)` also fires in the default mode.
  *
+ * **Two looks** (`variant`): `underline` (default) for a page's sections — a brand underline slides to the active
+ * tab, inactive tabs get a soft hover; `segmented` for a compact switch between 2–4 views (drawers, cards) — a raised
+ * thumb slides between the options. Either can carry an icon (`[icon]`) and a count (`[count]`) per tab. A
+ * `scrollable` underline list that overflows fades its edges and shows arrow buttons, and keeps the active tab in view.
+ *
  * **Panels are optional.** A tab set whose content is rendered by the host (an `@switch` on the value, a
  * router outlet) can omit <sds-tab-panels>; a tab then carries no `aria-controls` to a missing panel.
  *
@@ -13191,6 +13200,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * </sds-tabs>
  *
  * @example
+ * <!-- icons + counts; a compact switch in a drawer -->
+ * <sds-tabs scrollable [(value)]="tab">
+ *   <sds-tab-list ariaLabel="Orders">
+ *     <sds-tab value="active" icon="clipboard-list" [count]="activeCount()">Active</sds-tab>
+ *     <sds-tab value="history" icon="clock">History</sds-tab>
+ *   </sds-tab-list>
+ * </sds-tabs>
+ * <sds-tabs variant="segmented" [(value)]="view">
+ *   <sds-tab-list class="w-full">…</sds-tab-list>
+ * </sds-tabs>
+ *
+ * @example
  * <!-- driven by a query param, content rendered by the host -->
  * <sds-tabs controlled [value]="activeTab()" (tabSelect)="selectTab($event)">
  *   <sds-tab-list>
@@ -13204,8 +13225,10 @@ class SdsTabs {
     store = inject(SdsTabsStore);
     /** Value of the active tab (two-way). */
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** Let the tab list scroll horizontally instead of overflowing. */
+    /** Let the tab list scroll horizontally instead of overflowing (edge fades + arrow buttons when it does). */
     scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** `underline` (page sections, default) or `segmented` (a compact switch between 2–4 views). */
+    variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /**
      * Controlled mode: a user pick only emits (tabSelect); the host decides by setting [value]. See the
      * class note.
@@ -13217,10 +13240,11 @@ class SdsTabs {
         this.store.connect(this.value);
         this.store.onSelect = (value) => this.tabSelect.emit(value);
         effect(() => this.store.scrollable.set(this.scrollable()));
+        effect(() => this.store.variant.set(this.variant()));
         effect(() => this.store.controlled.set(this.controlled()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTabs, isStandalone: true, selector: "sds-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, controlled: { classPropertyName: "controlled", publicName: "controlled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", tabSelect: "tabSelect" }, host: { classAttribute: "block" }, providers: [SdsTabsStore], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTabs, isStandalone: true, selector: "sds-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, controlled: { classPropertyName: "controlled", publicName: "controlled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", tabSelect: "tabSelect" }, host: { classAttribute: "block" }, providers: [SdsTabsStore], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabs, decorators: [{
             type: Component,
@@ -13231,12 +13255,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     host: { class: 'block' },
                     template: `<ng-content />`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], controlled: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlled", required: false }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], controlled: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlled", required: false }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }] } });
 
 /**
- * Container (role="tablist") for the <sds-tab> headers. Renders the bottom rule
- * and handles roving-focus keyboard navigation (Arrow keys, Home, End) with
- * automatic activation.
+ * Container (role="tablist") for the <sds-tab> headers: draws the active-tab indicator and handles roving-focus
+ * keyboard navigation (Arrow keys, Home, End) with automatic activation.
+ *
+ * **Underline** (default): a hairline rule with a 3px brand underline that slides to the active tab. When the tab set
+ * is `scrollable` and the tabs don't fit, the hidden side fades out and an arrow button scrolls by a page; picking a
+ * tab (click or keyboard) scrolls it into view. **Segmented**: a tinted track with a raised thumb that slides under the
+ * active option; put `class="w-full"` on the list to stretch the options evenly.
  *
  * Name the tab set with [ariaLabel] (or [ariaLabelledby] pointing at a visible heading) when the page has
  * more than one, or when the tabs alone do not say what they switch.
@@ -13245,26 +13273,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * <sds-tab-list [ariaLabel]="'Order status'">…</sds-tab-list>
  */
 class SdsTabList {
-    host = inject(ElementRef);
     store = inject(SdsTabsStore);
+    scroller = viewChild.required('scroller');
     /** Accessible name of the tablist. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** Id of a visible element that names the tablist (takes precedence over [ariaLabel] for AT). */
     ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    segmented = computed(() => this.store.variant() === 'segmented', ...(ngDevMode ? [{ debugName: "segmented" }] : []));
+    indicator = signal(null, ...(ngDevMode ? [{ debugName: "indicator" }] : []));
+    /** Off for the first placement, so the indicator doesn't fly in from the left on load. */
+    animate = signal(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
+    canScrollStart = signal(false, ...(ngDevMode ? [{ debugName: "canScrollStart" }] : []));
+    canScrollEnd = signal(false, ...(ngDevMode ? [{ debugName: "canScrollEnd" }] : []));
+    arrows = computed(() => this.store.scrollable() && !this.segmented(), ...(ngDevMode ? [{ debugName: "arrows" }] : []));
+    hostClass = computed(() => this.segmented() ? 'relative inline-flex max-w-full' : 'relative block', ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
     /**
-     * Scrollable: `overflow-x: auto` turns the other axis to `auto` too (CSS), so the tabs' 1px overlap of a
-     * border-bottom rule (`-mb-px`, so the active underline covers it) made the list 1px taller than its box and
-     * showed a vertical scrollbar. There the rule is an inset shadow instead — painted under the tabs, so the active
-     * underline still covers it with no overlap — and vertical overflow is hidden.
+     * The scroller is the tablist. Underline: the rule is an inset shadow, painted under the tabs, so nothing overflows
+     * vertically — `overflow-x: auto` turns the other axis to `auto` too (CSS), and a 1px overflow showed a vertical
+     * scrollbar. Segmented: a tinted track (ink at 5%, so it reads on any surface) around the options.
      */
-    listClass = computed(() => this.store.scrollable()
-        ? 'relative flex overflow-x-auto overflow-y-hidden shadow-[inset_0_-1px_0_var(--color-border)]'
-        : 'relative flex border-b border-border', ...(ngDevMode ? [{ debugName: "listClass" }] : []));
+    scrollerClass = computed(() => {
+        const scroll = this.store.scrollable()
+            ? 'overflow-x-auto overflow-y-hidden overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+            : '';
+        return this.segmented()
+            ? `relative flex w-full gap-1 rounded-control bg-ink/5 p-1 ${scroll}`
+            : `relative flex gap-1 shadow-[inset_0_-1px_0_var(--color-border)] ${scroll}`;
+    }, ...(ngDevMode ? [{ debugName: "scrollerClass" }] : []));
+    /** Fade the side(s) with hidden tabs, so the overflow reads as "more this way". */
+    fadeMask = computed(() => {
+        if (!this.arrows())
+            return null;
+        const start = this.canScrollStart();
+        const end = this.canScrollEnd();
+        if (!start && !end)
+            return null;
+        return `linear-gradient(to right, ${start ? 'transparent, black 48px' : 'black'}, ${end ? 'black calc(100% - 48px), transparent' : 'black'})`;
+    }, ...(ngDevMode ? [{ debugName: "fadeMask" }] : []));
+    constructor() {
+        // Place the indicator after every render that may move the active tab (selection, labels, counts, variant).
+        afterRenderEffect(() => {
+            this.store.activeValue();
+            this.store.layoutVersion();
+            this.store.variant();
+            this.place();
+        });
+        // Fonts loading, a parent resizing or labels translating all change tab widths without a signal.
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => this.place(false));
+        afterRenderEffect(() => {
+            const el = this.scroller().nativeElement;
+            if (!observer)
+                return;
+            observer.disconnect();
+            observer.observe(el);
+            el.querySelectorAll('[data-sds-tab]').forEach((tab) => observer.observe(tab));
+        });
+        inject(DestroyRef).onDestroy(() => observer?.disconnect());
+    }
+    /** Measure the active tab and move the indicator there; keep it in view when the selection changed. */
+    place(reveal = true) {
+        const scroller = this.scroller().nativeElement;
+        const tab = scroller.querySelector('[role="tab"][aria-selected="true"]');
+        this.measureScroll();
+        if (!tab) {
+            this.indicator.set(null);
+            return;
+        }
+        // Underline: as wide as the label area (the tab's padding is the hover pill's, not the underline's).
+        const inset = this.segmented() ? 0 : 12;
+        const box = { left: tab.offsetLeft + inset, width: Math.max(tab.offsetWidth - inset * 2, 12) };
+        const prev = this.indicator();
+        if (prev && prev.left === box.left && prev.width === box.width)
+            return;
+        this.indicator.set(box);
+        if (prev) {
+            this.animate.set(true);
+        }
+        else {
+            // First placement: no transition, then enable it for the moves that follow.
+            requestAnimationFrame(() => this.animate.set(true));
+        }
+        if (reveal)
+            this.reveal(tab);
+    }
+    /** Scroll just enough to show the active tab clear of the edge fades (never scrolls the page vertically). */
+    reveal(tab) {
+        const scroller = this.scroller().nativeElement;
+        if (scroller.scrollWidth <= scroller.clientWidth)
+            return;
+        const margin = 48;
+        const start = tab.offsetLeft - margin;
+        const end = tab.offsetLeft + tab.offsetWidth + margin - scroller.clientWidth;
+        if (scroller.scrollLeft > start) {
+            scroller.scrollTo({ left: Math.max(start, 0), behavior: this.smooth() });
+        }
+        else if (scroller.scrollLeft < end) {
+            scroller.scrollTo({ left: end, behavior: this.smooth() });
+        }
+    }
+    measureScroll() {
+        const el = this.scroller().nativeElement;
+        const max = el.scrollWidth - el.clientWidth;
+        this.canScrollStart.set(el.scrollLeft > 1);
+        this.canScrollEnd.set(max > 1 && el.scrollLeft < max - 1);
+    }
+    scrollByPage(direction) {
+        const el = this.scroller().nativeElement;
+        el.scrollBy({ left: direction * el.clientWidth * 0.75, behavior: this.smooth() });
+    }
+    smooth() {
+        return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
+            ? 'auto'
+            : 'smooth';
+    }
     onKeydown(event) {
         const keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
         if (!keys.includes(event.key))
             return;
-        const tabs = Array.from(this.host.nativeElement.querySelectorAll('[role="tab"]')).filter((b) => !b.disabled);
+        const tabs = Array.from(this.scroller().nativeElement.querySelectorAll('[role="tab"]')).filter((b) => !b.disabled);
         if (!tabs.length)
             return;
         event.preventDefault();
@@ -13289,33 +13415,141 @@ class SdsTabList {
         el.click(); // automatic activation
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTabList, isStandalone: true, selector: "sds-tab-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "listClass()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTabList, isStandalone: true, selector: "sds-tab-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()" } }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (arrows() && canScrollStart()) {
+      <button
+        type="button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="absolute left-0 top-1 z-20 flex h-9 w-8 items-center justify-center rounded-control bg-surface text-ink-soft shadow-sm ring-1 ring-border transition-colors hover:text-ink"
+        (click)="scrollByPage(-1)"
+      >
+        <sds-icon name="chevron-left" [size]="16" />
+      </button>
+    }
+    <div
+      #scroller
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [class]="scrollerClass()"
+      [style.mask-image]="fadeMask()"
+      (keydown)="onKeydown($event)"
+      (scroll)="measureScroll()"
+    >
+      @if (segmented() && indicator(); as box) {
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute bottom-1 top-1 rounded-[calc(var(--radius-control)-2px)] bg-surface shadow-sm ring-1 ring-border dark:bg-ink/15 dark:ring-transparent"
+          [class.sds-tabs-animate]="animate()"
+          [style.left.px]="box.left"
+          [style.width.px]="box.width"
+        ></span>
+      }
+      <ng-content />
+      @if (!segmented() && indicator(); as box) {
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute bottom-0 h-[3px] rounded-t-full bg-brand-600"
+          [class.sds-tabs-animate]="animate()"
+          [style.left.px]="box.left"
+          [style.width.px]="box.width"
+        ></span>
+      }
+    </div>
+    @if (arrows() && canScrollEnd()) {
+      <button
+        type="button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="absolute right-0 top-1 z-20 flex h-9 w-8 items-center justify-center rounded-control bg-surface text-ink-soft shadow-sm ring-1 ring-border transition-colors hover:text-ink"
+        (click)="scrollByPage(1)"
+      >
+        <sds-icon name="chevron-right" [size]="16" />
+      </button>
+    }
+  `, isInline: true, styles: [".sds-tabs-animate{transition:left .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1)}@media(prefers-reduced-motion:reduce){.sds-tabs-animate{transition:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabList, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sds-tab-list',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        role: 'tablist',
-                        '[class]': 'listClass()',
-                        '[attr.aria-label]': 'ariaLabel() || null',
-                        '[attr.aria-labelledby]': 'ariaLabelledby() || null',
-                        '(keydown)': 'onKeydown($event)',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }] } });
+            args: [{ selector: 'sds-tab-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], host: { '[class]': 'hostClass()' }, template: `
+    @if (arrows() && canScrollStart()) {
+      <button
+        type="button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="absolute left-0 top-1 z-20 flex h-9 w-8 items-center justify-center rounded-control bg-surface text-ink-soft shadow-sm ring-1 ring-border transition-colors hover:text-ink"
+        (click)="scrollByPage(-1)"
+      >
+        <sds-icon name="chevron-left" [size]="16" />
+      </button>
+    }
+    <div
+      #scroller
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [class]="scrollerClass()"
+      [style.mask-image]="fadeMask()"
+      (keydown)="onKeydown($event)"
+      (scroll)="measureScroll()"
+    >
+      @if (segmented() && indicator(); as box) {
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute bottom-1 top-1 rounded-[calc(var(--radius-control)-2px)] bg-surface shadow-sm ring-1 ring-border dark:bg-ink/15 dark:ring-transparent"
+          [class.sds-tabs-animate]="animate()"
+          [style.left.px]="box.left"
+          [style.width.px]="box.width"
+        ></span>
+      }
+      <ng-content />
+      @if (!segmented() && indicator(); as box) {
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute bottom-0 h-[3px] rounded-t-full bg-brand-600"
+          [class.sds-tabs-animate]="animate()"
+          [style.left.px]="box.left"
+          [style.width.px]="box.width"
+        ></span>
+      }
+    </div>
+    @if (arrows() && canScrollEnd()) {
+      <button
+        type="button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="absolute right-0 top-1 z-20 flex h-9 w-8 items-center justify-center rounded-control bg-surface text-ink-soft shadow-sm ring-1 ring-border transition-colors hover:text-ink"
+        (click)="scrollByPage(1)"
+      >
+        <sds-icon name="chevron-right" [size]="16" />
+      </button>
+    }
+  `, styles: [".sds-tabs-animate{transition:left .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1)}@media(prefers-reduced-motion:reduce){.sds-tabs-animate{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }] } });
 
 /**
- * A single tab header (role="tab"). Project the label and, optionally, an
- * <sds-icon> for an icon + text header. Set [disabled] to make it unselectable.
+ * A single tab header (role="tab"). Project the label; optionally give it an [icon] (a registry name, drawn before
+ * the label) and a [count] (a small badge after it — e.g. how many orders wait in that tab; `null` hides it, `0`
+ * shows it). Set [disabled] to make it unselectable. Its look follows the tab set's `variant`.
  */
 class SdsTab {
     store = inject(SdsTabsStore);
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** An icon from the library registry, drawn before the label. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** A count badge after the label (`null` / unset: none; `0` is shown). */
+    count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : []));
     active = computed(() => this.store.isActive(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    constructor() {
+        // A new count or icon changes the tab's width: let the list move its indicator.
+        effect(() => {
+            this.count();
+            this.icon();
+            untracked(() => this.store.layoutVersion.update((v) => v + 1));
+        });
+    }
     ngOnInit() {
         this.store.registerTab(this.value());
     }
@@ -13327,21 +13561,36 @@ class SdsTab {
             return;
         this.store.select(this.value());
     }
-    tabClass() {
-        // Overlaps the list's border-bottom rule by 1px; a scrollable list draws its rule inside instead (see SdsTabList).
-        const offset = this.store.scrollable() ? '' : '-mb-px ';
-        const base = `relative ${offset}inline-flex items-center gap-2 whitespace-nowrap border-b-2 px-4 py-2.5 ` +
-            'text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 ' +
-            'focus-visible:ring-brand-500 focus-visible:ring-inset';
-        if (this.disabled()) {
-            return `${base} border-transparent text-ink-faint opacity-50 cursor-not-allowed`;
-        }
-        return this.active()
-            ? `${base} border-brand-600 text-brand-700 cursor-pointer`
-            : `${base} border-transparent text-ink-soft hover:border-border hover:text-ink cursor-pointer`;
-    }
+    tabClass = computed(() => {
+        const focus = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-0';
+        const state = this.disabled()
+            ? 'cursor-not-allowed text-ink-faint opacity-50'
+            : this.active()
+                ? 'cursor-pointer text-ink'
+                : 'cursor-pointer text-ink-soft hover:text-ink';
+        if (this.store.variant() === 'segmented') {
+            // Sits on the thumb the list slides under the active tab (z-10 keeps the label above it). Sized to its label,
+            // sharing any extra width when the list is stretched (class="w-full").
+            return ('relative z-10 inline-flex min-w-0 flex-auto items-center justify-center gap-2 whitespace-nowrap ' +
+                `rounded-[calc(var(--radius-control)-2px)] px-3.5 py-1.5 text-sm font-medium transition-colors ${focus} ${state}`);
+        }
+        // Underline: a soft hover pill above the rule; the list draws the sliding underline under the active tab.
+        const hover = this.disabled() || this.active() ? '' : 'hover:bg-ink/5';
+        return ('relative inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-control px-3 py-2 mt-1 mb-2 ' +
+            `text-sm font-medium transition-colors ${focus} ${hover} ${state}`);
+    }, ...(ngDevMode ? [{ debugName: "tabClass" }] : []));
+    /** Underline: the active tab's icon takes the brand colour, like its underline. Segmented: the label's colour. */
+    iconClass = computed(() => this.active() && !this.disabled() && this.store.variant() === 'underline'
+        ? 'shrink-0 text-brand-600'
+        : 'shrink-0', ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+    countClass = computed(() => {
+        const base = 'inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold tabular-nums transition-colors';
+        return this.active() && !this.disabled()
+            ? `${base} bg-brand-100 text-brand-700`
+            : `${base} bg-ink/[0.07] text-ink-soft`;
+    }, ...(ngDevMode ? [{ debugName: "countClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTab, isStandalone: true, selector: "sds-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTab, isStandalone: true, selector: "sds-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
     <button
       type="button"
       role="tab"
@@ -13350,19 +13599,27 @@ class SdsTab {
       [attr.aria-controls]="store.hasPanel(value()) ? store.panelId(value()) : null"
       [attr.aria-disabled]="disabled() ? 'true' : null"
       [attr.tabindex]="active() && !disabled() ? 0 : -1"
+      [attr.data-sds-tab]="''"
       [disabled]="disabled()"
       [class]="tabClass()"
       (click)="select()"
     >
-      <ng-content />
+      @if (icon(); as name) {
+        <sds-icon [name]="name" [size]="16" [class]="iconClass()" aria-hidden="true" />
+      }
+      <span class="truncate"><ng-content /></span>
+      @if (count() !== null && count() !== undefined) {
+        <span [class]="countClass()">{{ count() }}</span>
+      }
     </button>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-tab',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
                     host: { class: 'contents' },
                     template: `
     <button
@@ -13373,15 +13630,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [attr.aria-controls]="store.hasPanel(value()) ? store.panelId(value()) : null"
       [attr.aria-disabled]="disabled() ? 'true' : null"
       [attr.tabindex]="active() && !disabled() ? 0 : -1"
+      [attr.data-sds-tab]="''"
       [disabled]="disabled()"
       [class]="tabClass()"
       (click)="select()"
     >
-      <ng-content />
+      @if (icon(); as name) {
+        <sds-icon [name]="name" [size]="16" [class]="iconClass()" aria-hidden="true" />
+      }
+      <span class="truncate"><ng-content /></span>
+      @if (count() !== null && count() !== undefined) {
+        <span [class]="countClass()">{{ count() }}</span>
+      }
     </button>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
 
 /** Wrapper for the <sds-tab-panel> content blocks of a tab set. */
 class SdsTabPanels {