ngx-strata 0.2.0 → 0.2.1

package/fesm2022/ngx-strata.mjs

@@ -1,16 +1,46 @@
 import * as i0 from '@angular/core';
-import { Injectable, provideAppInitializer, inject, makeEnvironmentProviders, InjectionToken, input, DOCUMENT, Input, Inject, Directive, signal, computed, effect, DestroyRef, model, HostListener, Component, HostBinding, contentChild, ElementRef, output, ViewContainerRef, viewChild, contentChildren, Renderer2, Pipe, booleanAttribute, ContentChildren, 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, fromEvent, filter, 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-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 {
 }
 
@@ -467,41 +497,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataToggleComponent {
+    _activatable = inject(StrataActivatableDirective);
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    get isDisabled() {
-        return this.disabled();
-    }
-    get isChecked() {
-        return this.checked();
-    }
-    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: StrataToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { 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" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onCheckChanged()" }, properties: { "attr.data-disabled": "this.isDisabled", "attr.data-checked": "this.isChecked" } }, ngImport: i0, template: "<div class=\"toggle-handle\"></div>\n" });
+    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: 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"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.data-disabled']
-            }], isChecked: [{
-                type: HostBinding,
-                args: ['attr.data-checked']
-            }] } });
+            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 StrataActionMenuItemComponent {
     checkbox = contentChild(StrataCheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : {}), read: ElementRef });
     toggle = contentChild(StrataToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : {}), read: ElementRef });
     closeMenuOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeMenuOnClick" }] : []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    get isActive() {
+        return this.active();
+    }
     menuItemClicked = output();
     elementRef = inject(ElementRef);
     onHostClick(event) {
@@ -511,12 +551,15 @@ class StrataActionMenuItemComponent {
         this.toggle()?.nativeElement.click();
     }
     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 } }, outputs: { menuItemClicked: "menuItemClicked" }, host: { listeners: { "click": "onHostClick($event)" } }, 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"] });
+    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: 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(() => 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 }] }], menuItemClicked: [{ type: i0.Output, args: ["menuItemClicked"] }], 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']]
             }] } });
@@ -638,62 +681,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataIconComponent {
-    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;
     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;
-        });
-    }
+    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: 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>\n" });
+    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: StrataIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-icon', imports: [], template: "<span [innerHTML]=\"svgMarkdown\"></span>\n" }]
-        }], 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 StrataOverlayDirective {
     stOverlay = input.required(...(ngDevMode ? [{ debugName: "stOverlay" }] : []));
@@ -704,6 +707,7 @@ class StrataOverlayDirective {
     viewContainerRef = inject(ViewContainerRef);
     overlayEl;
     cleanup;
+    viewRef;
     ngOnChanges() {
         if (this.overlayOpen()) {
             this.create();
@@ -715,9 +719,9 @@ class StrataOverlayDirective {
     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());
     }
@@ -726,15 +730,17 @@ class StrataOverlayDirective {
             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 } = 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`);
     }
@@ -743,6 +749,10 @@ class StrataOverlayDirective {
             this.cleanup();
         if (this.overlayEl)
             this.overlayEl.remove();
+        if (this.viewRef) {
+            this.viewRef.destroy();
+            this.viewRef = undefined;
+        }
         this.overlayEl = undefined;
     }
     ngOnDestroy() {
@@ -833,6 +843,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             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 StrataAccordionItemComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
@@ -1049,7 +1099,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             descendants: true,
                         }, isSignal: true }] }] } });
 
-class StrataDropdownComponent {
+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" }] : []));
@@ -1057,23 +1160,45 @@ class StrataDropdownComponent {
     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();
-        }
-        return this.dropdownItems().filter((item) => item.text.toLowerCase().includes(this.searchQuery().toLowerCase().trim()));
-    }, ...(ngDevMode ? [{ debugName: "shownItems" }] : []));
     itemSelected = output();
+    selectItems = contentChildren(StrataSelectItemComponent, ...(ngDevMode ? [{ debugName: "selectItems" }] : []));
+    triggerTemplate = contentChild(StrataSelectTriggerDirective, { ...(ngDevMode ? { debugName: "triggerTemplate" } : {}), read: TemplateRef });
     inputField = viewChild(StrataInputFieldComponent, ...(ngDevMode ? [{ debugName: "inputField" }] : []));
-    get classList() {
-        return [this.size()];
+    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());
+            });
+        });
     }
-    toggleDropdown(event) {
+    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);
+            }
+        }
+    }
+    toggle(event) {
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -1085,16 +1210,10 @@ class StrataDropdownComponent {
             this.show();
         }
     }
-    onItemClick(item, mouseEvent) {
-        this.toggleDropdown();
-        mouseEvent.stopPropagation();
-        this.selected.set(item);
-        this.itemSelected.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);
@@ -1105,23 +1224,21 @@ class StrataDropdownComponent {
     hide() {
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataDropdownComponent, 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", itemSelected: "itemSelected" }, host: { properties: { "class": "this.classList" } }, viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, 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: 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: 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: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, 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: StrataDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-dropdown', imports: [
+            args: [{ selector: 'st-single-select', imports: [
+                        CommonModule,
                         StrataIconComponent,
                         StrataOverlayDirective,
                         StrataInputFieldComponent,
                         FormsModule,
                         StrataNativeInputRefDirective,
                         StrataButtonDirective,
-                    ], 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 }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], inputField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataInputFieldComponent), { isSignal: true }] }], classList: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                    ], 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 StrataDividerComponent {
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
@@ -1190,40 +1307,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             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);
-    interactable = input(false, ...(ngDevMode ? [{ debugName: "interactable" }] : []));
+    _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();
     }
-    onKeyDown(event) {
-        const keyboardEvent = event;
-        if (this.interactable()) {
-            keyboardEvent.preventDefault();
-            this.element.nativeElement.click();
+    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: StrataItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataItemComponent, isStandalone: true, selector: "st-item", inputs: { interactable: { classPropertyName: "interactable", publicName: "interactable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "onKeyDown($event)", "keydown.space": "onKeyDown($event)" }, 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 ɵ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: 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']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
+                args: ['class.disabled']
+            }], onHostClick: [{
                 type: HostListener,
-                args: ['keydown.space', ['$event']]
+                args: ['click', ['$event']]
             }] } });
 
 class StrataItemListComponent {
@@ -1234,7 +1411,7 @@ class StrataItemListComponent {
         return [this.dividers() ? 'with-dividers' : ''];
     }
     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", inputs: ["interactable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }] });
+    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: StrataItemListComponent, decorators: [{
             type: Component,
@@ -1468,43 +1645,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['style.--st-progress-percentage']
             }] } });
 
-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 StrataRadioGroupComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     radios = contentChildren(StrataRadioComponent, { ...(ngDevMode ? { debugName: "radios" } : {}), descendants: true });
@@ -1650,11 +1790,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 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);display:flex;flex-direction:column;height:100%;width:max-content;min-width:var(--st-sidemenu-min-width);box-sizing:border-box}: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"] });
+    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);display:flex;flex-direction:column;height:100%;width:max-content;min-width:var(--st-sidemenu-min-width);box-sizing:border-box}: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"] }]
+            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 {
@@ -1791,7 +1931,7 @@ class StrataSliderComponent {
         return parseFloat(size);
     }
     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.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 ɵ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: StrataSliderComponent, decorators: [{
             type: Component,
@@ -1984,39 +2124,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], 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({
@@ -2036,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 });
@@ -2086,6 +2217,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ], 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 StrataModalRef {
+}
+
 class StrataModalHeaderComponent {
     modalService = inject(ModalService);
     title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -2103,6 +2237,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] } });
 
 class StrataModalComponent {
+    modalService = inject(ModalService);
+    injector = inject(Injector);
     modalContents = viewChild.required('modalBody', {
         read: ViewContainerRef,
     });
@@ -2115,7 +2251,16 @@ class StrataModalComponent {
         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);
         }
@@ -2143,36 +2288,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 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: 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 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: StrataModalComponent, selector: "st-modal", inputs: ["configuration", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    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: StrataModalContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-modal-container', imports: [StrataModalComponent, 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';
@@ -2258,7 +2391,7 @@ class StrataNumberDisplayComponent {
     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: 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    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: StrataNumberDisplayComponent, decorators: [{
             type: Component,
@@ -2298,5 +2431,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataDropdownComponent, StrataIconComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalHeaderComponent, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSliderComponent, StrataSpinnerComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, 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