ngx-strata 0.2.0 → 0.2.2

package/fesm2022/ngx-strata.mjs

@@ -1,26 +1,56 @@
 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, Renderer2, Input, signal, effect, DestroyRef, HostListener, Component, contentChild, HostBinding, ViewContainerRef, viewChild, contentChildren, 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, DOCUMENT as DOCUMENT$1, 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, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    interactable = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactable" }] : /* istanbul ignore next */ []));
+    activated = output();
+    isFocusable = computed(() => this.interactable() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocusable" }] : /* istanbul ignore next */ []));
+    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: "22.0.1", ngImport: i0, type: StrataActivatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", 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 {
 }
 
 class IconRegistryService {
-    iconLoader;
+    iconLoader = inject(IconLoader);
     icons = {};
     svgs = {};
-    constructor(iconLoader) {
-        this.iconLoader = iconLoader;
-    }
     registerIcons(iconConfigs) {
         iconConfigs.forEach((config) => this.registerIcon(config));
     }
@@ -48,52 +78,52 @@ class IconRegistryService {
             this.svgs[name] = svg;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, deps: [{ token: IconLoader }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IconRegistryService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: IconLoader }] });
+        }] });
 
 const baseIconConfigs = [
     {
         name: 'question',
-        url: 'assets/icons/question.svg',
+        url: 'assets/icons/question.svg'
     },
     {
         name: 'arrow-right',
-        url: 'assets/icons/arrow-right.svg',
+        url: 'assets/icons/arrow-right.svg'
     },
     {
         name: 'arrow-left',
-        url: 'assets/icons/arrow-left.svg',
+        url: 'assets/icons/arrow-left.svg'
     },
     {
         name: 'arrow-up',
-        url: 'assets/icons/arrow-up.svg',
+        url: 'assets/icons/arrow-up.svg'
     },
     {
         name: 'arrow-down',
-        url: 'assets/icons/arrow-down.svg',
+        url: 'assets/icons/arrow-down.svg'
     },
     {
         name: 'close',
-        url: 'assets/icons/close.svg',
+        url: 'assets/icons/close.svg'
     },
     {
         name: 'expand-up-down',
-        url: 'assets/icons/expand-up-down.svg',
+        url: 'assets/icons/expand-up-down.svg'
     },
     {
         name: 'clipboard',
-        url: 'assets/icons/clipboard.svg',
+        url: 'assets/icons/clipboard.svg'
     },
     {
         name: 'more',
-        url: 'assets/icons/more.svg',
+        url: 'assets/icons/more.svg'
     },
 ];
 
@@ -120,10 +150,10 @@ class HttpIconLoader {
             .get(url, { responseType: 'text' })
             .pipe(map((raw) => this.sanitizer.bypassSecurityTrustHtml(raw)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HttpIconLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HttpIconLoader, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HttpIconLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HttpIconLoader, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HttpIconLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HttpIconLoader, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -131,7 +161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 function provideIconLoader() {
     return {
         provide: IconLoader,
-        useExisting: HttpIconLoader,
+        useExisting: HttpIconLoader
     };
 }
 
@@ -141,7 +171,7 @@ class IconRegistry {
 function provideIconRegistry() {
     return {
         provide: IconRegistry,
-        useExisting: IconRegistryService,
+        useExisting: IconRegistryService
     };
 }
 
@@ -153,21 +183,21 @@ const DEFAULT_CONFIG = {
         meta: '⌘',
         ctrl: 'Ctrl',
         shift: 'Shift',
-        alt: 'Alt',
-    },
+        alt: 'Alt'
+    }
 };
 function provideStrata(config = {}) {
     const mergedConfig = {
         ...DEFAULT_CONFIG,
         ...config,
-        shortcutLabels: { ...DEFAULT_CONFIG.shortcutLabels, ...config.shortcutLabels },
+        shortcutLabels: { ...DEFAULT_CONFIG.shortcutLabels, ...config.shortcutLabels }
     };
     const providers = [
         provideIconLoader(),
         provideIconRegistry(),
         {
             provide: STRATA_CONFIG,
-            useValue: mergedConfig,
+            useValue: mergedConfig
         },
     ];
     if (mergedConfig.includeBaseIcons) {
@@ -178,10 +208,11 @@ function provideStrata(config = {}) {
 const STRATA_CONFIG = new InjectionToken('STRATA_CONFIG');
 
 class StrataTooltipDirective {
-    document;
-    element;
-    renderer;
-    stSimpleTooltip = input.required(...(ngDevMode ? [{ debugName: "stSimpleTooltip" }] : []));
+    document = inject(DOCUMENT);
+    element = inject(ElementRef);
+    renderer = inject(Renderer2);
+    stSimpleTooltip = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stSimpleTooltip" }] : /* istanbul ignore next */ []));
     tooltipEnabled = true;
     tooltipPlacement = 'top';
     tooltipAlwaysShow = false;
@@ -190,11 +221,6 @@ class StrataTooltipDirective {
     eventListeners;
     autoUpdateCleanupFunction;
     config = inject(STRATA_CONFIG);
-    constructor(document, element, renderer) {
-        this.document = document;
-        this.element = element;
-        this.renderer = renderer;
-    }
     ngOnInit() {
         if (!this.stSimpleTooltip() || this.stSimpleTooltip() === '' || !this.tooltipEnabled) {
             return;
@@ -230,17 +256,17 @@ class StrataTooltipDirective {
     doPosition() {
         computePosition(this.element.nativeElement, this.tooltipContentElement, {
             placement: this.tooltipPlacement,
-            middleware: [offset(6), arrow({ element: this.arrowElement })],
+            middleware: [offset(6), arrow({ element: this.arrowElement })]
         }).then(({ x, y, middlewareData }) => {
             Object.assign(this.tooltipContentElement.style, {
                 left: `${x}px`,
-                top: `${y}px`,
+                top: `${y}px`
             });
             if (middlewareData.arrow) {
                 const { x, y } = middlewareData.arrow;
                 Object.assign(this.arrowElement.style, {
                     left: x != null ? `${x}px` : '',
-                    top: y != null ? `${y}px` : '',
+                    top: y != null ? `${y}px` : ''
                 });
             }
         });
@@ -276,18 +302,15 @@ class StrataTooltipDirective {
             this.autoUpdateCleanupFunction();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataTooltipDirective, isStandalone: true, selector: "[stSimpleTooltip]", inputs: { stSimpleTooltip: { classPropertyName: "stSimpleTooltip", publicName: "stSimpleTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipEnabled: { classPropertyName: "tooltipEnabled", publicName: "tooltipEnabled", isSignal: false, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, tooltipAlwaysShow: { classPropertyName: "tooltipAlwaysShow", publicName: "tooltipAlwaysShow", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataTooltipDirective, isStandalone: true, selector: "[stSimpleTooltip]", inputs: { stSimpleTooltip: { classPropertyName: "stSimpleTooltip", publicName: "stSimpleTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipEnabled: { classPropertyName: "tooltipEnabled", publicName: "tooltipEnabled", isSignal: false, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, tooltipAlwaysShow: { classPropertyName: "tooltipAlwaysShow", publicName: "tooltipAlwaysShow", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[stSimpleTooltip]',
+                    selector: '[stSimpleTooltip]'
                 }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { stSimpleTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSimpleTooltip", required: true }] }], tooltipEnabled: [{
+        }], propDecorators: { stSimpleTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSimpleTooltip", required: true }] }], tooltipEnabled: [{
                 type: Input
             }], tooltipPlacement: [{
                 type: Input
@@ -299,10 +322,14 @@ class DarkmodeService {
     STORAGE_KEY = 'strata-darkmode';
     document = inject(DOCUMENT);
     osPrefersDark;
-    setting = signal('SYSTEM', ...(ngDevMode ? [{ debugName: "setting" }] : []));
-    darkmode = signal('LIGHT', ...(ngDevMode ? [{ debugName: "darkmode" }] : []));
-    currentMode = computed(() => this.darkmode(), ...(ngDevMode ? [{ debugName: "currentMode" }] : []));
-    currentSetting = computed(() => this.setting(), ...(ngDevMode ? [{ debugName: "currentSetting" }] : []));
+    setting = signal('SYSTEM', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setting" }] : /* istanbul ignore next */ []));
+    darkmode = signal('LIGHT', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "darkmode" }] : /* istanbul ignore next */ []));
+    currentMode = computed(() => this.darkmode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMode" }] : /* istanbul ignore next */ []));
+    currentSetting = computed(() => this.setting(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSetting" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => this.updateDarkmodeTagOnDOM(this.darkmode()));
         this.setting.set(this.getSettingFromStorage());
@@ -348,13 +375,13 @@ class DarkmodeService {
     getSettingFromStorage() {
         return localStorage.getItem(this.STORAGE_KEY) ?? 'SYSTEM';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DarkmodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DarkmodeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DarkmodeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
@@ -385,7 +412,7 @@ class HotkeyService {
         this.registrations.set(id, {
             combos,
             handler,
-            options: { allowInInput: false, ...options },
+            options: { allowInInput: false, ...options }
         });
         return () => this.registrations.delete(id);
     }
@@ -415,7 +442,7 @@ class HotkeyService {
             meta: parts.includes('meta'),
             ctrl: parts.includes('ctrl'),
             shift: parts.includes('shift'),
-            alt: parts.includes('alt'),
+            alt: parts.includes('alt')
         };
     }
     /**
@@ -439,26 +466,29 @@ class HotkeyService {
         const tag = target.tagName.toLowerCase();
         return tag === 'input' || tag === 'textarea' || target.isContentEditable;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HotkeyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HotkeyService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HotkeyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HotkeyService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HotkeyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HotkeyService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class StrataCheckboxComponent {
-    value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
-    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    value = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     onClick(event) {
         event.stopImmediatePropagation();
         this.value.set(!this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataCheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataCheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-checkbox', imports: [], template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], onClick: [{
@@ -467,41 +497,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataToggleComponent {
-    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    get isDisabled() {
-        return this.disabled();
-    }
-    get isChecked() {
-        return this.checked();
-    }
-    onCheckChanged() {
+    _activatable = inject(StrataActivatableDirective);
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelPosition = input('after', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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" }] : []));
+    checkbox = contentChild(StrataCheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : /* istanbul ignore next */ {}), read: ElementRef });
+    toggle = contentChild(StrataToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : /* istanbul ignore next */ {}), read: ElementRef });
+    closeMenuOnClick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeMenuOnClick" }] : /* istanbul ignore next */ []));
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    get isActive() {
+        return this.active();
+    }
     menuItemClicked = output();
     elementRef = inject(ElementRef);
     onHostClick(event) {
@@ -510,25 +555,34 @@ class StrataActionMenuItemComponent {
         this.checkbox()?.nativeElement.click();
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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']]
             }] } });
 
 class StrataButtonDirective {
     host = inject(ElementRef);
-    variant = input('secondary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
-    iconAtStart = signal(false, ...(ngDevMode ? [{ debugName: "iconAtStart" }] : []));
-    iconAtEnd = signal(false, ...(ngDevMode ? [{ debugName: "iconAtEnd" }] : []));
-    iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    variant = input('secondary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    iconAtStart = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconAtStart" }] : /* istanbul ignore next */ []));
+    iconAtEnd = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconAtEnd" }] : /* istanbul ignore next */ []));
+    iconOnly = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
     get classes() {
         return [
             'st-button',
@@ -562,13 +616,13 @@ class StrataButtonDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataButtonDirective, isStandalone: true, selector: "[stButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataButtonDirective, isStandalone: true, selector: "[stButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataButtonDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[stButton]',
+                    selector: '[stButton]'
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], classes: [{
                 type: HostBinding,
@@ -577,10 +631,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class StrataCardComponent {
     elementRef = inject(ElementRef);
-    elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : []));
-    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
-    padding = input(true, ...(ngDevMode ? [{ debugName: "padding" }] : []));
-    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    elevated = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    selectable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    padding = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    variant = input('elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     get withPadding() {
         return this.padding();
     }
@@ -605,10 +663,10 @@ class StrataCardComponent {
             this.elementRef.nativeElement.click();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataCardComponent, isStandalone: true, selector: "st-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "handleKeyboardEvent($event)", "keydown.space": "handleKeyboardEvent($event)" }, properties: { "class.with-padding": "this.withPadding", "class.selectable": "this.isSelectable", "attr.tabindex": "this.tabIndex", "class.elevated": "this.isElevated", "class.flat": "this.isFlat", "class.outline": "this.isOutline" } }, ngImport: i0, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataCardComponent, isStandalone: true, selector: "st-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "handleKeyboardEvent($event)", "keydown.space": "handleKeyboardEvent($event)" }, properties: { "class.with-padding": "this.withPadding", "class.selectable": "this.isSelectable", "attr.tabindex": "this.tabIndex", "class.elevated": "this.isElevated", "class.flat": "this.isFlat", "class.outline": "this.isOutline" } }, ngImport: i0, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-card', imports: [], template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], withPadding: [{
@@ -638,72 +696,39 @@ 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;
-        });
-    }
-    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" });
+    name = input('question', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = model('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    svgMarkdown = toSignal(toObservable(this.name).pipe(switchMap((name) => this.iconRegistry.getIcon(name || 'question'))));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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" }] : []));
-    overlayOpen = model(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
-    overlayPlacement = input('bottom', ...(ngDevMode ? [{ debugName: "overlayPlacement" }] : []));
-    overlayOffset = input(8, ...(ngDevMode ? [{ debugName: "overlayOffset" }] : []));
+    stOverlay = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stOverlay" }] : /* istanbul ignore next */ []));
+    overlayOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
+    overlayPlacement = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayPlacement" }] : /* istanbul ignore next */ []));
+    overlayOffset = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayOffset" }] : /* istanbul ignore next */ []));
     element = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
     overlayEl;
     cleanup;
+    viewRef;
     ngOnChanges() {
         if (this.overlayOpen()) {
             this.create();
@@ -715,9 +740,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 +751,17 @@ class StrataOverlayDirective {
             return;
         const { x, y } = await computePosition(this.element.nativeElement, this.overlayEl, {
             placement: this.overlayPlacement(),
-            middleware: [offset(this.overlayOffset()), flip(), shift()],
+            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,29 +770,36 @@ class StrataOverlayDirective {
             this.cleanup();
         if (this.overlayEl)
             this.overlayEl.remove();
+        if (this.viewRef) {
+            this.viewRef.destroy();
+            this.viewRef = undefined;
+        }
         this.overlayEl = undefined;
     }
     ngOnDestroy() {
         this.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOverlayDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[stOverlay]',
+                    selector: '[stOverlay]'
                 }]
         }], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }] } });
 
 class StrataActionMenuComponent {
-    projectedButton = contentChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : {}), descendants: true,
+    projectedButton = contentChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : /* istanbul ignore next */ {}), descendants: true,
         read: ElementRef });
-    defaultButton = viewChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "defaultButton" } : {}), read: ElementRef });
-    actionMenuItems = contentChildren(StrataActionMenuItemComponent, ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : []));
-    placement = input('bottom-end', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    defaultButton = viewChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "defaultButton" } : /* istanbul ignore next */ {}), read: ElementRef });
+    actionMenuItems = contentChildren(StrataActionMenuItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     renderer = inject(Renderer2);
-    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : []));
+    menuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
     constructor() {
         effect((onCleanup) => {
             const button = this.projectedButton() ?? this.defaultButton();
@@ -790,28 +824,29 @@ class StrataActionMenuComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataActionMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-action-menu', imports: [StrataCardComponent, StrataOverlayDirective, StrataIconComponent, StrataButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectedButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             descendants: true,
-                            read: ElementRef,
+                            read: ElementRef
                         }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
-                            read: ElementRef,
+                            read: ElementRef
                         }, isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
 
 class StrataTextStackComponent {
-    overflow = input('truncate', ...(ngDevMode ? [{ debugName: "overflow" }] : []));
+    overflow = input('truncate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
     get cssClasses() {
         return [this.overflow()];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTextStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataTextStackComponent, isStandalone: true, selector: "st-text-stack", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTextStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataTextStackComponent, isStandalone: true, selector: "st-text-stack", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTextStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTextStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-text-stack', imports: [], template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], cssClasses: [{
@@ -820,22 +855,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataAlertComponent {
-    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
-    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
-    iconName = input(undefined, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
-    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
+    header = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    message = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    iconName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
     dismiss = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataAlertComponent, isStandalone: true, selector: "st-alert", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div class=\"st-alert-container\">\n  @if (iconName()) {\n  <div class=\"st-alert-icon\">\n    <st-icon [name]=\"iconName()!\"></st-icon>\n  </div>\n  }\n\n  <div class=\"st-alert-content\">\n    <st-text-stack overflow=\"wrap\">\n      @if (header()) {\n      <p class=\"st-body-bold st-alert-header\">{{ header() }}</p>\n      }\n      <p class=\"st-alert-message\">{{ message() }}</p>\n    </st-text-stack>\n  </div>\n\n\n\n\n  <div class=\"st-alert-actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n\n  @if (dismissible()) {\n  <button stButton variant=\"ghost\" size=\"sm\" class=\"st-alert-dismiss\" (click)=\"dismiss.emit()\"\n    aria-label=\"Dismiss alert\">\n    <st-icon name=\"close\"></st-icon>\n  </button>\n  }\n</div>", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataTextStackComponent, selector: "st-text-stack", inputs: ["overflow"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAlertComponent, isStandalone: true, selector: "st-alert", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div class=\"st-alert-container\">\n  @if (iconName()) {\n  <div class=\"st-alert-icon\">\n    <st-icon [name]=\"iconName()!\"></st-icon>\n  </div>\n  }\n\n  <div class=\"st-alert-content\">\n    <st-text-stack overflow=\"wrap\">\n      @if (header()) {\n      <p class=\"st-body-bold st-alert-header\">{{ header() }}</p>\n      }\n      <p class=\"st-alert-message\">{{ message() }}</p>\n    </st-text-stack>\n  </div>\n\n\n\n\n  <div class=\"st-alert-actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n\n  @if (dismissible()) {\n  <button stButton variant=\"ghost\" size=\"sm\" class=\"st-alert-dismiss\" (click)=\"dismiss.emit()\"\n    aria-label=\"Dismiss alert\">\n    <st-icon name=\"close\"></st-icon>\n  </button>\n  }\n</div>", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataTextStackComponent, selector: "st-text-stack", inputs: ["overflow"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-alert', imports: [StrataIconComponent, StrataButtonDirective, StrataTextStackComponent], template: "<div class=\"st-alert-container\">\n  @if (iconName()) {\n  <div class=\"st-alert-icon\">\n    <st-icon [name]=\"iconName()!\"></st-icon>\n  </div>\n  }\n\n  <div class=\"st-alert-content\">\n    <st-text-stack overflow=\"wrap\">\n      @if (header()) {\n      <p class=\"st-body-bold st-alert-header\">{{ header() }}</p>\n      }\n      <p class=\"st-alert-message\">{{ message() }}</p>\n    </st-text-stack>\n  </div>\n\n\n\n\n  <div class=\"st-alert-actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n\n  @if (dismissible()) {\n  <button stButton variant=\"ghost\" size=\"sm\" class=\"st-alert-dismiss\" (click)=\"dismiss.emit()\"\n    aria-label=\"Dismiss alert\">\n    <st-icon name=\"close\"></st-icon>\n  </button>\n  }\n</div>" }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
+class StrataBreadcrumbItemComponent {
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    interactable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    activated = output();
+    separatorIcon = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataBreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: "22.0.1", 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', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorIcon" }] : /* istanbul ignore next */ []));
+    items = contentChildren(StrataBreadcrumbItemComponent, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), 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: "22.0.1", ngImport: i0, type: StrataBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", 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: "22.0.1", 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" }] : []));
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggled = output();
     constructor() {
         let firstRun = true;
@@ -851,10 +938,10 @@ class StrataAccordionItemComponent {
     get isOpen() {
         return this.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataAccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "attr.open": "this.isOpen" } }, ngImport: i0, template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataAccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "attr.open": "this.isOpen" } }, ngImport: i0, template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-accordion-item', imports: [], template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }], isOpen: [{
@@ -863,8 +950,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataAccordionGroupComponent {
-    items = contentChildren(StrataAccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
-    allowMultipleOpen = input(false, ...(ngDevMode ? [{ debugName: "allowMultipleOpen" }] : []));
+    items = contentChildren(StrataAccordionItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    allowMultipleOpen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowMultipleOpen" }] : /* istanbul ignore next */ []));
     constructor() {
         effect((onCleanup) => {
             const subs = this.items().map((item) => item.toggled.subscribe((open) => {
@@ -884,18 +973,20 @@ class StrataAccordionGroupComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataAccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: StrataAccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataAccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: StrataAccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAccordionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-accordion-group', imports: [], template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataAccordionItemComponent), { isSignal: true }] }], allowMultipleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleOpen", required: false }] }] } });
 
 class StrataAvatarComponent {
-    iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
-    text = input(null, ...(ngDevMode ? [{ debugName: "text" }] : []));
-    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : /* istanbul ignore next */ {}), descendants: true });
+    text = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    size = model('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     get elementClasses() {
         return [this.size()];
     }
@@ -906,10 +997,10 @@ class StrataAvatarComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataAvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.elementClasses" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.elementClasses" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-avatar', imports: [], template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" }]
         }], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], elementClasses: [{
@@ -918,11 +1009,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataAvatarStackComponent {
-    avatarRefs = contentChildren(StrataAvatarComponent, { ...(ngDevMode ? { debugName: "avatarRefs" } : {}), descendants: true,
+    avatarRefs = contentChildren(StrataAvatarComponent, { ...(ngDevMode ? { debugName: "avatarRefs" } : /* istanbul ignore next */ {}), descendants: true,
         read: ElementRef });
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    spacing = input('mid', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
-    firstOnFront = input(false, ...(ngDevMode ? [{ debugName: "firstOnFront" }] : []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    spacing = input('mid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    firstOnFront = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstOnFront" }] : /* istanbul ignore next */ []));
     get xsClass() {
         return this.size() === 'xs';
     }
@@ -956,15 +1050,15 @@ class StrataAvatarStackComponent {
             });
         }, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataAvatarStackComponent, isStandalone: true, selector: "st-avatar-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, firstOnFront: { classPropertyName: "firstOnFront", publicName: "firstOnFront", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "this.xsClass", "class.sm": "this.smClass", "class.md": "this.mdClass", "class.lg": "this.lgClass", "class.first-on-front": "this.firstOnFrontClass", "class.loose": "this.looseClass", "class.mid": "this.midClass", "class.tight": "this.tightClass" } }, queries: [{ propertyName: "avatarRefs", predicate: StrataAvatarComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataAvatarStackComponent, isStandalone: true, selector: "st-avatar-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, firstOnFront: { classPropertyName: "firstOnFront", publicName: "firstOnFront", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "this.xsClass", "class.sm": "this.smClass", "class.md": "this.mdClass", "class.lg": "this.lgClass", "class.first-on-front": "this.firstOnFrontClass", "class.loose": "this.looseClass", "class.mid": "this.midClass", "class.tight": "this.tightClass" } }, queries: [{ propertyName: "avatarRefs", predicate: StrataAvatarComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAvatarStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-avatar-stack', imports: [], template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { avatarRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataAvatarComponent), { ...{
                             descendants: true,
-                            read: ElementRef,
+                            read: ElementRef
                         }, isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], firstOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstOnFront", required: false }] }], xsClass: [{
                 type: HostBinding,
                 args: ['class.xs']
@@ -993,31 +1087,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class StrataButtonGroupComponent {
     renderer = inject(Renderer2);
-    justification = input('start', ...(ngDevMode ? [{ debugName: "justification" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataButtonGroupComponent, isStandalone: true, selector: "st-button-group", inputs: { justification: { classPropertyName: "justification", publicName: "justification", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" });
+    justification = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "justification" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataButtonGroupComponent, isStandalone: true, selector: "st-button-group", inputs: { justification: { classPropertyName: "justification", publicName: "justification", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-button-group', imports: [], template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" }]
         }], propDecorators: { justification: [{ type: i0.Input, args: [{ isSignal: true, alias: "justification", required: false }] }] } });
 
 class StrataNativeInputRefDirective {
     el = inject((ElementRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNativeInputRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: StrataNativeInputRefDirective, isStandalone: true, selector: "input[stInput], textarea[stInput]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNativeInputRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: StrataNativeInputRefDirective, isStandalone: true, selector: "input[stInput], textarea[stInput]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNativeInputRefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNativeInputRefDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[stInput], textarea[stInput]',
+                    selector: 'input[stInput], textarea[stInput]'
                 }]
         }] });
 
 class StrataInputFieldComponent {
-    iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
-    inputField = contentChild(StrataNativeInputRefDirective, { ...(ngDevMode ? { debugName: "inputField" } : {}), descendants: true });
-    pendingFocus = signal(false, ...(ngDevMode ? [{ debugName: "pendingFocus" }] : []));
+    iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : /* istanbul ignore next */ {}), descendants: true });
+    inputField = contentChild(StrataNativeInputRefDirective, { ...(ngDevMode ? { debugName: "inputField" } : /* istanbul ignore next */ {}), descendants: true });
+    pendingFocus = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingFocus" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const input = this.inputField();
@@ -1039,41 +1135,132 @@ class StrataInputFieldComponent {
     get nativeInput() {
         return this.inputField()?.el.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataInputFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-input-field', imports: [], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
-                            descendants: true,
+                            descendants: true
                         }, isSignal: true }] }] } });
 
-class StrataDropdownComponent {
-    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
-    selected = model(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    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" }] : []));
+class StrataSelectItemComponent {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    itemClicked = output();
+    hidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    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: "22.0.1", ngImport: i0, type: StrataSelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", 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: "22.0.1", ngImport: i0, type: StrataSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: StrataSelectTriggerDirective, isStandalone: true, selector: "[stSelectTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSelectTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stSelectTrigger]'
+                }]
+        }] });
+
+class StrataSingleSelectComponent {
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    selected = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
+    selectedItem = computed(() => {
+        const val = this.selected();
+        if (val === undefined)
+            return undefined;
+        return this.selectItems().find(item => item.value() === val);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    searchable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchQuery = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     itemSelected = output();
-    inputField = viewChild(StrataInputFieldComponent, ...(ngDevMode ? [{ debugName: "inputField" }] : []));
-    get classList() {
-        return [this.size()];
+    selectItems = contentChildren(StrataSelectItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectItems" }] : /* istanbul ignore next */ []));
+    triggerTemplate = contentChild(StrataSelectTriggerDirective, { ...(ngDevMode ? { debugName: "triggerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    inputField = viewChild(StrataInputFieldComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputField" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        effect((onCleanup) => {
+            const items = this.selectItems();
+            const subs = items.map((item) => item.itemClicked.subscribe((clickedItem) => {
+                this.onItemClick(clickedItem);
+            }));
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
+            });
+        });
+    }
+    onSearchChange(query) {
+        const q = query?.toLowerCase().trim() || '';
+        const items = this.selectItems();
+        for (const item of items) {
+            if (!q) {
+                item.hidden.set(false);
+            }
+            else {
+                const match = item.text().toLowerCase().includes(q);
+                item.hidden.set(!match);
+            }
+        }
     }
-    toggleDropdown(event) {
+    toggle(event) {
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -1085,16 +1272,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,50 +1286,52 @@ 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: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: "22.0.1", 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" }] : []));
-    margin = input(true, ...(ngDevMode ? [{ debugName: "margin" }] : []));
-    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataDividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    margin = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    vertical = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataDividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-divider', imports: [], template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
 
 class StrataTagComponent {
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     get class() {
         return this.size();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataTagComponent, isStandalone: true, selector: "st-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataTagComponent, isStandalone: true, selector: "st-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTagComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'st-tag',
                     imports: [],
-                    template: '<ng-content></ng-content>',
+                    template: '<ng-content></ng-content>'
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{
                 type: HostBinding,
@@ -1161,7 +1344,8 @@ class StrataKbdComponent {
      * The sequence of keys to display.
      * Can be an array like `['⌘', 'K']` or a string combo like `'meta+k'`.
      */
-    keys = input([], ...(ngDevMode ? [{ debugName: "keys" }] : []));
+    keys = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
     resolvedKeys = computed(() => {
         const rawKeys = this.keys();
         const labels = this.config.shortcutLabels;
@@ -1181,62 +1365,130 @@ class StrataKbdComponent {
             return rawKeys.split('+').map(parseKey);
         }
         return Array.isArray(rawKeys) ? rawKeys.map(parseKey) : [];
-    }, ...(ngDevMode ? [{ debugName: "resolvedKeys" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataKbdComponent, isStandalone: true, selector: "st-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedKeys" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataKbdComponent, isStandalone: true, selector: "st-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataKbdComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataKbdComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-kbd', imports: [], template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }] } });
 
+class StrataRadioComponent {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    selected = output();
+    get isChecked() {
+        return this.checked();
+    }
+    get isDisabled() {
+        return this.disabled();
+    }
+    onClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.selected.emit();
+        this.checked.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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", selected: "selected" }, 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: "22.0.1", 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 }] }], selected: [{ type: i0.Output, args: ["selected"] }], 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" } : /* istanbul ignore next */ {}), read: ElementRef });
+    toggle = contentChild(StrataToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : /* istanbul ignore next */ {}), read: ElementRef });
+    radio = contentChild(StrataRadioComponent, { ...(ngDevMode ? { debugName: "radio" } : /* istanbul ignore next */ {}), 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();
         }
     }
-    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: [""] });
+    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: "22.0.1", ngImport: i0, type: StrataItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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 {
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
-    dividers = input(true, ...(ngDevMode ? [{ debugName: "dividers" }] : []));
-    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : []));
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    dividers = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dividers" }] : /* istanbul ignore next */ []));
+    template = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
     get hostClasses() {
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataItemListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-item-list', imports: [StrataItemComponent, NgTemplateOutlet, CommonModule], template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n" }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], hostClasses: [{
@@ -1245,8 +1497,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataAutoResizeDirective {
-    minimumRows = input(1, ...(ngDevMode ? [{ debugName: "minimumRows" }] : []));
-    maximumRows = input(...(ngDevMode ? [undefined, { debugName: "maximumRows" }] : []));
+    minimumRows = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimumRows" }] : /* istanbul ignore next */ []));
+    maximumRows = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maximumRows" }] : /* istanbul ignore next */ []));
     lineHeight = 0;
     element = inject(ElementRef);
     onInput() {
@@ -1286,13 +1540,13 @@ class StrataAutoResizeDirective {
         textarea.style.height = `${newHeight}px`;
         textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAutoResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataAutoResizeDirective, isStandalone: true, selector: "[stAutoResize]", inputs: { minimumRows: { classPropertyName: "minimumRows", publicName: "minimumRows", isSignal: true, isRequired: false, transformFunction: null }, maximumRows: { classPropertyName: "maximumRows", publicName: "maximumRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()", "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAutoResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataAutoResizeDirective, isStandalone: true, selector: "[stAutoResize]", inputs: { minimumRows: { classPropertyName: "minimumRows", publicName: "minimumRows", isSignal: true, isRequired: false, transformFunction: null }, maximumRows: { classPropertyName: "maximumRows", publicName: "maximumRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()", "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAutoResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAutoResizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[stAutoResize]',
+                    selector: '[stAutoResize]'
                 }]
         }], propDecorators: { minimumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumRows", required: false }] }], maximumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumRows", required: false }] }], onInput: [{
                 type: HostListener,
@@ -1303,11 +1557,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataPaginationComponent {
-    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
-    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    currentPage = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    totalPages = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     pageSelected = output();
-    pageButtons = computed(() => this.calculatePageButtons(this.currentPage(), this.totalPages()), ...(ngDevMode ? [{ debugName: "pageButtons" }] : []));
-    hideNextPreviousAtStartEnd = input(false, ...(ngDevMode ? [{ debugName: "hideNextPreviousAtStartEnd" }] : []));
+    pageButtons = computed(() => this.calculatePageButtons(this.currentPage(), this.totalPages()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageButtons" }] : /* istanbul ignore next */ []));
+    hideNextPreviousAtStartEnd = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideNextPreviousAtStartEnd" }] : /* istanbul ignore next */ []));
     changePage(newPage) {
         this.currentPage.set(newPage);
         this.pageSelected.emit(this.currentPage());
@@ -1368,13 +1626,13 @@ class StrataPaginationComponent {
         return {
             page: page,
             text: page + '',
-            clickable: true,
+            clickable: true
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, hideNextPreviousAtStartEnd: { classPropertyName: "hideNextPreviousAtStartEnd", publicName: "hideNextPreviousAtStartEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSelected: "pageSelected" }, ngImport: i0, template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataPaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, hideNextPreviousAtStartEnd: { classPropertyName: "hideNextPreviousAtStartEnd", publicName: "hideNextPreviousAtStartEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSelected: "pageSelected" }, ngImport: i0, template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-pagination', imports: [], template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" }]
         }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], pageSelected: [{ type: i0.Output, args: ["pageSelected"] }], hideNextPreviousAtStartEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextPreviousAtStartEnd", required: false }] }] } });
@@ -1386,25 +1644,31 @@ class CapitalizePipe {
     transform(value, ..._args) {
         return CapitalizePipe.capitalize(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: CapitalizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'capitalize',
                     standalone: true,
-                    pure: true,
+                    pure: true
                 }]
         }] });
 
 class StrataProgressLinearComponent {
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
-    labelFormat = input('percentage', ...(ngDevMode ? [{ debugName: "labelFormat" }] : []));
-    growDirection = input('right', ...(ngDevMode ? [{ debugName: "growDirection" }] : []));
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    showLabel = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    labelFormat = input('percentage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFormat" }] : /* istanbul ignore next */ []));
+    growDirection = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "growDirection" }] : /* istanbul ignore next */ []));
     percentage = computed(() => {
         if (this.max() <= this.min()) {
             return 0;
@@ -1413,17 +1677,18 @@ class StrataProgressLinearComponent {
         const progressedValue = clampedValue - this.min();
         const progressableValues = this.max() - this.min();
         return (progressedValue / progressableValues) * 100;
-    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
     get cssClasses() {
         return [`grow-${this.growDirection()}`];
     }
     get percentageProperty() {
         return this.percentage();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataProgressLinearComponent, isStandalone: true, selector: "st-progress-linear", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, growDirection: { classPropertyName: "growDirection", publicName: "growDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "<div class=\"linear-container\">\n  <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n</div>\n\n<ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataProgressLinearComponent, isStandalone: true, selector: "st-progress-linear", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, growDirection: { classPropertyName: "growDirection", publicName: "growDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "<div class=\"linear-container\">\n  <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n</div>\n\n<ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressLinearComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataProgressLinearComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-progress-linear', imports: [DecimalPipe, NgTemplateOutlet], template: "<div class=\"linear-container\">\n  <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n</div>\n\n<ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n" }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], growDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "growDirection", required: false }] }], cssClasses: [{
@@ -1435,13 +1700,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataProgressRadialComponent {
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
-    labelFormat = input('percentage', ...(ngDevMode ? [{ debugName: "labelFormat" }] : []));
-    size = input(120, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    strokeWidth = input(10, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    showLabel = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    labelFormat = input('percentage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFormat" }] : /* istanbul ignore next */ []));
+    size = input(120, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
     percentage = computed(() => {
         if (this.max() <= this.min()) {
             return 0;
@@ -1450,17 +1722,21 @@ class StrataProgressRadialComponent {
         const progressedValue = clampedValue - this.min();
         const progressableValues = this.max() - this.min();
         return (progressedValue / progressableValues) * 100;
-    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
-    radius = computed(() => (this.size() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
-    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
-    dashOffset = computed(() => this.circumference() * (1 - this.percentage() / 100), ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
+    radius = computed(() => (this.size() - this.strokeWidth()) / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    dashOffset = computed(() => this.circumference() * (1 - this.percentage() / 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
     get percentageProperty() {
         return this.percentage();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressRadialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataProgressRadialComponent, isStandalone: true, selector: "st-progress-radial", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "<div class=\"radial-container\">\n  <svg width=\"100%\" height=\"100%\">\n    <circle class=\"background\"></circle>\n\n    <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n  </svg>\n\n  <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n</div>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataProgressRadialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataProgressRadialComponent, isStandalone: true, selector: "st-progress-radial", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "<div class=\"radial-container\">\n  <svg width=\"100%\" height=\"100%\">\n    <circle class=\"background\"></circle>\n\n    <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n  </svg>\n\n  <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n</div>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataProgressRadialComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataProgressRadialComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-progress-radial', imports: [DecimalPipe, NgTemplateOutlet], template: "<div class=\"radial-container\">\n  <svg width=\"100%\" height=\"100%\">\n    <circle class=\"background\"></circle>\n\n    <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n  </svg>\n\n  <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n</div>\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n" }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], percentageProperty: [{
@@ -1468,46 +1744,10 @@ 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 });
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    radios = contentChildren(StrataRadioComponent, { ...(ngDevMode ? { debugName: "radios" } : /* istanbul ignore next */ {}), descendants: true });
     constructor() {
         // Sync group value -> children checked state
         effect(() => {
@@ -1519,7 +1759,7 @@ class StrataRadioGroupComponent {
         // Handle child selection -> update group value
         effect((onCleanup) => {
             const radios = this.radios();
-            const subs = radios.map((radio) => radio.select.subscribe(() => {
+            const subs = radios.map((radio) => radio.selected.subscribe(() => {
                 this.value.set(radio.value());
             }));
             onCleanup(() => {
@@ -1527,22 +1767,25 @@ class StrataRadioGroupComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataRadioGroupComponent, isStandalone: true, selector: "st-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "radios", predicate: StrataRadioComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataRadioGroupComponent, isStandalone: true, selector: "st-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "radios", predicate: StrataRadioComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'st-radio-group',
                     imports: [],
-                    template: `<ng-content></ng-content>`,
+                    template: `<ng-content></ng-content>`
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataRadioComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class StrataSegmentedControlItemComponent {
-    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
-    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    selected = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     selectionChanged = output();
     get tabIndex() {
         return this.selected() || this.disabled() ? null : 0;
@@ -1554,13 +1797,13 @@ class StrataSegmentedControlItemComponent {
         this.selected.set(true);
         this.selectionChanged.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "{{ text() }}\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataSegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "{{ text() }}\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-segmented-control-item', imports: [], host: {
-                        '(click)': 'onClick()',
+                        '(click)': 'onClick()'
                     }, template: "{{ text() }}\n" }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], tabIndex: [{
                 type: HostBinding,
@@ -1573,19 +1816,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class StrataSegmentedControlComponent {
     elementRef = inject(ElementRef);
     destroyRef = inject(DestroyRef);
-    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
-    segmentItems = contentChildren(StrataSegmentedControlItemComponent, ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
-    segmentItemsRefs = contentChildren(StrataSegmentedControlItemComponent, { ...(ngDevMode ? { debugName: "segmentItemsRefs" } : {}), read: ElementRef });
-    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
-    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
-    offsets = signal([], ...(ngDevMode ? [{ debugName: "offsets" }] : []));
-    itemWidths = signal([], ...(ngDevMode ? [{ debugName: "itemWidths" }] : []));
-    tops = signal([], ...(ngDevMode ? [{ debugName: "tops" }] : []));
-    heights = signal([], ...(ngDevMode ? [{ debugName: "heights" }] : []));
-    offset = computed(() => this.offsets()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
-    indicatorWidth = computed(() => this.itemWidths()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
-    indicatorTop = computed(() => this.tops()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "indicatorTop" }] : []));
-    indicatorHeight = computed(() => this.heights()[this.selectedIndex()] ?? 0, ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : []));
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    segmentItems = contentChildren(StrataSegmentedControlItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segmentItems" }] : /* istanbul ignore next */ []));
+    segmentItemsRefs = contentChildren(StrataSegmentedControlItemComponent, { ...(ngDevMode ? { debugName: "segmentItemsRefs" } : /* istanbul ignore next */ {}), read: ElementRef });
+    selectedItem = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    selectedIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    offsets = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offsets" }] : /* istanbul ignore next */ []));
+    itemWidths = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemWidths" }] : /* istanbul ignore next */ []));
+    tops = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tops" }] : /* istanbul ignore next */ []));
+    heights = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []));
+    offset = computed(() => this.offsets()[this.selectedIndex()] ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    indicatorWidth = computed(() => this.itemWidths()[this.selectedIndex()] ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : /* istanbul ignore next */ []));
+    indicatorTop = computed(() => this.tops()[this.selectedIndex()] ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorTop" }] : /* istanbul ignore next */ []));
+    indicatorHeight = computed(() => this.heights()[this.selectedIndex()] ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         if (this.segmentItems().length === 0) {
             return;
@@ -1636,46 +1890,48 @@ class StrataSegmentedControlComponent {
         this.tops.set(tops);
         this.heights.set(heights);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataSegmentedControlComponent, isStandalone: true, selector: "st-segmented-control", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.st-segmented-control-full-width": "fullWidth()" } }, queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n     [style.left]=\"this.offset() + 'px'\"\n     [style.top]=\"this.indicatorTop() + 'px'\"\n     [style.width]=\"this.indicatorWidth() + 'px'\"\n     [style.height]=\"this.indicatorHeight() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataSegmentedControlComponent, isStandalone: true, selector: "st-segmented-control", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.st-segmented-control-full-width": "fullWidth()" } }, queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n     [style.left]=\"this.offset() + 'px'\"\n     [style.top]=\"this.indicatorTop() + 'px'\"\n     [style.width]=\"this.indicatorWidth() + 'px'\"\n     [style.height]=\"this.indicatorHeight() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-segmented-control', imports: [], host: {
-                        '[class.st-segmented-control-full-width]': 'fullWidth()',
+                        '[class.st-segmented-control-full-width]': 'fullWidth()'
                     }, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n     [style.left]=\"this.offset() + 'px'\"\n     [style.top]=\"this.indicatorTop() + 'px'\"\n     [style.width]=\"this.indicatorWidth() + 'px'\"\n     [style.height]=\"this.indicatorHeight() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { ...{
-                            read: ElementRef,
+                            read: ElementRef
                         }, isSignal: true }] }] } });
 
 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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 {
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataSidemenuSectionComponent, isStandalone: true, selector: "st-sidemenu-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label()) {\n<p class=\"st-sidemenu-section-header st-label\">{{ label() }}</p>\n}\n<div class=\"st-sidemenu-section-content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{--st-sidemenu-section-spacing: var(--st-size-sm, 16px);--st-sidemenu-section-header-padding: var(--st-size-xxs, 8px) var(--st-size-xs, 12px);--st-sidemenu-section-header-spacing: var(--st-size-xxxs, 4px);--st-sidemenu-section-gap: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%;margin-block-end:var(--st-sidemenu-section-spacing)}.st-sidemenu-section-header{padding:var(--st-sidemenu-section-header-padding);margin-block-end:var(--st-sidemenu-section-header-spacing)}.st-sidemenu-section-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-section-gap)}\n"] });
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSidemenuSectionComponent, isStandalone: true, selector: "st-sidemenu-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (label()) {\n<p class=\"st-sidemenu-section-header st-label\">{{ label() }}</p>\n}\n<div class=\"st-sidemenu-section-content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{--st-sidemenu-section-spacing: var(--st-size-sm, 16px);--st-sidemenu-section-header-padding: var(--st-size-xxs, 8px) var(--st-size-xs, 12px);--st-sidemenu-section-header-spacing: var(--st-size-xxxs, 4px);--st-sidemenu-section-gap: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%;margin-block-end:var(--st-sidemenu-section-spacing)}.st-sidemenu-section-header{padding:var(--st-sidemenu-section-header-padding);margin-block-end:var(--st-sidemenu-section-header-spacing)}.st-sidemenu-section-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-section-gap)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-sidemenu-section', template: "@if (label()) {\n<p class=\"st-sidemenu-section-header st-label\">{{ label() }}</p>\n}\n<div class=\"st-sidemenu-section-content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{--st-sidemenu-section-spacing: var(--st-size-sm, 16px);--st-sidemenu-section-header-padding: var(--st-size-xxs, 8px) var(--st-size-xs, 12px);--st-sidemenu-section-header-spacing: var(--st-size-xxxs, 4px);--st-sidemenu-section-gap: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%;margin-block-end:var(--st-sidemenu-section-spacing)}.st-sidemenu-section-header{padding:var(--st-sidemenu-section-header-padding);margin-block-end:var(--st-sidemenu-section-header-spacing)}.st-sidemenu-section-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-section-gap)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class StrataSidemenuItemDirective {
-    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     constructor() {
         effect(() => {
             if (this.active()) {
                 this.elementRef.nativeElement.scrollIntoView({
                     block: 'nearest',
-                    inline: 'nearest',
+                    inline: 'nearest'
                 });
             }
         });
@@ -1684,10 +1940,10 @@ class StrataSidemenuItemDirective {
     get isSelected() {
         return this.active();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataSidemenuItemDirective, isStandalone: true, selector: "[stSidemenuItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.st-sidemenu-item": "this.isSidemenuItem", "class.selected": "this.isSelected" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataSidemenuItemDirective, isStandalone: true, selector: "[stSidemenuItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.st-sidemenu-item": "this.isSidemenuItem", "class.selected": "this.isSelected" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stSidemenuItem]'
@@ -1701,9 +1957,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataSidemenuItemGroupComponent {
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    hasActiveChild = signal(false, ...(ngDevMode ? [{ debugName: "hasActiveChild" }] : []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    hasActiveChild = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveChild" }] : /* istanbul ignore next */ []));
     router = inject(Router, { optional: true });
     destroyRef = inject(DestroyRef);
     routerLinks;
@@ -1734,10 +1993,10 @@ class StrataSidemenuItemGroupComponent {
             this.expanded.set(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSidemenuItemGroupComponent, isStandalone: true, selector: "st-sidemenu-item-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "routerLinks", predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<button stSidemenuItem type=\"button\" [active]=\"hasActiveChild()\" (click)=\"toggle()\">\n  <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  <st-icon name=\"arrow-down\" size=\"sm\" class=\"st-sidemenu-item-group-icon\" [class.expanded]=\"expanded()\"></st-icon>\n</button>\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-item-group-gap: var(--st-size-xxxs, 4px);--st-sidemenu-item-group-indent: var(--st-size-sm, 16px);--st-sidemenu-item-group-spacing: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%}.st-sidemenu-item-group-icon{margin-left:auto;color:var(--st-color-text-secondary);transition:transform .2s ease}.st-sidemenu-item-group-icon.expanded{transform:rotate(180deg)}.st-sidemenu-item-group-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-item-group-gap);padding-left:var(--st-sidemenu-item-group-indent);margin-top:var(--st-sidemenu-item-group-spacing)}.st-sidemenu-item-group-content[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: StrataSidemenuItemDirective, selector: "[stSidemenuItem]", inputs: ["active"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataSidemenuItemGroupComponent, isStandalone: true, selector: "st-sidemenu-item-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "routerLinks", predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<button stSidemenuItem type=\"button\" [active]=\"hasActiveChild()\" (click)=\"toggle()\">\n  <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  <st-icon name=\"arrow-down\" size=\"sm\" class=\"st-sidemenu-item-group-icon\" [class.expanded]=\"expanded()\"></st-icon>\n</button>\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-item-group-gap: var(--st-size-xxxs, 4px);--st-sidemenu-item-group-indent: var(--st-size-sm, 16px);--st-sidemenu-item-group-spacing: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%}.st-sidemenu-item-group-icon{margin-left:auto;color:var(--st-color-text-secondary);transition:transform .2s ease}.st-sidemenu-item-group-icon.expanded{transform:rotate(180deg)}.st-sidemenu-item-group-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-item-group-gap);padding-left:var(--st-sidemenu-item-group-indent);margin-top:var(--st-sidemenu-item-group-spacing)}.st-sidemenu-item-group-content[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: StrataSidemenuItemDirective, selector: "[stSidemenuItem]", inputs: ["active"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSidemenuItemGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuItemGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-sidemenu-item-group', imports: [StrataSidemenuItemDirective, StrataIconComponent], template: "<button stSidemenuItem type=\"button\" [active]=\"hasActiveChild()\" (click)=\"toggle()\">\n  <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  <st-icon name=\"arrow-down\" size=\"sm\" class=\"st-sidemenu-item-group-icon\" [class.expanded]=\"expanded()\"></st-icon>\n</button>\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-sidemenu-item-group-gap: var(--st-size-xxxs, 4px);--st-sidemenu-item-group-indent: var(--st-size-sm, 16px);--st-sidemenu-item-group-spacing: var(--st-size-xxxs, 4px);display:flex;flex-direction:column;width:100%}.st-sidemenu-item-group-icon{margin-left:auto;color:var(--st-color-text-secondary);transition:transform .2s ease}.st-sidemenu-item-group-icon.expanded{transform:rotate(180deg)}.st-sidemenu-item-group-content{display:flex;flex-direction:column;gap:var(--st-sidemenu-item-group-gap);padding-left:var(--st-sidemenu-item-group-indent);margin-top:var(--st-sidemenu-item-group-spacing)}.st-sidemenu-item-group-content[hidden]{display:none!important}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], routerLinks: [{
@@ -1748,19 +2007,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class StrataSliderComponent {
     wrapper = viewChild.required('wrapper');
     resizeObserver;
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-    minimum = input.required(...(ngDevMode ? [{ debugName: "minimum" }] : []));
-    maximum = input.required(...(ngDevMode ? [{ debugName: "maximum" }] : []));
-    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : []));
-    computedStep = computed(() => this.step() === 'none' || this.step() === undefined ? 'any' : this.step(), ...(ngDevMode ? [{ debugName: "computedStep" }] : []));
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    minimum = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimum" }] : /* istanbul ignore next */ []));
+    maximum = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximum" }] : /* istanbul ignore next */ []));
+    step = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+    computedStep = computed(() => this.step() === 'none' || this.step() === undefined ? 'any' : this.step(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedStep" }] : /* istanbul ignore next */ []));
     steps = computed(() => {
         const step = this.computedStep();
         if (step === 'any' || step === undefined) {
             return 0;
         }
         return Math.floor((this.maximum() - this.minimum()) / step) + 1;
-    }, ...(ngDevMode ? [{ debugName: "steps" }] : []));
-    isStepped = computed(() => this.computedStep() !== 'any' && this.computedStep() !== undefined && this.computedStep() !== 0, ...(ngDevMode ? [{ debugName: "isStepped" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    isStepped = computed(() => this.computedStep() !== 'any' && this.computedStep() !== undefined && this.computedStep() !== 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStepped" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         this.resizeObserver = new ResizeObserver(() => {
             this.updateTickMath();
@@ -1790,23 +2056,24 @@ class StrataSliderComponent {
         const size = styles.getPropertyValue('--st-slider-thumb-size');
         return parseFloat(size);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-slider', imports: [FormsModule], template: "<div\n  #wrapper\n  class=\"range-wrapper\"\n  [style.--steps]=\"steps()\"\n  [class.stepped]=\"isStepped()\"\n>\n  <input\n    type=\"range\"\n    [(ngModel)]=\"value\"\n    [min]=\"minimum()\"\n    [max]=\"maximum()\"\n    [step]=\"computedStep()\"\n  />\n</div>\n" }]
         }], propDecorators: { wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minimum: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimum", required: true }] }], maximum: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximum", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
 
 class StrataSpinnerComponent {
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     get cssClasses() {
         return [this.size()];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: StrataSpinnerComponent, isStandalone: true, selector: "st-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<span class=\"st-spinner\"></span>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataSpinnerComponent, isStandalone: true, selector: "st-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<span class=\"st-spinner\"></span>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-spinner', imports: [], template: "<span class=\"st-spinner\"></span>\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cssClasses: [{
@@ -1819,15 +2086,18 @@ class StrataTabItemComponent {
      * The text label for the tab.
      * Can also be provided via content projection.
      */
-    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+    text = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     /**
      * Whether the tab is currently selected.
      */
-    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    selected = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     /**
      * Whether the tab is disabled.
      */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /**
      * Emitted when the tab is clicked.
      */
@@ -1854,14 +2124,14 @@ class StrataTabItemComponent {
         this.selected.set(true);
         this.selectionChanged.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataTabItemComponent, isStandalone: true, selector: "st-tab-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-selected": "this.isSelected", "attr.aria-disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex", "class.active": "this.activeClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "@if (text()) {\n  {{ text() }}\n} @else {\n  <ng-content></ng-content>\n}\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataTabItemComponent, isStandalone: true, selector: "st-tab-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-selected": "this.isSelected", "attr.aria-disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex", "class.active": "this.activeClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "@if (text()) {\n  {{ text() }}\n} @else {\n  <ng-content></ng-content>\n}\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTabItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-tab-item', imports: [], host: {
                         'role': 'tab',
-                        '(click)': 'onClick()',
+                        '(click)': 'onClick()'
                     }, template: "@if (text()) {\n  {{ text() }}\n} @else {\n  <ng-content></ng-content>\n}\n" }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], isSelected: [{
                 type: HostBinding,
@@ -1881,12 +2151,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class StrataTabsComponent {
-    tabItems = contentChildren(StrataTabItemComponent, { ...(ngDevMode ? { debugName: "tabItems" } : {}), descendants: true });
-    tabItemsRefs = contentChildren(StrataTabItemComponent, { ...(ngDevMode ? { debugName: "tabItemsRefs" } : {}), descendants: true,
+    tabItems = contentChildren(StrataTabItemComponent, { ...(ngDevMode ? { debugName: "tabItems" } : /* istanbul ignore next */ {}), descendants: true });
+    tabItemsRefs = contentChildren(StrataTabItemComponent, { ...(ngDevMode ? { debugName: "tabItemsRefs" } : /* istanbul ignore next */ {}), descendants: true,
         read: ElementRef });
-    indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : []));
-    selectedTab = signal(null, ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
-    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    indicator = viewChild('indicator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+    selectedTab = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+    selectedIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
     resizeObserver;
     constructor() {
         // Coordinate child selection
@@ -1945,78 +2218,42 @@ class StrataTabsComponent {
         this.selectedTab.set(tab);
         this.selectedIndex.set(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: StrataTabsComponent, isStandalone: true, selector: "st-tabs", host: { classAttribute: "st-tabs-host" }, queries: [{ propertyName: "tabItems", predicate: StrataTabItemComponent, descendants: true, isSignal: true }, { propertyName: "tabItemsRefs", predicate: StrataTabItemComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\n  <ng-content></ng-content>\n  <div #indicator class=\"selection-indicator\"></div>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataTabsComponent, isStandalone: true, selector: "st-tabs", host: { classAttribute: "st-tabs-host" }, queries: [{ propertyName: "tabItems", predicate: StrataTabItemComponent, descendants: true, isSignal: true }, { propertyName: "tabItemsRefs", predicate: StrataTabItemComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\n  <ng-content></ng-content>\n  <div #indicator class=\"selection-indicator\"></div>\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-tabs', imports: [], host: {
-                        'class': 'st-tabs-host',
+                        'class': 'st-tabs-host'
                     }, template: "<div class=\"tabs-container\" role=\"tablist\">\n  <ng-content></ng-content>\n  <div #indicator class=\"selection-indicator\"></div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { tabItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataTabItemComponent), { ...{ descendants: true }, isSignal: true }] }], tabItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataTabItemComponent), { ...{
                             descendants: true,
-                            read: ElementRef,
+                            read: ElementRef
                         }, isSignal: true }] }], indicator: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }] } });
 
-class StrataThemeDirective {
-    element = inject(ElementRef);
-    stTheme = input.required(...(ngDevMode ? [{ debugName: "stTheme" }] : []));
+class ModalService {
+    _modals = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_modals" }] : /* istanbul ignore next */ []));
+    modals = this._modals.asReadonly();
+    document = inject(DOCUMENT$1);
     constructor() {
         effect(() => {
-            const theme = this.stTheme();
-            const el = this.element.nativeElement;
-            // remove previous theme classes
-            el.classList.forEach((cls) => {
-                if (cls.startsWith('st-theme-')) {
-                    el.classList.remove(cls);
+            const body = this.document?.body;
+            if (body) {
+                if (this.modals().length > 0) {
+                    body.classList.add('st-scroll-lock');
                 }
-            });
-            el.classList.add(`st-theme-${theme}`);
+                else {
+                    body.classList.remove('st-scroll-lock');
+                }
+            }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: StrataThemeDirective, isStandalone: true, selector: "[stTheme]", inputs: { stTheme: { classPropertyName: "stTheme", publicName: "stTheme", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataThemeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[stTheme]',
-                }]
-        }], 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);
     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({
@@ -2031,51 +2268,98 @@ class ModalService {
                 affirmativeButton: config.affirmativeButton,
                 cancelButton: config.cancelButton,
                 theme: config.theme,
-                icon: config.icon,
-            },
+                icon: config.icon
+            }
         });
     }
     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);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
+    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: "22.0.1", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ModalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+class StrataThemeDirective {
+    element = inject(ElementRef);
+    stTheme = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stTheme" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const theme = this.stTheme();
+            const el = this.element.nativeElement;
+            // remove previous theme classes
+            el.classList.forEach((cls) => {
+                if (cls.startsWith('st-theme-')) {
+                    el.classList.remove(cls);
+                }
+            });
+            el.classList.add(`st-theme-${theme}`);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataThemeDirective, isStandalone: true, selector: "[stTheme]", inputs: { stTheme: { classPropertyName: "stTheme", publicName: "stTheme", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stTheme]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { stTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "stTheme", required: true }] }] } });
 
 class StrataAlertContentComponent {
-    modalService;
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
-    message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
-    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    modalService = inject(ModalService);
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
+    icon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     computedIcon = computed(() => {
         return this.icon() ?? '';
-    }, ...(ngDevMode ? [{ debugName: "computedIcon" }] : []));
-    theme = input('info', ...(ngDevMode ? [{ debugName: "theme" }] : []));
-    affirmativeButton = input.required(...(ngDevMode ? [{ debugName: "affirmativeButton" }] : []));
-    cancelButton = input(undefined, ...(ngDevMode ? [{ debugName: "cancelButton" }] : []));
-    constructor(modalService) {
-        this.modalService = modalService;
-    }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedIcon" }] : /* istanbul ignore next */ []));
+    theme = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    affirmativeButton = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "affirmativeButton" }] : /* istanbul ignore next */ []));
+    cancelButton = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelButton" }] : /* istanbul ignore next */ []));
     onAffirmation() {
         this.modalService.closeCurrentModal(true);
     }
     onCancel() {
         this.modalService.closeCurrentModal(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertContentComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataAlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["text", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["text", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataAlertContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAlertContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-alert-content', imports: [
                         StrataAvatarComponent,
@@ -2084,30 +2368,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         StrataButtonGroupComponent,
                         StrataButtonDirective,
                     ], template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n" }]
-        }], ctorParameters: () => [{ type: ModalService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], affirmativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "affirmativeButton", required: true }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }] } });
+        }], 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" }] : []));
-    showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
+    title = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    showCloseButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
     onCloseButtonClicked(event) {
         this.modalService.closeCurrentModal();
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataModalHeaderComponent, isStandalone: true, selector: "st-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n<span class=\"st-body-l-bold\">{{ title() }}</span>\n}\n@if (showCloseButton()) {\n<button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n  <st-icon name=\"close\" size=\"sm\"></st-icon>\n</button>\n}", dependencies: [{ kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataModalHeaderComponent, isStandalone: true, selector: "st-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n<span class=\"st-body-l-bold\">{{ title() }}</span>\n}\n@if (showCloseButton()) {\n<button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n  <st-icon name=\"close\" size=\"sm\"></st-icon>\n</button>\n}", dependencies: [{ kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-modal-header', imports: [StrataButtonDirective, StrataIconComponent], template: "@if (title()) {\n<span class=\"st-body-l-bold\">{{ title() }}</span>\n}\n@if (showCloseButton()) {\n<button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n  <st-icon name=\"close\" size=\"sm\"></st-icon>\n</button>\n}" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] } });
 
 class StrataModalComponent {
+    modalService = inject(ModalService);
+    injector = inject(Injector);
     modalContents = viewChild.required('modalBody', {
-        read: ViewContainerRef,
+        read: ViewContainerRef
     });
-    configuration = input.required(...(ngDevMode ? [{ debugName: "configuration" }] : []));
-    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    configuration = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
+    size = model('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     get sizeClass() {
         return `st-modal-size-${this.size()}`;
     }
@@ -2115,7 +2408,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);
         }
@@ -2128,58 +2430,44 @@ class StrataModalComponent {
     onCardClick(event) {
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataModalComponent, isStandalone: true, selector: "st-modal", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.sizeClass" } }, viewQueries: [{ propertyName: "modalContents", first: true, predicate: ["modalBody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n", dependencies: [{ kind: "component", type: StrataModalHeaderComponent, selector: "st-modal-header", inputs: ["title", "showCloseButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataModalComponent, isStandalone: true, selector: "st-modal", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.sizeClass" } }, viewQueries: [{ propertyName: "modalContents", first: true, predicate: ["modalBody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n", dependencies: [{ kind: "component", type: StrataModalHeaderComponent, selector: "st-modal-header", inputs: ["title", "showCloseButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-modal', imports: [StrataModalHeaderComponent], template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n" }]
         }], propDecorators: { modalContents: [{ type: i0.ViewChild, args: ['modalBody', { ...{
-                            read: ViewContainerRef,
+                            read: ViewContainerRef
                         }, isSignal: true }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], sizeClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 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();
-    }
+    modalService = inject(ModalService);
     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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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" }]
-        }], ctorParameters: () => [{ type: ModalService }] });
+            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" }]
+        }] });
 
 const DEFAULT_THEME = 'info';
 const DEFAULT_DURATION = 3000;
 
 class NotificationService {
-    notificationStack = signal([], ...(ngDevMode ? [{ debugName: "notificationStack" }] : []));
+    notificationStack = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "notificationStack" }] : /* istanbul ignore next */ []));
     showNotification(config) {
         const newNotificationId = crypto.randomUUID();
         const duration = config.duration ?? DEFAULT_DURATION;
@@ -2191,7 +2479,7 @@ class NotificationService {
                 message: config.message,
                 duration: duration,
                 theme: config.theme ?? DEFAULT_THEME,
-                icon: config.icon,
+                icon: config.icon
             }
         ]);
         this.hideNotification(newNotificationId, duration);
@@ -2202,23 +2490,23 @@ class NotificationService {
             this.notificationStack.set(currentStack);
         }, duration);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
         }] });
 
 class StrataNotificationComponent {
     icon;
     message;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataNotificationComponent, isStandalone: true, selector: "st-notification", inputs: { icon: "icon", message: "message" }, ngImport: i0, template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataNotificationComponent, isStandalone: true, selector: "st-notification", inputs: { icon: "icon", message: "message" }, ngImport: i0, template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-notification', imports: [StrataIconComponent], template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n" }]
         }], propDecorators: { icon: [{
@@ -2230,62 +2518,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class StrataNotificationContainerComponent {
     notificationService = inject(NotificationService);
     notifications = this.notificationService.notificationStack;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataNotificationContainerComponent, isStandalone: true, selector: "st-notification-container", ngImport: i0, template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n", dependencies: [{ kind: "component", type: StrataNotificationComponent, selector: "st-notification", inputs: ["icon", "message"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataNotificationContainerComponent, isStandalone: true, selector: "st-notification-container", ngImport: i0, template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n", dependencies: [{ kind: "component", type: StrataNotificationComponent, selector: "st-notification", inputs: ["icon", "message"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNotificationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNotificationContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-notification-container', imports: [StrataNotificationComponent, StrataThemeDirective], template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n" }]
         }] });
 
 class StrataNumberDisplayComponent {
     locale = inject(LOCALE_ID);
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    decimals = input(2, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    decimals = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
     digitsInfo = computed(() => {
         return `1.${this.decimals()}-${this.decimals()}`;
-    }, ...(ngDevMode ? [{ debugName: "digitsInfo" }] : []));
-    formattedNumber = computed(() => formatNumber(this.value(), this.locale, this.digitsInfo()), ...(ngDevMode ? [{ debugName: "formattedNumber" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "digitsInfo" }] : /* istanbul ignore next */ []));
+    formattedNumber = computed(() => formatNumber(this.value(), this.locale, this.digitsInfo()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedNumber" }] : /* istanbul ignore next */ []));
     separatedDigits = computed(() => {
         const parts = this.formattedNumber().split(this.decimalPoint());
         return {
             integer: parts[0],
-            decimals: parts[1] ?? undefined,
+            decimals: parts[1] ?? undefined
         };
-    }, ...(ngDevMode ? [{ debugName: "separatedDigits" }] : []));
-    changedValue = input(false, ...(ngDevMode ? [{ debugName: "changedValue" }] : []));
-    showPlus = input(false, ...(ngDevMode ? [{ debugName: "showPlus" }] : []));
-    deemphasizeDecimals = input(true, ...(ngDevMode ? [{ debugName: "deemphasizeDecimals" }] : []));
-    decimalPoint = computed(() => getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal), ...(ngDevMode ? [{ debugName: "decimalPoint" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataNumberDisplayComponent, decorators: [{
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatedDigits" }] : /* istanbul ignore next */ []));
+    changedValue = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "changedValue" }] : /* istanbul ignore next */ []));
+    showPlus = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPlus" }] : /* istanbul ignore next */ []));
+    deemphasizeDecimals = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deemphasizeDecimals" }] : /* istanbul ignore next */ []));
+    decimalPoint = computed(() => getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decimalPoint" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: StrataNumberDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-number-display', imports: [CommonModule], template: "<p\n  [ngClass]=\"{\n    positive: changedValue() && value() > 0,\n    negative: changedValue() && value() < 0,\n  }\"\n>\n  @if (showPlus() && this.value() > 0) {\n    +\n  }\n  <span class=\"integer-value\">{{ separatedDigits().integer }}</span>\n  @if (separatedDigits().decimals) {\n    <span\n      class=\"decimal-number\"\n      [ngClass]=\"{ deemphasize: deemphasizeDecimals }\"\n      >{{ decimalPoint() }}{{ separatedDigits().decimals }}</span\n    >\n  }\n</p>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], changedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "changedValue", required: false }] }], showPlus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlus", required: false }] }], deemphasizeDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "deemphasizeDecimals", required: false }] }] } });
 
 class StrataShellComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: StrataShellComponent, isStandalone: true, selector: "st-shell", ngImport: i0, template: "<st-notification-container></st-notification-container>\n<st-modal-container></st-modal-container>\n<ng-content></ng-content>", dependencies: [{ kind: "component", type: StrataModalContainerComponent, selector: "st-modal-container" }, { kind: "component", type: StrataNotificationContainerComponent, selector: "st-notification-container" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: StrataShellComponent, isStandalone: true, selector: "st-shell", ngImport: i0, template: "<st-notification-container></st-notification-container>\n<st-modal-container></st-modal-container>\n<ng-content></ng-content>", dependencies: [{ kind: "component", type: StrataModalContainerComponent, selector: "st-modal-container" }, { kind: "component", type: StrataNotificationContainerComponent, selector: "st-notification-container" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataShellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-shell', imports: [StrataModalContainerComponent, StrataNotificationContainerComponent], template: "<st-notification-container></st-notification-container>\n<st-modal-container></st-modal-container>\n<ng-content></ng-content>" }]
         }] });
 
 class StrataMessageStateComponent {
-    header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
-    subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-    primaryActionText = input(undefined, ...(ngDevMode ? [{ debugName: "primaryActionText" }] : []));
-    primaryActionTheme = input(undefined, ...(ngDevMode ? [{ debugName: "primaryActionTheme" }] : []));
-    secondaryActionText = input(undefined, ...(ngDevMode ? [{ debugName: "secondaryActionText" }] : []));
+    header = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    subtitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    primaryActionText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActionText" }] : /* istanbul ignore next */ []));
+    primaryActionTheme = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActionTheme" }] : /* istanbul ignore next */ []));
+    secondaryActionText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActionText" }] : /* istanbul ignore next */ []));
     primaryAction = output();
     secondaryAction = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataMessageStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StrataMessageStateComponent, isStandalone: true, selector: "st-message-state", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, primaryActionText: { classPropertyName: "primaryActionText", publicName: "primaryActionText", isSignal: true, isRequired: false, transformFunction: null }, primaryActionTheme: { classPropertyName: "primaryActionTheme", publicName: "primaryActionTheme", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionText: { classPropertyName: "secondaryActionText", publicName: "secondaryActionText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div class=\"st-message-state-graphic\">\n  <ng-content></ng-content>\n</div>\n\n<st-text-stack>\n  <h3 class=\"st-message-state-header\">{{ header() }}</h3>\n  @if (subtitle()) {\n    <p class=\"st-message-state-subtitle\">{{ subtitle() }}</p>\n  }\n</st-text-stack>\n\n@if (primaryActionText() || secondaryActionText()) {\n  <div class=\"st-message-state-actions\">\n    @if (secondaryActionText()) {\n      <button \n        stButton \n        variant=\"secondary\" \n        (click)=\"secondaryAction.emit()\">\n        {{ secondaryActionText() }}\n      </button>\n    }\n    @if (primaryActionText()) {\n      <button \n        stButton \n        variant=\"primary\" \n        [stTheme]=\"primaryActionTheme() || 'default'\" \n        (click)=\"primaryAction.emit()\">\n        {{ primaryActionText() }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{--st-message-state-align-items: center;--st-message-state-text-align: center;--st-message-state-gap: var(--st-size-lg, 32px);--st-message-state-content-gap: var(--st-size-xxs, 8px);--st-message-state-actions-gap: var(--st-size-sm, 16px);--st-message-state-padding: var(--st-size-lg, 32px);display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);text-align:var(--st-message-state-text-align);gap:var(--st-message-state-gap);padding:var(--st-message-state-padding);width:100%;box-sizing:border-box}.st-message-state-graphic{display:flex;justify-content:center;align-items:center}.st-message-state-content{display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);gap:var(--st-message-state-content-gap);width:100%}.st-message-state-header{color:var(--st-color-text-primary);margin:0}.st-message-state-subtitle{color:var(--st-color-text-secondary);margin:0}.st-message-state-actions{display:flex;justify-content:center;gap:var(--st-message-state-actions-gap)}\n"], dependencies: [{ kind: "component", type: StrataTextStackComponent, selector: "st-text-stack", inputs: ["overflow"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataMessageStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataMessageStateComponent, isStandalone: true, selector: "st-message-state", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, primaryActionText: { classPropertyName: "primaryActionText", publicName: "primaryActionText", isSignal: true, isRequired: false, transformFunction: null }, primaryActionTheme: { classPropertyName: "primaryActionTheme", publicName: "primaryActionTheme", isSignal: true, isRequired: false, transformFunction: null }, secondaryActionText: { classPropertyName: "secondaryActionText", publicName: "secondaryActionText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div class=\"st-message-state-graphic\">\n  <ng-content></ng-content>\n</div>\n\n<st-text-stack>\n  <h3 class=\"st-message-state-header\">{{ header() }}</h3>\n  @if (subtitle()) {\n    <p class=\"st-message-state-subtitle\">{{ subtitle() }}</p>\n  }\n</st-text-stack>\n\n@if (primaryActionText() || secondaryActionText()) {\n  <div class=\"st-message-state-actions\">\n    @if (secondaryActionText()) {\n      <button \n        stButton \n        variant=\"secondary\" \n        (click)=\"secondaryAction.emit()\">\n        {{ secondaryActionText() }}\n      </button>\n    }\n    @if (primaryActionText()) {\n      <button \n        stButton \n        variant=\"primary\" \n        [stTheme]=\"primaryActionTheme() || 'default'\" \n        (click)=\"primaryAction.emit()\">\n        {{ primaryActionText() }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{--st-message-state-align-items: center;--st-message-state-text-align: center;--st-message-state-gap: var(--st-size-lg, 32px);--st-message-state-content-gap: var(--st-size-xxs, 8px);--st-message-state-actions-gap: var(--st-size-sm, 16px);--st-message-state-padding: var(--st-size-lg, 32px);display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);text-align:var(--st-message-state-text-align);gap:var(--st-message-state-gap);padding:var(--st-message-state-padding);width:100%;box-sizing:border-box}.st-message-state-graphic{display:flex;justify-content:center;align-items:center}.st-message-state-content{display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);gap:var(--st-message-state-content-gap);width:100%}.st-message-state-header{color:var(--st-color-text-primary);margin:0}.st-message-state-subtitle{color:var(--st-color-text-secondary);margin:0}.st-message-state-actions{display:flex;justify-content:center;gap:var(--st-message-state-actions-gap)}\n"], dependencies: [{ kind: "component", type: StrataTextStackComponent, selector: "st-text-stack", inputs: ["overflow"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StrataMessageStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataMessageStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-message-state', imports: [StrataTextStackComponent, StrataButtonDirective, StrataThemeDirective], template: "<div class=\"st-message-state-graphic\">\n  <ng-content></ng-content>\n</div>\n\n<st-text-stack>\n  <h3 class=\"st-message-state-header\">{{ header() }}</h3>\n  @if (subtitle()) {\n    <p class=\"st-message-state-subtitle\">{{ subtitle() }}</p>\n  }\n</st-text-stack>\n\n@if (primaryActionText() || secondaryActionText()) {\n  <div class=\"st-message-state-actions\">\n    @if (secondaryActionText()) {\n      <button \n        stButton \n        variant=\"secondary\" \n        (click)=\"secondaryAction.emit()\">\n        {{ secondaryActionText() }}\n      </button>\n    }\n    @if (primaryActionText()) {\n      <button \n        stButton \n        variant=\"primary\" \n        [stTheme]=\"primaryActionTheme() || 'default'\" \n        (click)=\"primaryAction.emit()\">\n        {{ primaryActionText() }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{--st-message-state-align-items: center;--st-message-state-text-align: center;--st-message-state-gap: var(--st-size-lg, 32px);--st-message-state-content-gap: var(--st-size-xxs, 8px);--st-message-state-actions-gap: var(--st-size-sm, 16px);--st-message-state-padding: var(--st-size-lg, 32px);display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);text-align:var(--st-message-state-text-align);gap:var(--st-message-state-gap);padding:var(--st-message-state-padding);width:100%;box-sizing:border-box}.st-message-state-graphic{display:flex;justify-content:center;align-items:center}.st-message-state-content{display:flex;flex-direction:column;align-items:var(--st-message-state-align-items);gap:var(--st-message-state-content-gap);width:100%}.st-message-state-header{color:var(--st-color-text-primary);margin:0}.st-message-state-subtitle{color:var(--st-color-text-secondary);margin:0}.st-message-state-actions{display:flex;justify-content:center;gap:var(--st-message-state-actions-gap)}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], primaryActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActionText", required: false }] }], primaryActionTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActionTheme", required: false }] }], secondaryActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionText", required: false }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], secondaryAction: [{ type: i0.Output, args: ["secondaryAction"] }] } });
@@ -2298,5 +2600,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