@weeehaoooz/talos-ui 0.1.1 → 0.1.2

package/fesm2022/weeehaoooz-talos-ui-layout.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, input, output, Component, inject, Directive, NgModule, forwardRef, effect, DestroyRef, model, ContentChild } from '@angular/core';
-import { NgComponentOutlet } from '@angular/common';
-import { TalosButtonDirective } from '@weeehaoooz/talos-ui/button/button';
-import { LucideX, LucideChevronDown } from '@lucide/angular';
+import { signal, computed, Injectable, input, output, Component, inject, Directive, NgModule, forwardRef, effect, DestroyRef, model, ContentChild, TemplateRef, contentChild, contentChildren, viewChildren, viewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgComponentOutlet, CommonModule, NgTemplateOutlet } from '@angular/common';
+import { TalosButtonDirective } from '@weeehaoooz/talos-ui/button';
+import { LucideX, LucideChevronDown, LucidePlus, LucideCheck, LucideAlertTriangle } from '@lucide/angular';
 
 class LayoutService {
     // Reactive Signals for layout state
@@ -330,7 +331,7 @@ class TalosCardBodyComponent {
     padding = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosCardBodyComponent, isStandalone: true, selector: "talos-card-body, talos-card-content, [talosCardBody], [talosCardContent]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-card-body-padding-none": "padding() === \"none\"", "class.talos-card-body-padding-sm": "padding() === \"sm\"", "class.talos-card-body-padding-md": "padding() === \"md\"", "class.talos-card-body-padding-lg": "padding() === \"lg\"" }, classAttribute: "talos-card-body-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;width:100%;box-sizing:border-box;flex:1;color:var(--talos-text-color, var(--text-color, #0f172a));line-height:1.5}:host.talos-card-body-padding-none{padding:0}:host.talos-card-body-padding-sm{padding:.75rem 0}:host.talos-card-body-padding-md{padding:1rem 0}:host.talos-card-body-padding-lg{padding:1.5rem 0}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosCardBodyComponent, isStandalone: true, selector: "talos-card-body, talos-card-content, [talosCardBody], [talosCardContent]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-card-body-padding-none": "padding() === \"none\"", "class.talos-card-body-padding-sm": "padding() === \"sm\"", "class.talos-card-body-padding-md": "padding() === \"md\"", "class.talos-card-body-padding-lg": "padding() === \"lg\"" }, classAttribute: "talos-card-body-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;width:100%;box-sizing:border-box;flex:1 1 auto;min-height:0;color:var(--talos-text-color, var(--text-color, #0f172a));line-height:1.5}:host.talos-card-body-padding-none{padding:0}:host.talos-card-body-padding-sm{padding:.75rem 0}:host.talos-card-body-padding-md{padding:1rem 0}:host.talos-card-body-padding-lg{padding:1.5rem 0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardBodyComponent, decorators: [{
             type: Component,
@@ -340,7 +341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[class.talos-card-body-padding-sm]': 'padding() === "sm"',
                         '[class.talos-card-body-padding-md]': 'padding() === "md"',
                         '[class.talos-card-body-padding-lg]': 'padding() === "lg"'
-                    }, template: "<ng-content />\n", styles: [":host{display:block;width:100%;box-sizing:border-box;flex:1;color:var(--talos-text-color, var(--text-color, #0f172a));line-height:1.5}:host.talos-card-body-padding-none{padding:0}:host.talos-card-body-padding-sm{padding:.75rem 0}:host.talos-card-body-padding-md{padding:1rem 0}:host.talos-card-body-padding-lg{padding:1.5rem 0}\n"] }]
+                    }, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;width:100%;box-sizing:border-box;flex:1 1 auto;min-height:0;color:var(--talos-text-color, var(--text-color, #0f172a));line-height:1.5}:host.talos-card-body-padding-none{padding:0}:host.talos-card-body-padding-sm{padding:.75rem 0}:host.talos-card-body-padding-md{padding:1rem 0}:host.talos-card-body-padding-lg{padding:1.5rem 0}\n"] }]
         }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
 
 class TalosCardFooterComponent {
@@ -843,9 +844,1317 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 
+/**
+ * Directive applied to an `<ng-template>` to provide a custom header label template for a tab.
+ *
+ * Usage:
+ * ```html
+ * <talos-tab>
+ *   <ng-template talosTabLabel>
+ *     <svg lucideBell [size]="14"></svg>
+ *     <span>Notifications</span>
+ *   </ng-template>
+ *   Tab content...
+ * </talos-tab>
+ * ```
+ */
+class TalosTabLabelDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTabLabelDirective, isStandalone: true, selector: "[talosTabLabel], ng-template[talosTabLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTabLabel], ng-template[talosTabLabel]'
+                }]
+        }] });
+/**
+ * Directive applied to an `<ng-template>` to delay rendering of the tab panel's content
+ * until the tab is first activated / selected (lazy loading).
+ *
+ * Usage:
+ * ```html
+ * <talos-tab label="Heavy Data">
+ *   <ng-template talosTabContent>
+ *     <heavy-data-grid />
+ *   </ng-template>
+ * </talos-tab>
+ * ```
+ */
+class TalosTabContentDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosTabContentDirective, isStandalone: true, selector: "[talosTabContent], ng-template[talosTabContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosTabContent], ng-template[talosTabContent]'
+                }]
+        }] });
+
+let nextTabUniqueId = 0;
+/**
+ * An individual tab panel element to be placed inside `<talos-tabs>`.
+ */
+class TalosTabComponent {
+    defaultUniqueId = `talos-tab-${nextTabUniqueId++}`;
+    /**
+     * Header label text for this tab.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Unique identifier for this tab. If omitted, an auto-generated id is assigned.
+     */
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional icon component to display before the label text.
+     */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional badge count or status text rendered alongside the tab label.
+     */
+    badge = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this tab is disabled and cannot be activated.
+     */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this tab displays an inline close action button.
+     */
+    closable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible description for screen readers (aria-label).
+     */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom label template projected with `*talosTabLabel`.
+     */
+    customLabel = contentChild(TalosTabLabelDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Lazy-loaded panel content projected with `*talosTabContent`.
+     */
+    lazyContent = contentChild(TalosTabContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal selection state controlled by parent `<talos-tabs>`.
+     */
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this tab has been active at least once (used for lazy-loading retention).
+     */
+    hasBeenActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasBeenActive" }] : /* istanbul ignore next */ []));
+    /**
+     * The effective unique key for this tab.
+     */
+    key = computed(() => {
+        const customId = this.id();
+        return customId !== '' && customId !== null && customId !== undefined
+            ? customId
+            : this.defaultUniqueId;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    /**
+     * The HTML element ID of the tab panel.
+     */
+    panelId = computed(() => `${this.key()}-panel`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    /**
+     * The HTML element ID of the tab header button.
+     */
+    headerId = computed(() => `${this.key()}-header`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets active state and tracks lazy load retention.
+     */
+    setActive(isActive) {
+        this.active.set(isActive);
+        if (isActive) {
+            this.hasBeenActive.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTabComponent, isStandalone: true, selector: "talos-tab, [talosTab]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.aria-labelledby": "headerId()", "attr.tabindex": "active() ? 0 : -1", "attr.aria-hidden": "!active()", "class.talos-tab-panel--active": "active()", "hidden": "!active()" }, classAttribute: "talos-tab-panel" }, queries: [{ propertyName: "customLabel", first: true, predicate: TalosTabLabelDirective, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: TalosTabContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (lazyContent()) {\n  @if (active() || hasBeenActive()) {\n    <ng-container [ngTemplateOutlet]=\"lazyContent()!.templateRef\" />\n  }\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:block;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit);outline:none}:host[hidden]{display:none!important}:host.talos-tab-panel--active{animation:talosTabFadeIn .2s cubic-bezier(.4,0,.2,1)}:host:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-radius:var(--talos-radius-md, .375rem)}@keyframes talosTabFadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-tab, [talosTab]', imports: [CommonModule], host: {
+                        'class': 'talos-tab-panel',
+                        'role': 'tabpanel',
+                        '[attr.id]': 'panelId()',
+                        '[attr.aria-labelledby]': 'headerId()',
+                        '[attr.tabindex]': 'active() ? 0 : -1',
+                        '[attr.aria-hidden]': '!active()',
+                        '[class.talos-tab-panel--active]': 'active()',
+                        '[hidden]': '!active()'
+                    }, template: "@if (lazyContent()) {\n  @if (active() || hasBeenActive()) {\n    <ng-container [ngTemplateOutlet]=\"lazyContent()!.templateRef\" />\n  }\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:block;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit);outline:none}:host[hidden]{display:none!important}:host.talos-tab-panel--active{animation:talosTabFadeIn .2s cubic-bezier(.4,0,.2,1)}:host:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-radius:var(--talos-radius-md, .375rem)}@keyframes talosTabFadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], customLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosTabLabelDirective), { isSignal: true }] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosTabContentDirective), { isSignal: true }] }] } });
+
+class TalosTabsComponent {
+    /**
+     * The index of the currently active tab (two-way bindable via `[(selectedIndex)]`).
+     */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * The unique ID of the currently active tab (two-way bindable via `[(activeId)]`).
+     */
+    activeId = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual styling variant of the tabs.
+     * @default 'line'
+     */
+    variant = input('line', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Sizing scale of the tabs.
+     * @default 'md'
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Layout orientation of the tab headers and panels.
+     * @default 'horizontal'
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Horizontal alignment of tab headers within the container.
+     * @default 'start'
+     */
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional data-driven items array. When provided, renders data-driven tabs.
+     */
+    items = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether tabs show an inline close button by default.
+     * @default false
+     */
+    closable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display an add tab button in the header bar.
+     * @default false
+     */
+    addable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to enable animated indicator transitions.
+     * @default true
+     */
+    animated = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether tabs stretch equally to fill the full width of the container.
+     * @default false
+     */
+    stretched = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stretched" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible description for the tablist landmark.
+     * @default 'Tabs navigation'
+     */
+    ariaLabel = input('Tabs navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when the selected tab changes.
+     */
+    tabChange = output();
+    /**
+     * Emitted when a tab's close button is clicked.
+     */
+    tabClose = output();
+    /**
+     * Emitted when the add tab button is clicked.
+     */
+    tabAdd = output();
+    /**
+     * Projected declarative child `<talos-tab>` instances.
+     */
+    projectedTabs = contentChildren(TalosTabComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedTabs" }] : /* istanbul ignore next */ []));
+    /**
+     * DOM button elements for all rendered tab headers.
+     */
+    tabButtons = viewChildren('tabButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
+    /**
+     * Container element for the tab navigation bar.
+     */
+    navContainer = viewChild('navContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navContainer" }] : /* istanbul ignore next */ []));
+    // Ink-bar measurement signals
+    indicatorLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : /* istanbul ignore next */ []));
+    indicatorTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorTop" }] : /* istanbul ignore next */ []));
+    indicatorWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : /* istanbul ignore next */ []));
+    indicatorHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : /* istanbul ignore next */ []));
+    hasIndicator = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasIndicator" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalized array of tab headers combining declarative children and data items.
+     */
+    tabHeaders = computed(() => {
+        const dataItems = this.items();
+        if (dataItems && dataItems.length > 0) {
+            return dataItems.map(item => ({
+                id: item.id,
+                label: item.label,
+                headerId: this.getDataHeaderId(item),
+                panelId: this.getDataPanelId(item),
+                icon: item.icon ?? null,
+                badge: item.badge ?? null,
+                disabled: item.disabled ?? false,
+                closable: item.closable ?? false,
+                customLabel: null,
+                labelTemplate: item.labelTemplate ?? null,
+                source: item
+            }));
+        }
+        const childTabs = this.projectedTabs();
+        return childTabs.map(tab => ({
+            id: tab.key(),
+            label: tab.label(),
+            headerId: tab.headerId(),
+            panelId: tab.panelId(),
+            icon: tab.icon(),
+            badge: tab.badge(),
+            disabled: tab.disabled(),
+            closable: tab.closable(),
+            customLabel: tab.customLabel() ?? null,
+            labelTemplate: null,
+            source: tab
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabHeaders" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync projected children active states whenever selectedIndex or children change
+        effect(() => {
+            const idx = this.selectedIndex();
+            const childTabs = this.projectedTabs();
+            childTabs.forEach((tab, i) => {
+                tab.setActive(i === idx);
+            });
+        });
+        // Sync activeId with selectedIndex
+        effect(() => {
+            const headers = this.tabHeaders();
+            const currentActiveId = this.activeId();
+            if (currentActiveId !== null && currentActiveId !== undefined) {
+                const foundIdx = headers.findIndex(h => h.id === currentActiveId);
+                if (foundIdx !== -1 && foundIdx !== this.selectedIndex()) {
+                    this.selectedIndex.set(foundIdx);
+                }
+            }
+        });
+        // Update indicator whenever selected index or buttons update
+        effect(() => {
+            this.selectedIndex();
+            this.tabButtons();
+            this.orientation();
+            this.variant();
+            this.updateIndicator();
+        });
+    }
+    ngAfterViewInit() {
+        this.updateIndicator();
+    }
+    /**
+     * Activates the tab at the given index.
+     */
+    selectTab(index, header) {
+        if (header.disabled || this.selectedIndex() === index) {
+            return;
+        }
+        this.selectedIndex.set(index);
+        this.activeId.set(header.id);
+        this.tabChange.emit({
+            index,
+            id: header.id,
+            tab: header.source
+        });
+        this.updateIndicator();
+    }
+    /**
+     * Checks whether an individual tab is closable.
+     */
+    isClosable(header) {
+        return header.closable || this.closable();
+    }
+    /**
+     * Closes the tab at the specified index.
+     */
+    closeTab(event, index, header) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.tabClose.emit({
+            index,
+            id: header.id,
+            tab: header.source
+        });
+        // If closing the currently selected tab, switch to adjacent non-disabled tab
+        const headers = this.tabHeaders();
+        if (this.selectedIndex() === index && headers.length > 1) {
+            let nextIndex = index;
+            if (nextIndex >= headers.length - 1) {
+                nextIndex = headers.length - 2;
+            }
+            // Pick first non-disabled tab if possible
+            for (let i = nextIndex; i >= 0; i--) {
+                if (!headers[i].disabled && i !== index) {
+                    this.selectTab(i, headers[i]);
+                    break;
+                }
+            }
+        }
+    }
+    /**
+     * Triggers the tab add event.
+     */
+    addTab() {
+        this.tabAdd.emit();
+    }
+    /**
+     * Keyboard accessibility handler following WAI-ARIA Tab guidelines.
+     */
+    onKeydown(event, currentIndex, currentHeader) {
+        const headers = this.tabHeaders();
+        const total = headers.length;
+        if (total === 0) {
+            return;
+        }
+        const isHorizontal = this.orientation() === 'horizontal';
+        let targetIndex = -1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                if ((isHorizontal && event.key === 'ArrowRight') || (!isHorizontal && event.key === 'ArrowDown')) {
+                    event.preventDefault();
+                    targetIndex = this.findNextAvailableTab(currentIndex, 1);
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                if ((isHorizontal && event.key === 'ArrowLeft') || (!isHorizontal && event.key === 'ArrowUp')) {
+                    event.preventDefault();
+                    targetIndex = this.findNextAvailableTab(currentIndex, -1);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                targetIndex = this.findNextAvailableTab(-1, 1);
+                break;
+            case 'End':
+                event.preventDefault();
+                targetIndex = this.findNextAvailableTab(total, -1);
+                break;
+            case 'Delete':
+                if (this.isClosable(currentHeader)) {
+                    event.preventDefault();
+                    this.closeTab(event, currentIndex, currentHeader);
+                }
+                break;
+        }
+        if (targetIndex !== -1 && targetIndex !== currentIndex) {
+            this.selectTab(targetIndex, headers[targetIndex]);
+            this.focusTabButton(targetIndex);
+        }
+    }
+    findNextAvailableTab(startIndex, direction) {
+        const headers = this.tabHeaders();
+        const total = headers.length;
+        if (total === 0)
+            return -1;
+        let idx = startIndex;
+        for (let count = 0; count < total; count++) {
+            idx = (idx + direction + total) % total;
+            if (!headers[idx].disabled) {
+                return idx;
+            }
+        }
+        return -1;
+    }
+    focusTabButton(index) {
+        const buttons = this.tabButtons();
+        if (buttons && buttons[index]) {
+            buttons[index].nativeElement.focus();
+        }
+    }
+    /**
+     * Recalculates indicator offset and size for smooth animations.
+     */
+    updateIndicator() {
+        const buttons = this.tabButtons();
+        const currentIdx = this.selectedIndex();
+        if (!buttons || !buttons[currentIdx]) {
+            this.hasIndicator.set(false);
+            return;
+        }
+        const activeEl = buttons[currentIdx].nativeElement;
+        if (!activeEl) {
+            this.hasIndicator.set(false);
+            return;
+        }
+        this.indicatorLeft.set(activeEl.offsetLeft);
+        this.indicatorTop.set(activeEl.offsetTop);
+        this.indicatorWidth.set(activeEl.offsetWidth);
+        this.indicatorHeight.set(activeEl.offsetHeight);
+        this.hasIndicator.set(true);
+    }
+    /**
+     * Unique panel id generator for data items.
+     */
+    getDataPanelId(item) {
+        return `talos-tab-panel-${item.id}`;
+    }
+    /**
+     * Unique header id generator for data items.
+     */
+    getDataHeaderId(item) {
+        return `talos-tab-header-${item.id}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTabsComponent, isStandalone: true, selector: "talos-tabs, [talosTabs]", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", 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 }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, stretched: { classPropertyName: "stretched", publicName: "stretched", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", activeId: "activeIdChange", tabChange: "tabChange", tabClose: "tabClose", tabAdd: "tabAdd" }, host: { properties: { "class.talos-tabs--horizontal": "orientation() === \"horizontal\"", "class.talos-tabs--vertical": "orientation() === \"vertical\"", "class.talos-tabs--line": "variant() === \"line\"", "class.talos-tabs--pills": "variant() === \"pills\"", "class.talos-tabs--card": "variant() === \"card\"", "class.talos-tabs--segmented": "variant() === \"segmented\"", "class.talos-tabs--subtle": "variant() === \"subtle\"", "class.talos-tabs--xs": "size() === \"xs\"", "class.talos-tabs--sm": "size() === \"sm\"", "class.talos-tabs--md": "size() === \"md\"", "class.talos-tabs--lg": "size() === \"lg\"", "class.talos-tabs--align-center": "align() === \"center\"", "class.talos-tabs--align-end": "align() === \"end\"", "class.talos-tabs--stretched": "stretched() || align() === \"stretch\"", "class.talos-tabs--animated": "animated()" }, classAttribute: "talos-tabs" }, queries: [{ propertyName: "projectedTabs", predicate: TalosTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "navContainer", first: true, predicate: ["navContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"talos-tabs__header\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div class=\"talos-tabs__nav\" #navContainer>\n    @for (tab of tabHeaders(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"talos-tabs__tab\"\n        role=\"tab\"\n        [id]=\"tab.headerId\"\n        [attr.aria-controls]=\"tab.panelId\"\n        [attr.aria-selected]=\"selectedIndex() === i\"\n        [attr.aria-disabled]=\"tab.disabled ? 'true' : null\"\n        [attr.tabindex]=\"selectedIndex() === i ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        [class.talos-tabs__tab--active]=\"selectedIndex() === i\"\n        [class.talos-tabs__tab--disabled]=\"tab.disabled\"\n        (click)=\"selectTab(i, tab)\"\n        (keydown)=\"onKeydown($event, i, tab)\"\n      >\n        <!-- Icon -->\n        @if (tab.icon) {\n          <span class=\"talos-tabs__tab-icon\" aria-hidden=\"true\">\n            <ng-container [ngComponentOutlet]=\"tab.icon\" />\n          </span>\n        }\n\n        <!-- Custom Label Template or Text -->\n        @if (tab.customLabel) {\n          <span class=\"talos-tabs__tab-label\">\n            <ng-container [ngTemplateOutlet]=\"tab.customLabel.templateRef\" />\n          </span>\n        } @else if (tab.labelTemplate) {\n          <span class=\"talos-tabs__tab-label\">\n            <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n          </span>\n        } @else {\n          <span class=\"talos-tabs__tab-label\">{{ tab.label }}</span>\n        }\n\n        <!-- Badge -->\n        @if (tab.badge !== undefined && tab.badge !== null && tab.badge !== '') {\n          <span class=\"talos-tabs__badge\" [class.talos-tabs__badge--active]=\"selectedIndex() === i\">\n            {{ tab.badge }}\n          </span>\n        }\n\n        <!-- Close Button -->\n        @if (isClosable(tab)) {\n          <span\n            role=\"button\"\n            class=\"talos-tabs__close\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"'Close ' + tab.label + ' tab'\"\n            (click)=\"closeTab($event, i, tab)\"\n            (keydown.enter)=\"closeTab($event, i, tab)\"\n            (keydown.space)=\"closeTab($event, i, tab)\"\n          >\n            <svg lucideX [size]=\"12\"></svg>\n          </span>\n        }\n      </button>\n    }\n\n    <!-- Sliding Ink-Bar Indicator (for line and segmented variants) -->\n    @if (hasIndicator()) {\n      @if (variant() === 'line') {\n        @if (orientation() === 'horizontal') {\n          <div\n            class=\"talos-tabs__indicator talos-tabs__indicator--line-h\"\n            [style.left.px]=\"indicatorLeft()\"\n            [style.width.px]=\"indicatorWidth()\"\n          ></div>\n        } @else {\n          <div\n            class=\"talos-tabs__indicator talos-tabs__indicator--line-v\"\n            [style.top.px]=\"indicatorTop()\"\n            [style.height.px]=\"indicatorHeight()\"\n          ></div>\n        }\n      } @else if (variant() === 'segmented') {\n        <div\n          class=\"talos-tabs__indicator talos-tabs__indicator--segmented\"\n          [style.left.px]=\"indicatorLeft()\"\n          [style.top.px]=\"indicatorTop()\"\n          [style.width.px]=\"indicatorWidth()\"\n          [style.height.px]=\"indicatorHeight()\"\n        ></div>\n      }\n    }\n\n    <!-- Add Tab Button -->\n    @if (addable()) {\n      <button\n        type=\"button\"\n        class=\"talos-tabs__add\"\n        aria-label=\"Add new tab\"\n        (click)=\"addTab()\"\n      >\n        <svg lucidePlus [size]=\"14\"></svg>\n      </button>\n    }\n  </div>\n</div>\n\n<!-- Tab Panels Container -->\n<div class=\"talos-tabs__content\">\n  @if (items() && items()!.length > 0) {\n    <!-- Data-driven Panels -->\n    @for (item of items()!; track item.id; let i = $index) {\n      <div\n        class=\"talos-tab-panel\"\n        role=\"tabpanel\"\n        [id]=\"getDataPanelId(item)\"\n        [attr.aria-labelledby]=\"getDataHeaderId(item)\"\n        [hidden]=\"selectedIndex() !== i\"\n        [class.talos-tab-panel--active]=\"selectedIndex() === i\"\n        [attr.tabindex]=\"selectedIndex() === i ? 0 : -1\"\n      >\n        @if (selectedIndex() === i) {\n          @if (item.template) {\n            <ng-container [ngTemplateOutlet]=\"item.template\" />\n          } @else if (item.content) {\n            <div class=\"talos-tabs__data-content\">{{ item.content }}</div>\n          }\n        }\n      </div>\n    }\n  } @else {\n    <!-- Declarative Projected Panels (<talos-tab>) -->\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit)}:host.talos-tabs--horizontal{flex-direction:column}:host.talos-tabs--horizontal .talos-tabs__header{width:100%}:host.talos-tabs--horizontal .talos-tabs__nav{flex-direction:row;align-items:center}:host.talos-tabs--vertical{flex-direction:row;gap:1.5rem}:host.talos-tabs--vertical .talos-tabs__header{flex-shrink:0;min-width:180px;max-width:240px;align-items:stretch}:host.talos-tabs--vertical .talos-tabs__nav{flex-direction:column;align-items:stretch;width:100%;gap:.25rem}:host.talos-tabs--vertical .talos-tabs__tab{justify-content:flex-start!important;text-align:left;width:100%;padding-left:.875rem;padding-right:.875rem}:host.talos-tabs--vertical .talos-tabs__tab .talos-tabs__tab-label{flex:1 1 auto;justify-content:flex-start;text-align:left}:host.talos-tabs--vertical .talos-tabs__tab .talos-tabs__badge{margin-left:auto}:host.talos-tabs--vertical .talos-tabs__content{flex:1;min-width:0;padding-top:0}.talos-tabs__header{position:relative;display:flex;align-items:center;box-sizing:border-box}.talos-tabs__nav{position:relative;display:flex;box-sizing:border-box;list-style:none;margin:0;padding:0}:host(.talos-tabs--horizontal.talos-tabs--align-center) .talos-tabs__header{justify-content:center}:host(.talos-tabs--horizontal.talos-tabs--align-end) .talos-tabs__header{justify-content:flex-end}:host(.talos-tabs--horizontal.talos-tabs--stretched) .talos-tabs__nav{width:100%}:host(.talos-tabs--horizontal.talos-tabs--stretched) .talos-tabs__tab{flex:1 1 0;justify-content:center}.talos-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:none;outline:none;cursor:pointer;white-space:nowrap;font-family:inherit;font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){color:var(--talos-text-primary, #0f172a)}.talos-tabs__tab:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-radius:var(--talos-radius-md, .375rem);z-index:2}.talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #2563eb);font-weight:var(--talos-font-weight-semibold, 600)}.talos-tabs__tab.talos-tabs__tab--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.talos-tabs__tab-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.talos-tabs__tab-label{display:inline-flex;align-items:center}.talos-tabs__badge{display:inline-flex;align-items:center;justify-content:center;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);line-height:1;padding:.125rem .375rem;border-radius:var(--talos-radius-full, 9999px);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .05));color:var(--talos-text-muted, #64748b);transition:background-color .2s ease,color .2s ease}.talos-tabs__badge.talos-tabs__badge--active{background-color:var(--talos-primary-light, rgba(37, 99, 235, .1));color:var(--talos-primary-color, #2563eb)}.talos-tabs__close{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;margin-left:.125rem;margin-right:-.25rem;border-radius:var(--talos-radius-sm, .25rem);color:var(--talos-text-muted, #64748b);cursor:pointer;transition:background-color .2s ease,color .2s ease}.talos-tabs__close:hover{background-color:#00000014;color:var(--talos-error-color, #ef4444)}.talos-tabs__close:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.talos-tabs__add{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px dashed var(--talos-border-color, #cbd5e1);color:var(--talos-text-muted, #64748b);cursor:pointer;border-radius:var(--talos-radius-md, .375rem);padding:.375rem;margin-left:.375rem;transition:color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1)}.talos-tabs__add:hover{color:var(--talos-primary-color, #2563eb);border-color:var(--talos-primary-color, #2563eb);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}.talos-tabs__add:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))}.talos-tabs__indicator{position:absolute;pointer-events:none}.talos-tabs__indicator--line-h{bottom:0;height:2px;background-color:var(--talos-primary-color, #2563eb);border-radius:2px 2px 0 0;z-index:2;transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1)}.talos-tabs__indicator--line-v{right:0;width:2px;background-color:var(--talos-primary-color, #2563eb);border-radius:2px 0 0 2px;z-index:2;transition:top .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1)}.talos-tabs__indicator--segmented{background-color:var(--talos-card-bg, #ffffff);border-radius:var(--talos-radius-md, .375rem);box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .06));z-index:0;transition:left .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1)}:host(.talos-tabs--xs) .talos-tabs__tab{font-size:var(--talos-font-size-xs, .75rem);padding:.25rem .625rem;min-height:var(--talos-height-xs, 1.625rem)}:host(.talos-tabs--sm) .talos-tabs__tab{font-size:var(--talos-font-size-sm, .8125rem);padding:.375rem .875rem;min-height:var(--talos-height-sm, 2rem)}:host(.talos-tabs--md) .talos-tabs__tab{font-size:var(--talos-font-size-base, .875rem);padding:.5rem 1.125rem;min-height:var(--talos-height-md, 2.25rem)}:host(.talos-tabs--lg) .talos-tabs__tab{font-size:var(--talos-font-size-lg, 1rem);padding:.625rem 1.375rem;min-height:var(--talos-height-lg, 2.625rem)}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__header{border-bottom:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__tab{background:transparent;border-radius:var(--talos-radius-md, .375rem) var(--talos-radius-md, .375rem) 0 0}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #2563eb);background:transparent}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__header{border-right:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__tab{background:transparent;border-radius:var(--talos-radius-md, .375rem) 0 0 var(--talos-radius-md, .375rem)}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-light, rgba(37, 99, 235, .05))}:host(.talos-tabs--pills) .talos-tabs__nav{gap:.375rem}:host(.talos-tabs--pills) .talos-tabs__tab{border-radius:var(--talos-radius-full, 9999px)}:host(.talos-tabs--pills) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .05))}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-primary-color, #2563eb);color:var(--talos-text-inverse, #ffffff)}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active .talos-tabs__badge{background-color:#ffffff40;color:#fff}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active .talos-tabs__close{color:#fffc}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active .talos-tabs__close:hover{background-color:#fff3;color:#fff}:host(.talos-tabs--pills).talos-tabs--vertical .talos-tabs__tab{border-radius:var(--talos-radius-md, .375rem)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__header{border-bottom:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__nav{gap:.25rem;margin-bottom:-1px}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__tab{border:1px solid transparent;border-bottom:1px solid var(--talos-border-color, #e2e8f0);border-top-left-radius:var(--talos-radius-md, .375rem);border-top-right-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-card-tab-inactive-bg, rgba(0, 0, 0, .03));color:var(--talos-text-muted, #64748b)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:var(--talos-card-tab-hover-bg, rgba(0, 0, 0, .06));color:var(--talos-text-primary, #0f172a)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));border-color:var(--talos-border-color, #e2e8f0);border-bottom-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-primary-color, #2563eb)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__header{border-right:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__nav{gap:.25rem;margin-right:-1px}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__tab{border:1px solid transparent;border-right:1px solid var(--talos-border-color, #e2e8f0);border-top-left-radius:var(--talos-radius-md, .375rem);border-bottom-left-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-card-tab-inactive-bg, rgba(0, 0, 0, .03));color:var(--talos-text-muted, #64748b)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:var(--talos-card-tab-hover-bg, rgba(0, 0, 0, .06));color:var(--talos-text-primary, #0f172a)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));border-color:var(--talos-border-color, #e2e8f0);border-right-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-primary-color, #2563eb)}:host(.talos-tabs--segmented) .talos-tabs__header{background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04));border-radius:var(--talos-radius-lg, .5rem);padding:3px;display:inline-flex;border:1px solid var(--talos-border-subtle, #e2e8f0)}:host(.talos-tabs--segmented) .talos-tabs__nav{position:relative;width:100%}:host(.talos-tabs--segmented) .talos-tabs__tab{border-radius:var(--talos-radius-md, .375rem);transition:color .2s ease}:host(.talos-tabs--segmented) .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-text-primary, #0f172a);background-color:var(--talos-card-bg, #ffffff);box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}:host(.talos-tabs--segmented).talos-tabs--vertical .talos-tabs__header{display:flex;flex-direction:column}:host(.talos-tabs--subtle) .talos-tabs__tab{border-radius:var(--talos-radius-md, .375rem)}:host(.talos-tabs--subtle) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}:host(.talos-tabs--subtle) .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-primary-light, rgba(37, 99, 235, .06));color:var(--talos-primary-color, #2563eb)}.talos-tabs__content{box-sizing:border-box;width:100%;padding-top:1rem}:host(.talos-tabs--vertical) .talos-tabs__content{padding-top:0}.talos-tabs__data-content{line-height:var(--talos-line-height-normal, 1.5);color:var(--talos-text-secondary, #334155)}:host-context([data-theme=dark]),:host-context([data-mode=dark]),:host-context(.dark),:host-context(.dark-theme){color:var(--talos-text-color, var(--talos-text-primary, #f8fafc))}:host-context([data-theme=dark]) .talos-tabs__tab,:host-context([data-mode=dark]) .talos-tabs__tab,:host-context(.dark) .talos-tabs__tab,:host-context(.dark-theme) .talos-tabs__tab{color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context([data-mode=dark]) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark-theme) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]) .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark) .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme) .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #3b82f6)}:host-context([data-theme=dark]) .talos-tabs__badge,:host-context([data-mode=dark]) .talos-tabs__badge,:host-context(.dark) .talos-tabs__badge,:host-context(.dark-theme) .talos-tabs__badge{background-color:#ffffff14;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__badge.talos-tabs__badge--active,:host-context([data-mode=dark]) .talos-tabs__badge.talos-tabs__badge--active,:host-context(.dark) .talos-tabs__badge.talos-tabs__badge--active,:host-context(.dark-theme) .talos-tabs__badge.talos-tabs__badge--active{background-color:#3b82f633;color:#93c5fd}:host-context([data-theme=dark]) .talos-tabs__close,:host-context([data-mode=dark]) .talos-tabs__close,:host-context(.dark) .talos-tabs__close,:host-context(.dark-theme) .talos-tabs__close{color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__close:hover,:host-context([data-mode=dark]) .talos-tabs__close:hover,:host-context(.dark) .talos-tabs__close:hover,:host-context(.dark-theme) .talos-tabs__close:hover{background-color:#ffffff1f;color:var(--talos-error-color, #f87171)}:host-context([data-theme=dark]) .talos-tabs__add,:host-context([data-mode=dark]) .talos-tabs__add,:host-context(.dark) .talos-tabs__add,:host-context(.dark-theme) .talos-tabs__add{border-color:#ffffff26;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__add:hover,:host-context([data-mode=dark]) .talos-tabs__add:hover,:host-context(.dark) .talos-tabs__add:hover,:host-context(.dark-theme) .talos-tabs__add:hover{color:var(--talos-primary-color, #3b82f6);border-color:var(--talos-primary-color, #3b82f6);background-color:#3b82f61f}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header,:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header,:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header{border-bottom-color:var(--talos-border-color, rgba(255, 255, 255, .1))}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab,:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab,:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab{border-color:transparent;border-bottom-color:var(--talos-border-color, rgba(255, 255, 255, .1));background-color:#ffffff09;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff16;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));border-color:var(--talos-border-color, rgba(255, 255, 255, .12));border-bottom-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));color:var(--talos-primary-color, #3b82f6)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__header,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__header,:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__header,:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__header{border-right-color:var(--talos-border-color, rgba(255, 255, 255, .1))}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab,:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab,:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab{border-color:transparent;border-right-color:var(--talos-border-color, rgba(255, 255, 255, .1));background-color:#ffffff09;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff16;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));border-color:var(--talos-border-color, rgba(255, 255, 255, .12));border-right-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));color:var(--talos-primary-color, #3b82f6)}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__header,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__header,:host-context(.dark).talos-tabs--segmented .talos-tabs__header,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__header{background-color:#ffffff0f;border-color:#ffffff14}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__indicator--segmented,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__indicator--segmented,:host-context(.dark).talos-tabs--segmented .talos-tabs__indicator--segmented,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__indicator--segmented{background-color:var(--talos-card-bg, #1e293b);box-shadow:0 1px 3px #0000004d}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__tab,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__tab,:host-context(.dark).talos-tabs--segmented .talos-tabs__tab,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__tab{color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-text-primary, #f8fafc);background-color:var(--talos-card-bg, #1e293b)}:host-context([data-theme=dark]).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context([data-mode=dark]).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark-theme).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){background-color:#ffffff14;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active{background-color:#3b82f629;color:var(--talos-primary-color, #60a5fa)}:host-context([data-theme=dark]).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff0d;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff14;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-tabs__data-content,:host-context([data-mode=dark]) .talos-tabs__data-content,:host-context(.dark) .talos-tabs__data-content,:host-context(.dark-theme) .talos-tabs__data-content{color:var(--talos-text-secondary, #cbd5e1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-tabs, [talosTabs]', imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        LucideX,
+                        LucidePlus
+                    ], host: {
+                        'class': 'talos-tabs',
+                        '[class.talos-tabs--horizontal]': 'orientation() === "horizontal"',
+                        '[class.talos-tabs--vertical]': 'orientation() === "vertical"',
+                        '[class.talos-tabs--line]': 'variant() === "line"',
+                        '[class.talos-tabs--pills]': 'variant() === "pills"',
+                        '[class.talos-tabs--card]': 'variant() === "card"',
+                        '[class.talos-tabs--segmented]': 'variant() === "segmented"',
+                        '[class.talos-tabs--subtle]': 'variant() === "subtle"',
+                        '[class.talos-tabs--xs]': 'size() === "xs"',
+                        '[class.talos-tabs--sm]': 'size() === "sm"',
+                        '[class.talos-tabs--md]': 'size() === "md"',
+                        '[class.talos-tabs--lg]': 'size() === "lg"',
+                        '[class.talos-tabs--align-center]': 'align() === "center"',
+                        '[class.talos-tabs--align-end]': 'align() === "end"',
+                        '[class.talos-tabs--stretched]': 'stretched() || align() === "stretch"',
+                        '[class.talos-tabs--animated]': 'animated()'
+                    }, template: "<div\n  class=\"talos-tabs__header\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div class=\"talos-tabs__nav\" #navContainer>\n    @for (tab of tabHeaders(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"talos-tabs__tab\"\n        role=\"tab\"\n        [id]=\"tab.headerId\"\n        [attr.aria-controls]=\"tab.panelId\"\n        [attr.aria-selected]=\"selectedIndex() === i\"\n        [attr.aria-disabled]=\"tab.disabled ? 'true' : null\"\n        [attr.tabindex]=\"selectedIndex() === i ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        [class.talos-tabs__tab--active]=\"selectedIndex() === i\"\n        [class.talos-tabs__tab--disabled]=\"tab.disabled\"\n        (click)=\"selectTab(i, tab)\"\n        (keydown)=\"onKeydown($event, i, tab)\"\n      >\n        <!-- Icon -->\n        @if (tab.icon) {\n          <span class=\"talos-tabs__tab-icon\" aria-hidden=\"true\">\n            <ng-container [ngComponentOutlet]=\"tab.icon\" />\n          </span>\n        }\n\n        <!-- Custom Label Template or Text -->\n        @if (tab.customLabel) {\n          <span class=\"talos-tabs__tab-label\">\n            <ng-container [ngTemplateOutlet]=\"tab.customLabel.templateRef\" />\n          </span>\n        } @else if (tab.labelTemplate) {\n          <span class=\"talos-tabs__tab-label\">\n            <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n          </span>\n        } @else {\n          <span class=\"talos-tabs__tab-label\">{{ tab.label }}</span>\n        }\n\n        <!-- Badge -->\n        @if (tab.badge !== undefined && tab.badge !== null && tab.badge !== '') {\n          <span class=\"talos-tabs__badge\" [class.talos-tabs__badge--active]=\"selectedIndex() === i\">\n            {{ tab.badge }}\n          </span>\n        }\n\n        <!-- Close Button -->\n        @if (isClosable(tab)) {\n          <span\n            role=\"button\"\n            class=\"talos-tabs__close\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"'Close ' + tab.label + ' tab'\"\n            (click)=\"closeTab($event, i, tab)\"\n            (keydown.enter)=\"closeTab($event, i, tab)\"\n            (keydown.space)=\"closeTab($event, i, tab)\"\n          >\n            <svg lucideX [size]=\"12\"></svg>\n          </span>\n        }\n      </button>\n    }\n\n    <!-- Sliding Ink-Bar Indicator (for line and segmented variants) -->\n    @if (hasIndicator()) {\n      @if (variant() === 'line') {\n        @if (orientation() === 'horizontal') {\n          <div\n            class=\"talos-tabs__indicator talos-tabs__indicator--line-h\"\n            [style.left.px]=\"indicatorLeft()\"\n            [style.width.px]=\"indicatorWidth()\"\n          ></div>\n        } @else {\n          <div\n            class=\"talos-tabs__indicator talos-tabs__indicator--line-v\"\n            [style.top.px]=\"indicatorTop()\"\n            [style.height.px]=\"indicatorHeight()\"\n          ></div>\n        }\n      } @else if (variant() === 'segmented') {\n        <div\n          class=\"talos-tabs__indicator talos-tabs__indicator--segmented\"\n          [style.left.px]=\"indicatorLeft()\"\n          [style.top.px]=\"indicatorTop()\"\n          [style.width.px]=\"indicatorWidth()\"\n          [style.height.px]=\"indicatorHeight()\"\n        ></div>\n      }\n    }\n\n    <!-- Add Tab Button -->\n    @if (addable()) {\n      <button\n        type=\"button\"\n        class=\"talos-tabs__add\"\n        aria-label=\"Add new tab\"\n        (click)=\"addTab()\"\n      >\n        <svg lucidePlus [size]=\"14\"></svg>\n      </button>\n    }\n  </div>\n</div>\n\n<!-- Tab Panels Container -->\n<div class=\"talos-tabs__content\">\n  @if (items() && items()!.length > 0) {\n    <!-- Data-driven Panels -->\n    @for (item of items()!; track item.id; let i = $index) {\n      <div\n        class=\"talos-tab-panel\"\n        role=\"tabpanel\"\n        [id]=\"getDataPanelId(item)\"\n        [attr.aria-labelledby]=\"getDataHeaderId(item)\"\n        [hidden]=\"selectedIndex() !== i\"\n        [class.talos-tab-panel--active]=\"selectedIndex() === i\"\n        [attr.tabindex]=\"selectedIndex() === i ? 0 : -1\"\n      >\n        @if (selectedIndex() === i) {\n          @if (item.template) {\n            <ng-container [ngTemplateOutlet]=\"item.template\" />\n          } @else if (item.content) {\n            <div class=\"talos-tabs__data-content\">{{ item.content }}</div>\n          }\n        }\n      </div>\n    }\n  } @else {\n    <!-- Declarative Projected Panels (<talos-tab>) -->\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit)}:host.talos-tabs--horizontal{flex-direction:column}:host.talos-tabs--horizontal .talos-tabs__header{width:100%}:host.talos-tabs--horizontal .talos-tabs__nav{flex-direction:row;align-items:center}:host.talos-tabs--vertical{flex-direction:row;gap:1.5rem}:host.talos-tabs--vertical .talos-tabs__header{flex-shrink:0;min-width:180px;max-width:240px;align-items:stretch}:host.talos-tabs--vertical .talos-tabs__nav{flex-direction:column;align-items:stretch;width:100%;gap:.25rem}:host.talos-tabs--vertical .talos-tabs__tab{justify-content:flex-start!important;text-align:left;width:100%;padding-left:.875rem;padding-right:.875rem}:host.talos-tabs--vertical .talos-tabs__tab .talos-tabs__tab-label{flex:1 1 auto;justify-content:flex-start;text-align:left}:host.talos-tabs--vertical .talos-tabs__tab .talos-tabs__badge{margin-left:auto}:host.talos-tabs--vertical .talos-tabs__content{flex:1;min-width:0;padding-top:0}.talos-tabs__header{position:relative;display:flex;align-items:center;box-sizing:border-box}.talos-tabs__nav{position:relative;display:flex;box-sizing:border-box;list-style:none;margin:0;padding:0}:host(.talos-tabs--horizontal.talos-tabs--align-center) .talos-tabs__header{justify-content:center}:host(.talos-tabs--horizontal.talos-tabs--align-end) .talos-tabs__header{justify-content:flex-end}:host(.talos-tabs--horizontal.talos-tabs--stretched) .talos-tabs__nav{width:100%}:host(.talos-tabs--horizontal.talos-tabs--stretched) .talos-tabs__tab{flex:1 1 0;justify-content:center}.talos-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:none;outline:none;cursor:pointer;white-space:nowrap;font-family:inherit;font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){color:var(--talos-text-primary, #0f172a)}.talos-tabs__tab:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-radius:var(--talos-radius-md, .375rem);z-index:2}.talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #2563eb);font-weight:var(--talos-font-weight-semibold, 600)}.talos-tabs__tab.talos-tabs__tab--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.talos-tabs__tab-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.talos-tabs__tab-label{display:inline-flex;align-items:center}.talos-tabs__badge{display:inline-flex;align-items:center;justify-content:center;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);line-height:1;padding:.125rem .375rem;border-radius:var(--talos-radius-full, 9999px);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .05));color:var(--talos-text-muted, #64748b);transition:background-color .2s ease,color .2s ease}.talos-tabs__badge.talos-tabs__badge--active{background-color:var(--talos-primary-light, rgba(37, 99, 235, .1));color:var(--talos-primary-color, #2563eb)}.talos-tabs__close{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;margin-left:.125rem;margin-right:-.25rem;border-radius:var(--talos-radius-sm, .25rem);color:var(--talos-text-muted, #64748b);cursor:pointer;transition:background-color .2s ease,color .2s ease}.talos-tabs__close:hover{background-color:#00000014;color:var(--talos-error-color, #ef4444)}.talos-tabs__close:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.talos-tabs__add{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px dashed var(--talos-border-color, #cbd5e1);color:var(--talos-text-muted, #64748b);cursor:pointer;border-radius:var(--talos-radius-md, .375rem);padding:.375rem;margin-left:.375rem;transition:color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1)}.talos-tabs__add:hover{color:var(--talos-primary-color, #2563eb);border-color:var(--talos-primary-color, #2563eb);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}.talos-tabs__add:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))}.talos-tabs__indicator{position:absolute;pointer-events:none}.talos-tabs__indicator--line-h{bottom:0;height:2px;background-color:var(--talos-primary-color, #2563eb);border-radius:2px 2px 0 0;z-index:2;transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1)}.talos-tabs__indicator--line-v{right:0;width:2px;background-color:var(--talos-primary-color, #2563eb);border-radius:2px 0 0 2px;z-index:2;transition:top .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1)}.talos-tabs__indicator--segmented{background-color:var(--talos-card-bg, #ffffff);border-radius:var(--talos-radius-md, .375rem);box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .06));z-index:0;transition:left .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1)}:host(.talos-tabs--xs) .talos-tabs__tab{font-size:var(--talos-font-size-xs, .75rem);padding:.25rem .625rem;min-height:var(--talos-height-xs, 1.625rem)}:host(.talos-tabs--sm) .talos-tabs__tab{font-size:var(--talos-font-size-sm, .8125rem);padding:.375rem .875rem;min-height:var(--talos-height-sm, 2rem)}:host(.talos-tabs--md) .talos-tabs__tab{font-size:var(--talos-font-size-base, .875rem);padding:.5rem 1.125rem;min-height:var(--talos-height-md, 2.25rem)}:host(.talos-tabs--lg) .talos-tabs__tab{font-size:var(--talos-font-size-lg, 1rem);padding:.625rem 1.375rem;min-height:var(--talos-height-lg, 2.625rem)}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__header{border-bottom:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__tab{background:transparent;border-radius:var(--talos-radius-md, .375rem) var(--talos-radius-md, .375rem) 0 0}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}:host(.talos-tabs--line).talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #2563eb);background:transparent}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__header{border-right:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__tab{background:transparent;border-radius:var(--talos-radius-md, .375rem) 0 0 var(--talos-radius-md, .375rem)}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}:host(.talos-tabs--line).talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-light, rgba(37, 99, 235, .05))}:host(.talos-tabs--pills) .talos-tabs__nav{gap:.375rem}:host(.talos-tabs--pills) .talos-tabs__tab{border-radius:var(--talos-radius-full, 9999px)}:host(.talos-tabs--pills) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .05))}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-primary-color, #2563eb);color:var(--talos-text-inverse, #ffffff)}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active .talos-tabs__badge{background-color:#ffffff40;color:#fff}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active .talos-tabs__close{color:#fffc}:host(.talos-tabs--pills) .talos-tabs__tab.talos-tabs__tab--active .talos-tabs__close:hover{background-color:#fff3;color:#fff}:host(.talos-tabs--pills).talos-tabs--vertical .talos-tabs__tab{border-radius:var(--talos-radius-md, .375rem)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__header{border-bottom:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__nav{gap:.25rem;margin-bottom:-1px}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__tab{border:1px solid transparent;border-bottom:1px solid var(--talos-border-color, #e2e8f0);border-top-left-radius:var(--talos-radius-md, .375rem);border-top-right-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-card-tab-inactive-bg, rgba(0, 0, 0, .03));color:var(--talos-text-muted, #64748b)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:var(--talos-card-tab-hover-bg, rgba(0, 0, 0, .06));color:var(--talos-text-primary, #0f172a)}:host(.talos-tabs--card).talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));border-color:var(--talos-border-color, #e2e8f0);border-bottom-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-primary-color, #2563eb)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__header{border-right:1px solid var(--talos-border-color, #e2e8f0)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__nav{gap:.25rem;margin-right:-1px}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__tab{border:1px solid transparent;border-right:1px solid var(--talos-border-color, #e2e8f0);border-top-left-radius:var(--talos-radius-md, .375rem);border-bottom-left-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-card-tab-inactive-bg, rgba(0, 0, 0, .03));color:var(--talos-text-muted, #64748b)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:var(--talos-card-tab-hover-bg, rgba(0, 0, 0, .06));color:var(--talos-text-primary, #0f172a)}:host(.talos-tabs--card).talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));border-color:var(--talos-border-color, #e2e8f0);border-right-color:var(--talos-card-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-primary-color, #2563eb)}:host(.talos-tabs--segmented) .talos-tabs__header{background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04));border-radius:var(--talos-radius-lg, .5rem);padding:3px;display:inline-flex;border:1px solid var(--talos-border-subtle, #e2e8f0)}:host(.talos-tabs--segmented) .talos-tabs__nav{position:relative;width:100%}:host(.talos-tabs--segmented) .talos-tabs__tab{border-radius:var(--talos-radius-md, .375rem);transition:color .2s ease}:host(.talos-tabs--segmented) .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-text-primary, #0f172a);background-color:var(--talos-card-bg, #ffffff);box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}:host(.talos-tabs--segmented).talos-tabs--vertical .talos-tabs__header{display:flex;flex-direction:column}:host(.talos-tabs--subtle) .talos-tabs__tab{border-radius:var(--talos-radius-md, .375rem)}:host(.talos-tabs--subtle) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}:host(.talos-tabs--subtle) .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-primary-light, rgba(37, 99, 235, .06));color:var(--talos-primary-color, #2563eb)}.talos-tabs__content{box-sizing:border-box;width:100%;padding-top:1rem}:host(.talos-tabs--vertical) .talos-tabs__content{padding-top:0}.talos-tabs__data-content{line-height:var(--talos-line-height-normal, 1.5);color:var(--talos-text-secondary, #334155)}:host-context([data-theme=dark]),:host-context([data-mode=dark]),:host-context(.dark),:host-context(.dark-theme){color:var(--talos-text-color, var(--talos-text-primary, #f8fafc))}:host-context([data-theme=dark]) .talos-tabs__tab,:host-context([data-mode=dark]) .talos-tabs__tab,:host-context(.dark) .talos-tabs__tab,:host-context(.dark-theme) .talos-tabs__tab{color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context([data-mode=dark]) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark-theme) .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]) .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark) .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme) .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-primary-color, #3b82f6)}:host-context([data-theme=dark]) .talos-tabs__badge,:host-context([data-mode=dark]) .talos-tabs__badge,:host-context(.dark) .talos-tabs__badge,:host-context(.dark-theme) .talos-tabs__badge{background-color:#ffffff14;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__badge.talos-tabs__badge--active,:host-context([data-mode=dark]) .talos-tabs__badge.talos-tabs__badge--active,:host-context(.dark) .talos-tabs__badge.talos-tabs__badge--active,:host-context(.dark-theme) .talos-tabs__badge.talos-tabs__badge--active{background-color:#3b82f633;color:#93c5fd}:host-context([data-theme=dark]) .talos-tabs__close,:host-context([data-mode=dark]) .talos-tabs__close,:host-context(.dark) .talos-tabs__close,:host-context(.dark-theme) .talos-tabs__close{color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__close:hover,:host-context([data-mode=dark]) .talos-tabs__close:hover,:host-context(.dark) .talos-tabs__close:hover,:host-context(.dark-theme) .talos-tabs__close:hover{background-color:#ffffff1f;color:var(--talos-error-color, #f87171)}:host-context([data-theme=dark]) .talos-tabs__add,:host-context([data-mode=dark]) .talos-tabs__add,:host-context(.dark) .talos-tabs__add,:host-context(.dark-theme) .talos-tabs__add{border-color:#ffffff26;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-tabs__add:hover,:host-context([data-mode=dark]) .talos-tabs__add:hover,:host-context(.dark) .talos-tabs__add:hover,:host-context(.dark-theme) .talos-tabs__add:hover{color:var(--talos-primary-color, #3b82f6);border-color:var(--talos-primary-color, #3b82f6);background-color:#3b82f61f}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header,:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header,:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__header{border-bottom-color:var(--talos-border-color, rgba(255, 255, 255, .1))}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab,:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab,:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab{border-color:transparent;border-bottom-color:var(--talos-border-color, rgba(255, 255, 255, .1));background-color:#ffffff09;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff16;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--card.talos-tabs--horizontal .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));border-color:var(--talos-border-color, rgba(255, 255, 255, .12));border-bottom-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));color:var(--talos-primary-color, #3b82f6)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__header,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__header,:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__header,:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__header{border-right-color:var(--talos-border-color, rgba(255, 255, 255, .1))}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab,:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab,:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab{border-color:transparent;border-right-color:var(--talos-border-color, rgba(255, 255, 255, .1));background-color:#ffffff09;color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff16;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--card.talos-tabs--vertical .talos-tabs__tab.talos-tabs__tab--active{background-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));border-color:var(--talos-border-color, rgba(255, 255, 255, .12));border-right-color:var(--talos-card-bg, var(--talos-bg-surface, #0f172a));color:var(--talos-primary-color, #3b82f6)}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__header,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__header,:host-context(.dark).talos-tabs--segmented .talos-tabs__header,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__header{background-color:#ffffff0f;border-color:#ffffff14}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__indicator--segmented,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__indicator--segmented,:host-context(.dark).talos-tabs--segmented .talos-tabs__indicator--segmented,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__indicator--segmented{background-color:var(--talos-card-bg, #1e293b);box-shadow:0 1px 3px #0000004d}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__tab,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__tab,:host-context(.dark).talos-tabs--segmented .talos-tabs__tab,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__tab{color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--segmented .talos-tabs__tab.talos-tabs__tab--active{color:var(--talos-text-primary, #f8fafc);background-color:var(--talos-card-bg, #1e293b)}:host-context([data-theme=dark]).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context([data-mode=dark]).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled),:host-context(.dark-theme).talos-tabs--subtle .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled){background-color:#ffffff14;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active,:host-context([data-mode=dark]).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active,:host-context(.dark-theme).talos-tabs--subtle .talos-tabs__tab.talos-tabs__tab--active{background-color:#3b82f629;color:var(--talos-primary-color, #60a5fa)}:host-context([data-theme=dark]).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--line .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff0d;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context([data-mode=dark]).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active),:host-context(.dark-theme).talos-tabs--pills .talos-tabs__tab:hover:not(.talos-tabs__tab--disabled):not(.talos-tabs__tab--active){background-color:#ffffff14;color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-tabs__data-content,:host-context([data-mode=dark]) .talos-tabs__data-content,:host-context(.dark) .talos-tabs__data-content,:host-context(.dark-theme) .talos-tabs__data-content{color:var(--talos-text-secondary, #cbd5e1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], addable: [{ type: i0.Input, args: [{ isSignal: true, alias: "addable", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], stretched: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretched", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabAdd: [{ type: i0.Output, args: ["tabAdd"] }], projectedTabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TalosTabComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], navContainer: [{ type: i0.ViewChild, args: ['navContainer', { isSignal: true }] }] } });
+
+const TABS_DECLARATIONS = [
+    TalosTabsComponent,
+    TalosTabComponent,
+    TalosTabLabelDirective,
+    TalosTabContentDirective
+];
+class TalosTabsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosTabsModule, imports: [TalosTabsComponent,
+            TalosTabComponent,
+            TalosTabLabelDirective,
+            TalosTabContentDirective], exports: [TalosTabsComponent,
+            TalosTabComponent,
+            TalosTabLabelDirective,
+            TalosTabContentDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabsModule, imports: [TalosTabsComponent,
+            TalosTabComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...TABS_DECLARATIONS],
+                    exports: [...TABS_DECLARATIONS]
+                }]
+        }] });
+
+let nextStepUniqueId = 0;
+/**
+ * An individual step container component to be declared inside `<talos-stepper>`.
+ */
+class TalosStepComponent {
+    defaultUniqueId = `talos-step-${nextStepUniqueId++}`;
+    /**
+     * Title text for the step header.
+     */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional secondary description or helper text.
+     */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /**
+     * Unique identifier for this step. If omitted, an auto-generated ID is assigned.
+     */
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional icon component to display within the step indicator.
+     */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this step is optional (displays an "(Optional)" subtitle indicator).
+     */
+    optional = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this step is disabled and cannot be navigated to.
+     */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit completed flag. If undefined, completion is inferred automatically in sequential progression.
+     */
+    completed = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this step is in an error state.
+     */
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /**
+     * Contextual error message to display when step validation fails.
+     */
+    errorMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit semantic state override ('pending' | 'active' | 'completed' | 'error' | 'warning').
+     */
+    state = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible description for screen readers (aria-label).
+     */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom label template projected with `*talosStepLabel`.
+     */
+    customLabel = contentChild(TalosStepLabelDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom icon template projected with `*talosStepIcon`.
+     */
+    customIcon = contentChild(TalosStepIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Lazy-loaded panel content projected with `*talosStepContent`.
+     */
+    lazyContent = contentChild(TalosStepContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Root template ref for declarative step projection.
+     */
+    stepContentTemplate = viewChild('stepTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepContentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal selection state controlled by the parent `<talos-stepper>`.
+     */
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this step has been active at least once (used for lazy-loading retention).
+     */
+    hasBeenActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasBeenActive" }] : /* istanbul ignore next */ []));
+    /**
+     * The effective unique key for this step.
+     */
+    key = computed(() => {
+        const customId = this.id();
+        return customId !== '' && customId !== null && customId !== undefined
+            ? customId
+            : this.defaultUniqueId;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    /**
+     * The HTML element ID of the step panel.
+     */
+    panelId = computed(() => `${this.key()}-panel`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    /**
+     * The HTML element ID of the step header button.
+     */
+    headerId = computed(() => `${this.key()}-header`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
+    /**
+     * Updates active state and marks the step as having been visited.
+     */
+    setActive(isActive) {
+        this.active.set(isActive);
+        if (isActive) {
+            this.hasBeenActive.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosStepComponent, isStandalone: true, selector: "talos-step, [talosStep]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.aria-labelledby": "headerId()", "attr.tabindex": "active() ? 0 : -1", "attr.aria-hidden": "!active()", "class.talos-step-panel--active": "active()", "hidden": "!active()" }, classAttribute: "talos-step-panel" }, queries: [{ propertyName: "customLabel", first: true, predicate: TalosStepLabelDirective, descendants: true, isSignal: true }, { propertyName: "customIcon", first: true, predicate: TalosStepIconDirective, descendants: true, isSignal: true }, { propertyName: "lazyContent", first: true, predicate: TalosStepContentDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "stepContentTemplate", first: true, predicate: ["stepTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lazyContent(); as lazy) {\n  @if (hasBeenActive()) {\n    <ng-container *ngTemplateOutlet=\"lazy.templateRef\" />\n  }\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:block;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit)}:host[hidden]{display:none!important}:host.talos-step-panel--active{animation:talos-step-fade-in .2s cubic-bezier(.4,0,.2,1)}@keyframes talos-step-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-step, [talosStep]', imports: [CommonModule], host: {
+                        'class': 'talos-step-panel',
+                        'role': 'tabpanel',
+                        '[attr.id]': 'panelId()',
+                        '[attr.aria-labelledby]': 'headerId()',
+                        '[attr.tabindex]': 'active() ? 0 : -1',
+                        '[attr.aria-hidden]': '!active()',
+                        '[class.talos-step-panel--active]': 'active()',
+                        '[hidden]': '!active()'
+                    }, template: "@if (lazyContent(); as lazy) {\n  @if (hasBeenActive()) {\n    <ng-container *ngTemplateOutlet=\"lazy.templateRef\" />\n  }\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:block;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit)}:host[hidden]{display:none!important}:host.talos-step-panel--active{animation:talos-step-fade-in .2s cubic-bezier(.4,0,.2,1)}@keyframes talos-step-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], customLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosStepLabelDirective), { isSignal: true }] }], customIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosStepIconDirective), { isSignal: true }] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalosStepContentDirective), { isSignal: true }] }], stepContentTemplate: [{ type: i0.ViewChild, args: ['stepTemplate', { isSignal: true }] }] } });
+
+class TalosStepperComponent {
+    /**
+     * The index of the currently active step (two-way bindable via `[(selectedIndex)]`).
+     */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * The unique ID of the currently active step (two-way bindable via `[(activeId)]`).
+     */
+    activeId = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /**
+     * Layout orientation of the stepper.
+     * @default 'horizontal'
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual variant presentation style.
+     * @default 'default'
+     */
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Sizing scale of the step indicator buttons and labels.
+     * @default 'md'
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Label position relative to step indicator in horizontal mode.
+     * @default 'end'
+     */
+    labelPosition = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether strict linear step progression is enforced (disallows skipping uncompleted steps).
+     * @default false
+     */
+    linear = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether steps can be clicked to navigate directly.
+     * @default true
+     */
+    clickable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to animate panel transitions.
+     * @default true
+     */
+    animated = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    /**
+     * Data items for data-driven stepper configuration.
+     */
+    steps = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted whenever the active step changes.
+     */
+    stepChange = output();
+    /**
+     * Emitted when reaching and finishing the final step.
+     */
+    stepperFinished = output();
+    /**
+     * Projected child steps in declarative mode.
+     */
+    childSteps = contentChildren(TalosStepComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childSteps" }] : /* istanbul ignore next */ []));
+    /**
+     * Header button elements for keyboard focus navigation.
+     */
+    stepButtons = viewChildren('stepButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepButtons" }] : /* istanbul ignore next */ []));
+    /**
+     * Unified normalized step items combining both declarative `<talos-step>` components and `steps()` input data.
+     */
+    normalizedSteps = computed(() => {
+        const dataItems = this.steps();
+        const children = this.childSteps();
+        const activeIdx = this.selectedIndex();
+        if (dataItems && dataItems.length > 0) {
+            return dataItems.map((item, index) => {
+                const id = item.id !== undefined && item.id !== '' ? item.id : `talos-step-data-${index}`;
+                const headerId = `talos-step-header-${id}`;
+                const panelId = `talos-step-panel-${id}`;
+                const isCompleted = item.completed ?? index < activeIdx;
+                const hasErr = item.hasError ?? false;
+                let state;
+                if (item.state) {
+                    state = item.state;
+                }
+                else if (hasErr) {
+                    state = 'error';
+                }
+                else if (index === activeIdx) {
+                    state = 'active';
+                }
+                else if (isCompleted) {
+                    state = 'completed';
+                }
+                else {
+                    state = 'pending';
+                }
+                return {
+                    index,
+                    id,
+                    label: item.label,
+                    description: item.description,
+                    headerId,
+                    panelId,
+                    icon: item.icon ?? null,
+                    optional: item.optional ?? false,
+                    disabled: item.disabled ?? false,
+                    completed: isCompleted,
+                    hasError: hasErr,
+                    errorMessage: item.errorMessage,
+                    state,
+                    ariaLabel: item.ariaLabel,
+                    customLabel: null,
+                    labelTemplate: item.labelTemplate ?? null,
+                    customIcon: null,
+                    iconTemplate: item.iconTemplate ?? null,
+                    contentTemplate: item.template ?? null,
+                    contentString: item.content,
+                    source: item
+                };
+            });
+        }
+        return children.map((step, index) => {
+            const isCompleted = step.completed() ?? index < activeIdx;
+            const hasErr = step.hasError();
+            let state;
+            if (step.state()) {
+                state = step.state();
+            }
+            else if (hasErr) {
+                state = 'error';
+            }
+            else if (index === activeIdx) {
+                state = 'active';
+            }
+            else if (isCompleted) {
+                state = 'completed';
+            }
+            else {
+                state = 'pending';
+            }
+            return {
+                index,
+                id: step.key(),
+                label: step.label(),
+                description: step.description(),
+                headerId: step.headerId(),
+                panelId: step.panelId(),
+                icon: step.icon(),
+                optional: step.optional(),
+                disabled: step.disabled(),
+                completed: isCompleted,
+                hasError: hasErr,
+                errorMessage: step.errorMessage(),
+                state,
+                ariaLabel: step.ariaLabel(),
+                customLabel: step.customLabel(),
+                labelTemplate: null,
+                customIcon: step.customIcon(),
+                iconTemplate: null,
+                contentTemplate: null,
+                contentString: undefined,
+                source: step
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedSteps" }] : /* istanbul ignore next */ []));
+    /**
+     * Total number of steps available.
+     */
+    totalSteps = computed(() => this.normalizedSteps().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the stepper is currently at the first step.
+     */
+    isFirst = computed(() => this.selectedIndex() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the stepper is currently at the last step.
+     */
+    isLast = computed(() => {
+        const total = this.totalSteps();
+        return total > 0 && this.selectedIndex() >= total - 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    /**
+     * Progress percentage through the steps (0 to 100).
+     */
+    progressPercent = computed(() => {
+        const total = this.totalSteps();
+        if (total <= 1)
+            return 100;
+        const current = Math.min(Math.max(this.selectedIndex(), 0), total - 1);
+        return Math.round((current / (total - 1)) * 100);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []));
+    /**
+     * Currently active normalized step item.
+     */
+    currentStep = computed(() => {
+        const steps = this.normalizedSteps();
+        const idx = this.selectedIndex();
+        return steps[idx] ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether declarative children mode is active.
+     */
+    isDeclarative = computed(() => this.steps().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDeclarative" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep child components synced with selected index and active ID
+        effect(() => {
+            const idx = this.selectedIndex();
+            const steps = this.normalizedSteps();
+            const children = this.childSteps();
+            if (children.length > 0) {
+                children.forEach((child, i) => {
+                    child.setActive(i === idx);
+                });
+            }
+            if (steps[idx] && this.activeId() !== steps[idx].id) {
+                this.activeId.set(steps[idx].id);
+            }
+        });
+        // Synchronize selection if activeId is modified externally
+        effect(() => {
+            const targetId = this.activeId();
+            if (targetId === null || targetId === undefined)
+                return;
+            const steps = this.normalizedSteps();
+            const matchedIdx = steps.findIndex(s => s.id === targetId);
+            if (matchedIdx !== -1 && matchedIdx !== this.selectedIndex()) {
+                this.selectStep(matchedIdx, false);
+            }
+        });
+    }
+    /**
+     * Selects a specific step index if allowed by validation and disabled rules.
+     */
+    selectStep(index, emitEvent = true) {
+        const steps = this.normalizedSteps();
+        if (index < 0 || index >= steps.length) {
+            return false;
+        }
+        const targetStep = steps[index];
+        if (targetStep.disabled) {
+            return false;
+        }
+        const currentIdx = this.selectedIndex();
+        // Enforce linear progression when navigating forward
+        if (this.linear() && index > currentIdx) {
+            if (steps[currentIdx].hasError) {
+                return false;
+            }
+            // If jumping ahead by more than 1 step, current step and intermediate steps must be completed
+            if (index > currentIdx + 1) {
+                for (let i = currentIdx; i < index; i++) {
+                    if (!steps[i].completed) {
+                        return false;
+                    }
+                }
+            }
+        }
+        const previousIdx = currentIdx;
+        this.selectedIndex.set(index);
+        this.activeId.set(targetStep.id);
+        if (this.isDeclarative()) {
+            this.childSteps().forEach((child, i) => {
+                child.setActive(i === index);
+            });
+        }
+        if (emitEvent) {
+            this.stepChange.emit({
+                index,
+                previousIndex: previousIdx,
+                id: targetStep.id,
+                step: targetStep.source
+            });
+        }
+        return true;
+    }
+    /**
+     * Advances to the next step. If currently at the last step, emits `stepperFinished`.
+     */
+    next() {
+        if (this.isLast()) {
+            this.stepperFinished.emit({
+                stepsCount: this.totalSteps(),
+                completed: true
+            });
+            return false;
+        }
+        return this.selectStep(this.selectedIndex() + 1);
+    }
+    /**
+     * Returns to the preceding step.
+     */
+    previous() {
+        if (this.isFirst()) {
+            return false;
+        }
+        return this.selectStep(this.selectedIndex() - 1);
+    }
+    /**
+     * Jumps to a designated step index.
+     */
+    goTo(index) {
+        return this.selectStep(index);
+    }
+    /**
+     * Resets the stepper back to step index 0.
+     */
+    reset() {
+        return this.selectStep(0);
+    }
+    /**
+     * Click handler for step header indicator buttons.
+     */
+    onStepHeaderClick(index) {
+        if (!this.clickable()) {
+            return;
+        }
+        this.selectStep(index);
+    }
+    /**
+     * Keyboard navigation across step header buttons.
+     */
+    onKeydown(event, index) {
+        const isHorizontal = this.orientation() === 'horizontal';
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        const buttons = this.stepButtons();
+        let targetIndex = null;
+        switch (event.key) {
+            case nextKey:
+                targetIndex = this.findNextFocusableIndex(index, 1);
+                break;
+            case prevKey:
+                targetIndex = this.findNextFocusableIndex(index, -1);
+                break;
+            case 'Home':
+                targetIndex = this.findNextFocusableIndex(-1, 1);
+                break;
+            case 'End':
+                targetIndex = this.findNextFocusableIndex(this.totalSteps(), -1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.onStepHeaderClick(index);
+                return;
+            default:
+                return;
+        }
+        if (targetIndex !== null && targetIndex !== -1) {
+            event.preventDefault();
+            buttons[targetIndex]?.nativeElement?.focus();
+            if (this.clickable()) {
+                this.selectStep(targetIndex);
+            }
+        }
+    }
+    findNextFocusableIndex(current, direction) {
+        const steps = this.normalizedSteps();
+        const total = steps.length;
+        let idx = current + direction;
+        while (idx >= 0 && idx < total) {
+            if (!steps[idx].disabled) {
+                if (!this.linear() || idx <= this.selectedIndex() + 1) {
+                    return idx;
+                }
+            }
+            idx += direction;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosStepperComponent, isStandalone: true, selector: "talos-stepper, [talosStepper]", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", activeId: "activeIdChange", stepChange: "stepChange", stepperFinished: "stepperFinished" }, host: { properties: { "class.talos-stepper--horizontal": "orientation() === \"horizontal\"", "class.talos-stepper--vertical": "orientation() === \"vertical\"", "class.talos-stepper--default": "variant() === \"default\" || variant() === \"circles\"", "class.talos-stepper--circles": "variant() === \"default\" || variant() === \"circles\"", "class.talos-stepper--progress": "variant() === \"progress\"", "class.talos-stepper--cards": "variant() === \"cards\"", "class.talos-stepper--sm": "size() === \"sm\"", "class.talos-stepper--md": "size() === \"md\"", "class.talos-stepper--lg": "size() === \"lg\"", "class.talos-stepper--label-bottom": "orientation() === \"horizontal\" && labelPosition() === \"bottom\"", "class.talos-stepper--label-end": "orientation() === \"vertical\" || labelPosition() === \"end\"", "class.talos-stepper--linear": "linear()", "class.talos-stepper--animated": "animated()" }, classAttribute: "talos-stepper" }, queries: [{ propertyName: "childSteps", predicate: TalosStepComponent, isSignal: true }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav class=\"talos-stepper__header\" aria-label=\"Progress\">\n  @if (variant() === 'progress') {\n    <!-- Compact Progress Bar Header -->\n    <div class=\"talos-stepper__progress-header\">\n      <div class=\"talos-stepper__progress-meta\">\n        <span class=\"talos-stepper__progress-step-counter\">\n          Step {{ selectedIndex() + 1 }} of {{ totalSteps() }}\n        </span>\n        @if (currentStep(); as curr) {\n          <span class=\"talos-stepper__progress-current-title\">{{ curr.label }}</span>\n        }\n        <span class=\"talos-stepper__progress-percent\">{{ progressPercent() }}%</span>\n      </div>\n      <div class=\"talos-stepper__progress-track\" role=\"progressbar\" [attr.aria-valuenow]=\"progressPercent()\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n        <div class=\"talos-stepper__progress-fill\" [style.width.%]=\"progressPercent()\"></div>\n      </div>\n    </div>\n  }\n\n  <ol class=\"talos-stepper__list\" role=\"list\">\n    @for (step of normalizedSteps(); track step.id; let idx = $index; let isLastStep = $last) {\n      <li\n        class=\"talos-stepper__item\"\n        [class.talos-stepper__item--active]=\"idx === selectedIndex()\"\n        [class.talos-stepper__item--completed]=\"step.state === 'completed'\"\n        [class.talos-stepper__item--error]=\"step.state === 'error'\"\n        [class.talos-stepper__item--warning]=\"step.state === 'warning'\"\n        [class.talos-stepper__item--pending]=\"step.state === 'pending'\"\n        [class.talos-stepper__item--disabled]=\"step.disabled\"\n        [class.talos-stepper__item--last]=\"isLastStep\"\n      >\n        <button\n          #stepButton\n          type=\"button\"\n          class=\"talos-stepper__step-btn\"\n          [id]=\"step.headerId\"\n          [attr.aria-controls]=\"step.panelId\"\n          [attr.aria-selected]=\"idx === selectedIndex()\"\n          [attr.aria-current]=\"idx === selectedIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled\"\n          [attr.aria-label]=\"step.ariaLabel || (step.label + (step.optional ? ' (Optional)' : ''))\"\n          [disabled]=\"step.disabled\"\n          (click)=\"onStepHeaderClick(idx)\"\n          (keydown)=\"onKeydown($event, idx)\"\n        >\n          <!-- Indicator Badge / Circle -->\n          <span class=\"talos-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.customIcon; as customIcon) {\n              <ng-container *ngTemplateOutlet=\"customIcon.templateRef\" />\n            } @else if (step.iconTemplate; as iconTpl) {\n              <ng-container *ngTemplateOutlet=\"iconTpl\" />\n            } @else if (step.state === 'completed') {\n              <svg lucideCheck class=\"talos-stepper__check-icon\" [size]=\"16\" [strokeWidth]=\"2.5\"></svg>\n            } @else if (step.state === 'error') {\n              <svg lucideAlertTriangle class=\"talos-stepper__error-icon\" [size]=\"15\" [strokeWidth]=\"2.5\"></svg>\n            } @else if (step.icon; as iconComp) {\n              <ng-container *ngComponentOutlet=\"iconComp\" />\n            } @else {\n              <span class=\"talos-stepper__step-number\">{{ idx + 1 }}</span>\n            }\n          </span>\n\n          <!-- Step Label & Description Block -->\n          <span class=\"talos-stepper__label-container\">\n            <span class=\"talos-stepper__title-row\">\n              <span class=\"talos-stepper__label\">\n                @if (step.customLabel; as customLabel) {\n                  <ng-container *ngTemplateOutlet=\"customLabel.templateRef\" />\n                } @else if (step.labelTemplate; as labelTpl) {\n                  <ng-container *ngTemplateOutlet=\"labelTpl\" />\n                } @else {\n                  {{ step.label }}\n                }\n              </span>\n\n              @if (step.optional) {\n                <span class=\"talos-stepper__optional-tag\">Optional</span>\n              }\n            </span>\n\n            @if (step.description) {\n              <span class=\"talos-stepper__description\">{{ step.description }}</span>\n            }\n\n            @if (step.hasError && step.errorMessage) {\n              <span class=\"talos-stepper__error-message\">{{ step.errorMessage }}</span>\n            }\n          </span>\n        </button>\n\n        <!-- Connecting line between steps (placed inside each non-last item) -->\n        @if (!isLastStep) {\n          <div\n            class=\"talos-stepper__connector\"\n            [class.talos-stepper__connector--active]=\"idx < selectedIndex()\"\n            aria-hidden=\"true\"\n          >\n            <div class=\"talos-stepper__connector-line\"></div>\n          </div>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n<!-- Step Content Panels -->\n<div class=\"talos-stepper__content\">\n  @if (isDeclarative()) {\n    <ng-content />\n  } @else {\n    @for (step of normalizedSteps(); track step.id; let idx = $index) {\n      @if (idx === selectedIndex()) {\n        <div\n          class=\"talos-step-panel talos-step-panel--active\"\n          [id]=\"step.panelId\"\n          [attr.aria-labelledby]=\"step.headerId\"\n          role=\"tabpanel\"\n          tabindex=\"0\"\n        >\n          @if (step.contentTemplate; as tpl) {\n            <ng-container *ngTemplateOutlet=\"tpl\" />\n          } @else if (step.contentString; as text) {\n            <div class=\"talos-stepper__data-content\">{{ text }}</div>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [":host{display:flex;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit)}.talos-stepper__list{list-style:none;margin:0;padding:0;box-sizing:border-box}:host.talos-stepper--horizontal{flex-direction:column}:host.talos-stepper--horizontal .talos-stepper__header{width:100%}:host.talos-stepper--horizontal .talos-stepper__list{display:flex;flex-direction:row;align-items:center;width:100%}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__item{display:flex;flex-direction:row;align-items:center;flex:1}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__item.talos-stepper__item--last{flex:0 0 auto}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__step-btn{flex:0 0 auto}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__connector{flex:1;display:flex;align-items:center;min-width:1.5rem}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__connector .talos-stepper__connector-line{width:100%;height:2px;background-color:var(--talos-border-color, #e2e8f0);transition:background-color .25s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__connector.talos-stepper__connector--active .talos-stepper__connector-line{background-color:var(--talos-primary-color, #2563eb)}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__list{align-items:flex-start}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__item{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__item.talos-stepper__item--last{flex:0 0 auto;min-width:5rem}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__step-btn{flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__label-container{align-items:center;margin-top:.5rem;margin-left:0}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__title-row{justify-content:center}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector{position:absolute;top:1.625rem;left:calc(50% + 1.25rem);right:calc(-50% + 1.25rem);padding:0;z-index:0}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector .talos-stepper__connector-line{width:100%;height:2px;background-color:var(--talos-border-color, #e2e8f0);transition:background-color .25s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector.talos-stepper__connector--active .talos-stepper__connector-line{background-color:var(--talos-primary-color, #2563eb)}:host.talos-stepper--vertical{flex-direction:row;gap:2rem}:host.talos-stepper--vertical .talos-stepper__header{flex-shrink:0;min-width:220px;max-width:320px}:host.talos-stepper--vertical .talos-stepper__list{display:flex;flex-direction:column;width:100%;position:relative}:host.talos-stepper--vertical .talos-stepper__item{display:flex;flex-direction:column;position:relative}:host.talos-stepper--vertical .talos-stepper__connector{position:relative;margin-left:calc(1.625rem - 1px);min-height:1.5rem;width:2px;padding:.25rem 0}:host.talos-stepper--vertical .talos-stepper__connector .talos-stepper__connector-line{position:absolute;inset:0;width:2px;border-radius:1px;background-color:var(--talos-border-color, #e2e8f0);transition:background-color .25s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--vertical .talos-stepper__connector.talos-stepper__connector--active .talos-stepper__connector-line{background-color:var(--talos-primary-color, #2563eb)}:host.talos-stepper--vertical .talos-stepper__content{flex:1;min-width:0}.talos-stepper__step-btn{display:inline-flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:.5rem;margin:0;font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;text-decoration:none;border-radius:var(--talos-radius-md, .375rem);outline:none;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-stepper__step-btn:hover:not(:disabled){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .03))}.talos-stepper__step-btn:hover:not(:disabled) .talos-stepper__indicator{border-color:var(--talos-primary-color, #2563eb)}.talos-stepper__step-btn:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))}.talos-stepper__step-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.talos-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;height:2.25rem;border-radius:var(--talos-radius-full, 9999px);border:2px solid var(--talos-border-color, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-muted, #64748b);font-size:var(--talos-font-size-sm, .875rem);font-weight:600;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.talos-stepper__item--active .talos-stepper__indicator{border-color:var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-color, #2563eb);color:#fff;box-shadow:0 0 0 3px var(--talos-primary-light, rgba(37, 99, 235, .2))}.talos-stepper__item--active .talos-stepper__label{color:var(--talos-text-primary, #0f172a);font-weight:600}.talos-stepper__item--completed .talos-stepper__indicator{border-color:var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-color, #2563eb);color:#fff}.talos-stepper__item--completed .talos-stepper__check-icon{stroke-dasharray:24;stroke-dashoffset:0;animation:talos-check-draw .3s cubic-bezier(.4,0,.2,1)}.talos-stepper__item--error .talos-stepper__indicator{border-color:var(--talos-danger-color, #ef4444);background-color:var(--talos-danger-light, #fee2e2);color:var(--talos-danger-color, #ef4444)}.talos-stepper__item--error .talos-stepper__label{color:var(--talos-danger-color, #ef4444)}.talos-stepper__item--warning .talos-stepper__indicator{border-color:var(--talos-warning-color, #f59e0b);background-color:var(--talos-warning-light, #fef3c7);color:var(--talos-warning-color, #d97706)}.talos-stepper__label-container{display:flex;flex-direction:column;text-align:left}.talos-stepper__title-row{display:inline-flex;align-items:center;gap:.375rem}.talos-stepper__label{font-size:var(--talos-font-size-sm, .875rem);font-weight:500;color:var(--talos-text-secondary, #475569);line-height:1.25;transition:color .2s cubic-bezier(.4,0,.2,1)}.talos-stepper__description{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-text-muted, #94a3b8);margin-top:.125rem;line-height:1.35}.talos-stepper__optional-tag{font-size:.6875rem;color:var(--talos-text-muted, #94a3b8);font-weight:400;padding:.125rem .375rem;border-radius:var(--talos-radius-sm, .25rem);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}.talos-stepper__error-message{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-danger-color, #ef4444);margin-top:.125rem}:host.talos-stepper--sm .talos-stepper__indicator{width:1.75rem;height:1.75rem;font-size:.75rem}:host.talos-stepper--sm .talos-stepper__label{font-size:.8125rem}:host.talos-stepper--sm .talos-stepper__description{font-size:.6875rem}:host.talos-stepper--sm.talos-stepper--vertical .talos-stepper__connector{margin-left:calc(1.375rem - 1px)}:host.talos-stepper--sm.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector{top:1.375rem;left:calc(50% + 1rem);right:calc(-50% + 1rem)}:host.talos-stepper--lg .talos-stepper__indicator{width:2.75rem;height:2.75rem;font-size:1rem}:host.talos-stepper--lg .talos-stepper__label{font-size:1rem}:host.talos-stepper--lg .talos-stepper__description{font-size:.8125rem}:host.talos-stepper--lg.talos-stepper--vertical .talos-stepper__connector{margin-left:calc(1.875rem - 1px)}:host.talos-stepper--lg.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector{top:1.875rem;left:calc(50% + 1.5rem);right:calc(-50% + 1.5rem)}.talos-stepper__progress-header{margin-bottom:1.25rem;width:100%}.talos-stepper__progress-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-size:var(--talos-font-size-sm, .875rem)}.talos-stepper__progress-step-counter{font-weight:600;color:var(--talos-primary-color, #2563eb)}.talos-stepper__progress-current-title{font-weight:500;color:var(--talos-text-primary, #0f172a)}.talos-stepper__progress-percent{font-weight:500;color:var(--talos-text-muted, #64748b)}.talos-stepper__progress-track{width:100%;height:6px;background-color:var(--talos-border-color, #e2e8f0);border-radius:var(--talos-radius-full, 9999px);overflow:hidden}.talos-stepper__progress-fill{height:100%;background-color:var(--talos-primary-color, #2563eb);border-radius:var(--talos-radius-full, 9999px);transition:width .3s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--cards .talos-stepper__list{gap:.75rem}:host.talos-stepper--cards .talos-stepper__connector{display:none}:host.talos-stepper--cards .talos-stepper__item{flex:1}:host.talos-stepper--cards .talos-stepper__step-btn{width:100%;padding:1rem;background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-radius-lg, .5rem);box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04))}:host.talos-stepper--cards .talos-stepper__step-btn:hover:not(:disabled){border-color:var(--talos-border-hover, #cbd5e1);box-shadow:var(--talos-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}:host.talos-stepper--cards .talos-stepper__item--active .talos-stepper__step-btn{border-color:var(--talos-primary-color, #2563eb);box-shadow:0 0 0 1px var(--talos-primary-color, #2563eb),var(--talos-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}:host.talos-stepper--cards .talos-stepper__item--completed .talos-stepper__step-btn{border-color:var(--talos-border-color, #e2e8f0);background-color:var(--talos-bg-subtle, #f8fafc)}.talos-stepper__content{margin-top:1.5rem;width:100%;box-sizing:border-box}.talos-stepper__data-content{padding:1rem 0;font-size:var(--talos-font-size-base, .875rem);color:var(--talos-text-primary, #0f172a)}@keyframes talos-check-draw{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideAlertTriangle, selector: "svg[lucideTriangleAlert], svg[lucideAlertTriangle]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-stepper, [talosStepper]', imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        LucideCheck,
+                        LucideAlertTriangle
+                    ], host: {
+                        'class': 'talos-stepper',
+                        '[class.talos-stepper--horizontal]': 'orientation() === "horizontal"',
+                        '[class.talos-stepper--vertical]': 'orientation() === "vertical"',
+                        '[class.talos-stepper--default]': 'variant() === "default" || variant() === "circles"',
+                        '[class.talos-stepper--circles]': 'variant() === "default" || variant() === "circles"',
+                        '[class.talos-stepper--progress]': 'variant() === "progress"',
+                        '[class.talos-stepper--cards]': 'variant() === "cards"',
+                        '[class.talos-stepper--sm]': 'size() === "sm"',
+                        '[class.talos-stepper--md]': 'size() === "md"',
+                        '[class.talos-stepper--lg]': 'size() === "lg"',
+                        '[class.talos-stepper--label-bottom]': 'orientation() === "horizontal" && labelPosition() === "bottom"',
+                        '[class.talos-stepper--label-end]': 'orientation() === "vertical" || labelPosition() === "end"',
+                        '[class.talos-stepper--linear]': 'linear()',
+                        '[class.talos-stepper--animated]': 'animated()'
+                    }, template: "<nav class=\"talos-stepper__header\" aria-label=\"Progress\">\n  @if (variant() === 'progress') {\n    <!-- Compact Progress Bar Header -->\n    <div class=\"talos-stepper__progress-header\">\n      <div class=\"talos-stepper__progress-meta\">\n        <span class=\"talos-stepper__progress-step-counter\">\n          Step {{ selectedIndex() + 1 }} of {{ totalSteps() }}\n        </span>\n        @if (currentStep(); as curr) {\n          <span class=\"talos-stepper__progress-current-title\">{{ curr.label }}</span>\n        }\n        <span class=\"talos-stepper__progress-percent\">{{ progressPercent() }}%</span>\n      </div>\n      <div class=\"talos-stepper__progress-track\" role=\"progressbar\" [attr.aria-valuenow]=\"progressPercent()\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n        <div class=\"talos-stepper__progress-fill\" [style.width.%]=\"progressPercent()\"></div>\n      </div>\n    </div>\n  }\n\n  <ol class=\"talos-stepper__list\" role=\"list\">\n    @for (step of normalizedSteps(); track step.id; let idx = $index; let isLastStep = $last) {\n      <li\n        class=\"talos-stepper__item\"\n        [class.talos-stepper__item--active]=\"idx === selectedIndex()\"\n        [class.talos-stepper__item--completed]=\"step.state === 'completed'\"\n        [class.talos-stepper__item--error]=\"step.state === 'error'\"\n        [class.talos-stepper__item--warning]=\"step.state === 'warning'\"\n        [class.talos-stepper__item--pending]=\"step.state === 'pending'\"\n        [class.talos-stepper__item--disabled]=\"step.disabled\"\n        [class.talos-stepper__item--last]=\"isLastStep\"\n      >\n        <button\n          #stepButton\n          type=\"button\"\n          class=\"talos-stepper__step-btn\"\n          [id]=\"step.headerId\"\n          [attr.aria-controls]=\"step.panelId\"\n          [attr.aria-selected]=\"idx === selectedIndex()\"\n          [attr.aria-current]=\"idx === selectedIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled\"\n          [attr.aria-label]=\"step.ariaLabel || (step.label + (step.optional ? ' (Optional)' : ''))\"\n          [disabled]=\"step.disabled\"\n          (click)=\"onStepHeaderClick(idx)\"\n          (keydown)=\"onKeydown($event, idx)\"\n        >\n          <!-- Indicator Badge / Circle -->\n          <span class=\"talos-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.customIcon; as customIcon) {\n              <ng-container *ngTemplateOutlet=\"customIcon.templateRef\" />\n            } @else if (step.iconTemplate; as iconTpl) {\n              <ng-container *ngTemplateOutlet=\"iconTpl\" />\n            } @else if (step.state === 'completed') {\n              <svg lucideCheck class=\"talos-stepper__check-icon\" [size]=\"16\" [strokeWidth]=\"2.5\"></svg>\n            } @else if (step.state === 'error') {\n              <svg lucideAlertTriangle class=\"talos-stepper__error-icon\" [size]=\"15\" [strokeWidth]=\"2.5\"></svg>\n            } @else if (step.icon; as iconComp) {\n              <ng-container *ngComponentOutlet=\"iconComp\" />\n            } @else {\n              <span class=\"talos-stepper__step-number\">{{ idx + 1 }}</span>\n            }\n          </span>\n\n          <!-- Step Label & Description Block -->\n          <span class=\"talos-stepper__label-container\">\n            <span class=\"talos-stepper__title-row\">\n              <span class=\"talos-stepper__label\">\n                @if (step.customLabel; as customLabel) {\n                  <ng-container *ngTemplateOutlet=\"customLabel.templateRef\" />\n                } @else if (step.labelTemplate; as labelTpl) {\n                  <ng-container *ngTemplateOutlet=\"labelTpl\" />\n                } @else {\n                  {{ step.label }}\n                }\n              </span>\n\n              @if (step.optional) {\n                <span class=\"talos-stepper__optional-tag\">Optional</span>\n              }\n            </span>\n\n            @if (step.description) {\n              <span class=\"talos-stepper__description\">{{ step.description }}</span>\n            }\n\n            @if (step.hasError && step.errorMessage) {\n              <span class=\"talos-stepper__error-message\">{{ step.errorMessage }}</span>\n            }\n          </span>\n        </button>\n\n        <!-- Connecting line between steps (placed inside each non-last item) -->\n        @if (!isLastStep) {\n          <div\n            class=\"talos-stepper__connector\"\n            [class.talos-stepper__connector--active]=\"idx < selectedIndex()\"\n            aria-hidden=\"true\"\n          >\n            <div class=\"talos-stepper__connector-line\"></div>\n          </div>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n<!-- Step Content Panels -->\n<div class=\"talos-stepper__content\">\n  @if (isDeclarative()) {\n    <ng-content />\n  } @else {\n    @for (step of normalizedSteps(); track step.id; let idx = $index) {\n      @if (idx === selectedIndex()) {\n        <div\n          class=\"talos-step-panel talos-step-panel--active\"\n          [id]=\"step.panelId\"\n          [attr.aria-labelledby]=\"step.headerId\"\n          role=\"tabpanel\"\n          tabindex=\"0\"\n        >\n          @if (step.contentTemplate; as tpl) {\n            <ng-container *ngTemplateOutlet=\"tpl\" />\n          } @else if (step.contentString; as text) {\n            <div class=\"talos-stepper__data-content\">{{ text }}</div>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [":host{display:flex;box-sizing:border-box;width:100%;color:var(--talos-text-color, var(--talos-text-primary, #0f172a));font-family:var(--talos-font-sans, inherit)}.talos-stepper__list{list-style:none;margin:0;padding:0;box-sizing:border-box}:host.talos-stepper--horizontal{flex-direction:column}:host.talos-stepper--horizontal .talos-stepper__header{width:100%}:host.talos-stepper--horizontal .talos-stepper__list{display:flex;flex-direction:row;align-items:center;width:100%}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__item{display:flex;flex-direction:row;align-items:center;flex:1}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__item.talos-stepper__item--last{flex:0 0 auto}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__step-btn{flex:0 0 auto}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__connector{flex:1;display:flex;align-items:center;min-width:1.5rem}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__connector .talos-stepper__connector-line{width:100%;height:2px;background-color:var(--talos-border-color, #e2e8f0);transition:background-color .25s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--horizontal:not(.talos-stepper--label-bottom) .talos-stepper__connector.talos-stepper__connector--active .talos-stepper__connector-line{background-color:var(--talos-primary-color, #2563eb)}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__list{align-items:flex-start}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__item{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__item.talos-stepper__item--last{flex:0 0 auto;min-width:5rem}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__step-btn{flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__label-container{align-items:center;margin-top:.5rem;margin-left:0}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__title-row{justify-content:center}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector{position:absolute;top:1.625rem;left:calc(50% + 1.25rem);right:calc(-50% + 1.25rem);padding:0;z-index:0}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector .talos-stepper__connector-line{width:100%;height:2px;background-color:var(--talos-border-color, #e2e8f0);transition:background-color .25s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector.talos-stepper__connector--active .talos-stepper__connector-line{background-color:var(--talos-primary-color, #2563eb)}:host.talos-stepper--vertical{flex-direction:row;gap:2rem}:host.talos-stepper--vertical .talos-stepper__header{flex-shrink:0;min-width:220px;max-width:320px}:host.talos-stepper--vertical .talos-stepper__list{display:flex;flex-direction:column;width:100%;position:relative}:host.talos-stepper--vertical .talos-stepper__item{display:flex;flex-direction:column;position:relative}:host.talos-stepper--vertical .talos-stepper__connector{position:relative;margin-left:calc(1.625rem - 1px);min-height:1.5rem;width:2px;padding:.25rem 0}:host.talos-stepper--vertical .talos-stepper__connector .talos-stepper__connector-line{position:absolute;inset:0;width:2px;border-radius:1px;background-color:var(--talos-border-color, #e2e8f0);transition:background-color .25s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--vertical .talos-stepper__connector.talos-stepper__connector--active .talos-stepper__connector-line{background-color:var(--talos-primary-color, #2563eb)}:host.talos-stepper--vertical .talos-stepper__content{flex:1;min-width:0}.talos-stepper__step-btn{display:inline-flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:.5rem;margin:0;font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;text-decoration:none;border-radius:var(--talos-radius-md, .375rem);outline:none;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.talos-stepper__step-btn:hover:not(:disabled){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .03))}.talos-stepper__step-btn:hover:not(:disabled) .talos-stepper__indicator{border-color:var(--talos-primary-color, #2563eb)}.talos-stepper__step-btn:focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))}.talos-stepper__step-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.talos-stepper__indicator{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;height:2.25rem;border-radius:var(--talos-radius-full, 9999px);border:2px solid var(--talos-border-color, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-muted, #64748b);font-size:var(--talos-font-size-sm, .875rem);font-weight:600;transition:color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.talos-stepper__item--active .talos-stepper__indicator{border-color:var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-color, #2563eb);color:#fff;box-shadow:0 0 0 3px var(--talos-primary-light, rgba(37, 99, 235, .2))}.talos-stepper__item--active .talos-stepper__label{color:var(--talos-text-primary, #0f172a);font-weight:600}.talos-stepper__item--completed .talos-stepper__indicator{border-color:var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-color, #2563eb);color:#fff}.talos-stepper__item--completed .talos-stepper__check-icon{stroke-dasharray:24;stroke-dashoffset:0;animation:talos-check-draw .3s cubic-bezier(.4,0,.2,1)}.talos-stepper__item--error .talos-stepper__indicator{border-color:var(--talos-danger-color, #ef4444);background-color:var(--talos-danger-light, #fee2e2);color:var(--talos-danger-color, #ef4444)}.talos-stepper__item--error .talos-stepper__label{color:var(--talos-danger-color, #ef4444)}.talos-stepper__item--warning .talos-stepper__indicator{border-color:var(--talos-warning-color, #f59e0b);background-color:var(--talos-warning-light, #fef3c7);color:var(--talos-warning-color, #d97706)}.talos-stepper__label-container{display:flex;flex-direction:column;text-align:left}.talos-stepper__title-row{display:inline-flex;align-items:center;gap:.375rem}.talos-stepper__label{font-size:var(--talos-font-size-sm, .875rem);font-weight:500;color:var(--talos-text-secondary, #475569);line-height:1.25;transition:color .2s cubic-bezier(.4,0,.2,1)}.talos-stepper__description{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-text-muted, #94a3b8);margin-top:.125rem;line-height:1.35}.talos-stepper__optional-tag{font-size:.6875rem;color:var(--talos-text-muted, #94a3b8);font-weight:400;padding:.125rem .375rem;border-radius:var(--talos-radius-sm, .25rem);background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .04))}.talos-stepper__error-message{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-danger-color, #ef4444);margin-top:.125rem}:host.talos-stepper--sm .talos-stepper__indicator{width:1.75rem;height:1.75rem;font-size:.75rem}:host.talos-stepper--sm .talos-stepper__label{font-size:.8125rem}:host.talos-stepper--sm .talos-stepper__description{font-size:.6875rem}:host.talos-stepper--sm.talos-stepper--vertical .talos-stepper__connector{margin-left:calc(1.375rem - 1px)}:host.talos-stepper--sm.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector{top:1.375rem;left:calc(50% + 1rem);right:calc(-50% + 1rem)}:host.talos-stepper--lg .talos-stepper__indicator{width:2.75rem;height:2.75rem;font-size:1rem}:host.talos-stepper--lg .talos-stepper__label{font-size:1rem}:host.talos-stepper--lg .talos-stepper__description{font-size:.8125rem}:host.talos-stepper--lg.talos-stepper--vertical .talos-stepper__connector{margin-left:calc(1.875rem - 1px)}:host.talos-stepper--lg.talos-stepper--horizontal.talos-stepper--label-bottom .talos-stepper__connector{top:1.875rem;left:calc(50% + 1.5rem);right:calc(-50% + 1.5rem)}.talos-stepper__progress-header{margin-bottom:1.25rem;width:100%}.talos-stepper__progress-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-size:var(--talos-font-size-sm, .875rem)}.talos-stepper__progress-step-counter{font-weight:600;color:var(--talos-primary-color, #2563eb)}.talos-stepper__progress-current-title{font-weight:500;color:var(--talos-text-primary, #0f172a)}.talos-stepper__progress-percent{font-weight:500;color:var(--talos-text-muted, #64748b)}.talos-stepper__progress-track{width:100%;height:6px;background-color:var(--talos-border-color, #e2e8f0);border-radius:var(--talos-radius-full, 9999px);overflow:hidden}.talos-stepper__progress-fill{height:100%;background-color:var(--talos-primary-color, #2563eb);border-radius:var(--talos-radius-full, 9999px);transition:width .3s cubic-bezier(.4,0,.2,1)}:host.talos-stepper--cards .talos-stepper__list{gap:.75rem}:host.talos-stepper--cards .talos-stepper__connector{display:none}:host.talos-stepper--cards .talos-stepper__item{flex:1}:host.talos-stepper--cards .talos-stepper__step-btn{width:100%;padding:1rem;background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-radius-lg, .5rem);box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04))}:host.talos-stepper--cards .talos-stepper__step-btn:hover:not(:disabled){border-color:var(--talos-border-hover, #cbd5e1);box-shadow:var(--talos-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08))}:host.talos-stepper--cards .talos-stepper__item--active .talos-stepper__step-btn{border-color:var(--talos-primary-color, #2563eb);box-shadow:0 0 0 1px var(--talos-primary-color, #2563eb),var(--talos-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}:host.talos-stepper--cards .talos-stepper__item--completed .talos-stepper__step-btn{border-color:var(--talos-border-color, #e2e8f0);background-color:var(--talos-bg-subtle, #f8fafc)}.talos-stepper__content{margin-top:1.5rem;width:100%;box-sizing:border-box}.talos-stepper__data-content{padding:1rem 0;font-size:var(--talos-font-size-base, .875rem);color:var(--talos-text-primary, #0f172a)}@keyframes talos-check-draw{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], stepperFinished: [{ type: i0.Output, args: ["stepperFinished"] }], childSteps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TalosStepComponent), { isSignal: true }] }], stepButtons: [{ type: i0.ViewChildren, args: ['stepButton', { isSignal: true }] }] } });
+
+/**
+ * Directive applied to an `<ng-template>` to provide a custom header label template for a step.
+ *
+ * Usage:
+ * ```html
+ * <talos-step>
+ *   <ng-template talosStepLabel>
+ *     <svg lucideSettings [size]="14"></svg>
+ *     <span>Custom Step Label</span>
+ *   </ng-template>
+ *   Step content...
+ * </talos-step>
+ * ```
+ */
+class TalosStepLabelDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosStepLabelDirective, isStandalone: true, selector: "[talosStepLabel], ng-template[talosStepLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosStepLabel], ng-template[talosStepLabel]'
+                }]
+        }] });
+/**
+ * Directive applied to an `<ng-template>` to delay rendering of the step panel content
+ * until the step is first navigated to (lazy loading).
+ *
+ * Usage:
+ * ```html
+ * <talos-step label="Billing Information">
+ *   <ng-template talosStepContent>
+ *     <heavy-billing-form />
+ *   </ng-template>
+ * </talos-step>
+ * ```
+ */
+class TalosStepContentDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosStepContentDirective, isStandalone: true, selector: "[talosStepContent], ng-template[talosStepContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosStepContent], ng-template[talosStepContent]'
+                }]
+        }] });
+/**
+ * Directive applied to an `<ng-template>` to provide a custom icon template
+ * rendered inside the step circle or indicator badge.
+ *
+ * Usage:
+ * ```html
+ * <talos-step label="Payment">
+ *   <ng-template talosStepIcon let-state="state" let-index="index">
+ *     <svg lucideCreditCard [size]="16"></svg>
+ *   </ng-template>
+ *   Step content...
+ * </talos-step>
+ * ```
+ */
+class TalosStepIconDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosStepIconDirective, isStandalone: true, selector: "[talosStepIcon], ng-template[talosStepIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosStepIcon], ng-template[talosStepIcon]'
+                }]
+        }] });
+/**
+ * Button directive that advances the parent `<talos-stepper>` to the next step when clicked.
+ *
+ * Usage:
+ * ```html
+ * <button talosButton talosStepperNext>Continue</button>
+ * ```
+ */
+class TalosStepperNextDirective {
+    stepper = inject(forwardRef(() => TalosStepperComponent), { optional: true });
+    /**
+     * Explicit stepper reference if the button resides outside the `<talos-stepper>` tree.
+     */
+    talosStepperNext = input(null, { ...(ngDevMode ? { debugName: "talosStepperNext" } : /* istanbul ignore next */ {}), transform: (val) => typeof val === 'string' || val === null || val === undefined ? null : val });
+    onClick() {
+        const target = this.talosStepperNext() ?? this.stepper;
+        if (target) {
+            target.next();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosStepperNextDirective, isStandalone: true, selector: "[talosStepperNext], button[talosStepperNext]", inputs: { talosStepperNext: { classPropertyName: "talosStepperNext", publicName: "talosStepperNext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperNextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosStepperNext], button[talosStepperNext]',
+                    host: {
+                        'type': 'button',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }], propDecorators: { talosStepperNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosStepperNext", required: false }] }] } });
+/**
+ * Button directive that returns the parent `<talos-stepper>` to the previous step when clicked.
+ *
+ * Usage:
+ * ```html
+ * <button talosButton variant="secondary" talosStepperPrevious>Back</button>
+ * ```
+ */
+class TalosStepperPreviousDirective {
+    stepper = inject(forwardRef(() => TalosStepperComponent), { optional: true });
+    /**
+     * Explicit stepper reference if the button resides outside the `<talos-stepper>` tree.
+     */
+    talosStepperPrevious = input(null, { ...(ngDevMode ? { debugName: "talosStepperPrevious" } : /* istanbul ignore next */ {}), transform: (val) => typeof val === 'string' || val === null || val === undefined ? null : val });
+    onClick() {
+        const target = this.talosStepperPrevious() ?? this.stepper;
+        if (target) {
+            target.previous();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperPreviousDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosStepperPreviousDirective, isStandalone: true, selector: "[talosStepperPrevious], button[talosStepperPrevious]", inputs: { talosStepperPrevious: { classPropertyName: "talosStepperPrevious", publicName: "talosStepperPrevious", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperPreviousDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosStepperPrevious], button[talosStepperPrevious]',
+                    host: {
+                        'type': 'button',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }], propDecorators: { talosStepperPrevious: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosStepperPrevious", required: false }] }] } });
+/**
+ * Button directive that resets the parent `<talos-stepper>` back to step 0 when clicked.
+ *
+ * Usage:
+ * ```html
+ * <button talosButton variant="outline" talosStepperReset>Reset Wizard</button>
+ * ```
+ */
+class TalosStepperResetDirective {
+    stepper = inject(forwardRef(() => TalosStepperComponent), { optional: true });
+    /**
+     * Explicit stepper reference if the button resides outside the `<talos-stepper>` tree.
+     */
+    talosStepperReset = input(null, { ...(ngDevMode ? { debugName: "talosStepperReset" } : /* istanbul ignore next */ {}), transform: (val) => typeof val === 'string' || val === null || val === undefined ? null : val });
+    onClick() {
+        const target = this.talosStepperReset() ?? this.stepper;
+        if (target) {
+            target.reset();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosStepperResetDirective, isStandalone: true, selector: "[talosStepperReset], button[talosStepperReset]", inputs: { talosStepperReset: { classPropertyName: "talosStepperReset", publicName: "talosStepperReset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperResetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosStepperReset], button[talosStepperReset]',
+                    host: {
+                        'type': 'button',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }], propDecorators: { talosStepperReset: [{ type: i0.Input, args: [{ isSignal: true, alias: "talosStepperReset", required: false }] }] } });
+
+const STEPPER_DECLARATIONS = [
+    TalosStepperComponent,
+    TalosStepComponent,
+    TalosStepLabelDirective,
+    TalosStepContentDirective,
+    TalosStepIconDirective,
+    TalosStepperNextDirective,
+    TalosStepperPreviousDirective,
+    TalosStepperResetDirective
+];
+class TalosStepperModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperModule, imports: [TalosStepperComponent,
+            TalosStepComponent,
+            TalosStepLabelDirective,
+            TalosStepContentDirective,
+            TalosStepIconDirective,
+            TalosStepperNextDirective,
+            TalosStepperPreviousDirective,
+            TalosStepperResetDirective], exports: [TalosStepperComponent,
+            TalosStepComponent,
+            TalosStepLabelDirective,
+            TalosStepContentDirective,
+            TalosStepIconDirective,
+            TalosStepperNextDirective,
+            TalosStepperPreviousDirective,
+            TalosStepperResetDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperModule, imports: [TalosStepperComponent,
+            TalosStepComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosStepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...STEPPER_DECLARATIONS],
+                    exports: [...STEPPER_DECLARATIONS]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LayoutService, MainLayoutComponent, SidePanelComponent, TalosCardActionsDirective, TalosCardAvatarDirective, TalosCardBodyComponent, TalosCardComponent, TalosCardFooterComponent, TalosCardHeaderComponent, TalosCardMediaDirective, TalosCardModule, TalosCardSubtitleDirective, TalosCardTitleDirective, TalosExpansionPanelActionsDirective, TalosExpansionPanelBodyComponent, TalosExpansionPanelComponent, TalosExpansionPanelContentDirective, TalosExpansionPanelDescriptionDirective, TalosExpansionPanelGroupComponent, TalosExpansionPanelHeaderComponent, TalosExpansionPanelIconDirective, TalosExpansionPanelModule, TalosExpansionPanelTitleDirective, TalosExpansionPanelToggleDirective };
+export { LayoutService, MainLayoutComponent, SidePanelComponent, TalosCardActionsDirective, TalosCardAvatarDirective, TalosCardBodyComponent, TalosCardComponent, TalosCardFooterComponent, TalosCardHeaderComponent, TalosCardMediaDirective, TalosCardModule, TalosCardSubtitleDirective, TalosCardTitleDirective, TalosExpansionPanelActionsDirective, TalosExpansionPanelBodyComponent, TalosExpansionPanelComponent, TalosExpansionPanelContentDirective, TalosExpansionPanelDescriptionDirective, TalosExpansionPanelGroupComponent, TalosExpansionPanelHeaderComponent, TalosExpansionPanelIconDirective, TalosExpansionPanelModule, TalosExpansionPanelTitleDirective, TalosExpansionPanelToggleDirective, TalosStepComponent, TalosStepContentDirective, TalosStepIconDirective, TalosStepLabelDirective, TalosStepperComponent, TalosStepperModule, TalosStepperNextDirective, TalosStepperPreviousDirective, TalosStepperResetDirective, TalosTabComponent, TalosTabContentDirective, TalosTabLabelDirective, TalosTabsComponent, TalosTabsModule };
 //# sourceMappingURL=weeehaoooz-talos-ui-layout.mjs.map