ngx-strata 0.2.4 → 0.3.0

package/fesm2022/ngx-strata.mjs

@@ -1,48 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, model, output, computed, Directive, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, effect, InjectionToken, provideEnvironmentInitializer, Renderer2, Input, 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, size } from '@floating-ui/dom';
+import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, Input, DestroyRef, HostListener, Component, contentChild, HostBinding, ViewContainerRef, viewChild, contentChildren, TemplateRef, Pipe, booleanAttribute, ContentChildren, Injector, LOCALE_ID } from '@angular/core';
 import { Observable, tap, map, fromEvent, switchMap, filter } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
+import { computePosition, offset, arrow, autoUpdate, flip, shift, size } from '@floating-ui/dom';
 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 { 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"] }] } });
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 
 class IconLoader {
 }
@@ -252,7 +219,8 @@ const DEFAULT_CONFIG = {
         shift: 'Shift',
         alt: 'Alt'
     },
-    overlayViewportBuffer: 16
+    overlayViewportBuffer: 16,
+    activationKeys: [' ', 'Space', 'Spacebar', 'Enter', 'NumpadEnter']
 };
 function provideStrata(config = {}) {
     const mergedConfig = {
@@ -276,6 +244,43 @@ function provideStrata(config = {}) {
 }
 const STRATA_CONFIG = new InjectionToken('STRATA_CONFIG');
 
+const DEFAULT_ACTIVATION_KEYS = [' ', 'Space', 'Spacebar', 'Enter', 'NumpadEnter'];
+class StrataActivatableDirective {
+    _elementRef = inject(ElementRef);
+    _config = inject(STRATA_CONFIG, { optional: true });
+    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;
+        }
+        const activationKeys = this._config?.activationKeys ?? DEFAULT_ACTIVATION_KEYS;
+        const isActivationKey = activationKeys.includes(event.key) || activationKeys.includes(event.code);
+        if (isActivationKey) {
+            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 StrataTooltipDirective {
     document = inject(DOCUMENT);
     element = inject(ElementRef);
@@ -585,6 +590,7 @@ class StrataButtonDirective {
     ...(ngDevMode ? [{ debugName: "iconAtEnd" }] : /* istanbul ignore next */ []));
     iconOnly = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    observer;
     get classes() {
         return [
             'st-button',
@@ -597,14 +603,39 @@ class StrataButtonDirective {
         ];
     }
     ngAfterContentInit() {
-        const nodes = this.host.nativeElement.childNodes;
-        if (nodes === undefined || nodes.length == 0) {
+        this.updateIconState();
+        if (typeof MutationObserver !== 'undefined') {
+            this.observer = new MutationObserver(() => this.updateIconState());
+            this.observer.observe(this.host.nativeElement, { childList: true, subtree: true, characterData: true });
+        }
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    updateIconState() {
+        const rawNodes = Array.from(this.host.nativeElement.childNodes);
+        const nodes = rawNodes.filter((node) => {
+            if (node.nodeType === Node.COMMENT_NODE) {
+                return false;
+            }
+            if (node.nodeType === Node.TEXT_NODE && !node.textContent?.trim()) {
+                return false;
+            }
+            return true;
+        });
+        if (nodes.length === 0) {
+            this.iconOnly.set(false);
+            this.iconAtStart.set(false);
+            this.iconAtEnd.set(false);
             return;
         }
         if (nodes.length === 1 && this.nodeIsStIcon(nodes[0])) {
             this.iconOnly.set(true);
+            this.iconAtStart.set(false);
+            this.iconAtEnd.set(false);
             return;
         }
+        this.iconOnly.set(false);
         this.iconAtStart.set(this.nodeIsStIcon(nodes[0]));
         this.iconAtEnd.set(this.nodeIsStIcon(nodes[nodes.length - 1]));
     }
@@ -820,6 +851,9 @@ class StrataActionMenuComponent {
     ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : /* istanbul ignore next */ []));
     placement = input('bottom-end', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    closeOnOutsideClick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
     renderer = inject(Renderer2);
     menuOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
@@ -836,6 +870,26 @@ class StrataActionMenuComponent {
                 unlisten();
             });
         });
+        effect((onCleanup) => {
+            if (!this.menuOpen() || !this.closeOnOutsideClick()) {
+                return;
+            }
+            const unlisten = this.renderer.listen('document', 'pointerdown', (event) => {
+                const target = event.target;
+                if (!target) {
+                    return;
+                }
+                const hostEl = this.elementRef.nativeElement;
+                const cardEl = document.querySelector('.action-menu-card');
+                if (hostEl.contains(target) || (cardEl && cardEl.contains(target))) {
+                    return;
+                }
+                this.menuOpen.set(false);
+            });
+            onCleanup(() => {
+                unlisten();
+            });
+        });
         effect((onCleanup) => {
             const subs = this.actionMenuItems().map((item) => item.menuItemClicked.subscribe((shouldClose) => {
                 if (shouldClose) {
@@ -848,7 +902,7 @@ class StrataActionMenuComponent {
         });
     }
     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", "overlayFitViewport"], 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 ɵ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 }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", 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", "overlayFitViewport"], 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: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, decorators: [{
             type: Component,
@@ -858,7 +912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                             read: ElementRef
                         }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             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 }] }] } });
+                        }, isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }] } });
 
 class StrataTextStackComponent {
     overflow = input('truncate', /* @ts-ignore */
@@ -1004,6 +1058,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             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 StrataAvatarStackComponent {
+    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 */ []));
+    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.1.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": "size() === \"xs\"", "class.sm": "size() === \"sm\"", "class.md": "size() === \"md\"", "class.lg": "size() === \"lg\"", "class.tight": "spacing() === \"tight\"", "class.mid": "spacing() === \"mid\"", "class.loose": "spacing() === \"loose\"", "class.first-on-front": "firstOnFront()" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-avatar-stack', imports: [], host: {
+                        '[class.xs]': 'size() === "xs"',
+                        '[class.sm]': 'size() === "sm"',
+                        '[class.md]': 'size() === "md"',
+                        '[class.lg]': 'size() === "lg"',
+                        '[class.tight]': 'spacing() === "tight"',
+                        '[class.mid]': 'spacing() === "mid"',
+                        '[class.loose]': 'spacing() === "loose"',
+                        '[class.first-on-front]': 'firstOnFront()',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { 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 }] }] } });
+
 class StrataAvatarComponent {
     iconComponents = contentChildren(StrataIconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : /* istanbul ignore next */ {}), descendants: true });
     text = input(null, /* @ts-ignore */
@@ -1031,93 +1109,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: ['class']
             }] } });
 
-class StrataAvatarStackComponent {
-    avatarRefs = contentChildren(StrataAvatarComponent, { ...(ngDevMode ? { debugName: "avatarRefs" } : /* istanbul ignore next */ {}), descendants: true,
-        read: ElementRef });
-    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';
-    }
-    get smClass() {
-        return this.size() === 'sm';
-    }
-    get mdClass() {
-        return this.size() === 'md';
-    }
-    get lgClass() {
-        return this.size() === 'lg';
-    }
-    get firstOnFrontClass() {
-        return this.firstOnFront();
-    }
-    get looseClass() {
-        return this.spacing() === 'loose';
-    }
-    get midClass() {
-        return this.spacing() === 'mid';
-    }
-    get tightClass() {
-        return this.spacing() === 'tight';
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.avatarRefs().forEach((ref, index) => {
-                if (this.firstOnFront()) {
-                    ref.nativeElement.style.setProperty('--z', (this.avatarRefs().length - index).toString());
-                }
-            });
-        }, 1);
-    }
-    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: "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
-                        }, 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']
-            }], smClass: [{
-                type: HostBinding,
-                args: ['class.sm']
-            }], mdClass: [{
-                type: HostBinding,
-                args: ['class.md']
-            }], lgClass: [{
-                type: HostBinding,
-                args: ['class.lg']
-            }], firstOnFrontClass: [{
-                type: HostBinding,
-                args: ['class.first-on-front']
-            }], looseClass: [{
-                type: HostBinding,
-                args: ['class.loose']
-            }], midClass: [{
-                type: HostBinding,
-                args: ['class.mid']
-            }], tightClass: [{
-                type: HostBinding,
-                args: ['class.tight']
-            }] } });
-
 class StrataButtonGroupComponent {
-    renderer = inject(Renderer2);
     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" });
+    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 } }, host: { properties: { "attr.justification": "justification()" } }, ngImport: i0, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" });
 }
 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" }]
+            args: [{ selector: 'st-button-group', imports: [], host: {
+                        '[attr.justification]': 'justification()',
+                    }, 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 {
@@ -1231,6 +1233,8 @@ class StrataSingleSelectComponent {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     placement = input('bottom-start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     label = input(/* @ts-ignore */
@@ -1284,6 +1288,8 @@ class StrataSingleSelectComponent {
         }
     }
     toggle(event) {
+        if (this.disabled())
+            return;
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -1310,7 +1316,7 @@ class StrataSingleSelectComponent {
         this.open.set(false);
     }
     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    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\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", "overlayFitViewport"], 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"] }] });
+    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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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\" [class.disabled]=\"disabled()\" [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    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\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", "overlayFitViewport"], 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: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
             type: Component,
@@ -1322,8 +1328,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         FormsModule,
                         StrataNativeInputRefDirective,
                         StrataButtonDirective,
-                    ], template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\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 }] }] } });
+                    ], template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"disabled()\" [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    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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(/* @ts-ignore */
@@ -1938,17 +1944,25 @@ class StrataSidemenuSectionComponent {
     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"] });
+    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%}:host:not(:last-child){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: "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"] }]
+            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%}:host:not(:last-child){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, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    secondaryActionIcon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActionIcon" }] : /* istanbul ignore next */ []));
+    secondaryAction = output();
     elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    vcr = inject(ViewContainerRef);
+    secondaryButtonEl = null;
+    iconComponentRef = null;
+    unlistenClick = null;
     constructor() {
         effect(() => {
             if (this.active()) {
@@ -1958,20 +1972,64 @@ class StrataSidemenuItemDirective {
                 });
             }
         });
+        effect(() => {
+            const iconName = this.secondaryActionIcon();
+            this.updateSecondaryButton(iconName);
+        });
+    }
+    updateSecondaryButton(iconName) {
+        if (!iconName) {
+            this.removeSecondaryButton();
+            return;
+        }
+        if (!this.secondaryButtonEl) {
+            const btn = this.renderer.createElement('button');
+            this.renderer.setAttribute(btn, 'type', 'button');
+            this.renderer.addClass(btn, 'st-sidemenu-item-secondary-action');
+            this.unlistenClick = this.renderer.listen(btn, 'click', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.secondaryAction.emit(event);
+            });
+            this.iconComponentRef = this.vcr.createComponent(StrataIconComponent);
+            this.iconComponentRef.setInput('name', iconName);
+            this.iconComponentRef.setInput('size', 'sm');
+            this.renderer.insertBefore(btn, this.iconComponentRef.location.nativeElement, null);
+            const hostEl = this.elementRef.nativeElement;
+            this.renderer.appendChild(hostEl, btn);
+            this.secondaryButtonEl = btn;
+        }
+        else if (this.iconComponentRef) {
+            this.iconComponentRef.setInput('name', iconName);
+        }
+    }
+    removeSecondaryButton() {
+        if (this.unlistenClick) {
+            this.unlistenClick();
+            this.unlistenClick = null;
+        }
+        if (this.iconComponentRef) {
+            this.iconComponentRef.destroy();
+            this.iconComponentRef = null;
+        }
+        if (this.secondaryButtonEl) {
+            this.renderer.removeChild(this.elementRef.nativeElement, this.secondaryButtonEl);
+            this.secondaryButtonEl = null;
+        }
     }
     isSidemenuItem = true;
     get isSelected() {
         return this.active();
     }
     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 });
+    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 }, secondaryActionIcon: { classPropertyName: "secondaryActionIcon", publicName: "secondaryActionIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { secondaryAction: "secondaryAction" }, host: { properties: { "class.st-sidemenu-item": "this.isSidemenuItem", "class.selected": "this.isSelected" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSidemenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stSidemenuItem]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], isSidemenuItem: [{
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], secondaryActionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActionIcon", required: false }] }], secondaryAction: [{ type: i0.Output, args: ["secondaryAction"] }], isSidemenuItem: [{
                 type: HostBinding,
                 args: ['class.st-sidemenu-item']
             }], isSelected: [{
@@ -1982,6 +2040,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 class StrataSidemenuItemGroupComponent {
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    routerLink = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    href = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    active = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     expanded = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     hasActiveChild = signal(false, /* @ts-ignore */
@@ -1989,6 +2053,12 @@ class StrataSidemenuItemGroupComponent {
     router = inject(Router, { optional: true });
     destroyRef = inject(DestroyRef);
     routerLinks;
+    get isHeaderActive() {
+        return this.active() ?? this.hasActiveChild();
+    }
+    get isNavigable() {
+        return this.routerLink() !== undefined || this.href() !== undefined;
+    }
     ngAfterContentInit() {
         setTimeout(() => {
             this.checkActiveState();
@@ -1997,14 +2067,17 @@ class StrataSidemenuItemGroupComponent {
             this.router.events
                 .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
-                // Wait a tick for RouterLinkActive to update its isActive status
                 setTimeout(() => {
                     this.checkActiveState();
                 });
             });
         }
     }
-    toggle() {
+    toggle(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         this.expanded.update((e) => !e);
     }
     checkActiveState() {
@@ -2017,12 +2090,12 @@ class StrataSidemenuItemGroupComponent {
         }
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "routerLinks", predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "@if (routerLink()) {\n  <a\n    stSidemenuItem\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"selected\"\n    [active]=\"isHeaderActive\"\n    secondaryActionIcon=\"arrow-down\"\n    [class.st-sidemenu-item-group-expanded]=\"expanded()\"\n    (secondaryAction)=\"toggle($event)\">\n    <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  </a>\n} @else if (href()) {\n  <a\n    stSidemenuItem\n    [href]=\"href()\"\n    [active]=\"isHeaderActive\"\n    secondaryActionIcon=\"arrow-down\"\n    [class.st-sidemenu-item-group-expanded]=\"expanded()\"\n    (secondaryAction)=\"toggle($event)\">\n    <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  </a>\n} @else {\n  <button stSidemenuItem type=\"button\" [active]=\"isHeaderActive\" (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\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n\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", "secondaryActionIcon"], outputs: ["secondaryAction"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 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: [{
+            args: [{ selector: 'st-sidemenu-item-group', imports: [StrataSidemenuItemDirective, StrataIconComponent, RouterLink, RouterLinkActive], template: "@if (routerLink()) {\n  <a\n    stSidemenuItem\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"selected\"\n    [active]=\"isHeaderActive\"\n    secondaryActionIcon=\"arrow-down\"\n    [class.st-sidemenu-item-group-expanded]=\"expanded()\"\n    (secondaryAction)=\"toggle($event)\">\n    <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  </a>\n} @else if (href()) {\n  <a\n    stSidemenuItem\n    [href]=\"href()\"\n    [active]=\"isHeaderActive\"\n    secondaryActionIcon=\"arrow-down\"\n    [class.st-sidemenu-item-group-expanded]=\"expanded()\"\n    (secondaryAction)=\"toggle($event)\">\n    <span class=\"st-sidemenu-item-group-label\">{{ label() }}</span>\n  </a>\n} @else {\n  <button stSidemenuItem type=\"button\" [active]=\"isHeaderActive\" (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\n\n<div class=\"st-sidemenu-item-group-content\" [hidden]=\"!expanded()\">\n  <ng-content></ng-content>\n</div>\n\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 }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLinks: [{
                 type: ContentChildren,
                 args: [RouterLinkActive, { descendants: true }]
             }] } });
@@ -2608,11 +2681,11 @@ class StrataMessageStateComponent {
     primaryAction = output();
     secondaryAction = output();
     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"] }] });
+    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 overflow=\"wrap\">\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: "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"] }]
+            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 overflow=\"wrap\">\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"] }] } });
 
 /*