ngx-strata 0.1.0 → 0.2.1

package/fesm2022/ngx-strata.mjs

@@ -1,13 +1,45 @@
 import * as i0 from '@angular/core';
-import { Injectable, provideAppInitializer, inject, makeEnvironmentProviders, InjectionToken, input, DOCUMENT, Input, Inject, Directive, signal, computed, effect, model, HostListener, Component, HostBinding, contentChild, ElementRef, output, ChangeDetectionStrategy, ViewContainerRef, viewChild, contentChildren, Renderer2, Pipe, LOCALE_ID } from '@angular/core';
+import { inject, ElementRef, input, model, output, computed, Directive, Injectable, provideAppInitializer, makeEnvironmentProviders, InjectionToken, DOCUMENT, Input, Inject, signal, effect, DestroyRef, HostListener, Component, contentChild, HostBinding, ViewContainerRef, viewChild, contentChildren, Renderer2, TemplateRef, Pipe, booleanAttribute, ContentChildren, Injector, LOCALE_ID } from '@angular/core';
 import { computePosition, offset, arrow, autoUpdate, flip, shift } from '@floating-ui/dom';
-import { Observable, tap, map, BehaviorSubject } from 'rxjs';
+import { Observable, tap, map, fromEvent, switchMap, filter } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i1 from '@angular/forms';
+import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, DecimalPipe, formatNumber, getLocaleNumberSymbol, NumberSymbol } from '@angular/common';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from '@angular/common';
-import { NgTemplateOutlet, CommonModule, DecimalPipe, formatNumber, getLocaleNumberSymbol, NumberSymbol } from '@angular/common';
+import { Router, NavigationEnd, RouterLinkActive } from '@angular/router';
+
+class StrataActivatableDirective {
+    _elementRef = inject(ElementRef);
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    interactable = model(true, ...(ngDevMode ? [{ debugName: "interactable" }] : []));
+    activated = output();
+    isFocusable = computed(() => this.interactable() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isFocusable" }] : []));
+    onKeyDown(event) {
+        if (!this.isFocusable()) {
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.activated.emit(event);
+            this._elementRef.nativeElement.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActivatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataActivatableDirective, isStandalone: true, selector: "[stActivatable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactable: { classPropertyName: "interactable", publicName: "interactable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { interactable: "interactableChange", activated: "activated" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "isFocusable() ? \"0\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActivatableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stActivatable]',
+                    host: {
+                        '(keydown)': 'onKeyDown($event)',
+                        '[attr.tabindex]': 'isFocusable() ? "0" : null',
+                    },
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactable: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactable", required: false }] }, { type: i0.Output, args: ["interactableChange"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 class IconLoader {
 }
@@ -146,9 +178,20 @@ function provideIconRegistry() {
 const DEFAULT_CONFIG = {
     includeBaseIcons: true,
     tooltipDelayMs: 500,
+    crossPlatformHotkeys: true,
+    shortcutLabels: {
+        meta: '⌘',
+        ctrl: 'Ctrl',
+        shift: 'Shift',
+        alt: 'Alt',
+    },
 };
 function provideStrata(config = {}) {
-    const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+    const mergedConfig = {
+        ...DEFAULT_CONFIG,
+        ...config,
+        shortcutLabels: { ...DEFAULT_CONFIG.shortcutLabels, ...config.shortcutLabels },
+    };
     const providers = [
         provideIconLoader(),
         provideIconRegistry(),
@@ -164,7 +207,7 @@ function provideStrata(config = {}) {
 }
 const STRATA_CONFIG = new InjectionToken('STRATA_CONFIG');
 
-class TooltipDirective {
+class StrataTooltipDirective {
     document;
     element;
     renderer;
@@ -259,16 +302,17 @@ class TooltipDirective {
         }
         this.tooltipContentElement?.removeAttribute('data-show');
         this.tooltipContentElement?.setAttribute('aria-hidden', 'true');
-        this.autoUpdateCleanupFunction();
+        if (this.autoUpdateCleanupFunction) {
+            this.autoUpdateCleanupFunction();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TooltipDirective, isStandalone: true, selector: "[stSimpleTooltip]", inputs: { stSimpleTooltip: { classPropertyName: "stSimpleTooltip", publicName: "stSimpleTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipEnabled: { classPropertyName: "tooltipEnabled", publicName: "tooltipEnabled", isSignal: false, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, tooltipAlwaysShow: { classPropertyName: "tooltipAlwaysShow", publicName: "tooltipAlwaysShow", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataTooltipDirective, isStandalone: true, selector: "[stSimpleTooltip]", inputs: { stSimpleTooltip: { classPropertyName: "stSimpleTooltip", publicName: "stSimpleTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipEnabled: { classPropertyName: "tooltipEnabled", publicName: "tooltipEnabled", isSignal: false, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, tooltipAlwaysShow: { classPropertyName: "tooltipAlwaysShow", publicName: "tooltipAlwaysShow", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stSimpleTooltip]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
@@ -344,7 +388,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class CheckboxComponent {
+class HotkeyService {
+    config = inject(STRATA_CONFIG);
+    destroyRef = inject(DestroyRef);
+    registrations = new Map();
+    constructor() {
+        fromEvent(document, 'keydown')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => this.handleKeydown(event));
+    }
+    /**
+     * Register a keyboard shortcut.
+     *
+     * @param combo - A combo string like `'meta+k'`, `'ctrl+shift+p'`, `'shift+?'`.
+     *   Use `'meta'` for ⌘ on Mac / Win key on Windows. When `crossPlatformHotkeys` is
+     *   enabled in StrataConfig (default), registering `meta+k` also fires on `ctrl+k`
+     *   and vice-versa.
+     * @param handler - Callback invoked when the combo is matched.
+     * @param options - Optional configuration per registration.
+     * @returns A teardown function — call it to unregister the hotkey.
+     */
+    register(combo, handler, options = {}) {
+        const id = Symbol();
+        const parsed = this.parseCombo(combo);
+        const combos = this.config.crossPlatformHotkeys ? this.expandCrossPlatform(parsed) : [parsed];
+        this.registrations.set(id, {
+            combos,
+            handler,
+            options: { allowInInput: false, ...options },
+        });
+        return () => this.registrations.delete(id);
+    }
+    handleKeydown(event) {
+        for (const registration of this.registrations.values()) {
+            if (!registration.options.allowInInput && this.isInputFocused(event)) {
+                continue;
+            }
+            if (registration.combos.some((combo) => this.matchesCombo(event, combo))) {
+                event.preventDefault();
+                registration.handler();
+            }
+        }
+    }
+    matchesCombo(event, combo) {
+        return (event.key.toLowerCase() === combo.key &&
+            event.metaKey === combo.meta &&
+            event.ctrlKey === combo.ctrl &&
+            event.shiftKey === combo.shift &&
+            event.altKey === combo.alt);
+    }
+    parseCombo(combo) {
+        const parts = combo.toLowerCase().split('+');
+        const key = parts[parts.length - 1];
+        return {
+            key,
+            meta: parts.includes('meta'),
+            ctrl: parts.includes('ctrl'),
+            shift: parts.includes('shift'),
+            alt: parts.includes('alt'),
+        };
+    }
+    /**
+     * When crossPlatformHotkeys is enabled, mirror meta ↔ ctrl so that
+     * a single `register('meta+k', ...)` call fires on both ⌘K (Mac) and Ctrl+K (Win/Linux).
+     */
+    expandCrossPlatform(parsed) {
+        const combos = [parsed];
+        if (parsed.meta && !parsed.ctrl) {
+            combos.push({ ...parsed, meta: false, ctrl: true });
+        }
+        else if (parsed.ctrl && !parsed.meta) {
+            combos.push({ ...parsed, ctrl: false, meta: true });
+        }
+        return combos;
+    }
+    isInputFocused(event) {
+        const target = event.target;
+        if (!target)
+            return false;
+        const tag = target.tagName.toLowerCase();
+        return tag === 'input' || tag === 'textarea' || target.isContentEditable;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HotkeyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HotkeyService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HotkeyService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class StrataCheckboxComponent {
     value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
     name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
@@ -352,10 +485,10 @@ class CheckboxComponent {
         event.stopImmediatePropagation();
         this.value.set(!this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataCheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-checkbox', imports: [], template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], onClick: [{
@@ -363,59 +496,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
-class ToggleComponent {
+class StrataToggleComponent {
+    _activatable = inject(StrataActivatableDirective);
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    get isChecked() {
-        return this.checked();
-    }
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    get sizeClass() {
-        return this.size();
-    }
-    onCheckChanged() {
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    labelPosition = input('after', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    disabled = this._activatable.disabled;
+    onCheckChanged(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (event) {
+            event.stopPropagation();
+        }
         this.checked.set(!this.checked());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onCheckChanged()" }, properties: { "attr.data-checked": "this.isChecked", "class": "this.sizeClass" } }, ngImport: i0, template: "<div class=\"toggle-handle\"></div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "role": "switch" }, listeners: { "click": "onCheckChanged($event)" }, properties: { "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled()", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "class.st-toggle-label-before": "labelPosition() === 'before'", "class.st-toggle-label-after": "labelPosition() === 'after'" } }, hostDirectives: [{ directive: StrataActivatableDirective, inputs: ["disabled", "disabled"], outputs: ["activated", "activated"] }], ngImport: i0, template: "<div class=\"st-toggle-track\">\n  <div class=\"toggle-handle\"></div>\n</div>\n@if (label()) {\n  <span class=\"st-toggle-label\">{{ label() }}</span>\n}\n<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-toggle', imports: [], host: {
-                        '(click)': 'onCheckChanged()',
-                        tabindex: '0',
-                    }, template: "<div class=\"toggle-handle\"></div>\n" }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], isChecked: [{
-                type: HostBinding,
-                args: ['attr.data-checked']
-            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sizeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'st-toggle', imports: [], hostDirectives: [
+                        {
+                            directive: StrataActivatableDirective,
+                            inputs: ['disabled'],
+                            outputs: ['activated'],
+                        },
+                    ], host: {
+                        '(click)': 'onCheckChanged($event)',
+                        role: 'switch',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.data-checked]': 'checked()',
+                        '[attr.data-disabled]': 'disabled()',
+                        '[class.st-toggle-label-before]': "labelPosition() === 'before'",
+                        '[class.st-toggle-label-after]': "labelPosition() === 'after'",
+                    }, template: "<div class=\"st-toggle-track\">\n  <div class=\"toggle-handle\"></div>\n</div>\n@if (label()) {\n  <span class=\"st-toggle-label\">{{ label() }}</span>\n}\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
 
-class ActionMenuItemComponent {
-    checkbox = contentChild(CheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : {}), read: ElementRef });
-    toggle = contentChild(ToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : {}), read: ElementRef });
+class StrataActionMenuItemComponent {
+    checkbox = contentChild(StrataCheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : {}), read: ElementRef });
+    toggle = contentChild(StrataToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : {}), read: ElementRef });
     closeMenuOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeMenuOnClick" }] : []));
-    onMenuItemClicked = output();
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    get isActive() {
+        return this.active();
+    }
+    menuItemClicked = output();
     elementRef = inject(ElementRef);
     onHostClick(event) {
-        this.onMenuItemClicked.emit(this.closeMenuOnClick());
+        this.menuItemClicked.emit(this.closeMenuOnClick());
         event.stopPropagation();
         this.checkbox()?.nativeElement.click();
         this.toggle()?.nativeElement.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ActionMenuItemComponent, isStandalone: true, selector: "st-action-menu-item", inputs: { closeMenuOnClick: { classPropertyName: "closeMenuOnClick", publicName: "closeMenuOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuItemClicked: "onMenuItemClicked" }, host: { listeners: { "click": "onHostClick($event)" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "toggle", first: true, predicate: ToggleComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataActionMenuItemComponent, isStandalone: true, selector: "st-action-menu-item", inputs: { closeMenuOnClick: { classPropertyName: "closeMenuOnClick", publicName: "closeMenuOnClick", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClicked: "menuItemClicked" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.active": "this.isActive" } }, queries: [{ propertyName: "checkbox", first: true, predicate: StrataCheckboxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "toggle", first: true, predicate: StrataToggleComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActionMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-action-menu-item', imports: [], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] }]
-        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CheckboxComponent), { ...{ read: ElementRef }, isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ToggleComponent), { ...{ read: ElementRef }, isSignal: true }] }], closeMenuOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMenuOnClick", required: false }] }], onMenuItemClicked: [{ type: i0.Output, args: ["onMenuItemClicked"] }], onHostClick: [{
+        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataCheckboxComponent), { ...{ read: ElementRef }, isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataToggleComponent), { ...{ read: ElementRef }, isSignal: true }] }], closeMenuOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMenuOnClick", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], isActive: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], menuItemClicked: [{ type: i0.Output, args: ["menuItemClicked"] }], onHostClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
 
-class ButtonDirective {
+class StrataButtonDirective {
     host = inject(ElementRef);
     variant = input('secondary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
@@ -423,7 +572,6 @@ class ButtonDirective {
     iconAtStart = signal(false, ...(ngDevMode ? [{ debugName: "iconAtStart" }] : []));
     iconAtEnd = signal(false, ...(ngDevMode ? [{ debugName: "iconAtEnd" }] : []));
     iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
-    constructor() { }
     get classes() {
         return [
             'st-button',
@@ -448,7 +596,7 @@ class ButtonDirective {
         this.iconAtEnd.set(this.nodeIsStIcon(nodes[nodes.length - 1]));
     }
     nodeIsStIcon(node) {
-        if (node.nodeType === Node.TEXT_NODE && !node.textContent.trim()) {
+        if (node.nodeType === Node.TEXT_NODE && !node.textContent?.trim()) {
             return false;
         }
         if (node.nodeType === Node.ELEMENT_NODE) {
@@ -457,20 +605,21 @@ class ButtonDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ButtonDirective, isStandalone: true, selector: "[stButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataButtonDirective, isStandalone: true, selector: "[stButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stButton]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], classes: [{
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], classes: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class CardComponent {
+class StrataCardComponent {
+    elementRef = inject(ElementRef);
     elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : []));
     selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
     padding = input(true, ...(ngDevMode ? [{ debugName: "padding" }] : []));
@@ -493,12 +642,18 @@ class CardComponent {
     get isOutline() {
         return this.variant() === 'outline';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: CardComponent, isStandalone: true, selector: "st-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.with-padding": "this.withPadding", "class.selectable": "this.isSelectable", "attr.tabindex": "this.tabIndex", "class.elevated": "this.isElevated", "class.flat": "this.isFlat", "class.outline": "this.isOutline" } }, ngImport: i0, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    handleKeyboardEvent(event) {
+        if (this.selectable()) {
+            event.preventDefault();
+            this.elementRef.nativeElement.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataCardComponent, isStandalone: true, selector: "st-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "handleKeyboardEvent($event)", "keydown.space": "handleKeyboardEvent($event)" }, properties: { "class.with-padding": "this.withPadding", "class.selectable": "this.isSelectable", "attr.tabindex": "this.tabIndex", "class.elevated": "this.isElevated", "class.flat": "this.isFlat", "class.outline": "this.isOutline" } }, ngImport: i0, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'st-card', imports: [], template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], withPadding: [{
                 type: HostBinding,
                 args: ['class.with-padding']
@@ -517,71 +672,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }], isOutline: [{
                 type: HostBinding,
                 args: ['class.outline']
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
             }] } });
 
-class IconComponent {
-    defaultIcon = 'question';
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    get sizeClass() {
-        return this.size() === 'xs';
-    }
-    get sizeSmClass() {
-        return this.size() === 'sm';
-    }
-    get sizeMdClass() {
-        return this.size() === 'md';
-    }
-    get sizeLgClass() {
-        return this.size() === 'lg';
-    }
-    svgMarkdown;
-    iconSubscription;
+class StrataIconComponent {
     iconRegistry = inject(IconRegistry);
-    ngOnDestroy() {
-        if (this.iconSubscription) {
-            this.iconSubscription.unsubscribe();
-        }
-    }
-    ngOnChanges() {
-        const name = this.name();
-        if (!name) {
-            this.setIcon(this.defaultIcon);
-        }
-        else {
-            this.setIcon(name);
-        }
-    }
-    setIcon(iconName) {
-        this.iconSubscription = this.iconRegistry.getIcon(iconName).subscribe((value) => {
-            this.svgMarkdown = value;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "st-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class.xs": "this.sizeClass", "class.sm": "this.sizeSmClass", "class.md": "this.sizeMdClass", "class.lg": "this.sizeLgClass" } }, usesOnChanges: true, ngImport: i0, template: '<span [innerHTML]="svgMarkdown"></span>', isInline: true });
+    name = input('question', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    svgMarkdown = toSignal(toObservable(this.name).pipe(switchMap((name) => this.iconRegistry.getIcon(name || 'question'))));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataIconComponent, isStandalone: true, selector: "st-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class.xs": "size() === \"xs\"", "class.sm": "size() === \"sm\"", "class.md": "size() === \"md\"", "class.lg": "size() === \"lg\"" } }, ngImport: i0, template: "<span [innerHTML]=\"svgMarkdown()\"></span>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataIconComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'st-icon',
-                    imports: [],
-                    template: '<span [innerHTML]="svgMarkdown"></span>',
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], sizeClass: [{
-                type: HostBinding,
-                args: ['class.xs']
-            }], sizeSmClass: [{
-                type: HostBinding,
-                args: ['class.sm']
-            }], sizeMdClass: [{
-                type: HostBinding,
-                args: ['class.md']
-            }], sizeLgClass: [{
-                type: HostBinding,
-                args: ['class.lg']
-            }] } });
+            args: [{ selector: 'st-icon', imports: [], host: {
+                        '[class.xs]': 'size() === "xs"',
+                        '[class.sm]': 'size() === "sm"',
+                        '[class.md]': 'size() === "md"',
+                        '[class.lg]': 'size() === "lg"',
+                    }, template: "<span [innerHTML]=\"svgMarkdown()\"></span>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }] } });
 
-class OverlayDirective {
+class StrataOverlayDirective {
     stOverlay = input.required(...(ngDevMode ? [{ debugName: "stOverlay" }] : []));
     overlayOpen = model(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
     overlayPlacement = input('bottom', ...(ngDevMode ? [{ debugName: "overlayPlacement" }] : []));
@@ -590,7 +707,7 @@ class OverlayDirective {
     viewContainerRef = inject(ViewContainerRef);
     overlayEl;
     cleanup;
-    constructor() { }
+    viewRef;
     ngOnChanges() {
         if (this.overlayOpen()) {
             this.create();
@@ -602,9 +719,9 @@ class OverlayDirective {
     async create() {
         if (this.overlayEl)
             return;
-        const view = this.viewContainerRef.createEmbeddedView(this.stOverlay());
-        view.detectChanges();
-        this.overlayEl = view.rootNodes[0];
+        this.viewRef = this.viewContainerRef.createEmbeddedView(this.stOverlay());
+        this.viewRef.detectChanges();
+        this.overlayEl = this.viewRef.rootNodes[0];
         document.body.appendChild(this.overlayEl);
         this.cleanup = autoUpdate(this.element.nativeElement, this.overlayEl, () => this.updatePosition());
     }
@@ -613,15 +730,17 @@ class OverlayDirective {
             return;
         const { x, y } = await computePosition(this.element.nativeElement, this.overlayEl, {
             placement: this.overlayPlacement(),
+            strategy: 'fixed',
             middleware: [offset(this.overlayOffset()), flip(), shift()],
         });
         if (!this.overlayEl)
             return;
-        const { width, height } = this.element.nativeElement.getBoundingClientRect();
+        const { width } = this.element.nativeElement.getBoundingClientRect();
         Object.assign(this.overlayEl.style, {
-            position: 'absolute',
+            position: 'fixed',
             left: `${x}px`,
             top: `${y}px`,
+            zIndex: '10000',
         });
         this.overlayEl.style.setProperty('--st-overlay-anchor-element-width', `${width}px`);
     }
@@ -630,63 +749,148 @@ class OverlayDirective {
             this.cleanup();
         if (this.overlayEl)
             this.overlayEl.remove();
+        if (this.viewRef) {
+            this.viewRef.destroy();
+            this.viewRef = undefined;
+        }
         this.overlayEl = undefined;
     }
     ngOnDestroy() {
         this.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: OverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stOverlay]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }] } });
+        }], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }] } });
 
-class ActionMenuComponent {
-    projectedButton = contentChild(ButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : {}), descendants: true,
+class StrataActionMenuComponent {
+    projectedButton = contentChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : {}), descendants: true,
         read: ElementRef });
-    defaultButton = viewChild(ButtonDirective, { ...(ngDevMode ? { debugName: "defaultButton" } : {}), read: ElementRef });
-    actionMenuItems = contentChildren(ActionMenuItemComponent, ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : []));
+    defaultButton = viewChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "defaultButton" } : {}), read: ElementRef });
+    actionMenuItems = contentChildren(StrataActionMenuItemComponent, ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : []));
     placement = input('bottom-end', ...(ngDevMode ? [{ debugName: "placement" }] : []));
     renderer = inject(Renderer2);
     menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : []));
-    ngAfterViewInit() {
-        const button = this.projectedButton() ?? this.defaultButton();
-        this.renderer.listen(button.nativeElement, 'click', () => {
-            this.menuOpen.set(!this.menuOpen());
+    constructor() {
+        effect((onCleanup) => {
+            const button = this.projectedButton() ?? this.defaultButton();
+            if (!button) {
+                return;
+            }
+            const unlisten = this.renderer.listen(button.nativeElement, 'click', () => {
+                this.menuOpen.set(!this.menuOpen());
+            });
+            onCleanup(() => {
+                unlisten();
+            });
         });
-        this.actionMenuItems().forEach((item) => {
-            item.onMenuItemClicked.subscribe((shouldClose) => {
+        effect((onCleanup) => {
+            const subs = this.actionMenuItems().map((item) => item.menuItemClicked.subscribe((shouldClose) => {
                 if (shouldClose) {
                     this.menuOpen.set(false);
                 }
+            }));
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: ButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: ActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: ButtonDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-action-menu', imports: [CardComponent, OverlayDirective, IconComponent, ButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
-        }], propDecorators: { projectedButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ButtonDirective), { ...{
+            args: [{ selector: 'st-action-menu', imports: [StrataCardComponent, StrataOverlayDirective, StrataIconComponent, StrataButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { projectedButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             descendants: true,
                             read: ElementRef,
-                        }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ButtonDirective), { ...{
+                        }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             read: ElementRef,
-                        }, isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
+                        }, isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
+
+class StrataTextStackComponent {
+    overflow = input('truncate', ...(ngDevMode ? [{ debugName: "overflow" }] : []));
+    get cssClasses() {
+        return [this.overflow()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTextStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataTextStackComponent, isStandalone: true, selector: "st-text-stack", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTextStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-text-stack', imports: [], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class StrataAlertComponent {
+    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    iconName = input(undefined, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
+    dismiss = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataAlertComponent, isStandalone: true, selector: "st-alert", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div class=\"st-alert-container\">\n  @if (iconName()) {\n  <div class=\"st-alert-icon\">\n    <st-icon [name]=\"iconName()!\"></st-icon>\n  </div>\n  }\n\n  <div class=\"st-alert-content\">\n    <st-text-stack overflow=\"wrap\">\n      @if (header()) {\n      <p class=\"st-body-bold st-alert-header\">{{ header() }}</p>\n      }\n      <p class=\"st-alert-message\">{{ message() }}</p>\n    </st-text-stack>\n  </div>\n\n\n\n\n  <div class=\"st-alert-actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n\n  @if (dismissible()) {\n  <button stButton variant=\"ghost\" size=\"sm\" class=\"st-alert-dismiss\" (click)=\"dismiss.emit()\"\n    aria-label=\"Dismiss alert\">\n    <st-icon name=\"close\"></st-icon>\n  </button>\n  }\n</div>", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataTextStackComponent, selector: "st-text-stack", inputs: ["overflow"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-alert', imports: [StrataIconComponent, StrataButtonDirective, StrataTextStackComponent], template: "<div class=\"st-alert-container\">\n  @if (iconName()) {\n  <div class=\"st-alert-icon\">\n    <st-icon [name]=\"iconName()!\"></st-icon>\n  </div>\n  }\n\n  <div class=\"st-alert-content\">\n    <st-text-stack overflow=\"wrap\">\n      @if (header()) {\n      <p class=\"st-body-bold st-alert-header\">{{ header() }}</p>\n      }\n      <p class=\"st-alert-message\">{{ message() }}</p>\n    </st-text-stack>\n  </div>\n\n\n\n\n  <div class=\"st-alert-actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n\n  @if (dismissible()) {\n  <button stButton variant=\"ghost\" size=\"sm\" class=\"st-alert-dismiss\" (click)=\"dismiss.emit()\"\n    aria-label=\"Dismiss alert\">\n    <st-icon name=\"close\"></st-icon>\n  </button>\n  }\n</div>" }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+class StrataBreadcrumbItemComponent {
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    interactable = input(false, ...(ngDevMode ? [{ debugName: "interactable" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    activated = output();
+    separatorIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "separatorIcon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataBreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataBreadcrumbItemComponent, isStandalone: true, selector: "st-breadcrumb-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, interactable: { classPropertyName: "interactable", publicName: "interactable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { classAttribute: "st-breadcrumb-item" }, ngImport: i0, template: "<li class=\"st-breadcrumb-item-container\">\n  <div class=\"st-breadcrumb-item-content\"\n       stActivatable\n       [interactable]=\"interactable()\"\n       [disabled]=\"disabled()\"\n       (click)=\"activated.emit($event)\">\n    @if (icon()) {\n      <st-icon [name]=\"icon()!\" size=\"sm\" class=\"st-breadcrumb-item-icon\"></st-icon>\n    }\n    <span class=\"st-breadcrumb-item-text\">{{ text() }}</span>\n  </div>\n\n  @if (separatorIcon()) {\n    <st-icon [name]=\"separatorIcon()!\" size=\"sm\" class=\"st-breadcrumb-separator\"></st-icon>\n  }\n</li>\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataActivatableDirective, selector: "[stActivatable]", inputs: ["disabled", "interactable"], outputs: ["interactableChange", "activated"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataBreadcrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-breadcrumb-item', imports: [StrataIconComponent, StrataActivatableDirective], host: {
+                        'class': 'st-breadcrumb-item',
+                    }, template: "<li class=\"st-breadcrumb-item-container\">\n  <div class=\"st-breadcrumb-item-content\"\n       stActivatable\n       [interactable]=\"interactable()\"\n       [disabled]=\"disabled()\"\n       (click)=\"activated.emit($event)\">\n    @if (icon()) {\n      <st-icon [name]=\"icon()!\" size=\"sm\" class=\"st-breadcrumb-item-icon\"></st-icon>\n    }\n    <span class=\"st-breadcrumb-item-text\">{{ text() }}</span>\n  </div>\n\n  @if (separatorIcon()) {\n    <st-icon [name]=\"separatorIcon()!\" size=\"sm\" class=\"st-breadcrumb-separator\"></st-icon>\n  }\n</li>\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactable: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+
+class StrataBreadcrumbComponent {
+    separatorIcon = input('arrow-right', ...(ngDevMode ? [{ debugName: "separatorIcon" }] : []));
+    items = contentChildren(StrataBreadcrumbItemComponent, { ...(ngDevMode ? { debugName: "items" } : {}), descendants: true });
+    constructor() {
+        effect(() => {
+            const items = this.items();
+            const separator = this.separatorIcon();
+            items.forEach((item, index) => {
+                const isLast = index === items.length - 1;
+                item.separatorIcon.set(isLast ? undefined : separator);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataBreadcrumbComponent, isStandalone: true, selector: "st-breadcrumb", inputs: { separatorIcon: { classPropertyName: "separatorIcon", publicName: "separatorIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-breadcrumb" }, queries: [{ propertyName: "items", predicate: StrataBreadcrumbItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"st-breadcrumb-list\">\n    <ng-content></ng-content>\n  </ol>\n</nav>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-breadcrumb', imports: [], host: {
+                        'class': 'st-breadcrumb',
+                    }, template: "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"st-breadcrumb-list\">\n    <ng-content></ng-content>\n  </ol>\n</nav>\n" }]
+        }], ctorParameters: () => [], propDecorators: { separatorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIcon", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataBreadcrumbItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
-class AccordionItemComponent {
+class StrataAccordionItemComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     toggled = output();
     constructor() {
         let firstRun = true;
         effect(() => {
-            let value = this.open();
+            const value = this.open();
             if (!firstRun) {
                 this.toggled.emit(value);
             }
@@ -697,10 +901,10 @@ class AccordionItemComponent {
     get isOpen() {
         return this.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: AccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "attr.open": "this.isOpen" } }, ngImport: i0, template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataAccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "attr.open": "this.isOpen" } }, ngImport: i0, template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-accordion-item', imports: [], template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }], isOpen: [{
@@ -708,15 +912,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['attr.open']
             }] } });
 
-class AccordionGroupComponent {
-    items = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
+class StrataAccordionGroupComponent {
+    items = contentChildren(StrataAccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
     allowMultipleOpen = input(false, ...(ngDevMode ? [{ debugName: "allowMultipleOpen" }] : []));
-    ngAfterContentInit() {
-        this.items().forEach((item) => {
-            item.toggled.subscribe((open) => {
+    constructor() {
+        effect((onCleanup) => {
+            const subs = this.items().map((item) => item.toggled.subscribe((open) => {
                 if (open && !this.allowMultipleOpen()) {
                     this.closeOtherItems(item);
                 }
+            }));
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
             });
         });
     }
@@ -727,16 +934,16 @@ class AccordionGroupComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: AccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataAccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: StrataAccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-accordion-group', imports: [], template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }], allowMultipleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleOpen", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataAccordionItemComponent), { isSignal: true }] }], allowMultipleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleOpen", required: false }] }] } });
 
-class AvatarComponent {
-    iconComponents = contentChildren(IconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
+class StrataAvatarComponent {
+    iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
     text = input(null, ...(ngDevMode ? [{ debugName: "text" }] : []));
     size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     get elementClasses() {
@@ -749,19 +956,19 @@ class AvatarComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.elementClasses" } }, queries: [{ propertyName: "iconComponents", predicate: IconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataAvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.elementClasses" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-avatar', imports: [], template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconComponent), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], elementClasses: [{
+        }], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], elementClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class AvatarStackComponent {
-    avatarRefs = contentChildren(AvatarComponent, { ...(ngDevMode ? { debugName: "avatarRefs" } : {}), descendants: true,
+class StrataAvatarStackComponent {
+    avatarRefs = contentChildren(StrataAvatarComponent, { ...(ngDevMode ? { debugName: "avatarRefs" } : {}), descendants: true,
         read: ElementRef });
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     spacing = input('mid', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
@@ -799,13 +1006,13 @@ class AvatarStackComponent {
             });
         }, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: AvatarStackComponent, isStandalone: true, selector: "st-avatar-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, firstOnFront: { classPropertyName: "firstOnFront", publicName: "firstOnFront", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "this.xsClass", "class.sm": "this.smClass", "class.md": "this.mdClass", "class.lg": "this.lgClass", "class.first-on-front": "this.firstOnFrontClass", "class.loose": "this.looseClass", "class.mid": "this.midClass", "class.tight": "this.tightClass" } }, queries: [{ propertyName: "avatarRefs", predicate: AvatarComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataAvatarStackComponent, isStandalone: true, selector: "st-avatar-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, firstOnFront: { classPropertyName: "firstOnFront", publicName: "firstOnFront", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "this.xsClass", "class.sm": "this.smClass", "class.md": "this.mdClass", "class.lg": "this.lgClass", "class.first-on-front": "this.firstOnFrontClass", "class.loose": "this.looseClass", "class.mid": "this.midClass", "class.tight": "this.tightClass" } }, queries: [{ propertyName: "avatarRefs", predicate: StrataAvatarComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-avatar-stack', imports: [], template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { avatarRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvatarComponent), { ...{
+        }], propDecorators: { avatarRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataAvatarComponent), { ...{
                             descendants: true,
                             read: ElementRef,
                         }, isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], firstOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstOnFront", required: false }] }], xsClass: [{
@@ -834,33 +1041,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['class.tight']
             }] } });
 
-class ButtonGroupComponent {
+class StrataButtonGroupComponent {
     renderer = inject(Renderer2);
     justification = input('start', ...(ngDevMode ? [{ debugName: "justification" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ButtonGroupComponent, isStandalone: true, selector: "st-button-group", inputs: { justification: { classPropertyName: "justification", publicName: "justification", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataButtonGroupComponent, isStandalone: true, selector: "st-button-group", inputs: { justification: { classPropertyName: "justification", publicName: "justification", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-button-group', imports: [], template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" }]
         }], propDecorators: { justification: [{ type: i0.Input, args: [{ isSignal: true, alias: "justification", required: false }] }] } });
 
-class NativeInputRefDirective {
+class StrataNativeInputRefDirective {
     el = inject((ElementRef));
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NativeInputRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NativeInputRefDirective, isStandalone: true, selector: "input[stInput], textarea[stInput]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNativeInputRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: StrataNativeInputRefDirective, isStandalone: true, selector: "input[stInput], textarea[stInput]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NativeInputRefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNativeInputRefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[stInput], textarea[stInput]',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class InputFieldComponent {
-    iconComponents = contentChildren(IconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
-    inputField = contentChild(NativeInputRefDirective, { ...(ngDevMode ? { debugName: "inputField" } : {}), descendants: true });
+class StrataInputFieldComponent {
+    iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
+    inputField = contentChild(StrataNativeInputRefDirective, { ...(ngDevMode ? { debugName: "inputField" } : {}), descendants: true });
     pendingFocus = signal(false, ...(ngDevMode ? [{ debugName: "pendingFocus" }] : []));
     constructor() {
         effect(() => {
@@ -875,7 +1081,6 @@ class InputFieldComponent {
         setTimeout(() => this.iconComponents().forEach((icon) => icon.size.set('sm')), 1);
     }
     focus() {
-        const input = this.inputField();
         this.pendingFocus.set(true);
     }
     blur() {
@@ -884,17 +1089,70 @@ class InputFieldComponent {
     get nativeInput() {
         return this.inputField()?.el.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: InputFieldComponent, isStandalone: true, selector: "st-input-field", queries: [{ propertyName: "iconComponents", predicate: IconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: NativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataInputFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-input-field', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NativeInputRefDirective), { ...{
+            args: [{ selector: 'st-input-field', imports: [], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
                             descendants: true,
                         }, isSignal: true }] }] } });
 
-class DropdownComponent {
+class StrataSelectItemComponent {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    itemClicked = output();
+    hidden = signal(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    elementRef = inject(ElementRef);
+    get display() {
+        return this.hidden() ? 'none' : 'block';
+    }
+    onClick(event) {
+        this.itemClicked.emit(this);
+        event.stopPropagation();
+    }
+    onMouseOver(event) {
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        event.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSelectItemComponent, isStandalone: true, selector: "st-select-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { listeners: { "click": "onClick($event)", "mouseover": "onMouseOver($event)" }, properties: { "style.display": "this.display" }, classAttribute: "single-select-item" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSelectItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'st-select-item',
+                    imports: [],
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        class: 'single-select-item',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover', ['$event']]
+            }] } });
+
+class StrataSelectTriggerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: StrataSelectTriggerDirective, isStandalone: true, selector: "[stSelectTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSelectTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stSelectTrigger]',
+                }]
+        }] });
+
+class StrataSingleSelectComponent {
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
@@ -902,23 +1160,45 @@ class DropdownComponent {
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
     name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     selected = model(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    selectedItem = computed(() => {
+        const val = this.selected();
+        if (val === undefined)
+            return undefined;
+        return this.selectItems().find(item => item.value() === val);
+    }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
     searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     searchQuery = model(...(ngDevMode ? [undefined, { debugName: "searchQuery" }] : []));
     searchPlaceholder = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
-    dropdownItems = input.required(...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
-    shownItems = computed(() => {
-        if (!this.searchQuery()) {
-            return this.dropdownItems();
+    itemSelected = output();
+    selectItems = contentChildren(StrataSelectItemComponent, ...(ngDevMode ? [{ debugName: "selectItems" }] : []));
+    triggerTemplate = contentChild(StrataSelectTriggerDirective, { ...(ngDevMode ? { debugName: "triggerTemplate" } : {}), read: TemplateRef });
+    inputField = viewChild(StrataInputFieldComponent, ...(ngDevMode ? [{ debugName: "inputField" }] : []));
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        effect((onCleanup) => {
+            const items = this.selectItems();
+            const subs = items.map((item) => item.itemClicked.subscribe((clickedItem) => {
+                this.onItemClick(clickedItem);
+            }));
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
+            });
+        });
+    }
+    onSearchChange(query) {
+        const q = query?.toLowerCase().trim() || '';
+        const items = this.selectItems();
+        for (const item of items) {
+            if (!q) {
+                item.hidden.set(false);
+            }
+            else {
+                const match = item.text().toLowerCase().includes(q);
+                item.hidden.set(!match);
+            }
         }
-        return this.dropdownItems().filter((item) => item.text.toLowerCase().includes(this.searchQuery().toLowerCase().trim()));
-    }, ...(ngDevMode ? [{ debugName: "shownItems" }] : []));
-    onSelect = output();
-    inputField = viewChild(InputFieldComponent, ...(ngDevMode ? [{ debugName: "inputField" }] : []));
-    get classList() {
-        return [this.size()];
     }
-    toggleDropdown(event) {
+    toggle(event) {
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -930,16 +1210,10 @@ class DropdownComponent {
             this.show();
         }
     }
-    onItemClick(item, mouseEvent) {
-        this.toggleDropdown();
-        mouseEvent.stopPropagation();
-        this.selected.set(item);
-        this.onSelect.emit(item);
-    }
-    onItemHover(mouseEvent) {
-        mouseEvent.stopPropagation();
-        mouseEvent.stopImmediatePropagation();
-        mouseEvent.preventDefault();
+    onItemClick(item) {
+        this.hide();
+        this.selected.set(item.value());
+        this.itemSelected.emit(item.value());
     }
     show() {
         this.open.set(true);
@@ -950,45 +1224,43 @@ class DropdownComponent {
     hide() {
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DropdownComponent, isStandalone: true, selector: "st-dropdown", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, dropdownItems: { classPropertyName: "dropdownItems", publicName: "dropdownItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", onSelect: "onSelect" }, host: { properties: { "class": "this.classList" } }, viewQueries: [{ propertyName: "inputField", first: true, predicate: InputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n<div\n  class=\"dropdown-input\"\n  [id]=\"name()\"\n  #dropdownInput\n  (click)=\"toggleDropdown($event)\"\n  [attr.data-open]=\"open()\"\n  tabindex=\"0\"\n  [stOverlay]=\"selector\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\">\n  @if (selected()) {\n    {{ selected()!.text }}\n  } @else {\n    <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"dropdown-selector\" #dropdownSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n      <st-input-field>\n        <input stInput #searchField type=\"text\" [(ngModel)]=\"searchQuery\" [placeholder]=\"searchPlaceholder()\" />\n        <button\n          stButton\n          variant=\"ghost\"\n          [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\"\n          suffix\n          size=\"sm\"\n          (click)=\"searchQuery.set(undefined)\">\n          x\n        </button>\n      </st-input-field>\n    }\n    @for (item of shownItems(); track item.id) {\n      <div class=\"dropdown-item\" (click)=\"onItemClick(item, $event)\" (mouseover)=\"onItemHover($event)\">\n        {{ item.text }}\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: OverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: InputFieldComponent, selector: "st-input-field" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataSingleSelectComponent, isStandalone: true, selector: "st-single-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", itemSelected: "itemSelected" }, queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <ng-content select=\"st-select-item\"></ng-content>\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-dropdown', imports: [
-                        IconComponent,
-                        OverlayDirective,
-                        InputFieldComponent,
+            args: [{ selector: 'st-single-select', imports: [
+                        CommonModule,
+                        StrataIconComponent,
+                        StrataOverlayDirective,
+                        StrataInputFieldComponent,
                         FormsModule,
-                        NativeInputRefDirective,
-                        ButtonDirective,
-                    ], template: "@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n<div\n  class=\"dropdown-input\"\n  [id]=\"name()\"\n  #dropdownInput\n  (click)=\"toggleDropdown($event)\"\n  [attr.data-open]=\"open()\"\n  tabindex=\"0\"\n  [stOverlay]=\"selector\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\">\n  @if (selected()) {\n    {{ selected()!.text }}\n  } @else {\n    <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"dropdown-selector\" #dropdownSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n      <st-input-field>\n        <input stInput #searchField type=\"text\" [(ngModel)]=\"searchQuery\" [placeholder]=\"searchPlaceholder()\" />\n        <button\n          stButton\n          variant=\"ghost\"\n          [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\"\n          suffix\n          size=\"sm\"\n          (click)=\"searchQuery.set(undefined)\">\n          x\n        </button>\n      </st-input-field>\n    }\n    @for (item of shownItems(); track item.id) {\n      <div class=\"dropdown-item\" (click)=\"onItemClick(item, $event)\" (mouseover)=\"onItemHover($event)\">\n        {{ item.text }}\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], dropdownItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownItems", required: true }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], inputField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputFieldComponent), { isSignal: true }] }], classList: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                        StrataNativeInputRefDirective,
+                        StrataButtonDirective,
+                    ], template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <ng-content select=\"st-select-item\"></ng-content>\n  </div>\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], selectItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSelectItemComponent), { isSignal: true }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataSelectTriggerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataInputFieldComponent), { isSignal: true }] }] } });
 
-class DividerComponent {
+class StrataDividerComponent {
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
     margin = input(true, ...(ngDevMode ? [{ debugName: "margin" }] : []));
     vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataDividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-divider', imports: [], template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
 
-class TagComponent {
+class StrataTagComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     get class() {
         return this.size();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: TagComponent, isStandalone: true, selector: "st-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataTagComponent, isStandalone: true, selector: "st-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTagComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'st-tag',
@@ -1000,47 +1272,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['class']
             }] } });
 
-class ItemComponent {
-    interactable = input(false, ...(ngDevMode ? [{ debugName: "interactable" }] : []));
+class StrataKbdComponent {
+    config = inject(STRATA_CONFIG);
+    /**
+     * The sequence of keys to display.
+     * Can be an array like `['⌘', 'K']` or a string combo like `'meta+k'`.
+     */
+    keys = input([], ...(ngDevMode ? [{ debugName: "keys" }] : []));
+    resolvedKeys = computed(() => {
+        const rawKeys = this.keys();
+        const labels = this.config.shortcutLabels;
+        const parseKey = (part) => {
+            const p = part.trim().toLowerCase();
+            if (p === 'meta')
+                return labels?.meta || '⌘';
+            if (p === 'ctrl')
+                return labels?.ctrl || 'Ctrl';
+            if (p === 'shift')
+                return labels?.shift || 'Shift';
+            if (p === 'alt')
+                return labels?.alt || 'Alt';
+            return p.length === 1 ? p.toUpperCase() : part.trim();
+        };
+        if (typeof rawKeys === 'string') {
+            return rawKeys.split('+').map(parseKey);
+        }
+        return Array.isArray(rawKeys) ? rawKeys.map(parseKey) : [];
+    }, ...(ngDevMode ? [{ debugName: "resolvedKeys" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataKbdComponent, isStandalone: true, selector: "st-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataKbdComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-kbd', imports: [], template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }] } });
+
+class StrataRadioComponent {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    select = output();
+    get isChecked() {
+        return this.checked();
+    }
+    get isDisabled() {
+        return this.disabled();
+    }
+    onClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.select.emit();
+        this.checked.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataRadioComponent, isStandalone: true, selector: "st-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", select: "select" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-checked": "this.isChecked", "attr.data-disabled": "this.isDisabled" } }, ngImport: i0, template: "<input type=\"radio\" [checked]=\"checked()\" [disabled]=\"disabled()\" />\n<div class=\"radio-visual\"></div>\n@if (label()) {\n  <label>{{ label() }}</label>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-radio', imports: [], template: "<input type=\"radio\" [checked]=\"checked()\" [disabled]=\"disabled()\" />\n<div class=\"radio-visual\"></div>\n@if (label()) {\n  <label>{{ label() }}</label>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], isChecked: [{
+                type: HostBinding,
+                args: ['attr.data-checked']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class StrataItemComponent {
+    element = inject(ElementRef);
+    _activatable = inject(StrataActivatableDirective);
+    checkbox = contentChild(StrataCheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : {}), read: ElementRef });
+    toggle = contentChild(StrataToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : {}), read: ElementRef });
+    radio = contentChild(StrataRadioComponent, { ...(ngDevMode ? { debugName: "radio" } : {}), read: ElementRef });
+    interactable = this._activatable.interactable;
+    disabled = this._activatable.disabled;
+    constructor() {
+        this.interactable.set(false);
+    }
     get isInteractable() {
-        return this.interactable();
+        return this._activatable.isFocusable();
     }
-    get tabIndex() {
-        return this.interactable() ? 0 : null;
+    get isDisabledClass() {
+        return this.disabled();
+    }
+    onHostClick(event) {
+        if (this.disabled() || !this.interactable()) {
+            return;
+        }
+        // Only trigger if we didn't click an interactive element within the item
+        const target = event.target;
+        const isControl = target.closest('st-checkbox, st-toggle, st-radio');
+        if (!isControl) {
+            this.onActivated();
+        }
+    }
+    onActivated() {
+        if (this.disabled())
+            return;
+        // Trigger children if they exist
+        this.checkbox()?.nativeElement.click();
+        this.toggle()?.nativeElement.click();
+        this.radio()?.nativeElement.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ItemComponent, isStandalone: true, selector: "st-item", inputs: { interactable: { classPropertyName: "interactable", publicName: "interactable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.interactable": "this.isInteractable", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataItemComponent, isStandalone: true, selector: "st-item", host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.interactable": "this.isInteractable", "class.disabled": "this.isDisabledClass" } }, queries: [{ propertyName: "checkbox", first: true, predicate: StrataCheckboxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "toggle", first: true, predicate: StrataToggleComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "radio", first: true, predicate: StrataRadioComponent, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: StrataActivatableDirective, inputs: ["disabled", "disabled", "interactable", "interactable"], outputs: ["activated", "activated"] }], ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-item', imports: [], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n" }]
-        }], propDecorators: { interactable: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactable", required: false }] }], isInteractable: [{
+            args: [{ selector: 'st-item', imports: [], hostDirectives: [
+                        {
+                            directive: StrataActivatableDirective,
+                            inputs: ['disabled', 'interactable'],
+                            outputs: ['activated'],
+                        },
+                    ], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n" }]
+        }], ctorParameters: () => [], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataCheckboxComponent), { ...{ read: ElementRef }, isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataToggleComponent), { ...{ read: ElementRef }, isSignal: true }] }], radio: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataRadioComponent), { ...{ read: ElementRef }, isSignal: true }] }], isInteractable: [{
                 type: HostBinding,
                 args: ['class.interactable']
-            }], tabIndex: [{
+            }], isDisabledClass: [{
                 type: HostBinding,
-                args: ['attr.tabindex']
+                args: ['class.disabled']
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
-class ItemListComponent {
+class StrataItemListComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     dividers = input(true, ...(ngDevMode ? [{ debugName: "dividers" }] : []));
     template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : []));
     get hostClasses() {
         return [this.dividers() ? 'with-dividers' : ''];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ItemListComponent, isStandalone: true, selector: "st-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: ItemComponent, selector: "st-item", inputs: ["interactable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataItemListComponent, isStandalone: true, selector: "st-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: StrataItemComponent, selector: "st-item" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-item-list', imports: [ItemComponent, NgTemplateOutlet, CommonModule], template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n" }]
+            args: [{ selector: 'st-item-list', imports: [StrataItemComponent, NgTemplateOutlet, CommonModule], template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class AutoResizeDirective {
+class StrataAutoResizeDirective {
     minimumRows = input(1, ...(ngDevMode ? [{ debugName: "minimumRows" }] : []));
     maximumRows = input(...(ngDevMode ? [undefined, { debugName: "maximumRows" }] : []));
     lineHeight = 0;
@@ -1051,7 +1432,6 @@ class AutoResizeDirective {
     onWindowResize() {
         this.resize();
     }
-    constructor() { }
     ngAfterViewInit() {
         this.calculateLineHeight();
         this.resize();
@@ -1083,15 +1463,15 @@ class AutoResizeDirective {
         textarea.style.height = `${newHeight}px`;
         textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutoResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: AutoResizeDirective, isStandalone: true, selector: "[stAutoResize]", inputs: { minimumRows: { classPropertyName: "minimumRows", publicName: "minimumRows", isSignal: true, isRequired: false, transformFunction: null }, maximumRows: { classPropertyName: "maximumRows", publicName: "maximumRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()", "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAutoResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataAutoResizeDirective, isStandalone: true, selector: "[stAutoResize]", inputs: { minimumRows: { classPropertyName: "minimumRows", publicName: "minimumRows", isSignal: true, isRequired: false, transformFunction: null }, maximumRows: { classPropertyName: "maximumRows", publicName: "maximumRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()", "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutoResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAutoResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stAutoResize]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { minimumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumRows", required: false }] }], maximumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumRows", required: false }] }], onInput: [{
+        }], propDecorators: { minimumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumRows", required: false }] }], maximumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumRows", required: false }] }], onInput: [{
                 type: HostListener,
                 args: ['input']
             }], onWindowResize: [{
@@ -1099,15 +1479,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['window:resize']
             }] } });
 
-class PaginationComponent {
+class StrataPaginationComponent {
     currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
     totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : []));
-    onPageSelect = output();
+    pageSelected = output();
     pageButtons = computed(() => this.calculatePageButtons(this.currentPage(), this.totalPages()), ...(ngDevMode ? [{ debugName: "pageButtons" }] : []));
     hideNextPreviousAtStartEnd = input(false, ...(ngDevMode ? [{ debugName: "hideNextPreviousAtStartEnd" }] : []));
     changePage(newPage) {
         this.currentPage.set(newPage);
-        this.onPageSelect.emit(this.currentPage());
+        this.pageSelected.emit(this.currentPage());
     }
     calculatePageButtons(currentPage, totalPages) {
         const buttons = [];
@@ -1168,19 +1548,19 @@ class PaginationComponent {
             clickable: true,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, hideNextPreviousAtStartEnd: { classPropertyName: "hideNextPreviousAtStartEnd", publicName: "hideNextPreviousAtStartEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageSelect: "onPageSelect" }, ngImport: i0, template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, hideNextPreviousAtStartEnd: { classPropertyName: "hideNextPreviousAtStartEnd", publicName: "hideNextPreviousAtStartEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSelected: "pageSelected" }, ngImport: i0, template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-pagination', imports: [], template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" }]
-        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], onPageSelect: [{ type: i0.Output, args: ["onPageSelect"] }], hideNextPreviousAtStartEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextPreviousAtStartEnd", required: false }] }] } });
+        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], pageSelected: [{ type: i0.Output, args: ["pageSelected"] }], hideNextPreviousAtStartEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextPreviousAtStartEnd", required: false }] }] } });
 
 class CapitalizePipe {
     static capitalize(value) {
         return value.substring(0, 1).toLocaleUpperCase() + value.substring(1);
     }
-    transform(value, ...args) {
+    transform(value, ..._args) {
         return CapitalizePipe.capitalize(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -1195,16 +1575,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-class ProgressComponent {
+class StrataProgressLinearComponent {
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    type = input('linear', ...(ngDevMode ? [{ debugName: "type" }] : []));
     showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
     labelFormat = input('percentage', ...(ngDevMode ? [{ debugName: "labelFormat" }] : []));
     growDirection = input('right', ...(ngDevMode ? [{ debugName: "growDirection" }] : []));
-    size = input(120, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    strokeWidth = input(10, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
     percentage = computed(() => {
         if (this.max() <= this.min()) {
             return 0;
@@ -1214,22 +1591,19 @@ class ProgressComponent {
         const progressableValues = this.max() - this.min();
         return (progressedValue / progressableValues) * 100;
     }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
-    radius = computed(() => (this.size() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
-    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
-    dashOffset = computed(() => this.circumference() * (1 - this.percentage() / 100), ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
     get cssClasses() {
-        return [this.type(), `grow-${this.growDirection()}`];
+        return [`grow-${this.growDirection()}`];
     }
     get percentageProperty() {
         return this.percentage();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProgressComponent, isStandalone: true, selector: "st-progress", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, growDirection: { classPropertyName: "growDirection", publicName: "growDirection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "@switch (type()) {\n  @case (\"linear\") {\n    <div class=\"linear-container\">\n      <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n    </div>\n\n    <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n  }\n  @case (\"radial\") {\n    <div class=\"radial-container\">\n      <svg width=\"100%\" height=\"100%\">\n        <circle class=\"background\"></circle>\n\n        <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n      </svg>\n\n      <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataProgressLinearComponent, isStandalone: true, selector: "st-progress-linear", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, growDirection: { classPropertyName: "growDirection", publicName: "growDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "<div class=\"linear-container\">\n  <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n</div>\n\n<ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressLinearComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-progress', imports: [DecimalPipe, NgTemplateOutlet], template: "@switch (type()) {\n  @case (\"linear\") {\n    <div class=\"linear-container\">\n      <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n    </div>\n\n    <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n  }\n  @case (\"radial\") {\n    <div class=\"radial-container\">\n      <svg width=\"100%\" height=\"100%\">\n        <circle class=\"background\"></circle>\n\n        <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n      </svg>\n\n      <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n" }]
-        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], growDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "growDirection", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], cssClasses: [{
+            args: [{ selector: 'st-progress-linear', imports: [DecimalPipe, NgTemplateOutlet], template: "<div class=\"linear-container\">\n  <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n</div>\n\n<ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n" }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], growDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "growDirection", required: false }] }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], percentageProperty: [{
@@ -1237,11 +1611,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['style.--st-progress-percentage']
             }] } });
 
-class SegmentedControlItemComponent {
+class StrataProgressRadialComponent {
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    labelFormat = input('percentage', ...(ngDevMode ? [{ debugName: "labelFormat" }] : []));
+    size = input(120, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    strokeWidth = input(10, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    percentage = computed(() => {
+        if (this.max() <= this.min()) {
+            return 0;
+        }
+        const clampedValue = Math.min(Math.max(this.value(), this.min()), this.max());
+        const progressedValue = clampedValue - this.min();
+        const progressableValues = this.max() - this.min();
+        return (progressedValue / progressableValues) * 100;
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    radius = computed(() => (this.size() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    dashOffset = computed(() => this.circumference() * (1 - this.percentage() / 100), ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
+    get percentageProperty() {
+        return this.percentage();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressRadialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataProgressRadialComponent, isStandalone: true, selector: "st-progress-radial", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "<div class=\"radial-container\">\n  <svg width=\"100%\" height=\"100%\">\n    <circle class=\"background\"></circle>\n\n    <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n  </svg>\n\n  <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n</div>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressRadialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-progress-radial', imports: [DecimalPipe, NgTemplateOutlet], template: "<div class=\"radial-container\">\n  <svg width=\"100%\" height=\"100%\">\n    <circle class=\"background\"></circle>\n\n    <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n  </svg>\n\n  <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n</div>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n" }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], percentageProperty: [{
+                type: HostBinding,
+                args: ['style.--st-progress-percentage']
+            }] } });
+
+class StrataRadioGroupComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    radios = contentChildren(StrataRadioComponent, { ...(ngDevMode ? { debugName: "radios" } : {}), descendants: true });
+    constructor() {
+        // Sync group value -> children checked state
+        effect(() => {
+            const currentValue = this.value();
+            this.radios().forEach((radio) => {
+                radio.checked.set(radio.value() === currentValue);
+            });
+        });
+        // Handle child selection -> update group value
+        effect((onCleanup) => {
+            const radios = this.radios();
+            const subs = radios.map((radio) => radio.select.subscribe(() => {
+                this.value.set(radio.value());
+            }));
+            onCleanup(() => {
+                subs.forEach((s) => s.unsubscribe());
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataRadioGroupComponent, isStandalone: true, selector: "st-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "radios", predicate: StrataRadioComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'st-radio-group',
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataRadioComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class StrataSegmentedControlItemComponent {
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
     selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    onSelection = output();
+    selectionChanged = output();
     get tabIndex() {
         return this.selected() || this.disabled() ? null : 0;
     }
@@ -1250,17 +1692,17 @@ class SegmentedControlItemComponent {
     }
     onClick() {
         this.selected.set(true);
-        this.onSelection.emit();
+        this.selectionChanged.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", onSelection: "onSelection" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: `{{ text() }} `, isInline: true, styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "{{ text() }}\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-segmented-control-item', imports: [], template: `{{ text() }} `, host: {
+            args: [{ selector: 'st-segmented-control-item', imports: [], host: {
                         '(click)': 'onClick()',
-                    } }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onSelection: [{ type: i0.Output, args: ["onSelection"] }], tabIndex: [{
+                    }, template: "{{ text() }}\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
             }], disabledAttribute: [{
@@ -1268,27 +1710,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['attr.disabled']
             }] } });
 
-class SegmentedControlComponent {
-    segmentItems = contentChildren(SegmentedControlItemComponent, ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
-    segmentItemsRefs = contentChildren(SegmentedControlItemComponent, { ...(ngDevMode ? { debugName: "segmentItemsRefs" } : {}), read: ElementRef });
+class StrataSegmentedControlComponent {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
+    segmentItems = contentChildren(StrataSegmentedControlItemComponent, ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
+    segmentItemsRefs = contentChildren(StrataSegmentedControlItemComponent, { ...(ngDevMode ? { debugName: "segmentItemsRefs" } : {}), read: ElementRef });
     selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
     selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
-    offset = computed(() => this.widths()[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "offset" }] : []));
-    widths = signal([], ...(ngDevMode ? [{ debugName: "widths" }] : []));
+    offsets = signal([], ...(ngDevMode ? [{ debugName: "offsets" }] : []));
+    itemWidths = signal([], ...(ngDevMode ? [{ debugName: "itemWidths" }] : []));
+    tops = signal([], ...(ngDevMode ? [{ debugName: "tops" }] : []));
+    heights = signal([], ...(ngDevMode ? [{ debugName: "heights" }] : []));
+    offset = computed(() => this.offsets()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    indicatorWidth = computed(() => this.itemWidths()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+    indicatorTop = computed(() => this.tops()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "indicatorTop" }] : []));
+    indicatorHeight = computed(() => this.heights()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : []));
     ngAfterViewInit() {
         if (this.segmentItems().length === 0) {
             return;
         }
-        const widths = [];
-        for (let i = 0; i < this.segmentItems().length; i++) {
-            widths.push(this.calculateOffset(i));
-        }
-        this.widths.set(widths);
-        for (const item of this.segmentItems()) {
-            item.onSelection.subscribe(() => {
-                this.selectItem(item);
-            });
-        }
+        this.updateDimensions();
         const initiallySelected = this.segmentItems().find((item) => item.selected());
         if (!initiallySelected) {
             const firstItem = this.segmentItems()[0];
@@ -1298,31 +1740,152 @@ class SegmentedControlComponent {
         else {
             this.selectItem(initiallySelected);
         }
+        const observer = new ResizeObserver(() => {
+            this.updateDimensions();
+        });
+        observer.observe(this.elementRef.nativeElement);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+    }
+    constructor() {
+        effect((onCleanup) => {
+            const items = this.segmentItems();
+            const subs = items.map((item) => item.selectionChanged.subscribe(() => {
+                this.selectItem(item);
+            }));
+            // Also update dimensions when items change
+            this.updateDimensions();
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
+            });
+        });
     }
     selectItem(selectedItem) {
         this.selectedItem.set(selectedItem);
         this.selectedIndex.set(this.segmentItems().indexOf(selectedItem));
     }
-    calculateOffset(currentIndex) {
-        const elementsBeforeIndex = this.segmentItemsRefs().slice(0, currentIndex) ?? [];
-        if (elementsBeforeIndex.length > 0) {
-            return elementsBeforeIndex
-                .map((element) => element.nativeElement.offsetWidth)
-                .reduce((sum, currentValue) => (sum += currentValue));
-        }
-        return 0;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SegmentedControlComponent, isStandalone: true, selector: "st-segmented-control", queries: [{ propertyName: "segmentItems", predicate: SegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: SegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" [style.marginLeft]=\"this.offset() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" });
+    updateDimensions() {
+        const refs = this.segmentItemsRefs();
+        if (!refs || refs.length === 0)
+            return;
+        const offsets = refs.map(ref => ref.nativeElement.offsetLeft);
+        const widths = refs.map(ref => ref.nativeElement.offsetWidth);
+        const tops = refs.map(ref => ref.nativeElement.offsetTop);
+        const heights = refs.map(ref => ref.nativeElement.offsetHeight);
+        this.offsets.set(offsets);
+        this.itemWidths.set(widths);
+        this.tops.set(tops);
+        this.heights.set(heights);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataSegmentedControlComponent, isStandalone: true, selector: "st-segmented-control", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.st-segmented-control-full-width": "fullWidth()" } }, queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n     [style.left]=\"this.offset() + 'px'\"\n     [style.top]=\"this.indicatorTop() + 'px'\"\n     [style.width]=\"this.indicatorWidth() + 'px'\"\n     [style.height]=\"this.indicatorHeight() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-segmented-control', imports: [], template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" [style.marginLeft]=\"this.offset() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" }]
-        }], propDecorators: { segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SegmentedControlItemComponent), { ...{
+            args: [{ selector: 'st-segmented-control', imports: [], host: {
+                        '[class.st-segmented-control-full-width]': 'fullWidth()',
+                    }, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n     [style.left]=\"this.offset() + 'px'\"\n     [style.top]=\"this.indicatorTop() + 'px'\"\n     [style.width]=\"this.indicatorWidth() + 'px'\"\n     [style.height]=\"this.indicatorHeight() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { ...{
                             read: ElementRef,
                         }, isSignal: true }] }] } });
 
-class SliderComponent {
+class StrataSidemenuComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: StrataSidemenuComponent, isStandalone: true, selector: "st-sidemenu", ngImport: i0, template: "<div class=\"st-sidemenu-header\">\n  <ng-content select=\"[st-sidemenu-header]\"></ng-content>\n</div>\n<div class=\"st-sidemenu-content\">\n  <ng-content></ng-content>\n</div>\n<div class=\"st-sidemenu-footer\">\n  <ng-content select=\"[st-sidemenu-footer]\"></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-min-width: 200px;--st-sidemenu-padding: var(--st-size-xs, 12px);--st-sidemenu-header-spacing: var(--st-size-sm, 16px);--st-sidemenu-footer-spacing: var(--st-size-sm, 16px);--st-sidemenu-bg: var(--st-color-bg-default);display:flex;flex-direction:column;height:100%;width:max-content;min-width:var(--st-sidemenu-min-width);box-sizing:border-box;background-color:var(--st-sidemenu-bg)}:host .st-sidemenu-header{display:flex;flex-direction:column;margin-bottom:var(--st-sidemenu-header-spacing)}:host .st-sidemenu-header:empty{display:none;margin-bottom:0}:host .st-sidemenu-content{display:flex;flex-direction:column;flex:1;overflow-y:auto;padding:var(--st-sidemenu-padding)}:host .st-sidemenu-footer{display:flex;flex-direction:column;margin-top:auto;padding-top:var(--st-sidemenu-footer-spacing)}:host .st-sidemenu-footer:empty{display:none;padding-top:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-sidemenu', template: "<div class=\"st-sidemenu-header\">\n  <ng-content select=\"[st-sidemenu-header]\"></ng-content>\n</div>\n<div class=\"st-sidemenu-content\">\n  <ng-content></ng-content>\n</div>\n<div class=\"st-sidemenu-footer\">\n  <ng-content select=\"[st-sidemenu-footer]\"></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-min-width: 200px;--st-sidemenu-padding: var(--st-size-xs, 12px);--st-sidemenu-header-spacing: var(--st-size-sm, 16px);--st-sidemenu-footer-spacing: var(--st-size-sm, 16px);--st-sidemenu-bg: var(--st-color-bg-default);display:flex;flex-direction:column;height:100%;width:max-content;min-width:var(--st-sidemenu-min-width);box-sizing:border-box;background-color:var(--st-sidemenu-bg)}:host .st-sidemenu-header{display:flex;flex-direction:column;margin-bottom:var(--st-sidemenu-header-spacing)}:host .st-sidemenu-header:empty{display:none;margin-bottom:0}:host .st-sidemenu-content{display:flex;flex-direction:column;flex:1;overflow-y:auto;padding:var(--st-sidemenu-padding)}:host .st-sidemenu-footer{display:flex;flex-direction:column;margin-top:auto;padding-top:var(--st-sidemenu-footer-spacing)}:host .st-sidemenu-footer:empty{display:none;padding-top:0}\n"] }]
+        }] });
+
+class StrataSidemenuSectionComponent {
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataSidemenuSectionComponent, isStandalone: true, selector: "st-sidemenu-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label()) {\n<p class=\"st-sidemenu-section-header st-label\">{{ label() }}</p>\n}\n<div class=\"st-sidemenu-section-content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{--st-sidemenu-section-spacing: var(--st-size-sm, 16px);--st-sidemenu-section-header-padding: var(--st-size-xxs, 8px) var(--st-size-xs, 12px);--st-sidemenu-section-header-spacing: var(--st-size-xxxs, 4px);--st-sidemenu-section-gap: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%;margin-block-end:var(--st-sidemenu-section-spacing)}.st-sidemenu-section-header{padding:var(--st-sidemenu-section-header-padding);margin-block-end:var(--st-sidemenu-section-header-spacing)}.st-sidemenu-section-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-section-gap)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-sidemenu-section', template: "@if (label()) {\n<p class=\"st-sidemenu-section-header st-label\">{{ label() }}</p>\n}\n<div class=\"st-sidemenu-section-content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{--st-sidemenu-section-spacing: var(--st-size-sm, 16px);--st-sidemenu-section-header-padding: var(--st-size-xxs, 8px) var(--st-size-xs, 12px);--st-sidemenu-section-header-spacing: var(--st-size-xxxs, 4px);--st-sidemenu-section-gap: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%;margin-block-end:var(--st-sidemenu-section-spacing)}.st-sidemenu-section-header{padding:var(--st-sidemenu-section-header-padding);margin-block-end:var(--st-sidemenu-section-header-spacing)}.st-sidemenu-section-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-section-gap)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+class StrataSidemenuItemDirective {
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    elementRef = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            if (this.active()) {
+                this.elementRef.nativeElement.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        });
+    }
+    isSidemenuItem = true;
+    get isSelected() {
+        return this.active();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataSidemenuItemDirective, isStandalone: true, selector: "[stSidemenuItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.st-sidemenu-item": "this.isSidemenuItem", "class.selected": "this.isSelected" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stSidemenuItem]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], isSidemenuItem: [{
+                type: HostBinding,
+                args: ['class.st-sidemenu-item']
+            }], isSelected: [{
+                type: HostBinding,
+                args: ['class.selected']
+            }] } });
+
+class StrataSidemenuItemGroupComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    hasActiveChild = signal(false, ...(ngDevMode ? [{ debugName: "hasActiveChild" }] : []));
+    router = inject(Router, { optional: true });
+    destroyRef = inject(DestroyRef);
+    routerLinks;
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.checkActiveState();
+        });
+        if (this.router) {
+            this.router.events
+                .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                // Wait a tick for RouterLinkActive to update its isActive status
+                setTimeout(() => {
+                    this.checkActiveState();
+                });
+            });
+        }
+    }
+    toggle() {
+        this.expanded.update((e) => !e);
+    }
+    checkActiveState() {
+        if (!this.routerLinks)
+            return;
+        const isActive = this.routerLinks.some((rla) => rla.isActive);
+        this.hasActiveChild.set(isActive);
+        if (isActive) {
+            this.expanded.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSidemenuItemGroupComponent, isStandalone: true, selector: "st-sidemenu-item-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "routerLinks", predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<button stSidemenuItem type=\"button\" [active]=\"hasActiveChild()\" (click)=\"toggle()\">\n  <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  <st-icon name=\"arrow-down\" size=\"sm\" class=\"st-sidemenu-item-group-icon\" [class.expanded]=\"expanded()\"></st-icon>\n</button>\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-item-group-gap: var(--st-size-xxxs, 4px);--st-sidemenu-item-group-indent: var(--st-size-sm, 16px);--st-sidemenu-item-group-spacing: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%}.st-sidemenu-item-group-icon{margin-left:auto;color:var(--st-color-text-secondary);transition:transform .2s ease}.st-sidemenu-item-group-icon.expanded{transform:rotate(180deg)}.st-sidemenu-item-group-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-item-group-gap);padding-left:var(--st-sidemenu-item-group-indent);margin-top:var(--st-sidemenu-item-group-spacing)}.st-sidemenu-item-group-content[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: StrataSidemenuItemDirective, selector: "[stSidemenuItem]", inputs: ["active"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-sidemenu-item-group', imports: [StrataSidemenuItemDirective, StrataIconComponent], template: "<button stSidemenuItem type=\"button\" [active]=\"hasActiveChild()\" (click)=\"toggle()\">\n  <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  <st-icon name=\"arrow-down\" size=\"sm\" class=\"st-sidemenu-item-group-icon\" [class.expanded]=\"expanded()\"></st-icon>\n</button>\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-item-group-gap: var(--st-size-xxxs, 4px);--st-sidemenu-item-group-indent: var(--st-size-sm, 16px);--st-sidemenu-item-group-spacing: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%}.st-sidemenu-item-group-icon{margin-left:auto;color:var(--st-color-text-secondary);transition:transform .2s ease}.st-sidemenu-item-group-icon.expanded{transform:rotate(180deg)}.st-sidemenu-item-group-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-item-group-gap);padding-left:var(--st-sidemenu-item-group-indent);margin-top:var(--st-sidemenu-item-group-spacing)}.st-sidemenu-item-group-content[hidden]{display:none!important}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], routerLinks: [{
+                type: ContentChildren,
+                args: [RouterLinkActive, { descendants: true }]
+            }] } });
+
+class StrataSliderComponent {
     wrapper = viewChild.required('wrapper');
     resizeObserver;
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
@@ -1367,23 +1930,23 @@ class SliderComponent {
         const size = styles.getPropertyValue('--st-slider-thumb-size');
         return parseFloat(size);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SliderComponent, isStandalone: true, selector: "st-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: true, isRequired: true, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #wrapper\n  class=\"range-wrapper\"\n  [style.--steps]=\"steps()\"\n  [class.stepped]=\"isStepped()\"\n>\n  <input\n    type=\"range\"\n    [(ngModel)]=\"value\"\n    [min]=\"minimum()\"\n    [max]=\"maximum()\"\n    [step]=\"computedStep()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataSliderComponent, isStandalone: true, selector: "st-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: true, isRequired: true, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #wrapper\n  class=\"range-wrapper\"\n  [style.--steps]=\"steps()\"\n  [class.stepped]=\"isStepped()\"\n>\n  <input\n    type=\"range\"\n    [(ngModel)]=\"value\"\n    [min]=\"minimum()\"\n    [max]=\"maximum()\"\n    [step]=\"computedStep()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-slider', imports: [FormsModule], template: "<div\n  #wrapper\n  class=\"range-wrapper\"\n  [style.--steps]=\"steps()\"\n  [class.stepped]=\"isStepped()\"\n>\n  <input\n    type=\"range\"\n    [(ngModel)]=\"value\"\n    [min]=\"minimum()\"\n    [max]=\"maximum()\"\n    [step]=\"computedStep()\"\n  />\n</div>\n" }]
         }], propDecorators: { wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minimum: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimum", required: true }] }], maximum: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximum", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
 
-class SpinnerComponent {
+class StrataSpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     get cssClasses() {
         return [this.size()];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SpinnerComponent, isStandalone: true, selector: "st-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<span class=\"st-spinner\"></span>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSpinnerComponent, isStandalone: true, selector: "st-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<span class=\"st-spinner\"></span>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-spinner', imports: [], template: "<span class=\"st-spinner\"></span>\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cssClasses: [{
@@ -1391,23 +1954,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['class']
             }] } });
 
-class TextStackComponent {
-    overflow = input('truncate', ...(ngDevMode ? [{ debugName: "overflow" }] : []));
-    get cssClasses() {
-        return [this.overflow()];
+class StrataTabItemComponent {
+    /**
+     * The text label for the tab.
+     * Can also be provided via content projection.
+     */
+    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+    /**
+     * Whether the tab is currently selected.
+     */
+    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    /**
+     * Whether the tab is disabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Emitted when the tab is clicked.
+     */
+    selectionChanged = output();
+    get isSelected() {
+        return this.selected();
+    }
+    get isDisabled() {
+        return this.disabled();
+    }
+    get tabIndex() {
+        return this.selected() || this.disabled() ? null : 0;
+    }
+    get activeClass() {
+        return this.selected();
+    }
+    get disabledClass() {
+        return this.disabled();
+    }
+    onClick() {
+        if (this.disabled()) {
+            return;
+        }
+        this.selected.set(true);
+        this.selectionChanged.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: TextStackComponent, isStandalone: true, selector: "st-text-stack", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataTabItemComponent, isStandalone: true, selector: "st-tab-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-selected": "this.isSelected", "attr.aria-disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex", "class.active": "this.activeClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "@if (text()) {\n  {{ text() }}\n} @else {\n  <ng-content></ng-content>\n}\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-text-stack', imports: [], template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], cssClasses: [{
+            args: [{ selector: 'st-tab-item', imports: [], host: {
+                        'role': 'tab',
+                        '(click)': 'onClick()',
+                    }, template: "@if (text()) {\n  {{ text() }}\n} @else {\n  <ng-content></ng-content>\n}\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], isSelected: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['attr.aria-selected']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.disabled']
             }] } });
 
-class ThemeDirective {
+class StrataTabsComponent {
+    tabItems = contentChildren(StrataTabItemComponent, { ...(ngDevMode ? { debugName: "tabItems" } : {}), descendants: true });
+    tabItemsRefs = contentChildren(StrataTabItemComponent, { ...(ngDevMode ? { debugName: "tabItemsRefs" } : {}), descendants: true,
+        read: ElementRef });
+    indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : []));
+    selectedTab = signal(null, ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
+    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    resizeObserver;
+    constructor() {
+        // Coordinate child selection
+        effect((onCleanup) => {
+            const items = this.tabItems();
+            const subs = items.map((item, index) => item.selectionChanged.subscribe(() => {
+                this.selectTab(item, index);
+            }));
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
+            });
+        });
+        // Handle responsive indicator updates
+        effect((onCleanup) => {
+            const indicatorEl = this.indicator()?.nativeElement;
+            const refs = this.tabItemsRefs();
+            const index = this.selectedIndex();
+            if (!indicatorEl || refs.length === 0 || index < 0)
+                return;
+            const activeRef = refs[index].nativeElement;
+            // Update immediately
+            this.updateIndicator(activeRef, indicatorEl);
+            // And on every resize of the active tab
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateIndicator(activeRef, indicatorEl);
+            });
+            this.resizeObserver.observe(activeRef);
+            onCleanup(() => this.resizeObserver?.disconnect());
+        });
+    }
+    ngAfterViewInit() {
+        // Set initial selection
+        const items = this.tabItems();
+        if (items.length > 0) {
+            const initiallySelected = items.find((item) => item.selected());
+            if (initiallySelected) {
+                this.selectTab(initiallySelected, items.indexOf(initiallySelected));
+            }
+            else {
+                this.selectTab(items[0], 0);
+            }
+        }
+    }
+    updateIndicator(activeElement, indicatorElement) {
+        indicatorElement.style.width = `${activeElement.offsetWidth}px`;
+        indicatorElement.style.left = `${activeElement.offsetLeft}px`;
+    }
+    selectTab(tab, index) {
+        // Unselect others
+        this.tabItems().forEach((item) => {
+            if (item !== tab) {
+                item.selected.set(false);
+            }
+        });
+        tab.selected.set(true);
+        this.selectedTab.set(tab);
+        this.selectedIndex.set(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataTabsComponent, isStandalone: true, selector: "st-tabs", host: { classAttribute: "st-tabs-host" }, queries: [{ propertyName: "tabItems", predicate: StrataTabItemComponent, descendants: true, isSignal: true }, { propertyName: "tabItemsRefs", predicate: StrataTabItemComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\n  <ng-content></ng-content>\n  <div #indicator class=\"selection-indicator\"></div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-tabs', imports: [], host: {
+                        'class': 'st-tabs-host',
+                    }, template: "<div class=\"tabs-container\" role=\"tablist\">\n  <ng-content></ng-content>\n  <div #indicator class=\"selection-indicator\"></div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { tabItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataTabItemComponent), { ...{ descendants: true }, isSignal: true }] }], tabItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataTabItemComponent), { ...{
+                            descendants: true,
+                            read: ElementRef,
+                        }, isSignal: true }] }], indicator: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }] } });
+
+class StrataThemeDirective {
     element = inject(ElementRef);
     stTheme = input.required(...(ngDevMode ? [{ debugName: "stTheme" }] : []));
     constructor() {
@@ -1423,57 +2114,31 @@ class ThemeDirective {
             el.classList.add(`st-theme-${theme}`);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ThemeDirective, isStandalone: true, selector: "[stTheme]", inputs: { stTheme: { classPropertyName: "stTheme", publicName: "stTheme", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataThemeDirective, isStandalone: true, selector: "[stTheme]", inputs: { stTheme: { classPropertyName: "stTheme", publicName: "stTheme", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stTheme]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { stTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "stTheme", required: true }] }] } });
 
-class Stack {
-    items = [];
-    push(item) {
-        this.items.push(item);
-    }
-    pop() {
-        const lastItem = this.items.pop();
-        if (lastItem === undefined) {
-            throw new Error();
-        }
-        return lastItem;
-    }
-    peek() {
-        return this.items[this.items.length - 1];
-    }
-    empty() {
-        return this.items.length === 0;
-    }
-    size() {
-        return this.items.length;
-    }
-}
-
 class ModalService {
-    stack = new Stack();
-    currentModals = new BehaviorSubject(this.stack);
+    _modals = signal([], ...(ngDevMode ? [{ debugName: "_modals" }] : []));
+    modals = this._modals.asReadonly();
     showModal(config) {
-        this.stack.push({
-            ...config,
-            id: crypto.randomUUID(),
-            size: config.size ?? 'md',
-        });
-        this.currentModals.next(this.stack);
+        if (!config.size) {
+            config.size = 'md';
+        }
+        this._modals.update((prev) => [...prev, config]);
     }
     showAlert(config, callback) {
         this.showModal({
-            component: AlertContentComponent,
+            component: StrataAlertContentComponent,
             size: 'xs',
             hideCloseButton: true,
-            onModalClosed: callback,
+            onModalClosed: (val) => callback(val),
             disableBackdropClosure: true,
             inputs: {
                 title: config.title,
@@ -1486,10 +2151,26 @@ class ModalService {
         });
     }
     closeCurrentModal(value) {
-        const currentModal = this.stack.pop();
-        this.currentModals.next(this.stack);
-        if (currentModal.onModalClosed) {
-            currentModal.onModalClosed(value);
+        const currentStack = this._modals();
+        if (currentStack.length === 0) {
+            return;
+        }
+        const modalToClose = currentStack[currentStack.length - 1];
+        this.close(modalToClose, value);
+    }
+    close(config, value) {
+        const currentStack = this._modals();
+        const index = currentStack.lastIndexOf(config);
+        if (index === -1) {
+            return;
+        }
+        this._modals.update((prev) => {
+            const next = [...prev];
+            next.splice(index, 1);
+            return next;
+        });
+        if (config.onModalClosed) {
+            config.onModalClosed(value);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1502,7 +2183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-class AlertContentComponent {
+class StrataAlertContentComponent {
     modalService;
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
     message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
@@ -1522,15 +2203,24 @@ class AlertContentComponent {
     onCancel() {
         this.modalService.closeCurrentModal(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertContentComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "st-avatar", inputs: ["text", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: ThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: ButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertContentComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataAlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["text", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-alert-content', imports: [AvatarComponent, IconComponent, ThemeDirective, ButtonGroupComponent, ButtonDirective], template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n" }]
+            args: [{ selector: 'st-alert-content', imports: [
+                        StrataAvatarComponent,
+                        StrataIconComponent,
+                        StrataThemeDirective,
+                        StrataButtonGroupComponent,
+                        StrataButtonDirective,
+                    ], template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n" }]
         }], ctorParameters: () => [{ type: ModalService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], affirmativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "affirmativeButton", required: true }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }] } });
 
-class ModalHeaderComponent {
+class StrataModalRef {
+}
+
+class StrataModalHeaderComponent {
     modalService = inject(ModalService);
     title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
     showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
@@ -1538,15 +2228,17 @@ class ModalHeaderComponent {
         this.modalService.closeCurrentModal();
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalHeaderComponent, isStandalone: true, selector: "st-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <h3>{{ title() }}</h3>\n}\n@if (showCloseButton()) {\n  <button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n    <st-icon name=\"close\" size=\"sm\"></st-icon>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataModalHeaderComponent, isStandalone: true, selector: "st-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n<span class=\"st-body-l-bold\">{{ title() }}</span>\n}\n@if (showCloseButton()) {\n<button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n  <st-icon name=\"close\" size=\"sm\"></st-icon>\n</button>\n}", dependencies: [{ kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-modal-header', imports: [ButtonDirective, IconComponent, ButtonDirective], template: "@if (title()) {\n  <h3>{{ title() }}</h3>\n}\n@if (showCloseButton()) {\n  <button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n    <st-icon name=\"close\" size=\"sm\"></st-icon>\n  </button>\n}\n" }]
+            args: [{ selector: 'st-modal-header', imports: [StrataButtonDirective, StrataIconComponent], template: "@if (title()) {\n<span class=\"st-body-l-bold\">{{ title() }}</span>\n}\n@if (showCloseButton()) {\n<button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n  <st-icon name=\"close\" size=\"sm\"></st-icon>\n</button>\n}" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] } });
 
-class ModalComponent {
+class StrataModalComponent {
+    modalService = inject(ModalService);
+    injector = inject(Injector);
     modalContents = viewChild.required('modalBody', {
         read: ViewContainerRef,
     });
@@ -1559,7 +2251,16 @@ class ModalComponent {
         if (this.size() === undefined) {
             this.size.set('md');
         }
-        const injectedComponent = this.modalContents().createComponent(this.configuration().component);
+        const modalRef = {
+            close: (value) => this.modalService.close(this.configuration(), value),
+        };
+        const customInjector = Injector.create({
+            providers: [{ provide: StrataModalRef, useValue: modalRef }],
+            parent: this.injector,
+        });
+        const injectedComponent = this.modalContents().createComponent(this.configuration().component, {
+            injector: customInjector,
+        });
         if (this.configuration().inputs) {
             this.setInputsOnInjectedComponent(injectedComponent, this.configuration().inputs);
         }
@@ -1572,12 +2273,12 @@ class ModalComponent {
     onCardClick(event) {
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "st-modal", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.sizeClass" } }, viewQueries: [{ propertyName: "modalContents", first: true, predicate: ["modalBody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n", dependencies: [{ kind: "component", type: ModalHeaderComponent, selector: "st-modal-header", inputs: ["title", "showCloseButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataModalComponent, isStandalone: true, selector: "st-modal", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.sizeClass" } }, viewQueries: [{ propertyName: "modalContents", first: true, predicate: ["modalBody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n", dependencies: [{ kind: "component", type: StrataModalHeaderComponent, selector: "st-modal-header", inputs: ["title", "showCloseButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-modal', imports: [ModalHeaderComponent], template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n" }]
+            args: [{ selector: 'st-modal', imports: [StrataModalHeaderComponent], template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n" }]
         }], propDecorators: { modalContents: [{ type: i0.ViewChild, args: ['modalBody', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], sizeClass: [{
@@ -1585,38 +2286,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['class']
             }] } });
 
-class ModalContainerComponent {
+class StrataModalContainerComponent {
     modalService;
-    injectedComponent;
-    currentModal = null;
-    stack = new Stack();
-    subscription;
     constructor(modalService) {
         this.modalService = modalService;
-        this.subscription = this.modalService['currentModals'].asObservable().subscribe((modalStack) => {
-            this.stack = modalStack;
-        });
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
     }
     onBackdropClick(event) {
         event.stopPropagation();
-        const currentModal = this.stack.peek();
-        if (currentModal.disableBackdropClosure) {
+        const modals = this.modalService.modals();
+        const currentModal = modals[modals.length - 1];
+        if (!currentModal || currentModal.disableBackdropClosure) {
             return;
         }
         this.modalService.closeCurrentModal();
     }
-    stackTrack(index, item) {
-        return item.id;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalContainerComponent, isStandalone: true, selector: "st-modal-container", ngImport: i0, template: "<div class=\"modal-wrapper\">\n  @for (modal of stack.items; track modal.id; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\"> </st-modal>\n  }\n</div>\n@if (!stack.empty()) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "st-modal", inputs: ["configuration", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalContainerComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataModalContainerComponent, isStandalone: true, selector: "st-modal-container", ngImport: i0, template: "<div class=\"modal-wrapper\">\n  @for (modal of modalService.modals(); track modal; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\"> </st-modal>\n  }\n</div>\n@if (modalService.modals().length > 0) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n", dependencies: [{ kind: "component", type: StrataModalComponent, selector: "st-modal", inputs: ["configuration", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-modal-container', imports: [ModalComponent, CommonModule], template: "<div class=\"modal-wrapper\">\n  @for (modal of stack.items; track modal.id; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\"> </st-modal>\n  }\n</div>\n@if (!stack.empty()) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n" }]
+            args: [{ selector: 'st-modal-container', imports: [StrataModalComponent, CommonModule], template: "<div class=\"modal-wrapper\">\n  @for (modal of modalService.modals(); track modal; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\"> </st-modal>\n  }\n</div>\n@if (modalService.modals().length > 0) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n" }]
         }], ctorParameters: () => [{ type: ModalService }] });
 
 const DEFAULT_THEME = 'info';
@@ -1628,14 +2317,16 @@ class NotificationService {
         const newNotificationId = crypto.randomUUID();
         const duration = config.duration ?? DEFAULT_DURATION;
         const currentStack = this.notificationStack();
-        currentStack.push({
-            id: newNotificationId,
-            message: config.message,
-            duration: duration,
-            theme: config.theme ?? DEFAULT_THEME,
-            icon: config.icon,
-        });
-        this.notificationStack.set(currentStack);
+        this.notificationStack.set([
+            ...currentStack,
+            {
+                id: newNotificationId,
+                message: config.message,
+                duration: duration,
+                theme: config.theme ?? DEFAULT_THEME,
+                icon: config.icon,
+            }
+        ]);
         this.hideNotification(newNotificationId, duration);
     }
     hideNotification(notificationId, duration) {
@@ -1654,34 +2345,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-class NotificationComponent {
+class StrataNotificationComponent {
     icon;
     message;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NotificationComponent, isStandalone: true, selector: "st-notification", inputs: { icon: "icon", message: "message" }, ngImport: i0, template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataNotificationComponent, isStandalone: true, selector: "st-notification", inputs: { icon: "icon", message: "message" }, ngImport: i0, template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-notification', imports: [IconComponent], template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n" }]
+            args: [{ selector: 'st-notification', imports: [StrataIconComponent], template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n" }]
         }], propDecorators: { icon: [{
                 type: Input
             }], message: [{
                 type: Input
             }] } });
 
-class NotificationContainerComponent {
+class StrataNotificationContainerComponent {
     notificationService = inject(NotificationService);
     notifications = this.notificationService.notificationStack;
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NotificationContainerComponent, isStandalone: true, selector: "st-notification-container", ngImport: i0, template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n", dependencies: [{ kind: "component", type: NotificationComponent, selector: "st-notification", inputs: ["icon", "message"] }, { kind: "directive", type: ThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataNotificationContainerComponent, isStandalone: true, selector: "st-notification-container", ngImport: i0, template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n", dependencies: [{ kind: "component", type: StrataNotificationComponent, selector: "st-notification", inputs: ["icon", "message"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-notification-container', imports: [NotificationComponent, ThemeDirective], template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'st-notification-container', imports: [StrataNotificationComponent, StrataThemeDirective], template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n" }]
+        }] });
 
-class NumberDisplayComponent {
+class StrataNumberDisplayComponent {
     locale = inject(LOCALE_ID);
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     decimals = input(2, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
@@ -1700,14 +2390,39 @@ class NumberDisplayComponent {
     showPlus = input(false, ...(ngDevMode ? [{ debugName: "showPlus" }] : []));
     deemphasizeDecimals = input(true, ...(ngDevMode ? [{ debugName: "deemphasizeDecimals" }] : []));
     decimalPoint = computed(() => getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal), ...(ngDevMode ? [{ debugName: "decimalPoint" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NumberDisplayComponent, isStandalone: true, selector: "st-number-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, changedValue: { classPropertyName: "changedValue", publicName: "changedValue", isSignal: true, isRequired: false, transformFunction: null }, showPlus: { classPropertyName: "showPlus", publicName: "showPlus", isSignal: true, isRequired: false, transformFunction: null }, deemphasizeDecimals: { classPropertyName: "deemphasizeDecimals", publicName: "deemphasizeDecimals", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    positive: changedValue() && value() > 0,\n    negative: changedValue() && value() < 0,\n  }\"\n>\n  @if (showPlus() && this.value() > 0) {\n    +\n  }\n  <span class=\"integer-value\">{{ separatedDigits().integer }}</span>\n  @if (separatedDigits().decimals) {\n    <span\n      class=\"decimal-number\"\n      [ngClass]=\"{ deemphasize: deemphasizeDecimals }\"\n      >{{ decimalPoint() }}{{ separatedDigits().decimals }}</span\n    >\n  }\n</p>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataNumberDisplayComponent, isStandalone: true, selector: "st-number-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, changedValue: { classPropertyName: "changedValue", publicName: "changedValue", isSignal: true, isRequired: false, transformFunction: null }, showPlus: { classPropertyName: "showPlus", publicName: "showPlus", isSignal: true, isRequired: false, transformFunction: null }, deemphasizeDecimals: { classPropertyName: "deemphasizeDecimals", publicName: "deemphasizeDecimals", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    positive: changedValue() && value() > 0,\n    negative: changedValue() && value() < 0,\n  }\"\n>\n  @if (showPlus() && this.value() > 0) {\n    +\n  }\n  <span class=\"integer-value\">{{ separatedDigits().integer }}</span>\n  @if (separatedDigits().decimals) {\n    <span\n      class=\"decimal-number\"\n      [ngClass]=\"{ deemphasize: deemphasizeDecimals }\"\n      >{{ decimalPoint() }}{{ separatedDigits().decimals }}</span\n    >\n  }\n</p>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NumberDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNumberDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-number-display', imports: [CommonModule], template: "<p\n  [ngClass]=\"{\n    positive: changedValue() && value() > 0,\n    negative: changedValue() && value() < 0,\n  }\"\n>\n  @if (showPlus() && this.value() > 0) {\n    +\n  }\n  <span class=\"integer-value\">{{ separatedDigits().integer }}</span>\n  @if (separatedDigits().decimals) {\n    <span\n      class=\"decimal-number\"\n      [ngClass]=\"{ deemphasize: deemphasizeDecimals }\"\n      >{{ decimalPoint() }}{{ separatedDigits().decimals }}</span\n    >\n  }\n</p>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], changedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "changedValue", required: false }] }], showPlus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlus", required: false }] }], deemphasizeDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "deemphasizeDecimals", required: false }] }] } });
 
+class StrataShellComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: StrataShellComponent, isStandalone: true, selector: "st-shell", ngImport: i0, template: "<st-notification-container></st-notification-container>\n<st-modal-container></st-modal-container>\n<ng-content></ng-content>", dependencies: [{ kind: "component", type: StrataModalContainerComponent, selector: "st-modal-container" }, { kind: "component", type: StrataNotificationContainerComponent, selector: "st-notification-container" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-shell', imports: [StrataModalContainerComponent, StrataNotificationContainerComponent], template: "<st-notification-container></st-notification-container>\n<st-modal-container></st-modal-container>\n<ng-content></ng-content>" }]
+        }] });
+
+class StrataMessageStateComponent {
+    header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
+    subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    primaryActionText = input(undefined, ...(ngDevMode ? [{ debugName: "primaryActionText" }] : []));
+    primaryActionTheme = input(undefined, ...(ngDevMode ? [{ debugName: "primaryActionTheme" }] : []));
+    secondaryActionText = input(undefined, ...(ngDevMode ? [{ debugName: "secondaryActionText" }] : []));
+    primaryAction = output();
+    secondaryAction = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataMessageStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataMessageStateComponent, isStandalone: true, selector: "st-message-state", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, primaryActionText: { classPropertyName: "primaryActionText", publicName: "primaryActionText", isSignal: true, isRequired: false, transformFunction: null }, primaryActionTheme: { classPropertyName: "primaryActionTheme", publicName: "primaryActionTheme", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionText: { classPropertyName: "secondaryActionText", publicName: "secondaryActionText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div class=\"st-message-state-graphic\">\n  <ng-content></ng-content>\n</div>\n\n<st-text-stack>\n  <h3 class=\"st-message-state-header\">{{ header() }}</h3>\n  @if (subtitle()) {\n    <p class=\"st-message-state-subtitle\">{{ subtitle() }}</p>\n  }\n</st-text-stack>\n\n@if (primaryActionText() || secondaryActionText()) {\n  <div class=\"st-message-state-actions\">\n    @if (secondaryActionText()) {\n      <button \n        stButton \n        variant=\"secondary\" \n        (click)=\"secondaryAction.emit()\">\n        {{ secondaryActionText() }}\n      </button>\n    }\n    @if (primaryActionText()) {\n      <button \n        stButton \n        variant=\"primary\" \n        [stTheme]=\"primaryActionTheme() || 'default'\" \n        (click)=\"primaryAction.emit()\">\n        {{ primaryActionText() }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{--st-message-state-align-items: center;--st-message-state-text-align: center;--st-message-state-gap: var(--st-size-lg, 32px);--st-message-state-content-gap: var(--st-size-xxs, 8px);--st-message-state-actions-gap: var(--st-size-sm, 16px);--st-message-state-padding: var(--st-size-lg, 32px);display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);text-align:var(--st-message-state-text-align);gap:var(--st-message-state-gap);padding:var(--st-message-state-padding);width:100%;box-sizing:border-box}.st-message-state-graphic{display:flex;justify-content:center;align-items:center}.st-message-state-content{display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);gap:var(--st-message-state-content-gap);width:100%}.st-message-state-header{color:var(--st-color-text-primary);margin:0}.st-message-state-subtitle{color:var(--st-color-text-secondary);margin:0}.st-message-state-actions{display:flex;justify-content:center;gap:var(--st-message-state-actions-gap)}\n"], dependencies: [{ kind: "component", type: StrataTextStackComponent, selector: "st-text-stack", inputs: ["overflow"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataMessageStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-message-state', imports: [StrataTextStackComponent, StrataButtonDirective, StrataThemeDirective], template: "<div class=\"st-message-state-graphic\">\n  <ng-content></ng-content>\n</div>\n\n<st-text-stack>\n  <h3 class=\"st-message-state-header\">{{ header() }}</h3>\n  @if (subtitle()) {\n    <p class=\"st-message-state-subtitle\">{{ subtitle() }}</p>\n  }\n</st-text-stack>\n\n@if (primaryActionText() || secondaryActionText()) {\n  <div class=\"st-message-state-actions\">\n    @if (secondaryActionText()) {\n      <button \n        stButton \n        variant=\"secondary\" \n        (click)=\"secondaryAction.emit()\">\n        {{ secondaryActionText() }}\n      </button>\n    }\n    @if (primaryActionText()) {\n      <button \n        stButton \n        variant=\"primary\" \n        [stTheme]=\"primaryActionTheme() || 'default'\" \n        (click)=\"primaryAction.emit()\">\n        {{ primaryActionText() }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{--st-message-state-align-items: center;--st-message-state-text-align: center;--st-message-state-gap: var(--st-size-lg, 32px);--st-message-state-content-gap: var(--st-size-xxs, 8px);--st-message-state-actions-gap: var(--st-size-sm, 16px);--st-message-state-padding: var(--st-size-lg, 32px);display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);text-align:var(--st-message-state-text-align);gap:var(--st-message-state-gap);padding:var(--st-message-state-padding);width:100%;box-sizing:border-box}.st-message-state-graphic{display:flex;justify-content:center;align-items:center}.st-message-state-content{display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);gap:var(--st-message-state-content-gap);width:100%}.st-message-state-header{color:var(--st-color-text-primary);margin:0}.st-message-state-subtitle{color:var(--st-color-text-secondary);margin:0}.st-message-state-actions{display:flex;justify-content:center;gap:var(--st-message-state-actions-gap)}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], primaryActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActionText", required: false }] }], primaryActionTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActionTheme", required: false }] }], secondaryActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionText", required: false }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], secondaryAction: [{ type: i0.Output, args: ["secondaryAction"] }] } });
+
 /*
  * Public API Surface of ngx-strata
  */
@@ -1716,5 +2431,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionGroupComponent, AccordionItemComponent, ActionMenuComponent, ActionMenuItemComponent, AlertContentComponent, AutoResizeDirective, AvatarComponent, AvatarStackComponent, ButtonDirective, ButtonGroupComponent, CapitalizePipe, CardComponent, CheckboxComponent, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DividerComponent, DropdownComponent, HttpIconLoader, IconComponent, IconLoader, IconRegistry, IconRegistryService, InputFieldComponent, ItemComponent, ItemListComponent, ModalComponent, ModalContainerComponent, ModalHeaderComponent, ModalService, NativeInputRefDirective, NotificationComponent, NotificationContainerComponent, NotificationService, NumberDisplayComponent, OverlayDirective, PaginationComponent, ProgressComponent, STRATA_CONFIG, SegmentedControlComponent, SegmentedControlItemComponent, SliderComponent, SpinnerComponent, TagComponent, TextStackComponent, ThemeDirective, ToggleComponent, TooltipDirective, provideBaseIcons, provideIcons, provideStrata };
+export { CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataIconComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSliderComponent, StrataSpinnerComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, provideBaseIcons, provideIcons, provideStrata };
 //# sourceMappingURL=ngx-strata.mjs.map