@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-tabs.mjs

@@ -0,0 +1,894 @@
+import { NgTemplateOutlet, isPlatformBrowser, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, computed, signal, Injectable, inject, ElementRef, DestroyRef, input, contentChild, TemplateRef, HostListener, HostBinding, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, viewChild, effect, output } from '@angular/core';
+
+const FK_TAB_CLOSE_ICON = new InjectionToken('FK_TAB_CLOSE_ICON');
+const FK_TAB_SCROLL_START_ICON = new InjectionToken('FK_TAB_SCROLL_START_ICON');
+const FK_TAB_SCROLL_END_ICON = new InjectionToken('FK_TAB_SCROLL_END_ICON');
+class FkTabCloseIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabCloseIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkTabCloseIconDirective, isStandalone: true, selector: "[fkTabCloseIcon]", host: { attributes: { "aria-hidden": "true" } }, providers: [
+            { provide: FK_TAB_CLOSE_ICON, useExisting: FkTabCloseIconDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabCloseIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkTabCloseIcon]',
+                    standalone: true,
+                    providers: [
+                        { provide: FK_TAB_CLOSE_ICON, useExisting: FkTabCloseIconDirective },
+                    ],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+class FkTabScrollStartIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabScrollStartIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkTabScrollStartIconDirective, isStandalone: true, selector: "[fkTabScrollStartIcon]", host: { attributes: { "aria-hidden": "true" } }, providers: [
+            {
+                provide: FK_TAB_SCROLL_START_ICON,
+                useExisting: FkTabScrollStartIconDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabScrollStartIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkTabScrollStartIcon]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FK_TAB_SCROLL_START_ICON,
+                            useExisting: FkTabScrollStartIconDirective,
+                        },
+                    ],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+class FkTabScrollEndIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabScrollEndIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkTabScrollEndIconDirective, isStandalone: true, selector: "[fkTabScrollEndIcon]", host: { attributes: { "aria-hidden": "true" } }, providers: [
+            {
+                provide: FK_TAB_SCROLL_END_ICON,
+                useExisting: FkTabScrollEndIconDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabScrollEndIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkTabScrollEndIcon]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FK_TAB_SCROLL_END_ICON,
+                            useExisting: FkTabScrollEndIconDirective,
+                        },
+                    ],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class TabsService {
+    // ===== ID GENERATION =====
+    tabIdCounter = 0;
+    createTabIds(value) {
+        const key = value || String(this.tabIdCounter++);
+        return {
+            tabId: `fk-tab-${key}`,
+            panelId: `fk-tabpanel-${key}`,
+        };
+    }
+    // ===== CONFIGURATION (linked to parent component's input signals) =====
+    // These are callbacks to the parent component's input signals,
+    // set during the parent component's constructor.
+    // This avoids effects and eliminates ExpressionChangedAfterItHasBeenCheckedError.
+    _orientationFn = () => 'horizontal';
+    _activationModeFn = () => 'automatic';
+    _variantFn = () => 'underline';
+    _lazyFn = () => false;
+    _keepMountedFn = () => true;
+    _scrollableFn = () => false;
+    _showScrollButtonsFn = () => false;
+    orientation = computed(() => this._orientationFn(), ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    activationMode = computed(() => this._activationModeFn(), ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+    variant = computed(() => this._variantFn(), ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    lazy = computed(() => this._lazyFn(), ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    keepMounted = computed(() => this._keepMountedFn(), ...(ngDevMode ? [{ debugName: "keepMounted" }] : /* istanbul ignore next */ []));
+    scrollable = computed(() => this._scrollableFn(), ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    showScrollButtons = computed(() => this._showScrollButtonsFn(), ...(ngDevMode ? [{ debugName: "showScrollButtons" }] : /* istanbul ignore next */ []));
+    setConfig(config) {
+        this._orientationFn = config.orientation;
+        this._activationModeFn = config.activationMode;
+        this._variantFn = config.variant;
+        this._lazyFn = config.lazy;
+        this._keepMountedFn = config.keepMounted;
+        this._scrollableFn = config.scrollable;
+        this._showScrollButtonsFn = config.showScrollButtons;
+    }
+    // ===== CONTROLLED VALUE (linked to parent's value input) =====
+    _controlledValueFn = null;
+    setControlledValue(fn) {
+        this._controlledValueFn = fn;
+    }
+    // Active value resolves controlled value first, then internal state
+    _internalActiveValue = signal(null, ...(ngDevMode ? [{ debugName: "_internalActiveValue" }] : /* istanbul ignore next */ []));
+    activeValue = computed(() => {
+        const controlled = this._controlledValueFn?.();
+        if (controlled !== undefined) {
+            return controlled;
+        }
+        return this._internalActiveValue();
+    }, ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
+    // Writable proxy for setting active value
+    setActiveValue(value) {
+        this._internalActiveValue.set(value);
+    }
+    focusedValue = signal(null, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
+    tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    panels = signal([], ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    activatedPanels = signal(new Set(), ...(ngDevMode ? [{ debugName: "activatedPanels" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    enabledTabs = computed(() => this.tabs().filter((t) => !t.disabled), ...(ngDevMode ? [{ debugName: "enabledTabs" }] : /* istanbul ignore next */ []));
+    activeTab = computed(() => this.tabs().find((t) => t.value === this.activeValue()), ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    // ===== CALLBACKS (set by fk-tabs root) =====
+    onTabChange = null;
+    onValueChange = null;
+    onTabClose = null;
+    // ===== REGISTRATION =====
+    registerTab(reg) {
+        this.tabs.update((list) => {
+            const existing = list.findIndex((t) => t.value === reg.value);
+            if (existing >= 0) {
+                const updated = [...list];
+                updated[existing] = reg;
+                return updated;
+            }
+            return [...list, reg];
+        });
+    }
+    unregisterTab(value) {
+        const wasActive = this.activeValue() === value;
+        this.tabs.update((list) => list.filter((t) => t.value !== value));
+        if (wasActive) {
+            this.fallbackSelect();
+        }
+    }
+    registerPanel(reg) {
+        this.panels.update((list) => {
+            const existing = list.findIndex((p) => p.value === reg.value);
+            if (existing >= 0) {
+                const updated = [...list];
+                updated[existing] = reg;
+                return updated;
+            }
+            return [...list, reg];
+        });
+    }
+    unregisterPanel(value) {
+        this.panels.update((list) => list.filter((p) => p.value !== value));
+    }
+    // ===== SELECTION =====
+    selectTab(value) {
+        const tab = this.tabs().find((t) => t.value === value);
+        if (tab && tab.disabled) {
+            return;
+        }
+        const previousValue = this.activeValue();
+        if (previousValue === value) {
+            return;
+        }
+        this._internalActiveValue.set(value);
+        this.activatedPanels.update((set) => {
+            const next = new Set(set);
+            next.add(value);
+            return next;
+        });
+        this.onValueChange?.(value);
+        this.onTabChange?.({ previousValue, value });
+    }
+    // ===== FOCUS =====
+    focusTab(value) {
+        this.focusedValue.set(value);
+        const tab = this.tabs().find((t) => t.value === value);
+        if (tab) {
+            tab.element.focus();
+        }
+        if (this.activationMode() === 'automatic') {
+            this.selectTab(value);
+        }
+    }
+    // ===== KEYBOARD NAVIGATION =====
+    handleKeydown(event) {
+        const orientation = this.orientation();
+        const enabled = this.enabledTabs();
+        if (enabled.length === 0) {
+            return;
+        }
+        const currentValue = this.focusedValue() ?? this.activeValue();
+        const currentIndex = enabled.findIndex((t) => t.value === currentValue);
+        let targetIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                if (orientation === 'horizontal') {
+                    targetIndex = this.getNextIndex(currentIndex, 1, enabled.length);
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowLeft':
+                if (orientation === 'horizontal') {
+                    targetIndex = this.getNextIndex(currentIndex, -1, enabled.length);
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowDown':
+                if (orientation === 'vertical') {
+                    targetIndex = this.getNextIndex(currentIndex, 1, enabled.length);
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowUp':
+                if (orientation === 'vertical') {
+                    targetIndex = this.getNextIndex(currentIndex, -1, enabled.length);
+                    event.preventDefault();
+                }
+                break;
+            case 'Home':
+                targetIndex = 0;
+                event.preventDefault();
+                break;
+            case 'End':
+                targetIndex = enabled.length - 1;
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+                if (this.activationMode() === 'manual' && currentValue) {
+                    this.selectTab(currentValue);
+                    event.preventDefault();
+                }
+                break;
+        }
+        if (targetIndex !== null && enabled[targetIndex]) {
+            this.focusTab(enabled[targetIndex].value);
+        }
+    }
+    // ===== FALLBACK =====
+    fallbackSelect() {
+        const enabled = this.enabledTabs();
+        if (enabled.length > 0) {
+            this.selectTab(enabled[0].value);
+        }
+        else {
+            this._internalActiveValue.set(null);
+        }
+    }
+    // ===== HELPERS =====
+    getNextIndex(current, direction, length) {
+        if (current < 0) {
+            return 0;
+        }
+        return (current + direction + length) % length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabsService, decorators: [{
+            type: Injectable
+        }] });
+
+class FkTabComponent {
+    service = inject(TabsService);
+    elementRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    /** Unique value that identifies this tab and links it to its `fk-tab-panel`. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** When true, the tab is non-interactive and cannot be selected. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** When true, renders a close button on the tab trigger. */
+    closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    /** Optional badge content (string or number) rendered in the top-right corner of the trigger. */
+    badge = input(undefined, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Optional icon — either an icon name string or a `TemplateRef` — shown before the label. */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    // ===== CONTENT CHILDREN =====
+    closeIconRef = contentChild(FK_TAB_CLOSE_ICON, ...(ngDevMode ? [{ debugName: "closeIconRef" }] : /* istanbul ignore next */ []));
+    // ===== GENERATED IDS =====
+    tabId = signal('', ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+    panelId = signal('', ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    isActive = computed(() => this.service.activeValue() === this.value(), ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-tab',
+            this.isActive() ? 'fk-tab--active' : '',
+            this.disabled() ? 'fk-tab--disabled' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ===== HOST BINDINGS =====
+    get hostClass() {
+        return this.classes();
+    }
+    role = 'tab';
+    get hostId() {
+        return this.tabId();
+    }
+    get ariaSelected() {
+        return this.isActive();
+    }
+    get ariaControls() {
+        return this.panelId();
+    }
+    get tabIndex() {
+        return this.isActive() ? 0 : -1;
+    }
+    get ariaDisabled() {
+        return this.disabled() || null;
+    }
+    // ===== HOST LISTENERS =====
+    onClick() {
+        if (!this.disabled()) {
+            this.service.selectTab(this.value());
+        }
+    }
+    onFocus() {
+        this.service.focusedValue.set(this.value());
+    }
+    initialized = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.service.unregisterTab(this.value());
+        });
+    }
+    ngOnInit() {
+        const val = this.value();
+        const dis = this.disabled();
+        const ids = this.service.createTabIds(val);
+        this.tabId.set(ids.tabId);
+        this.panelId.set(ids.panelId);
+        this.service.registerTab({
+            value: val,
+            disabled: dis,
+            element: this.elementRef.nativeElement,
+            tabId: ids.tabId,
+            panelId: ids.panelId,
+        });
+        // Auto-select first non-disabled tab
+        if (this.service.activeValue() === null && !dis) {
+            this.service.setActiveValue(val);
+            this.service.activatedPanels.update((set) => {
+                const next = new Set(set);
+                next.add(val);
+                return next;
+            });
+        }
+        this.initialized = true;
+    }
+    ngOnChanges(changes) {
+        if (!this.initialized) {
+            return;
+        }
+        // Re-register when disabled state changes
+        if ('disabled' in changes) {
+            const val = this.value();
+            const ids = this.service.createTabIds(val);
+            this.service.registerTab({
+                value: val,
+                disabled: this.disabled(),
+                element: this.elementRef.nativeElement,
+                tabId: ids.tabId,
+                panelId: ids.panelId,
+            });
+        }
+    }
+    // ===== TEMPLATE HELPERS =====
+    isTemplateRef(val) {
+        return val instanceof TemplateRef;
+    }
+    onClose(event) {
+        event.stopPropagation();
+        this.service.onTabClose?.(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkTabComponent, isStandalone: true, selector: "fk-tab", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "focus": "onFocus()" }, properties: { "class": "this.hostClass", "attr.role": "this.role", "id": "this.hostId", "attr.aria-selected": "this.ariaSelected", "attr.aria-controls": "this.ariaControls", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.ariaDisabled" } }, queries: [{ propertyName: "closeIconRef", first: true, predicate: FK_TAB_CLOSE_ICON, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (icon(); as iconValue) {\n  <span class=\"fk-tab__icon\">\n    @if (isTemplateRef(iconValue)) {\n      <ng-container *ngTemplateOutlet=\"iconValue\" />\n    } @else {\n      {{ iconValue }}\n    }\n  </span>\n}\n\n<span class=\"fk-tab__label\">\n  <ng-content />\n</span>\n\n@if (badge() !== undefined) {\n  <span class=\"fk-tab__badge\">{{ badge() }}</span>\n}\n\n@if (closable()) {\n  <button\n    class=\"fk-tab__close\"\n    type=\"button\"\n    (click)=\"onClose($event)\"\n    [attr.aria-label]=\"'Close ' + value()\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"[fkTabCloseIcon]\" />\n    @if (!closeIconRef()) {\n      <svg\n        class=\"fk-tab__close-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M4.5 4.5l7 7m0-7l-7 7\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--fk-tabs-tab-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-tabs-tab-padding, var(--fk-rhythm-3, .75rem) var(--fk-rhythm-4, 1rem));font-family:inherit;font-size:var(--fk-tabs-font-size, var(--fk-typography-body-font-size, .875rem));font-weight:var(--fk-tabs-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-tabs-tab-color, var(--fk-color-text-muted, #64748b));background:transparent;border:none;cursor:pointer;white-space:nowrap;position:relative;transition:color .15s ease;outline:none}:host:hover:not(.fk-tab--disabled):not(.fk-tab--active){color:var(--fk-tabs-tab-color-hover, var(--fk-color-text, #1e293b))}:host:focus-visible{box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-tabs-tab-focus-radius, var(--fk-radius-sm, .25rem))}:host.fk-tab--active{color:var(--fk-tabs-tab-color-active, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-tabs-font-weight-active, var(--fk-font-weight-semibold, 600))}:host.fk-tab--disabled{color:var(--fk-tabs-tab-color-disabled, var(--fk-color-text-disabled, #cbd5e1));cursor:not-allowed;opacity:var(--fk-tabs-tab-opacity-disabled, .5)}.fk-tab__icon{display:inline-flex;flex-shrink:0}.fk-tab__badge{font-size:var(--fk-tabs-badge-font-size, var(--fk-typography-small-font-size, .75rem));padding:.125rem .375rem;border-radius:var(--fk-tabs-badge-radius, var(--fk-radius-full, 9999px));background:var(--fk-tabs-badge-bg, var(--fk-color-surface-muted, #f1f5f9));color:var(--fk-tabs-badge-color, var(--fk-color-text-muted, #64748b));line-height:1}.fk-tab__close{display:inline-flex;align-items:center;justify-content:center;padding:var(--fk-tabs-close-padding, var(--fk-rhythm-1, .25rem));border:none;background:transparent;color:inherit;cursor:pointer;border-radius:var(--fk-tabs-close-radius, var(--fk-radius-sm, .25rem))}.fk-tab__close:hover{background:var(--fk-tabs-close-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}.fk-tab__close:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-tab__close-icon{width:var(--fk-tabs-close-icon-size, .875rem);height:var(--fk-tabs-close-icon-size, .875rem)}:host-context(.fk-tabs--sm) :host{padding:var(--fk-tabs-tab-padding-sm, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-size:var(--fk-tabs-font-size-sm, var(--fk-typography-small-font-size, .75rem))}:host-context(.fk-tabs--lg) :host{padding:var(--fk-tabs-tab-padding-lg, var(--fk-rhythm-4, 1rem) var(--fk-rhythm-5, 1.25rem));font-size:var(--fk-tabs-font-size-lg, var(--fk-typography-body-font-size, 1rem))}:host-context(.fk-tabs--pill) :host.fk-tab--active{background:var(--fk-tabs-pill-active-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-tabs-pill-active-color, var(--fk-color-surface, #ffffff));border-radius:var(--fk-tabs-pill-radius, var(--fk-radius-full, 9999px))}:host-context(.fk-tabs--contained) :host.fk-tab--active{background:var(--fk-tabs-contained-active-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-tabs-contained-active-radius, var(--fk-radius-sm, .375rem));box-shadow:var(--fk-tabs-contained-active-shadow, var(--fk-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)))}:host-context(.fk-tabs--stretch) :host{flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-tab', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon(); as iconValue) {\n  <span class=\"fk-tab__icon\">\n    @if (isTemplateRef(iconValue)) {\n      <ng-container *ngTemplateOutlet=\"iconValue\" />\n    } @else {\n      {{ iconValue }}\n    }\n  </span>\n}\n\n<span class=\"fk-tab__label\">\n  <ng-content />\n</span>\n\n@if (badge() !== undefined) {\n  <span class=\"fk-tab__badge\">{{ badge() }}</span>\n}\n\n@if (closable()) {\n  <button\n    class=\"fk-tab__close\"\n    type=\"button\"\n    (click)=\"onClose($event)\"\n    [attr.aria-label]=\"'Close ' + value()\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"[fkTabCloseIcon]\" />\n    @if (!closeIconRef()) {\n      <svg\n        class=\"fk-tab__close-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M4.5 4.5l7 7m0-7l-7 7\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--fk-tabs-tab-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-tabs-tab-padding, var(--fk-rhythm-3, .75rem) var(--fk-rhythm-4, 1rem));font-family:inherit;font-size:var(--fk-tabs-font-size, var(--fk-typography-body-font-size, .875rem));font-weight:var(--fk-tabs-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-tabs-tab-color, var(--fk-color-text-muted, #64748b));background:transparent;border:none;cursor:pointer;white-space:nowrap;position:relative;transition:color .15s ease;outline:none}:host:hover:not(.fk-tab--disabled):not(.fk-tab--active){color:var(--fk-tabs-tab-color-hover, var(--fk-color-text, #1e293b))}:host:focus-visible{box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18));border-radius:var(--fk-tabs-tab-focus-radius, var(--fk-radius-sm, .25rem))}:host.fk-tab--active{color:var(--fk-tabs-tab-color-active, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-tabs-font-weight-active, var(--fk-font-weight-semibold, 600))}:host.fk-tab--disabled{color:var(--fk-tabs-tab-color-disabled, var(--fk-color-text-disabled, #cbd5e1));cursor:not-allowed;opacity:var(--fk-tabs-tab-opacity-disabled, .5)}.fk-tab__icon{display:inline-flex;flex-shrink:0}.fk-tab__badge{font-size:var(--fk-tabs-badge-font-size, var(--fk-typography-small-font-size, .75rem));padding:.125rem .375rem;border-radius:var(--fk-tabs-badge-radius, var(--fk-radius-full, 9999px));background:var(--fk-tabs-badge-bg, var(--fk-color-surface-muted, #f1f5f9));color:var(--fk-tabs-badge-color, var(--fk-color-text-muted, #64748b));line-height:1}.fk-tab__close{display:inline-flex;align-items:center;justify-content:center;padding:var(--fk-tabs-close-padding, var(--fk-rhythm-1, .25rem));border:none;background:transparent;color:inherit;cursor:pointer;border-radius:var(--fk-tabs-close-radius, var(--fk-radius-sm, .25rem))}.fk-tab__close:hover{background:var(--fk-tabs-close-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}.fk-tab__close:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-tab__close-icon{width:var(--fk-tabs-close-icon-size, .875rem);height:var(--fk-tabs-close-icon-size, .875rem)}:host-context(.fk-tabs--sm) :host{padding:var(--fk-tabs-tab-padding-sm, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-size:var(--fk-tabs-font-size-sm, var(--fk-typography-small-font-size, .75rem))}:host-context(.fk-tabs--lg) :host{padding:var(--fk-tabs-tab-padding-lg, var(--fk-rhythm-4, 1rem) var(--fk-rhythm-5, 1.25rem));font-size:var(--fk-tabs-font-size-lg, var(--fk-typography-body-font-size, 1rem))}:host-context(.fk-tabs--pill) :host.fk-tab--active{background:var(--fk-tabs-pill-active-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-tabs-pill-active-color, var(--fk-color-surface, #ffffff));border-radius:var(--fk-tabs-pill-radius, var(--fk-radius-full, 9999px))}:host-context(.fk-tabs--contained) :host.fk-tab--active{background:var(--fk-tabs-contained-active-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-tabs-contained-active-radius, var(--fk-radius-sm, .375rem));box-shadow:var(--fk-tabs-contained-active-shadow, var(--fk-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)))}:host-context(.fk-tabs--stretch) :host{flex:1;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeIconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_TAB_CLOSE_ICON), { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
+class FkTabListComponent {
+    service = inject(TabsService);
+    ngZone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the `tablist` role element. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== CONTENT CHILDREN =====
+    scrollStartIconRef = contentChild(FK_TAB_SCROLL_START_ICON, ...(ngDevMode ? [{ debugName: "scrollStartIconRef" }] : /* istanbul ignore next */ []));
+    scrollEndIconRef = contentChild(FK_TAB_SCROLL_END_ICON, ...(ngDevMode ? [{ debugName: "scrollEndIconRef" }] : /* istanbul ignore next */ []));
+    // ===== VIEW CHILDREN =====
+    scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
+    // ===== INDICATOR STATE =====
+    indicatorState = signal({
+        visible: false,
+        offset: 0,
+        size: 0,
+    }, { ...(ngDevMode ? { debugName: "indicatorState" } : /* istanbul ignore next */ {}), equal: (a, b) => a.visible === b.visible && a.offset === b.offset && a.size === b.size });
+    // ===== SCROLL STATE =====
+    canScrollStart = signal(false, ...(ngDevMode ? [{ debugName: "canScrollStart" }] : /* istanbul ignore next */ []));
+    canScrollEnd = signal(false, ...(ngDevMode ? [{ debugName: "canScrollEnd" }] : /* istanbul ignore next */ []));
+    // ===== HOST CLASS =====
+    classes = computed(() => {
+        return ['fk-tab-list', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    role = 'tablist';
+    get ariaOrientation() {
+        return this.service.orientation();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    // ===== INDICATOR STYLES =====
+    indicatorStyles = computed(() => {
+        const state = this.indicatorState();
+        const orientation = this.service.orientation();
+        if (!state.visible) {
+            return { opacity: '0' };
+        }
+        if (orientation === 'vertical') {
+            return {
+                opacity: '1',
+                height: `${state.size}px`,
+                transform: `translateY(${state.offset}px)`,
+            };
+        }
+        return {
+            opacity: '1',
+            width: `${state.size}px`,
+            transform: `translateX(${state.offset}px)`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "indicatorStyles" }] : /* istanbul ignore next */ []));
+    showIndicator = computed(() => {
+        return this.service.variant() === 'underline';
+    }, ...(ngDevMode ? [{ debugName: "showIndicator" }] : /* istanbul ignore next */ []));
+    // ===== RESIZE OBSERVER =====
+    resizeObserver = null;
+    activeTabResizeObserver = null;
+    onKeydown(event) {
+        this.service.handleKeydown(event);
+    }
+    constructor() {
+        // Recalculate indicator whenever active tab or tabs list changes.
+        // Indicator measurement relies on getBoundingClientRect and
+        // ResizeObserver — both browser-only — so the effect no-ops
+        // during SSR. The browser pass re-runs it after hydration.
+        effect(() => {
+            this.service.activeValue();
+            this.service.tabs();
+            this.service.orientation();
+            this.service.variant();
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this.updateIndicator();
+            this.observeActiveTab();
+        });
+    }
+    ngAfterViewInit() {
+        // ResizeObserver + requestAnimationFrame are browser-only — the SSR
+        // pass skips indicator measurement entirely and lets the browser
+        // pass take over once the view re-runs on the client.
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.setupResizeObservers();
+        requestAnimationFrame(() => {
+            this.updateIndicator();
+            this.updateScrollState();
+        });
+    }
+    // ===== SCROLL =====
+    /** Scrolls the active tab into view inside the scroll container. */
+    scrollToActiveTab() {
+        const activeTab = this.service.activeTab();
+        if (activeTab) {
+            activeTab.element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    }
+    /** Scrolls the tab list by 80% of its visible width in the given direction (+1 or −1). */
+    scrollBy(direction) {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const amount = container.clientWidth * 0.8;
+        const orientation = this.service.orientation();
+        if (orientation === 'vertical') {
+            container.scrollBy({ top: amount * direction, behavior: 'smooth' });
+        }
+        else {
+            container.scrollBy({ left: amount * direction, behavior: 'smooth' });
+        }
+    }
+    onScroll() {
+        this.updateScrollState();
+        this.updateIndicator();
+    }
+    // ===== INDICATOR =====
+    /** Recalculates the sliding indicator position and size based on the active tab element. */
+    updateIndicator() {
+        if (!this.showIndicator()) {
+            this.indicatorState.set({ visible: false, offset: 0, size: 0 });
+            return;
+        }
+        const activeTab = this.service.activeTab();
+        const container = this.scrollContainer()?.nativeElement;
+        if (!activeTab || !container) {
+            this.indicatorState.set({ visible: false, offset: 0, size: 0 });
+            return;
+        }
+        const tabRect = activeTab.element.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        if (tabRect.width === 0 && tabRect.height === 0) {
+            this.indicatorState.set({ visible: false, offset: 0, size: 0 });
+            return;
+        }
+        const orientation = this.service.orientation();
+        if (orientation === 'vertical') {
+            this.indicatorState.set({
+                visible: true,
+                offset: tabRect.top - containerRect.top + container.scrollTop,
+                size: tabRect.height,
+            });
+        }
+        else {
+            this.indicatorState.set({
+                visible: true,
+                offset: tabRect.left - containerRect.left + container.scrollLeft,
+                size: tabRect.width,
+            });
+        }
+    }
+    // ===== SCROLL STATE =====
+    updateScrollState() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const orientation = this.service.orientation();
+        if (orientation === 'vertical') {
+            this.canScrollStart.set(container.scrollTop > 0);
+            this.canScrollEnd.set(container.scrollTop + container.clientHeight <
+                container.scrollHeight - 1);
+        }
+        else {
+            this.canScrollStart.set(container.scrollLeft > 0);
+            this.canScrollEnd.set(container.scrollLeft + container.clientWidth <
+                container.scrollWidth - 1);
+        }
+    }
+    // ===== RESIZE OBSERVERS =====
+    setupResizeObservers() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.ngZone.run(() => {
+                    this.updateIndicator();
+                    this.updateScrollState();
+                });
+            });
+            this.resizeObserver.observe(container);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            this.activeTabResizeObserver?.disconnect();
+        });
+    }
+    observeActiveTab() {
+        const activeTab = this.service.activeTab();
+        if (this.activeTabResizeObserver) {
+            this.activeTabResizeObserver.disconnect();
+        }
+        if (!activeTab || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.activeTabResizeObserver = new ResizeObserver(() => {
+                this.ngZone.run(() => {
+                    this.updateIndicator();
+                });
+            });
+            this.activeTabResizeObserver.observe(activeTab.element);
+        });
+        this.scrollToActiveTab();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkTabListComponent, isStandalone: true, selector: "fk-tab-list", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-label": "this.hostAriaLabel" } }, queries: [{ propertyName: "scrollStartIconRef", first: true, predicate: FK_TAB_SCROLL_START_ICON, descendants: true, isSignal: true }, { propertyName: "scrollEndIconRef", first: true, predicate: FK_TAB_SCROLL_END_ICON, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (service.scrollable() && service.showScrollButtons()) {\n  <button\n    class=\"fk-tab-list__scroll-btn\"\n    [class.fk-tab-list__scroll-btn--hidden]=\"!canScrollStart()\"\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"scrollBy(-1)\"\n  >\n    <ng-content select=\"[fkTabScrollStartIcon]\" />\n    @if (!scrollStartIconRef()) {\n      <svg\n        class=\"fk-tab-list__scroll-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M10 4L6 8l4 4\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </button>\n}\n\n<div\n  class=\"fk-tab-list__scroll-container\"\n  #scrollContainer\n  (scroll)=\"onScroll()\"\n>\n  <ng-content />\n\n  @if (showIndicator()) {\n    <div\n      class=\"fk-tab-list__indicator\"\n      [class.fk-tab-list__indicator--hidden]=\"!indicatorState().visible\"\n      [ngStyle]=\"indicatorStyles()\"\n    ></div>\n  }\n</div>\n\n@if (service.scrollable() && service.showScrollButtons()) {\n  <button\n    class=\"fk-tab-list__scroll-btn\"\n    [class.fk-tab-list__scroll-btn--hidden]=\"!canScrollEnd()\"\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"scrollBy(1)\"\n  >\n    <ng-content select=\"[fkTabScrollEndIcon]\" />\n    @if (!scrollEndIconRef()) {\n      <svg\n        class=\"fk-tab-list__scroll-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6 4l4 4-4 4\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </button>\n}\n", styles: [":host{position:relative;display:flex;align-items:center}.fk-tab-list__scroll-container{display:flex;position:relative;flex:1;min-width:0}.fk-tab-list__indicator{position:absolute;bottom:0;left:0;height:var(--fk-tabs-indicator-height, 2px);background:var(--fk-tabs-indicator-color, var(--fk-color-primary, #0a84ff));border-radius:var(--fk-tabs-indicator-radius, var(--fk-radius-full, 9999px));transition:transform .18s ease,width .18s ease;will-change:transform,width;pointer-events:none}.fk-tab-list__indicator--hidden{opacity:0;transition:none}.fk-tab-list__scroll-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--fk-tabs-scroll-btn-padding, var(--fk-rhythm-2, .5rem));border:none;background:var(--fk-tabs-scroll-btn-bg, var(--fk-color-surface, #ffffff));color:var(--fk-tabs-scroll-btn-color, var(--fk-color-text-muted, #64748b));cursor:pointer}.fk-tab-list__scroll-btn:hover{color:var(--fk-tabs-scroll-btn-color-hover, var(--fk-color-text, #1e293b))}.fk-tab-list__scroll-btn:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-tab-list__scroll-btn--hidden{visibility:hidden}.fk-tab-list__scroll-icon{width:1rem;height:1rem}:host-context(.fk-tabs--horizontal) .fk-tab-list__scroll-container{overflow-x:auto;scrollbar-width:none}:host-context(.fk-tabs--horizontal) .fk-tab-list__scroll-container::-webkit-scrollbar{display:none}:host-context(.fk-tabs--vertical){flex-direction:column}:host-context(.fk-tabs--vertical) .fk-tab-list__scroll-container{flex-direction:column;overflow-y:auto;scrollbar-width:none}:host-context(.fk-tabs--vertical) .fk-tab-list__scroll-container::-webkit-scrollbar{display:none}:host-context(.fk-tabs--vertical) .fk-tab-list__indicator{bottom:auto;left:0;top:0;width:var(--fk-tabs-indicator-height, 2px);height:auto;transition:transform .18s ease,height .18s ease;will-change:transform,height}:host-context(.fk-tabs--underline):host-context(.fk-tabs--horizontal){border-bottom:var(--fk-tabs-border-width, var(--fk-border-width, 1px)) solid var(--fk-tabs-border-color, var(--fk-color-border, #d9e2ee))}:host-context(.fk-tabs--underline):host-context(.fk-tabs--vertical){border-right:var(--fk-tabs-border-width, var(--fk-border-width, 1px)) solid var(--fk-tabs-border-color, var(--fk-color-border, #d9e2ee))}:host-context(.fk-tabs--contained) .fk-tab-list__scroll-container{background:var(--fk-tabs-contained-bg, var(--fk-color-surface-muted, #f1f5f9));border:var(--fk-tabs-contained-border, none);border-radius:var(--fk-tabs-contained-radius, var(--fk-radius-md, .5rem));padding:var(--fk-tabs-contained-padding, var(--fk-rhythm-1, .25rem))}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-tab-list', standalone: true, imports: [NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.scrollable() && service.showScrollButtons()) {\n  <button\n    class=\"fk-tab-list__scroll-btn\"\n    [class.fk-tab-list__scroll-btn--hidden]=\"!canScrollStart()\"\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"scrollBy(-1)\"\n  >\n    <ng-content select=\"[fkTabScrollStartIcon]\" />\n    @if (!scrollStartIconRef()) {\n      <svg\n        class=\"fk-tab-list__scroll-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M10 4L6 8l4 4\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </button>\n}\n\n<div\n  class=\"fk-tab-list__scroll-container\"\n  #scrollContainer\n  (scroll)=\"onScroll()\"\n>\n  <ng-content />\n\n  @if (showIndicator()) {\n    <div\n      class=\"fk-tab-list__indicator\"\n      [class.fk-tab-list__indicator--hidden]=\"!indicatorState().visible\"\n      [ngStyle]=\"indicatorStyles()\"\n    ></div>\n  }\n</div>\n\n@if (service.scrollable() && service.showScrollButtons()) {\n  <button\n    class=\"fk-tab-list__scroll-btn\"\n    [class.fk-tab-list__scroll-btn--hidden]=\"!canScrollEnd()\"\n    type=\"button\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"scrollBy(1)\"\n  >\n    <ng-content select=\"[fkTabScrollEndIcon]\" />\n    @if (!scrollEndIconRef()) {\n      <svg\n        class=\"fk-tab-list__scroll-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6 4l4 4-4 4\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n  </button>\n}\n", styles: [":host{position:relative;display:flex;align-items:center}.fk-tab-list__scroll-container{display:flex;position:relative;flex:1;min-width:0}.fk-tab-list__indicator{position:absolute;bottom:0;left:0;height:var(--fk-tabs-indicator-height, 2px);background:var(--fk-tabs-indicator-color, var(--fk-color-primary, #0a84ff));border-radius:var(--fk-tabs-indicator-radius, var(--fk-radius-full, 9999px));transition:transform .18s ease,width .18s ease;will-change:transform,width;pointer-events:none}.fk-tab-list__indicator--hidden{opacity:0;transition:none}.fk-tab-list__scroll-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--fk-tabs-scroll-btn-padding, var(--fk-rhythm-2, .5rem));border:none;background:var(--fk-tabs-scroll-btn-bg, var(--fk-color-surface, #ffffff));color:var(--fk-tabs-scroll-btn-color, var(--fk-color-text-muted, #64748b));cursor:pointer}.fk-tab-list__scroll-btn:hover{color:var(--fk-tabs-scroll-btn-color-hover, var(--fk-color-text, #1e293b))}.fk-tab-list__scroll-btn:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-tab-list__scroll-btn--hidden{visibility:hidden}.fk-tab-list__scroll-icon{width:1rem;height:1rem}:host-context(.fk-tabs--horizontal) .fk-tab-list__scroll-container{overflow-x:auto;scrollbar-width:none}:host-context(.fk-tabs--horizontal) .fk-tab-list__scroll-container::-webkit-scrollbar{display:none}:host-context(.fk-tabs--vertical){flex-direction:column}:host-context(.fk-tabs--vertical) .fk-tab-list__scroll-container{flex-direction:column;overflow-y:auto;scrollbar-width:none}:host-context(.fk-tabs--vertical) .fk-tab-list__scroll-container::-webkit-scrollbar{display:none}:host-context(.fk-tabs--vertical) .fk-tab-list__indicator{bottom:auto;left:0;top:0;width:var(--fk-tabs-indicator-height, 2px);height:auto;transition:transform .18s ease,height .18s ease;will-change:transform,height}:host-context(.fk-tabs--underline):host-context(.fk-tabs--horizontal){border-bottom:var(--fk-tabs-border-width, var(--fk-border-width, 1px)) solid var(--fk-tabs-border-color, var(--fk-color-border, #d9e2ee))}:host-context(.fk-tabs--underline):host-context(.fk-tabs--vertical){border-right:var(--fk-tabs-border-width, var(--fk-border-width, 1px)) solid var(--fk-tabs-border-color, var(--fk-color-border, #d9e2ee))}:host-context(.fk-tabs--contained) .fk-tab-list__scroll-container{background:var(--fk-tabs-contained-bg, var(--fk-color-surface-muted, #f1f5f9));border:var(--fk-tabs-contained-border, none);border-radius:var(--fk-tabs-contained-radius, var(--fk-radius-md, .5rem));padding:var(--fk-tabs-contained-padding, var(--fk-rhythm-1, .25rem))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollStartIconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_TAB_SCROLL_START_ICON), { isSignal: true }] }], scrollEndIconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_TAB_SCROLL_END_ICON), { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaOrientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class FkTabPanelComponent {
+    service = inject(TabsService);
+    destroyRef = inject(DestroyRef);
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    /** Unique value matching the corresponding `fk-tab`'s value; determines which panel to show. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ===== GENERATED IDS =====
+    panelId = signal('', ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    tabId = signal('', ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    isActive = computed(() => this.service.activeValue() === this.value(), ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    shouldRender = computed(() => {
+        const lazy = this.service.lazy();
+        const keepMounted = this.service.keepMounted();
+        const isActive = this.isActive();
+        const wasActivated = this.service.activatedPanels().has(this.value());
+        if (!lazy) {
+            return true;
+        }
+        if (keepMounted) {
+            return isActive || wasActivated;
+        }
+        return isActive;
+    }, ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return ['fk-tab-panel', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ===== HOST BINDINGS =====
+    get hostClass() {
+        return this.classes();
+    }
+    role = 'tabpanel';
+    get hostId() {
+        return this.panelId();
+    }
+    get ariaLabelledby() {
+        return this.tabId();
+    }
+    get isHidden() {
+        return !this.isActive() || null;
+    }
+    tabindex = 0;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.service.unregisterPanel(this.value());
+        });
+    }
+    ngOnInit() {
+        const val = this.value();
+        const tabs = this.service.tabs();
+        const matchingTab = tabs.find((t) => t.value === val);
+        if (matchingTab) {
+            this.panelId.set(matchingTab.panelId);
+            this.tabId.set(matchingTab.tabId);
+        }
+        else {
+            const ids = this.service.createTabIds(val);
+            this.panelId.set(ids.panelId);
+            this.tabId.set(ids.tabId);
+        }
+        this.service.registerPanel({
+            value: val,
+            panelId: this.panelId(),
+            tabId: this.tabId(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkTabPanelComponent, isStandalone: true, selector: "fk-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.role": "this.role", "id": "this.hostId", "attr.aria-labelledby": "this.ariaLabelledby", "hidden": "this.isHidden", "attr.tabindex": "this.tabindex" } }, ngImport: i0, template: `@if (shouldRender()) {
+    <ng-content />
+  }`, isInline: true, styles: [":host{display:block;outline:none}:host[hidden]{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-tab-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (shouldRender()) {
+    <ng-content />
+  }`, styles: [":host{display:block;outline:none}:host[hidden]{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['id']
+            }], ariaLabelledby: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], isHidden: [{
+                type: HostBinding,
+                args: ['hidden']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+
+class FkTabsComponent {
+    service = inject(TabsService);
+    destroyRef = inject(DestroyRef);
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    /** Controlled active tab value; when set, the parent owns the active state. */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Initial active tab value used in uncontrolled mode. */
+    defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Layout direction of the tab list. */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Whether tabs activate on focus (automatic) or only on click/Enter (manual). */
+    activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+    /** Visual style of the tab strip. */
+    variant = input('underline', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size of the tab triggers. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, tab panels are not rendered until first activated. */
+    lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    /** When true (and `lazy` is true), panels remain mounted in the DOM after their first activation. */
+    keepMounted = input(true, ...(ngDevMode ? [{ debugName: "keepMounted" }] : /* istanbul ignore next */ []));
+    /** When true, each tab trigger stretches to fill an equal share of the tab list. */
+    stretch = input(false, ...(ngDevMode ? [{ debugName: "stretch" }] : /* istanbul ignore next */ []));
+    /** When true, the tab list spans the full width of its container. */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** When true, the tab list scrolls horizontally/vertically when tabs overflow. */
+    scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    /** When true (and `scrollable` is true), arrow buttons appear at the edges of the tab list. */
+    showScrollButtons = input(false, ...(ngDevMode ? [{ debugName: "showScrollButtons" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires when the active tab changes, emitting the new tab value. */
+    valueChange = output();
+    /** Fires when the active tab changes, emitting the full change event including previous and next values. */
+    tabChange = output();
+    /** Fires when a closable tab's close button is clicked, emitting the tab value. */
+    tabClose = output();
+    // ===== HOST CLASS =====
+    classes = computed(() => {
+        return [
+            'fk-tabs',
+            `fk-tabs--${this.orientation()}`,
+            `fk-tabs--${this.variant()}`,
+            `fk-tabs--${this.size()}`,
+            this.stretch() ? 'fk-tabs--stretch' : '',
+            this.fullWidth() ? 'fk-tabs--full-width' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    constructor() {
+        // Link config inputs directly to service via callbacks.
+        // This avoids effects entirely — the service reads input signals
+        // directly through the signal graph, eliminating CD timing issues.
+        this.service.setConfig({
+            orientation: () => this.orientation(),
+            activationMode: () => this.activationMode(),
+            variant: () => this.variant(),
+            lazy: () => this.lazy(),
+            keepMounted: () => this.keepMounted(),
+            scrollable: () => this.scrollable(),
+            showScrollButtons: () => this.showScrollButtons(),
+        });
+        // Link controlled value input to service
+        this.service.setControlledValue(() => this.value());
+        // Wire service callbacks to outputs
+        this.service.onValueChange = (v) => this.valueChange.emit(v);
+        this.service.onTabChange = (e) => this.tabChange.emit(e);
+        this.service.onTabClose = (v) => this.tabClose.emit({ value: v });
+        this.destroyRef.onDestroy(() => {
+            this.service.onValueChange = null;
+            this.service.onTabChange = null;
+            this.service.onTabClose = null;
+        });
+    }
+    ngOnInit() {
+        // Set initial value synchronously before child views are checked
+        const v = this.value();
+        const dv = this.defaultValue();
+        if (v !== undefined) {
+            this.service.setActiveValue(v);
+            this.service.activatedPanels.update((set) => {
+                const next = new Set(set);
+                next.add(v);
+                return next;
+            });
+        }
+        else if (dv !== undefined) {
+            this.service.setActiveValue(dv);
+            this.service.activatedPanels.update((set) => {
+                const next = new Set(set);
+                next.add(dv);
+                return next;
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FkTabsComponent, isStandalone: true, selector: "fk-tabs", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showScrollButtons: { classPropertyName: "showScrollButtons", publicName: "showScrollButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", tabChange: "tabChange", tabClose: "tabClose" }, host: { properties: { "class": "this.hostClass" } }, providers: [TabsService], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block}:host.fk-tabs--full-width{width:100%}:host.fk-tabs--vertical{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TabsService], template: `<ng-content />`, styles: [":host{display:block}:host.fk-tabs--full-width{width:100%}:host.fk-tabs--vertical{display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], showScrollButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollButtons", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FK_TAB_CLOSE_ICON, FK_TAB_SCROLL_END_ICON, FK_TAB_SCROLL_START_ICON, FkTabCloseIconDirective, FkTabComponent, FkTabListComponent, FkTabPanelComponent, FkTabScrollEndIconDirective, FkTabScrollStartIconDirective, FkTabsComponent, TabsService };
+//# sourceMappingURL=frame-kit-ui-ng-ui-tabs.mjs.map