@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-tabs.mjs

@@ -0,0 +1,829 @@
+import { createRovingTabindex, createRemovalFocus } from '@slotted/core/focus';
+import { NOT_OVERFLOWING, createScrollAffordance } from '@slotted/core/overflow';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, output, DestroyRef, Injector, signal, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, Directive, TemplateRef, contentChild } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { NgTemplateOutlet } from '@angular/common';
+
+const FALLBACK = {
+    activation: 'automatic',
+    fit: 'auto',
+    loop: true,
+    mount: 'active',
+    orientation: 'horizontal',
+    size: 'md',
+    track: 'line',
+    variant: 'line',
+};
+const TABS_DEFAULTS = new InjectionToken('slotted tabs defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its tabs look and behave, rather than
+ * repeating the same seven inputs on every family in a product. A family that
+ * states any of them itself still wins.
+ */
+function provideTabsDefaults(defaults) {
+    return {
+        provide: TABS_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a tabs family renders as here, before it states anything of its own. */
+function injectTabsDefaults() {
+    return inject(TABS_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+class SlTabsIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-tabs-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabsIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabsIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabsIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Every tab in the list, in the order the DOM holds them. */
+const TAB_SELECTOR = '[data-part="tab"]';
+/**
+ * An identifier from a value, injectively.
+ *
+ * A value is the consumer's own string and may hold a space, which no
+ * identifier may. Escaping the characters an identifier refuses — rather than
+ * replacing them — is what keeps two values from wiring one panel.
+ */
+function escapeTabValue(value) {
+    return value.replace(/[^\w-]/g, (character) => `-${character.charCodeAt(0).toString(16)}-`);
+}
+/**
+ * One view out of several, and the panels under it.
+ *
+ * **The keyboard is the APG's, and it is implemented once.** The list is a
+ * roving tab stop from `@slotted/core/focus`: `Tab` enters on the selected tab,
+ * the arrows of the flow axis move and wrap, `Home` and `End` reach the ends,
+ * and the cross axis is left alone so the page still scrolls with focus inside
+ * a horizontal list. `Delete` dismisses a dismissible tab, and focus lands
+ * where the pattern says.
+ *
+ * **The marker moves without a measurement.** The root records which way the
+ * selection travelled and the stylesheet turns that into a transform origin, so
+ * the family is right in a server response and during the first paint.
+ *
+ * **The paging controls belong to the root**, because the root owns the observer
+ * that knows whether they are needed. They are out of the tab sequence and out
+ * of the accessibility tree: the arrows already reach every tab and bring it
+ * into view.
+ */
+class SlTabs {
+    /** Present means the consumer owns the selection. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value an uncontrolled family starts from, read once. */
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    activation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activation" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** `none` draws no line at all, for a list standing on one the page drew. */
+    track = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    fit = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    mount = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
+    loop = input(undefined, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** Reaches every tab as the native attribute, which is also what makes the
+        browser skip it with the arrow keys. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** One output for one transition, carrying the reason and the event. */
+    valueChange = output();
+    /**
+     * Asked before a tab is dismissed. The family removes nothing: the consumer
+     * owns the collection, and a component that removed itself would render
+     * nothing while the consumer's array still held the item.
+     */
+    tabDismiss = output();
+    defaults = injectTabsDefaults();
+    baseId = inject(SlTabsIdFactory).next();
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    listElement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listElement" }] : /* istanbul ignore next */ []));
+    seen = new Set();
+    roving = null;
+    affordance = null;
+    direction = signal('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    overflow = signal(NOT_OVERFLOWING, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    selection = computed(() => this.value() ?? this.own(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    resolvedActivation = computed(() => this.activation() ?? this.defaults.activation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedActivation" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedTrack = computed(() => this.track() ?? this.defaults.track, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTrack" }] : /* istanbul ignore next */ []));
+    resolvedFit = computed(() => this.fit() ?? this.defaults.fit, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFit" }] : /* istanbul ignore next */ []));
+    resolvedMount = computed(() => this.mount() ?? this.defaults.mount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMount" }] : /* istanbul ignore next */ []));
+    resolvedLoop = computed(() => this.loop() ?? this.defaults.loop, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLoop" }] : /* istanbul ignore next */ []));
+    paging = computed(() => this.overflow().overflowing && this.resolvedOrientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paging" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /**
+         * The list constructs before this runs and hands over its element; the
+         * handles are created once, after the first render, because two of them
+         * measure and all three read the DOM the tabs are in.
+         */
+        afterNextRender(() => {
+            const list = this.listElement();
+            if (list !== null)
+                this.observe(list);
+        });
+    }
+    ngOnInit() {
+        if (this.value() === undefined)
+            this.own.set(this.defaultValue());
+        const start = this.selection();
+        if (start !== undefined)
+            this.seen.add(start);
+    }
+    /** The identifiers a tab and its panel are wired together with. */
+    identify(value) {
+        const escaped = escapeTabValue(value);
+        return { panelId: `${this.baseId}-panel-${escaped}`, tabId: `${this.baseId}-tab-${escaped}` };
+    }
+    /** Whether this value is the selected one. Read by every tab and panel. */
+    holds(value) {
+        return this.selection() === value;
+    }
+    /** Whether this value has ever been selected, which is what `lazy` reads. */
+    hasSeen(value) {
+        return this.seen.has(value);
+    }
+    /**
+     * The list hands the root its element. The root owns the roving tab stop, the
+     * removal focus and the overflow observer — all three are about that element,
+     * and the root is what holds the value they act on.
+     */
+    attachList(element) {
+        this.listElement.set(element);
+    }
+    tabElements() {
+        const list = this.listElement();
+        return list === null ? [] : [...list.querySelectorAll(TAB_SELECTOR)];
+    }
+    indexOf(value) {
+        if (value === undefined)
+            return -1;
+        return this.tabElements().findIndex((item) => item.getAttribute('data-value') === value);
+    }
+    /**
+     * Asks the family to select one value. The direction is set in the same turn,
+     * so the marker's origin and the selection reach the DOM in one paint.
+     */
+    select(next, reason, source) {
+        if (next === this.selection())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.selection(),
+            onRequest: (request) => {
+                this.valueChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled)
+            return;
+        const from = this.indexOf(this.selection());
+        const to = this.indexOf(next);
+        if (from !== -1 && to !== -1)
+            this.direction.set(to > from ? 'forward' : 'backward');
+        this.seen.add(next);
+        if (moved)
+            this.own.set(next);
+        /* The tab stop follows the selection, which is where `Tab` from outside the
+           list lands. The DOM order does not change here, so the index is read
+           straight away rather than waiting for a render. */
+        if (to !== -1)
+            this.roving?.setActive(to);
+        this.revealSelected();
+    }
+    /**
+     * The neighbour a dismissal leaves the selection to: the tab that followed
+     * the dismissed one, or the one before it when the dismissed tab was last.
+     * It is the APG's own focus rule for `Delete`, applied to the value.
+     */
+    neighbourOf(dismissed) {
+        const values = this.tabElements()
+            .map((item) => item.getAttribute('data-value'))
+            .filter((candidate) => candidate !== null);
+        const index = values.indexOf(dismissed);
+        if (index === -1)
+            return undefined;
+        return values[index + 1] ?? values[index - 1];
+    }
+    dismiss(value, reason, source) {
+        let cancelled = false;
+        const request = {
+            value,
+            reason,
+            source,
+            get cancelled() {
+                return cancelled;
+            },
+            cancel() {
+                cancelled = true;
+            },
+        };
+        this.tabDismiss.emit(request);
+        if (cancelled)
+            return;
+        if (!this.holds(value))
+            return;
+        const next = this.neighbourOf(value);
+        if (next !== undefined)
+            this.select(next, 'remove', source);
+    }
+    /** Puts the tab stop on the selected tab and brings it into view. */
+    syncSelection() {
+        const index = this.indexOf(this.selection());
+        if (index === -1)
+            return;
+        this.roving?.setActive(index);
+        this.revealSelected();
+    }
+    revealSelected() {
+        const item = this.tabElements()[this.indexOf(this.selection())];
+        if (item !== undefined)
+            this.affordance?.reveal(item);
+    }
+    page(direction) {
+        this.affordance?.page(direction);
+    }
+    observe(list) {
+        const tabindex = createRovingTabindex(list, {
+            crossAxis: false,
+            itemSelector: TAB_SELECTOR,
+            loop: this.resolvedLoop(),
+            onMove: (_index, item) => {
+                this.affordance?.reveal(item);
+                if (this.resolvedActivation() !== 'automatic')
+                    return;
+                const next = item.getAttribute('data-value');
+                if (next !== null)
+                    this.select(next, 'keyboard');
+            },
+            orientation: () => this.resolvedOrientation(),
+        });
+        this.roving = tabindex;
+        /**
+         * Where the keyboard goes when the tab it was on is dismissed. The list
+         * is the last resort, which is why it holds `tabindex="-1"`: a list
+         * emptied by its final dismissal keeps focus rather than returning it
+         * to the top of the page.
+         */
+        const removal = createRemovalFocus(list, {
+            itemSelector: TAB_SELECTOR,
+        });
+        /**
+         * A list that starts to overflow — on its first render, or later when its
+         * stylesheet arrives, a drawer opens or a hidden panel is shown — draws its
+         * paging controls, and they narrow it: a tab revealed against the wider list
+         * ended behind the end control. The selected tab is revealed again once the
+         * controls are in the layout, on that transition and on no other, so a
+         * reader scrolling the list keeps control.
+         */
+        let overflowing = false;
+        const affordance = createScrollAffordance(list, {
+            onChange: (state) => {
+                this.overflow.set(state);
+                if (state.overflowing && !overflowing) {
+                    afterNextRender(() => this.revealSelected(), { injector: this.injector });
+                }
+                overflowing = state.overflowing;
+            },
+        });
+        this.affordance = affordance;
+        this.overflow.set(affordance.state());
+        /**
+         * A tab arriving or leaving has to reach both handles, and neither
+         * binding can be told by the other's change detection. The DOM is the
+         * one thing they agree on.
+         */
+        const observer = new MutationObserver(() => {
+            tabindex.refresh();
+            affordance.refresh();
+            this.syncSelection();
+        });
+        observer.observe(list, { childList: true, subtree: true });
+        this.syncSelection();
+        this.destroyRef.onDestroy(() => {
+            observer.disconnect();
+            removal.destroy();
+            affordance.destroy();
+            tabindex.destroy();
+            this.roving = null;
+            this.affordance = null;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTabs, isStandalone: true, selector: "[slTabs]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, activation: { classPropertyName: "activation", publicName: "activation", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", tabDismiss: "tabDismiss" }, host: { attributes: { "data-ui": "tabs", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-track": "resolvedTrack()", "attr.data-orientation": "resolvedOrientation()", "attr.data-fit": "resolvedFit()", "attr.data-activation-direction": "direction()", "attr.data-disabled": "disabled() ? '' : null", "attr.data-overflowing": "overflow().overflowing ? '' : null" } }, exportAs: ["slTabs"], ngImport: i0, template: `<ng-content />
+    @if (paging()) {
+      <button
+        aria-hidden="true"
+        data-part="scroll"
+        data-direction="start"
+        type="button"
+        tabindex="-1"
+        [disabled]="overflow().atStart"
+        (click)="page(-1)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+      <button
+        aria-hidden="true"
+        data-part="scroll"
+        data-direction="end"
+        type="button"
+        tabindex="-1"
+        [disabled]="overflow().atEnd"
+        (click)="page(1)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=tabs]{--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, .875rem);--_padding-inline: var(--slotted-control-padding-inline-md, .75rem);--_inner-gap: var(--slotted-control-gap-md, .375rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_list-gap: var(--slotted-space-1, .125rem);--_track-size: var(--slotted-border-width-thin, 1px);--_dismiss-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_dismiss-overhang: calc((var(--_dismiss-size) - var(--_icon-size)) / 2);--_marker-size: var(--slotted-border-width-thick, 2px);--_fade: var(--slotted-tabs-fade-size, var(--slotted-space-6, 1rem));--_marker-origin: 50%;--_marker-origin-selected: 50%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto;min-inline-size:0;row-gap:var(--slotted-tabs-gap, var(--slotted-space-6, 1rem))}[data-ui=tabs][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_padding-inline: var(--slotted-control-padding-inline-sm, .625rem);--_inner-gap: var(--slotted-control-gap-sm, .25rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=tabs][data-size=lg]{--_height: var(--slotted-control-height-lg, 40px);--_font-size: var(--slotted-control-font-size-lg, 1rem);--_padding-inline: var(--slotted-control-padding-inline-lg, 1rem);--_inner-gap: var(--slotted-control-gap-lg, .5rem);--_icon-size: var(--slotted-control-icon-size-lg, 20px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=tabs][data-orientation=vertical]{column-gap:var(--slotted-tabs-gap, var(--slotted-space-6, 1rem));grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto}[data-ui=tabs]>[data-part=list]{align-items:stretch;display:flex;gap:var(--slotted-tabs-list-gap, var(--_list-gap));grid-column:2;grid-row:1;min-inline-size:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui=tabs][data-overflowing]>[data-part=list]{scrollbar-width:none}[data-ui=tabs][data-variant=line][data-track=line]>[data-part=list]{border-block-end:var(--_track-size) solid var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=tabs][data-track=none]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs][data-track=none]>:where([data-part=list])>[data-part=item]:after{inset-block-end:0}[data-ui=tabs][data-track=none][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs][data-track=none][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{inset-block-end:auto;inset-inline-end:0}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]{justify-content:start;text-align:start}[data-ui=tabs][data-orientation=vertical]>[data-part=list]{flex-direction:column;grid-column:1;grid-row:1;overflow-x:hidden;overflow-y:auto}[data-ui=tabs][data-orientation=vertical][data-variant=line][data-track=line]>[data-part=list]{border-block-end:0;border-inline-end:var(--_track-size) solid var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=tabs][data-fit=equal]>[data-part=list]{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;justify-self:stretch;overflow:visible}[data-ui=tabs][data-fit=equal]>:where([data-part=list])>[data-part=item]{min-inline-size:0}[data-ui=tabs][data-fit=equal]>:where([data-part=list])>:where([data-part=item])>:where([data-part=tab])>[data-part=label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=tabs]>:where([data-part=list])>[data-part=item]{align-items:stretch;display:grid;grid-auto-flow:column;flex:none;position:relative}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]{align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-tabs-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_inner-gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);min-block-size:var(--_height);min-inline-size:0;padding-block:0;padding-inline:var(--_padding-inline);text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:has(>[data-part=dismiss])>[data-part=tab]{padding-inline-end:0}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>:where([data-part=tab])>[data-part=label]{min-inline-size:0;unicode-bidi:plaintext}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>:where([data-part=tab])>:is([data-part=start],[data-part=end]){--slotted-icon-size: var(--_icon-size);align-items:center;display:inline-flex;flex:none}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:not(:disabled):not([aria-selected=true]):hover{color:var(--slotted-tabs-hover-color, var(--slotted-text, CanvasText))}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:not(:disabled):not([aria-selected=true]):hover{background-color:var( --slotted-tabs-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:not(:disabled):active{background-color:var( --slotted-tabs-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-offset, 2px) + var(--_marker-size)))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tabs]>:where([data-part=list])>[data-part=item][data-selected]>[data-part=tab]{color:var(--slotted-tabs-selected-color, var(--slotted-tone-accent-text))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs]>:where([data-part=list])>[data-part=item]:after{border-start-end-radius:var(--slotted-radius-xs, 2px);border-start-start-radius:var(--slotted-radius-xs, 2px);block-size:var(--_marker-size);content:\"\";inset-block-end:calc(-1 * var(--_track-size));inset-inline:0;opacity:0;pointer-events:none;position:absolute}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:before{background-color:var(--slotted-tabs-hover-marker-color, var(--slotted-border-strong));transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:after{background-color:var(--slotted-tabs-marker-color, var(--slotted-tone-accent-solid));transform:scaleX(0);transform-origin:var(--_marker-origin) 50%;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs][data-variant=line]>:where([data-part=list])>[data-part=item]:not([data-selected]):has(>[data-part=tab]:not(:disabled):hover):before{opacity:1}[data-ui=tabs][data-variant=line]>:where([data-part=list])>[data-part=item]:not([data-selected]):has(>[data-part=tab]:not(:disabled):active):before{background-color:var(--slotted-tabs-active-marker-color, var(--slotted-text))}[data-ui=tabs]>:where([data-part=list])>[data-part=item][data-selected]:after{opacity:1;transform:scale(1);transform-origin:var(--_marker-origin-selected) 50%}[data-ui=tabs][data-activation-direction=forward]{--_marker-origin: 100%;--_marker-origin-selected: 0%}[data-ui=tabs][data-activation-direction=backward]{--_marker-origin: 0%;--_marker-origin-selected: 100%}[data-ui=tabs][data-activation-direction=forward]:dir(rtl){--_marker-origin: 0%;--_marker-origin-selected: 100%}[data-ui=tabs][data-activation-direction=backward]:dir(rtl){--_marker-origin: 100%;--_marker-origin-selected: 0%}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{block-size:auto;border-start-end-radius:var(--slotted-radius-xs, 2px);border-start-start-radius:0;border-end-end-radius:var(--slotted-radius-xs, 2px);inline-size:var(--_marker-size);inset-block:0;inset-inline:auto calc(-1 * var(--_track-size))}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{transform:scaleY(0);transform-origin:50% var(--_marker-origin)}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item][data-selected]:after{transform:scale(1);transform-origin:50% var(--_marker-origin-selected)}[data-ui=tabs][data-variant=contained]>[data-part=list]{background-color:var(--slotted-tabs-contained-background, var(--slotted-surface-sunken));border-radius:var(--slotted-radius-md, 6px);justify-self:start;max-inline-size:100%;padding:var(--slotted-space-1, .125rem)}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item]{border-radius:var(--slotted-radius-sm, 4px);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item][data-selected]{background-color:var(--slotted-tabs-contained-selected-background, var(--slotted-surface));box-shadow:var(--slotted-shadow-xs)}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item]:after{inset-block-end:var(--slotted-space-1, .125rem);inset-inline:var(--slotted-radius-sm, 4px)}[data-ui=tabs][data-variant=contained][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{inset-block:var(--slotted-radius-sm, 4px);inset-inline:auto var(--slotted-space-1, .125rem)}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]{--slotted-icon-size: var(--_icon-size);align-items:center;align-self:center;appearance:none;background-color:transparent;block-size:var(--_dismiss-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-tabs-dismiss-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;inline-size:var(--_dismiss-size);justify-content:center;margin-inline-end:calc(var(--_padding-inline) - var(--_dismiss-overhang));margin-inline-start:max(0px,calc(var(--_inner-gap) - var(--_dismiss-overhang)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@media(pointer:coarse){[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]{position:relative}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:not(:disabled):hover{background-color:var( --slotted-tabs-dismiss-hover-background, var(--slotted-tone-danger-surface) );color:var(--slotted-tabs-dismiss-hover-color, var(--slotted-tone-danger-text))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:not(:disabled):active{background-color:var( --slotted-tabs-dismiss-active-background, var(--slotted-tone-danger-border) );color:var(--slotted-tabs-dismiss-active-color, var(--slotted-text-inverse))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=tabs]>[data-part=scroll]{--slotted-icon-size: var(--_icon-size);align-items:center;align-self:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-tabs-scroll-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;min-block-size:var(--_height);padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs]:has(>[data-part=scroll][data-direction=start]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--_fade));mask-image:linear-gradient(to right,transparent,black var(--_fade))}[data-ui=tabs]:has(>[data-part=scroll][data-direction=end]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to left,transparent,black var(--_fade));mask-image:linear-gradient(to left,transparent,black var(--_fade))}[data-ui=tabs]:dir(rtl):has(>[data-part=scroll][data-direction=start]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to left,transparent,black var(--_fade));mask-image:linear-gradient(to left,transparent,black var(--_fade))}[data-ui=tabs]:dir(rtl):has(>[data-part=scroll][data-direction=end]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--_fade));mask-image:linear-gradient(to right,transparent,black var(--_fade))}[data-ui=tabs]:has(>[data-part=scroll][data-direction=start]:not(:disabled)):has(>[data-part=scroll][data-direction=end]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--_fade),black calc(100% - var(--_fade)),transparent);mask-image:linear-gradient(to right,transparent,black var(--_fade),black calc(100% - var(--_fade)),transparent)}@media(pointer:coarse){[data-ui=tabs]>[data-part=scroll]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui=tabs]>[data-part=scroll][data-direction=start]{grid-column:1;grid-row:1;margin-inline-end:var(--slotted-tabs-actions-gap, var(--slotted-space-4, .5rem))}[data-ui=tabs]>[data-part=scroll][data-direction=end]{grid-column:3;margin-inline-start:var(--slotted-tabs-actions-gap, var(--slotted-space-4, .5rem));grid-row:1}[data-ui=tabs]>[data-part=scroll][data-direction=start]>[data-ui=icon]{rotate:.5turn}[data-ui=tabs]>[data-part=scroll]:not(:disabled):hover{background-color:var( --slotted-tabs-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tabs]>[data-part=scroll]:not(:disabled):active{background-color:var( --slotted-tabs-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=tabs]>[data-part=scroll]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tabs]>[data-part=scroll]:disabled{cursor:default;visibility:hidden}[data-ui=tabs][data-orientation=vertical]>[data-part=scroll]{display:none}[data-ui=tabs]>[data-part=actions]{align-items:center;align-self:center;display:flex;grid-column:4;margin-inline-start:var(--slotted-tabs-actions-gap, var(--slotted-space-4, .5rem));grid-row:1;min-inline-size:0}[data-ui=tabs][data-orientation=vertical]>[data-part=actions]{grid-column:1;grid-row:2}[data-ui=tabs]>[data-part=panel]{grid-column:1 / -1;grid-row:2;min-inline-size:0;overflow-wrap:anywhere}[data-ui=tabs][data-orientation=vertical]>[data-part=panel]{grid-column:2;grid-row:1 / -1}[data-ui=tabs]>[data-part=panel][hidden]{display:none}[data-ui=tabs]>[data-part=panel]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tabs]>[data-part=panel]:not([hidden]){animation:slotted-tabs-panel-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-tabs-panel-in{0%{opacity:0}}[data-ui=tabs][data-disabled][data-variant=line][data-track=line]>[data-part=list]{border-color:var(--slotted-disabled-border, GrayText)}[data-ui=tabs][data-disabled][data-variant=contained]>[data-part=list]{background-color:var(--slotted-disabled-background, Canvas)}[data-ui=tabs][data-disabled]>:where([data-part=list])>[data-part=item][data-selected]:after{background-color:var(--slotted-disabled-border)}@media(forced-colors:active){[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item][data-selected]{border:var(--slotted-border-width-thin, 1px) solid Highlight}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabs, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTabs]', standalone: true, imports: [SlGlyph, SlIcon], exportAs: 'slTabs', template: `<ng-content />
+    @if (paging()) {
+      <button
+        aria-hidden="true"
+        data-part="scroll"
+        data-direction="start"
+        type="button"
+        tabindex="-1"
+        [disabled]="overflow().atStart"
+        (click)="page(-1)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+      <button
+        aria-hidden="true"
+        data-part="scroll"
+        data-direction="end"
+        type="button"
+        tabindex="-1"
+        [disabled]="overflow().atEnd"
+        (click)="page(1)"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+      </button>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'tabs',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-track]': 'resolvedTrack()',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-fit]': 'resolvedFit()',
+                        '[attr.data-activation-direction]': 'direction()',
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.data-overflowing]': "overflow().overflowing ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=tabs]{--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, .875rem);--_padding-inline: var(--slotted-control-padding-inline-md, .75rem);--_inner-gap: var(--slotted-control-gap-md, .375rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_list-gap: var(--slotted-space-1, .125rem);--_track-size: var(--slotted-border-width-thin, 1px);--_dismiss-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_dismiss-overhang: calc((var(--_dismiss-size) - var(--_icon-size)) / 2);--_marker-size: var(--slotted-border-width-thick, 2px);--_fade: var(--slotted-tabs-fade-size, var(--slotted-space-6, 1rem));--_marker-origin: 50%;--_marker-origin-selected: 50%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto;min-inline-size:0;row-gap:var(--slotted-tabs-gap, var(--slotted-space-6, 1rem))}[data-ui=tabs][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_padding-inline: var(--slotted-control-padding-inline-sm, .625rem);--_inner-gap: var(--slotted-control-gap-sm, .25rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=tabs][data-size=lg]{--_height: var(--slotted-control-height-lg, 40px);--_font-size: var(--slotted-control-font-size-lg, 1rem);--_padding-inline: var(--slotted-control-padding-inline-lg, 1rem);--_inner-gap: var(--slotted-control-gap-lg, .5rem);--_icon-size: var(--slotted-control-icon-size-lg, 20px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=tabs][data-orientation=vertical]{column-gap:var(--slotted-tabs-gap, var(--slotted-space-6, 1rem));grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto}[data-ui=tabs]>[data-part=list]{align-items:stretch;display:flex;gap:var(--slotted-tabs-list-gap, var(--_list-gap));grid-column:2;grid-row:1;min-inline-size:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui=tabs][data-overflowing]>[data-part=list]{scrollbar-width:none}[data-ui=tabs][data-variant=line][data-track=line]>[data-part=list]{border-block-end:var(--_track-size) solid var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=tabs][data-track=none]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs][data-track=none]>:where([data-part=list])>[data-part=item]:after{inset-block-end:0}[data-ui=tabs][data-track=none][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs][data-track=none][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{inset-block-end:auto;inset-inline-end:0}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]{justify-content:start;text-align:start}[data-ui=tabs][data-orientation=vertical]>[data-part=list]{flex-direction:column;grid-column:1;grid-row:1;overflow-x:hidden;overflow-y:auto}[data-ui=tabs][data-orientation=vertical][data-variant=line][data-track=line]>[data-part=list]{border-block-end:0;border-inline-end:var(--_track-size) solid var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=tabs][data-fit=equal]>[data-part=list]{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;justify-self:stretch;overflow:visible}[data-ui=tabs][data-fit=equal]>:where([data-part=list])>[data-part=item]{min-inline-size:0}[data-ui=tabs][data-fit=equal]>:where([data-part=list])>:where([data-part=item])>:where([data-part=tab])>[data-part=label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=tabs]>:where([data-part=list])>[data-part=item]{align-items:stretch;display:grid;grid-auto-flow:column;flex:none;position:relative}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]{align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-tabs-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_inner-gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);min-block-size:var(--_height);min-inline-size:0;padding-block:0;padding-inline:var(--_padding-inline);text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:has(>[data-part=dismiss])>[data-part=tab]{padding-inline-end:0}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>:where([data-part=tab])>[data-part=label]{min-inline-size:0;unicode-bidi:plaintext}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>:where([data-part=tab])>:is([data-part=start],[data-part=end]){--slotted-icon-size: var(--_icon-size);align-items:center;display:inline-flex;flex:none}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:not(:disabled):not([aria-selected=true]):hover{color:var(--slotted-tabs-hover-color, var(--slotted-text, CanvasText))}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:not(:disabled):not([aria-selected=true]):hover{background-color:var( --slotted-tabs-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:not(:disabled):active{background-color:var( --slotted-tabs-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-offset, 2px) + var(--_marker-size)))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tabs]>:where([data-part=list])>[data-part=item][data-selected]>[data-part=tab]{color:var(--slotted-tabs-selected-color, var(--slotted-tone-accent-text))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=tab]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs]>:where([data-part=list])>[data-part=item]:after{border-start-end-radius:var(--slotted-radius-xs, 2px);border-start-start-radius:var(--slotted-radius-xs, 2px);block-size:var(--_marker-size);content:\"\";inset-block-end:calc(-1 * var(--_track-size));inset-inline:0;opacity:0;pointer-events:none;position:absolute}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:before{background-color:var(--slotted-tabs-hover-marker-color, var(--slotted-border-strong));transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs]>:where([data-part=list])>[data-part=item]:after{background-color:var(--slotted-tabs-marker-color, var(--slotted-tone-accent-solid));transform:scaleX(0);transform-origin:var(--_marker-origin) 50%;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs][data-variant=line]>:where([data-part=list])>[data-part=item]:not([data-selected]):has(>[data-part=tab]:not(:disabled):hover):before{opacity:1}[data-ui=tabs][data-variant=line]>:where([data-part=list])>[data-part=item]:not([data-selected]):has(>[data-part=tab]:not(:disabled):active):before{background-color:var(--slotted-tabs-active-marker-color, var(--slotted-text))}[data-ui=tabs]>:where([data-part=list])>[data-part=item][data-selected]:after{opacity:1;transform:scale(1);transform-origin:var(--_marker-origin-selected) 50%}[data-ui=tabs][data-activation-direction=forward]{--_marker-origin: 100%;--_marker-origin-selected: 0%}[data-ui=tabs][data-activation-direction=backward]{--_marker-origin: 0%;--_marker-origin-selected: 100%}[data-ui=tabs][data-activation-direction=forward]:dir(rtl){--_marker-origin: 0%;--_marker-origin-selected: 100%}[data-ui=tabs][data-activation-direction=backward]:dir(rtl){--_marker-origin: 100%;--_marker-origin-selected: 0%}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:before,[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{block-size:auto;border-start-end-radius:var(--slotted-radius-xs, 2px);border-start-start-radius:0;border-end-end-radius:var(--slotted-radius-xs, 2px);inline-size:var(--_marker-size);inset-block:0;inset-inline:auto calc(-1 * var(--_track-size))}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{transform:scaleY(0);transform-origin:50% var(--_marker-origin)}[data-ui=tabs][data-orientation=vertical]>:where([data-part=list])>[data-part=item][data-selected]:after{transform:scale(1);transform-origin:50% var(--_marker-origin-selected)}[data-ui=tabs][data-variant=contained]>[data-part=list]{background-color:var(--slotted-tabs-contained-background, var(--slotted-surface-sunken));border-radius:var(--slotted-radius-md, 6px);justify-self:start;max-inline-size:100%;padding:var(--slotted-space-1, .125rem)}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item]{border-radius:var(--slotted-radius-sm, 4px);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item][data-selected]{background-color:var(--slotted-tabs-contained-selected-background, var(--slotted-surface));box-shadow:var(--slotted-shadow-xs)}[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item]:after{inset-block-end:var(--slotted-space-1, .125rem);inset-inline:var(--slotted-radius-sm, 4px)}[data-ui=tabs][data-variant=contained][data-orientation=vertical]>:where([data-part=list])>[data-part=item]:after{inset-block:var(--slotted-radius-sm, 4px);inset-inline:auto var(--slotted-space-1, .125rem)}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]{--slotted-icon-size: var(--_icon-size);align-items:center;align-self:center;appearance:none;background-color:transparent;block-size:var(--_dismiss-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-tabs-dismiss-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;inline-size:var(--_dismiss-size);justify-content:center;margin-inline-end:calc(var(--_padding-inline) - var(--_dismiss-overhang));margin-inline-start:max(0px,calc(var(--_inner-gap) - var(--_dismiss-overhang)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@media(pointer:coarse){[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]{position:relative}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:not(:disabled):hover{background-color:var( --slotted-tabs-dismiss-hover-background, var(--slotted-tone-danger-surface) );color:var(--slotted-tabs-dismiss-hover-color, var(--slotted-tone-danger-text))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:not(:disabled):active{background-color:var( --slotted-tabs-dismiss-active-background, var(--slotted-tone-danger-border) );color:var(--slotted-tabs-dismiss-active-color, var(--slotted-text-inverse))}[data-ui=tabs]>:where([data-part=list])>:where([data-part=item])>[data-part=dismiss]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}[data-ui=tabs]>[data-part=scroll]{--slotted-icon-size: var(--_icon-size);align-items:center;align-self:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-tabs-scroll-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;min-block-size:var(--_height);padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tabs]:has(>[data-part=scroll][data-direction=start]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--_fade));mask-image:linear-gradient(to right,transparent,black var(--_fade))}[data-ui=tabs]:has(>[data-part=scroll][data-direction=end]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to left,transparent,black var(--_fade));mask-image:linear-gradient(to left,transparent,black var(--_fade))}[data-ui=tabs]:dir(rtl):has(>[data-part=scroll][data-direction=start]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to left,transparent,black var(--_fade));mask-image:linear-gradient(to left,transparent,black var(--_fade))}[data-ui=tabs]:dir(rtl):has(>[data-part=scroll][data-direction=end]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--_fade));mask-image:linear-gradient(to right,transparent,black var(--_fade))}[data-ui=tabs]:has(>[data-part=scroll][data-direction=start]:not(:disabled)):has(>[data-part=scroll][data-direction=end]:not(:disabled))>[data-part=list]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--_fade),black calc(100% - var(--_fade)),transparent);mask-image:linear-gradient(to right,transparent,black var(--_fade),black calc(100% - var(--_fade)),transparent)}@media(pointer:coarse){[data-ui=tabs]>[data-part=scroll]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui=tabs]>[data-part=scroll][data-direction=start]{grid-column:1;grid-row:1;margin-inline-end:var(--slotted-tabs-actions-gap, var(--slotted-space-4, .5rem))}[data-ui=tabs]>[data-part=scroll][data-direction=end]{grid-column:3;margin-inline-start:var(--slotted-tabs-actions-gap, var(--slotted-space-4, .5rem));grid-row:1}[data-ui=tabs]>[data-part=scroll][data-direction=start]>[data-ui=icon]{rotate:.5turn}[data-ui=tabs]>[data-part=scroll]:not(:disabled):hover{background-color:var( --slotted-tabs-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tabs]>[data-part=scroll]:not(:disabled):active{background-color:var( --slotted-tabs-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=tabs]>[data-part=scroll]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tabs]>[data-part=scroll]:disabled{cursor:default;visibility:hidden}[data-ui=tabs][data-orientation=vertical]>[data-part=scroll]{display:none}[data-ui=tabs]>[data-part=actions]{align-items:center;align-self:center;display:flex;grid-column:4;margin-inline-start:var(--slotted-tabs-actions-gap, var(--slotted-space-4, .5rem));grid-row:1;min-inline-size:0}[data-ui=tabs][data-orientation=vertical]>[data-part=actions]{grid-column:1;grid-row:2}[data-ui=tabs]>[data-part=panel]{grid-column:1 / -1;grid-row:2;min-inline-size:0;overflow-wrap:anywhere}[data-ui=tabs][data-orientation=vertical]>[data-part=panel]{grid-column:2;grid-row:1 / -1}[data-ui=tabs]>[data-part=panel][hidden]{display:none}[data-ui=tabs]>[data-part=panel]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tabs]>[data-part=panel]:not([hidden]){animation:slotted-tabs-panel-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-tabs-panel-in{0%{opacity:0}}[data-ui=tabs][data-disabled][data-variant=line][data-track=line]>[data-part=list]{border-color:var(--slotted-disabled-border, GrayText)}[data-ui=tabs][data-disabled][data-variant=contained]>[data-part=list]{background-color:var(--slotted-disabled-background, Canvas)}[data-ui=tabs][data-disabled]>:where([data-part=list])>[data-part=item][data-selected]:after{background-color:var(--slotted-disabled-border)}@media(forced-colors:active){[data-ui=tabs][data-variant=contained]>:where([data-part=list])>[data-part=item][data-selected]{border:var(--slotted-border-width-thin, 1px) solid Highlight}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], activation: [{ type: i0.Input, args: [{ isSignal: true, alias: "activation", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tabDismiss: [{ type: i0.Output, args: ["tabDismiss"] }] } });
+
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports the
+ * click count. It is why `Enter`, `Space` and a pointer are told apart without a
+ * key listener existing for activation.
+ */
+function activationReason(event) {
+    return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * The list of tabs, and the one tab stop the family holds.
+ *
+ * It hands its element to the root, which owns the roving tab stop, the removal
+ * focus and the overflow observer. `tabindex="-1"` is the last resort of the
+ * removal focus: a list emptied by its final dismissal keeps focus rather than
+ * returning it to the top of the page.
+ *
+ * Its accessible name is the consumer's own `aria-label` or `aria-labelledby`:
+ * only the page knows what the set of views is for.
+ */
+class SlTabList {
+    tabs = inject(SlTabs);
+    ariaOrientation = computed(() => this.tabs.resolvedOrientation() === 'vertical' ? 'vertical' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.tabs.attachList(inject((ElementRef)).nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTabList, isStandalone: true, selector: "[slTabList]", host: { attributes: { "data-part": "list", "role": "tablist", "tabindex": "-1" }, properties: { "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slTabList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTabList]',
+                    standalone: true,
+                    exportAs: 'slTabList',
+                    host: {
+                        'data-part': 'list',
+                        role: 'tablist',
+                        tabindex: '-1',
+                        '[attr.aria-orientation]': 'ariaOrientation()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * What precedes the label inside a tab, such as an icon. It stands beside the
+ * words rather than inside them, so the tab's gap spaces it and only the words
+ * are clipped under `fit="equal"`; the part sizes an icon to the tab's icon step.
+ */
+class SlTabStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTabStart, isStandalone: true, selector: "[slTabStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slTabStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTabStart]',
+                    standalone: true,
+                    exportAs: 'slTabStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** What follows the label inside a tab, such as a count. */
+class SlTabEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTabEnd, isStandalone: true, selector: "[slTabEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slTabEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTabEnd]',
+                    standalone: true,
+                    exportAs: 'slTabEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+/**
+ * One tab, in the box that holds it.
+ *
+ * The host is that box, and it is presentational for two reasons a `button`
+ * cannot answer: a `button` may not contain a `button`, so a dismissible tab
+ * needs somewhere to put its second control, and the marker has to span the
+ * pair rather than only the label.
+ *
+ * `href` makes the control an anchor, and a click carrying a modifier key is
+ * left to the browser so a deep link still opens in a new browser tab.
+ */
+class SlTab {
+    /** What this tab selects. It is what the family's value holds. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the tab defers to the family. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** Whether this tab carries a control that closes it. */
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The accessible name of that control. Required whenever it is drawn. */
+    dismissLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    /** Makes the control an anchor, for a view a router can deep-link to. */
+    href = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    /**
+     * The id of the element this tab controls, when it is not a panel of this
+     * family: a strip over one region whose content the value filters — a
+     * feed, a table — names that region here, and `aria-controls` says so.
+     */
+    controls = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /** The family this tab belongs to. Public, because a template may read it. */
+    tabs = inject(SlTabs);
+    selected = computed(() => this.tabs.holds(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /**
+     * A family out of action takes every tab with it. The tab's own input can
+     * only add to that, never subtract: a consumer that writes `[disabled]="false"`
+     * on a tab inside a disabled family is saying nothing about that family, and a
+     * template that binds an expression writes `false` where it means "not this
+     * one" — which is how every tab stayed operable while the family reported
+     * itself disabled.
+     */
+    resolvedDisabled = computed(() => this.tabs.disabled() || (this.disabled() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    tabId = computed(() => this.tabs.identify(this.value()).tabId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+    panelId = computed(() => this.controls() ?? this.tabs.identify(this.value()).panelId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented || this.resolvedDisabled())
+            return;
+        /* A modifier click on a link is the reader asking the browser for a new
+           window, and swallowing it is what turns a real destination into a
+           decoration. */
+        if (this.href() !== undefined &&
+            (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+            return;
+        }
+        if (this.href() !== undefined)
+            event.preventDefault();
+        this.tabs.select(this.value(), activationReason(event), event);
+    }
+    /**
+     * `Delete` closes the tab, which is the key the APG names for it. A held key
+     * repeats, and a repeat would close the tab focus has just landed on.
+     */
+    onKeydown(event) {
+        if (event.defaultPrevented || event.repeat)
+            return;
+        if (!this.dismissible() || this.resolvedDisabled())
+            return;
+        if (event.key !== 'Delete')
+            return;
+        event.preventDefault();
+        this.tabs.dismiss(this.value(), 'keyboard', event);
+    }
+    onDismiss(event) {
+        /* The control sits inside the item, whose click would otherwise select the
+           tab that is being closed. */
+        event.stopPropagation();
+        this.tabs.dismiss(this.value(), 'pointer', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTab, isStandalone: true, selector: "[slTab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item", "role": "presentation" }, properties: { "attr.data-selected": "selected() ? '' : null" } }, exportAs: ["slTab"], ngImport: i0, template: `<ng-template #content
+      ><ng-content select="[slTabStart]" /><span data-part="label"><ng-content /></span
+      ><ng-content select="[slTabEnd]"
+    /></ng-template>
+    @if (href(); as destination) {
+      <a
+        #control
+        data-part="tab"
+        role="tab"
+        [attr.id]="tabId()"
+        [attr.href]="destination"
+        [attr.data-value]="value()"
+        [attr.aria-controls]="panelId()"
+        [attr.aria-selected]="selected()"
+        [attr.aria-disabled]="resolvedDisabled() ? 'true' : null"
+        [attr.aria-keyshortcuts]="dismissible() ? 'Delete' : null"
+        [attr.tabindex]="selected() ? 0 : -1"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        ><ng-container [ngTemplateOutlet]="content"
+      /></a>
+    } @else {
+      <button
+        #control
+        data-part="tab"
+        role="tab"
+        type="button"
+        [attr.id]="tabId()"
+        [attr.data-value]="value()"
+        [attr.aria-controls]="panelId()"
+        [attr.aria-selected]="selected()"
+        [attr.aria-keyshortcuts]="dismissible() ? 'Delete' : null"
+        [disabled]="resolvedDisabled()"
+        [attr.tabindex]="selected() ? 0 : -1"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </button>
+    }
+    @if (dismissible()) {
+      <button
+        data-part="dismiss"
+        type="button"
+        tabindex="-1"
+        [attr.aria-label]="dismissLabel()"
+        [disabled]="resolvedDisabled()"
+        (click)="onDismiss($event)"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTab]',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, SlGlyph, SlIcon],
+                    exportAs: 'slTab',
+                    /* The words and what stands beside them are written once and placed in
+                       whichever control the tab renders: a selecting `ng-content` repeated in
+                       both branches left the button branch without its icon and its count. */
+                    template: `<ng-template #content
+      ><ng-content select="[slTabStart]" /><span data-part="label"><ng-content /></span
+      ><ng-content select="[slTabEnd]"
+    /></ng-template>
+    @if (href(); as destination) {
+      <a
+        #control
+        data-part="tab"
+        role="tab"
+        [attr.id]="tabId()"
+        [attr.href]="destination"
+        [attr.data-value]="value()"
+        [attr.aria-controls]="panelId()"
+        [attr.aria-selected]="selected()"
+        [attr.aria-disabled]="resolvedDisabled() ? 'true' : null"
+        [attr.aria-keyshortcuts]="dismissible() ? 'Delete' : null"
+        [attr.tabindex]="selected() ? 0 : -1"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+        ><ng-container [ngTemplateOutlet]="content"
+      /></a>
+    } @else {
+      <button
+        #control
+        data-part="tab"
+        role="tab"
+        type="button"
+        [attr.id]="tabId()"
+        [attr.data-value]="value()"
+        [attr.aria-controls]="panelId()"
+        [attr.aria-selected]="selected()"
+        [attr.aria-keyshortcuts]="dismissible() ? 'Delete' : null"
+        [disabled]="resolvedDisabled()"
+        [attr.tabindex]="selected() ? 0 : -1"
+        (click)="onClick($event)"
+        (keydown)="onKeydown($event)"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </button>
+    }
+    @if (dismissible()) {
+      <button
+        data-part="dismiss"
+        type="button"
+        tabindex="-1"
+        [attr.aria-label]="dismissLabel()"
+        [disabled]="resolvedDisabled()"
+        (click)="onDismiss($event)"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'item',
+                        role: 'presentation',
+                        '[attr.data-selected]': "selected() ? '' : null",
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }] } });
+/**
+ * The content of a panel, as a template the panel instantiates.
+ *
+ * Projected markup is built by the consumer's own view whether a panel shows it
+ * or not: a component inside a closed panel is constructed, change-detected and
+ * keeps its state, and only its DOM is detached. A template is what `mount` can
+ * act on. Under `active` it is instantiated on selection and destroyed after,
+ * under `lazy` it is instantiated on first selection and kept, under `eager` it
+ * is instantiated up front. It is the shape of Angular Material's `matTabContent`.
+ *
+ * It must be a direct child of the panel, so a panel never takes the template of
+ * a family nested inside it.
+ */
+class SlTabPanelContent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabPanelContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTabPanelContent, isStandalone: true, selector: "ng-template[slTabPanelContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabPanelContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[slTabPanelContent]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * The content of one tab.
+ *
+ * It is in the page's tab sequence, which is where `Tab` from the list goes, and
+ * it is hidden with the attribute rather than with a class: a screen reader,
+ * find-in-page and `:target` all already understand `hidden`.
+ *
+ * The panel itself always exists, so every tab's `aria-controls` names an
+ * element. Whether its content is in the DOM is what `mount` decides. Content
+ * written inside `<ng-template slTabPanelContent>` is also only built when
+ * `mount` says so; projected markup is built by the consumer's view regardless.
+ */
+class SlTabPanel {
+    /** The tab this panel belongs to. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    tabs = inject(SlTabs);
+    /** The deferred content, when the consumer wrote one. */
+    content = contentChild(SlTabPanelContent, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), descendants: false });
+    selected = computed(() => this.tabs.holds(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    panelId = computed(() => this.tabs.identify(this.value()).panelId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    tabId = computed(() => this.tabs.identify(this.value()).tabId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+    present = computed(() => {
+        const mount = this.tabs.resolvedMount();
+        if (mount === 'eager')
+            return true;
+        if (this.selected())
+            return true;
+        return mount === 'lazy' && this.tabs.hasSeen(this.value());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTabPanel, isStandalone: true, selector: "[slTabPanel]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-part": "panel", "role": "tabpanel", "tabindex": "0" }, properties: { "attr.id": "panelId()", "attr.aria-labelledby": "tabId()", "attr.hidden": "selected() ? null : ''" } }, queries: [{ propertyName: "content", first: true, predicate: SlTabPanelContent, isSignal: true }], exportAs: ["slTabPanel"], ngImport: i0, template: `@if (present()) {
+    @if (content(); as deferred) {
+      <ng-container [ngTemplateOutlet]="deferred.template" />
+    } @else {
+      <ng-content />
+    }
+  }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTabPanel]',
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    exportAs: 'slTabPanel',
+                    template: `@if (present()) {
+    @if (content(); as deferred) {
+      <ng-container [ngTemplateOutlet]="deferred.template" />
+    } @else {
+      <ng-content />
+    }
+  }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'panel',
+                        role: 'tabpanel',
+                        tabindex: '0',
+                        '[attr.id]': 'panelId()',
+                        '[attr.aria-labelledby]': 'tabId()',
+                        '[attr.hidden]': "selected() ? null : ''",
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTabPanelContent), { ...{ descendants: false }, isSignal: true }] }] } });
+/**
+ * The slot beside the list, on the same row.
+ *
+ * What belongs in it is a `toolbar`: one tab stop for however many actions the
+ * page puts there, which is what keeps the distance between the tab list and the
+ * panel to the two stops the pattern asks for.
+ */
+class SlTabActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTabActions, isStandalone: true, selector: "[slTabActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slTabActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTabActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTabActions]',
+                    standalone: true,
+                    exportAs: 'slTabActions',
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTab, SlTabActions, SlTabEnd, SlTabList, SlTabPanel, SlTabPanelContent, SlTabStart, SlTabs, SlTabsIdFactory, TABS_DEFAULTS, TAB_SELECTOR, escapeTabValue, injectTabsDefaults, provideTabsDefaults };
+//# sourceMappingURL=slotted-angular-tabs.mjs.map