ngx-strata 0.5.0 → 0.5.2

package/fesm2022/ngx-strata.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, DestroyRef, Pipe, HostBinding, Component, contentChildren, booleanAttribute, forwardRef, contentChild, HostListener, ViewContainerRef, viewChild, numberAttribute, Injector, LOCALE_ID, viewChildren, ContentChildren, TemplateRef } from '@angular/core';
+import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, PLATFORM_ID, DestroyRef, Pipe, HostBinding, Component, contentChildren, booleanAttribute, forwardRef, contentChild, HostListener, ViewContainerRef, viewChild, numberAttribute, Injector, LOCALE_ID, viewChildren, ContentChildren, TemplateRef } 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 * as i1$1 from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgTemplateOutlet, DOCUMENT as DOCUMENT$1, formatNumber, getLocaleNumberSymbol, NumberSymbol, DecimalPipe } from '@angular/common';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, DOCUMENT as DOCUMENT$1, formatNumber, getLocaleNumberSymbol, NumberSymbol, DecimalPipe } from '@angular/common';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 
 class IconLoader {
@@ -248,6 +248,7 @@ const DEFAULT_CONFIG = {
     includeBaseIcons: true,
     tooltipDelayMs: 500,
     crossPlatformHotkeys: true,
+    maxNotifications: 5,
     overlayViewportBuffer: 16,
     activationKeys: [' ', 'Space', 'Spacebar', 'Enter', 'NumpadEnter'],
     platform: 'auto'
@@ -425,6 +426,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }], propDecorators: { stSimpleTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSimpleTooltip", required: true }] }], tooltipEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipEnabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipAlwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlwaysShow", required: false }] }] } });
 
+const BREAKPOINT_ORDER = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4
+};
+class BreakpointService {
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(this.platformId);
+    _width = signal(1280, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
+    _current = signal('xl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_current" }] : /* istanbul ignore next */ []));
+    width = this._width.asReadonly();
+    current = this._current.asReadonly();
+    isMobile = computed(() => this.isSmallerThan('md'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isTablet = computed(() => this._current() === 'md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
+    isDesktop = computed(() => this.isAtLeast('lg'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.updateBreakpoint();
+        const resizeHandler = () => this.updateBreakpoint();
+        window.addEventListener('resize', resizeHandler);
+        this.destroyRef.onDestroy(() => {
+            window.removeEventListener('resize', resizeHandler);
+        });
+    }
+    is(breakpoint) {
+        return this._current() === breakpoint;
+    }
+    isSmallerThan(breakpoint) {
+        return BREAKPOINT_ORDER[this._current()] < BREAKPOINT_ORDER[breakpoint];
+    }
+    isLargerThan(breakpoint) {
+        return BREAKPOINT_ORDER[this._current()] > BREAKPOINT_ORDER[breakpoint];
+    }
+    isAtLeast(breakpoint) {
+        return BREAKPOINT_ORDER[this._current()] >= BREAKPOINT_ORDER[breakpoint];
+    }
+    isAtMost(breakpoint) {
+        return BREAKPOINT_ORDER[this._current()] <= BREAKPOINT_ORDER[breakpoint];
+    }
+    updateBreakpoint() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const width = window.innerWidth;
+        this._width.set(width);
+        if (width < 480) {
+            this._current.set('xs');
+        }
+        else if (width < 768) {
+            this._current.set('sm');
+        }
+        else if (width < 1024) {
+            this._current.set('md');
+        }
+        else if (width < 1280) {
+            this._current.set('lg');
+        }
+        else {
+            this._current.set('xl');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BreakpointService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BreakpointService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class DeviceService {
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(this.platformId);
+    _isTouch = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isTouch" }] : /* istanbul ignore next */ []));
+    _hasHover = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasHover" }] : /* istanbul ignore next */ []));
+    _os = signal('unknown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_os" }] : /* istanbul ignore next */ []));
+    isTouch = this._isTouch.asReadonly();
+    hasHover = this._hasHover.asReadonly();
+    os = this._os.asReadonly();
+    isApple = computed(() => this._os() === 'macos' || this._os() === 'ios', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isApple" }] : /* istanbul ignore next */ []));
+    isAndroid = computed(() => this._os() === 'android', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAndroid" }] : /* istanbul ignore next */ []));
+    isWindows = computed(() => this._os() === 'windows', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isWindows" }] : /* istanbul ignore next */ []));
+    isLinux = computed(() => this._os() === 'linux', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLinux" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this._os.set(this.detectOS());
+        this.updatePointerCapabilities();
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            const hoverQuery = window.matchMedia('(hover: hover)');
+            const pointerQuery = window.matchMedia('(pointer: coarse)');
+            const pointerChangeHandler = () => this.updatePointerCapabilities();
+            hoverQuery.addEventListener?.('change', pointerChangeHandler);
+            pointerQuery.addEventListener?.('change', pointerChangeHandler);
+            this.destroyRef.onDestroy(() => {
+                hoverQuery.removeEventListener?.('change', pointerChangeHandler);
+                pointerQuery.removeEventListener?.('change', pointerChangeHandler);
+            });
+        }
+    }
+    detectOS() {
+        if (typeof navigator === 'undefined') {
+            return 'unknown';
+        }
+        const nav = navigator;
+        const platform = nav.userAgentData?.platform || nav.platform || '';
+        const ua = nav.userAgent || '';
+        if (/android/i.test(platform) || /android/i.test(ua)) {
+            return 'android';
+        }
+        const isIPadOS = /mac/i.test(platform) && typeof navigator.maxTouchPoints === 'number' && navigator.maxTouchPoints > 1;
+        if (/iphone|ipad|ipod/i.test(platform) || /iphone|ipad|ipod/i.test(ua) || isIPadOS) {
+            return 'ios';
+        }
+        if (/mac/i.test(platform) || /macintosh|mac os x/i.test(ua)) {
+            return 'macos';
+        }
+        if (/win/i.test(platform) || /windows/i.test(ua)) {
+            return 'windows';
+        }
+        if (/linux/i.test(platform) || /linux/i.test(ua)) {
+            return 'linux';
+        }
+        return 'unknown';
+    }
+    updatePointerCapabilities() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const hasTouchPointer = window.matchMedia?.('(pointer: coarse)')?.matches ?? false;
+        const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints > 0 : false;
+        this._isTouch.set(hasTouchPointer || maxTouchPoints);
+        const hasHoverMedia = window.matchMedia?.('(hover: hover)')?.matches ?? true;
+        this._hasHover.set(hasHoverMedia);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DeviceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DeviceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class HotkeyService {
     config = inject(STRATA_CONFIG);
     destroyRef = inject(DestroyRef);
@@ -630,9 +796,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: ['class.standalone']
             }] } });
 
-let nextUniqueId$1 = 0;
+let nextUniqueId$2 = 0;
 class StrataCheckboxComponent {
-    defaultId = `st-checkbox-${nextUniqueId$1++}`;
+    defaultId = `st-checkbox-${nextUniqueId$2++}`;
     value = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     label = input(undefined, /* @ts-ignore */
@@ -1420,6 +1586,12 @@ class StrataBreadcrumbItemComponent {
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     icon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    badge = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    badgeVariant = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
+    badgeSize = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []));
     interactable = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interactable" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
@@ -1428,14 +1600,14 @@ class StrataBreadcrumbItemComponent {
     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", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataActivatableDirective, selector: "[stActivatable]", inputs: ["disabled", "interactable"], outputs: ["interactableChange", "activated"] }] });
+    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 }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", 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    @if (badge() !== undefined) {\n      <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n    }\n    <ng-content select=\"st-badge\"></ng-content>\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", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataActivatableDirective, selector: "[stActivatable]", inputs: ["disabled", "interactable"], outputs: ["interactableChange", "activated"] }, { kind: "component", type: StrataBadgeComponent, selector: "st-badge", inputs: ["value", "icon", "max", "variant", "size", "placement", "visible", "showZero", "ariaLabel"] }] });
 }
 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: {
+            args: [{ selector: 'st-breadcrumb-item', imports: [StrataIconComponent, StrataActivatableDirective, StrataBadgeComponent], 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"] }] } });
+                    }, 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    @if (badge() !== undefined) {\n      <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n    }\n    <ng-content select=\"st-badge\"></ng-content>\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 }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], badgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSize", 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 */
@@ -2178,10 +2350,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }] });
 
-let nextUniqueId = 0;
+let nextUniqueId$1 = 0;
 class StrataInputFieldComponent {
     hostElement = inject((ElementRef));
-    defaultId = `st-input-${nextUniqueId++}`;
+    defaultId = `st-input-${nextUniqueId$1++}`;
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     label = input(undefined, /* @ts-ignore */
@@ -2765,6 +2937,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     ], template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n" }]
         }], 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 StrataModalBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: StrataModalBodyComponent, isStandalone: true, selector: "st-modal-body", host: { classAttribute: "st-modal-body" }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataModalBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-modal-body', imports: [], host: {
+                        class: 'st-modal-body'
+                    }, template: "<ng-content></ng-content>\n" }]
+        }] });
+
 class StrataModalRef {
 }
 
@@ -2796,19 +2979,23 @@ class StrataModalComponent {
     });
     configuration = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
-    size = model('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    placement = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
     currentSize = computed(() => this.size() ?? this.configuration()?.size ?? 'md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentSize" }] : /* istanbul ignore next */ []));
     currentVariant = computed(() => this.variant() ?? this.configuration()?.variant ?? 'default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentVariant" }] : /* istanbul ignore next */ []));
+    currentPlacement = computed(() => this.placement() ?? this.configuration()?.placement ?? 'center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPlacement" }] : /* istanbul ignore next */ []));
     role = 'dialog';
     ariaModal = 'true';
     tabIndex = -1;
     get hostClasses() {
-        return `st-modal-size-${this.currentSize()} st-modal-variant-${this.currentVariant()}`;
+        return `st-modal-size-${this.currentSize()} st-modal-variant-${this.currentVariant()} st-modal-placement-${this.currentPlacement()}`;
     }
     ngOnInit() {
         if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) {
@@ -2885,14 +3072,14 @@ class StrataModalComponent {
         return Array.from(this.elementRef.nativeElement.querySelectorAll(selector));
     }
     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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses" } }, 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 ɵ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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", placement: "placementChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses" } }, 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: "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
-                        }, 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"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], role: [{
+                        }, 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"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }, { type: i0.Output, args: ["placementChange"] }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaModal: [{
@@ -2930,11 +3117,11 @@ class StrataModalContainerComponent {
         this.modalService.closeCurrentModal();
     }
     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", host: { listeners: { "document:keydown.escape": "onEscape($event)" } }, 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\" [variant]=\"modal.variant\"> </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", "variant"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataModalContainerComponent, isStandalone: true, selector: "st-modal-container", host: { listeners: { "document:keydown.escape": "onEscape($event)" } }, 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\" [variant]=\"modal.variant\" [placement]=\"modal.placement\"> </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", "variant", "placement"], outputs: ["sizeChange", "placementChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 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 modalService.modals(); track modal; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\" [variant]=\"modal.variant\"> </st-modal>\n  }\n</div>\n@if (modalService.modals().length > 0) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n" }]
+            args: [{ selector: 'st-modal-container', imports: [StrataModalComponent, CommonModule], template: "<div class=\"modal-wrapper\">\n  @for (modal of modalService.modals(); track modal; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\" [variant]=\"modal.variant\" [placement]=\"modal.placement\"> </st-modal>\n  }\n</div>\n@if (modalService.modals().length > 0) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n" }]
         }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -2959,46 +3146,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: ['class']
             }] } });
 
-const DEFAULT_THEME = 'info';
+const DEFAULT_THEME = 'default';
 const DEFAULT_DURATION = 3000;
 
 class NotificationService {
+    strataConfig = inject(STRATA_CONFIG, { optional: true });
+    maxNotifications = signal(this.strataConfig?.maxNotifications ?? 5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxNotifications" }] : /* istanbul ignore next */ []));
     notificationStack = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "notificationStack" }] : /* istanbul ignore next */ []));
     dismiss(notificationId) {
         const currentStack = this.notificationStack().filter((notification) => notification.id !== notificationId);
         this.notificationStack.set(currentStack);
     }
+    dismissAll() {
+        this.notificationStack.set([]);
+    }
     showNotification(config) {
         const newNotificationId = config.id ?? crypto.randomUUID();
         const duration = config.duration !== undefined ? config.duration : DEFAULT_DURATION;
         const isPersistent = duration === 0;
         const dismissible = config.dismissible !== undefined ? config.dismissible : isPersistent;
+        const showProgress = config.showProgress !== undefined ? config.showProgress : false;
+        const pauseOnHover = config.pauseOnHover !== undefined ? config.pauseOnHover : true;
+        const actions = config.actions ?? [];
         const currentStack = this.notificationStack();
         this.notificationStack.set([
             ...currentStack,
             {
                 id: newNotificationId,
+                title: config.title,
                 message: config.message,
                 duration: duration,
                 theme: config.theme ?? DEFAULT_THEME,
                 icon: config.icon,
-                dismissible
+                dismissible,
+                showProgress,
+                pauseOnHover,
+                actions
             }
         ]);
-        if (duration > 0) {
-            this.hideNotification(newNotificationId, duration);
-        }
         return {
             id: newNotificationId,
             dismiss: () => this.dismiss(newNotificationId)
         };
     }
-    hideNotification(notificationId, duration) {
-        setTimeout(() => {
-            this.dismiss(notificationId);
-        }, duration);
-    }
     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' });
 }
@@ -3010,36 +3202,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 class StrataNotificationComponent {
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     icon = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     message = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    duration = input(3000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
     dismissible = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    showProgress = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showProgress" }] : /* istanbul ignore next */ []));
+    pauseOnHover = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pauseOnHover" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     dismiss = output();
+    actionClick = output();
+    isPaused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPaused" }] : /* istanbul ignore next */ []));
+    remainingTime = 0;
+    startTime = 0;
+    timeoutId = null;
+    ngOnInit() {
+        if (this.duration() > 0) {
+            this.startTimer(this.duration());
+        }
+    }
+    ngOnDestroy() {
+        this.clearTimer();
+    }
     onDismiss() {
+        this.clearTimer();
         this.dismiss.emit();
     }
+    onActionClick(action) {
+        const ref = {
+            id: this.id() ?? '',
+            dismiss: () => this.onDismiss()
+        };
+        this.actionClick.emit({ action, ref });
+        if (action.onClick) {
+            action.onClick(ref);
+        }
+    }
+    pauseTimer() {
+        if (!this.pauseOnHover() || this.duration() <= 0 || this.isPaused()) {
+            return;
+        }
+        this.clearTimer();
+        const elapsed = Date.now() - this.startTime;
+        this.remainingTime = Math.max(0, this.remainingTime - elapsed);
+        this.isPaused.set(true);
+    }
+    resumeTimer() {
+        if (!this.pauseOnHover() || this.duration() <= 0 || !this.isPaused()) {
+            return;
+        }
+        if (this.remainingTime <= 0) {
+            this.onDismiss();
+            return;
+        }
+        this.startTimer(this.remainingTime);
+    }
+    startTimer(ms) {
+        this.clearTimer();
+        this.remainingTime = ms;
+        this.startTime = Date.now();
+        this.isPaused.set(false);
+        this.timeoutId = setTimeout(() => {
+            this.onDismiss();
+        }, ms);
+    }
+    clearTimer() {
+        if (this.timeoutId !== null) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+    }
     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: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if (icon()) {\n  <st-icon [name]=\"icon()!\"></st-icon>\n}\n<span class=\"notification-message\">{{ message() }}</span>\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    class=\"notification-close-btn\"\n    aria-label=\"Dismiss notification\"\n    (click)=\"onDismiss()\"\n  >\n    <st-icon name=\"close\"></st-icon>\n  </button>\n}\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataNotificationComponent, isStandalone: true, selector: "st-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss", actionClick: "actionClick" }, host: { listeners: { "mouseenter": "pauseTimer()", "mouseleave": "resumeTimer()", "focusin": "pauseTimer()", "focusout": "resumeTimer()" }, properties: { "class.st-is-paused": "isPaused()", "style.--st-notification-duration": "duration() + \"ms\"" } }, ngImport: i0, template: "@if (icon()) {\n  <div class=\"st-notification-icon-wrapper\">\n    <st-icon [name]=\"icon()!\"></st-icon>\n  </div>\n}\n<div class=\"st-notification-content\">\n  @if (title()) {\n    <div class=\"st-notification-title\">{{ title() }}</div>\n  }\n  <div class=\"st-notification-message notification-message\">{{ message() }}</div>\n  @if (actions().length > 0) {\n    <div class=\"st-notification-actions\">\n      @for (action of actions(); track action.label) {\n        <button\n          type=\"button\"\n          stButton\n          [variant]=\"action.variant ?? 'secondary'\"\n          size=\"sm\"\n          (click)=\"onActionClick(action)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    class=\"st-notification-close-btn notification-close-btn\"\n    aria-label=\"Dismiss notification\"\n    (click)=\"onDismiss()\"\n  >\n    <st-icon name=\"close\"></st-icon>\n  </button>\n}\n@if (showProgress() && duration() > 0) {\n  <div class=\"st-notification-progress-bar\" role=\"progressbar\" aria-hidden=\"true\"></div>\n}\n\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], 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: StrataNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-notification', imports: [StrataIconComponent], template: "@if (icon()) {\n  <st-icon [name]=\"icon()!\"></st-icon>\n}\n<span class=\"notification-message\">{{ message() }}</span>\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    class=\"notification-close-btn\"\n    aria-label=\"Dismiss notification\"\n    (click)=\"onDismiss()\"\n  >\n    <st-icon name=\"close\"></st-icon>\n  </button>\n}\n" }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+            args: [{ selector: 'st-notification', imports: [StrataIconComponent, StrataButtonDirective], host: {
+                        '[class.st-is-paused]': 'isPaused()',
+                        '[style.--st-notification-duration]': 'duration() + "ms"',
+                        '(mouseenter)': 'pauseTimer()',
+                        '(mouseleave)': 'resumeTimer()',
+                        '(focusin)': 'pauseTimer()',
+                        '(focusout)': 'resumeTimer()'
+                    }, template: "@if (icon()) {\n  <div class=\"st-notification-icon-wrapper\">\n    <st-icon [name]=\"icon()!\"></st-icon>\n  </div>\n}\n<div class=\"st-notification-content\">\n  @if (title()) {\n    <div class=\"st-notification-title\">{{ title() }}</div>\n  }\n  <div class=\"st-notification-message notification-message\">{{ message() }}</div>\n  @if (actions().length > 0) {\n    <div class=\"st-notification-actions\">\n      @for (action of actions(); track action.label) {\n        <button\n          type=\"button\"\n          stButton\n          [variant]=\"action.variant ?? 'secondary'\"\n          size=\"sm\"\n          (click)=\"onActionClick(action)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    class=\"st-notification-close-btn notification-close-btn\"\n    aria-label=\"Dismiss notification\"\n    (click)=\"onDismiss()\"\n  >\n    <st-icon name=\"close\"></st-icon>\n  </button>\n}\n@if (showProgress() && duration() > 0) {\n  <div class=\"st-notification-progress-bar\" role=\"progressbar\" aria-hidden=\"true\"></div>\n}\n\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 class StrataNotificationContainerComponent {
     notificationService = inject(NotificationService);
     notifications = this.notificationService.notificationStack;
+    maxNotifications = this.notificationService.maxNotifications;
+    visibleNotifications = computed(() => {
+        const max = this.maxNotifications();
+        const stack = this.notifications();
+        if (max <= 0 || stack.length <= max) {
+            return stack;
+        }
+        return stack.slice(-max);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleNotifications" }] : /* istanbul ignore next */ []));
+    overflowCount = computed(() => {
+        const max = this.maxNotifications();
+        const total = this.notifications().length;
+        if (max <= 0) {
+            return 0;
+        }
+        return Math.max(0, total - max);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
     dismiss(id) {
         this.notificationService.dismiss(id);
     }
+    dismissAll() {
+        this.notificationService.dismissAll();
+    }
     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\n    [icon]=\"notification.icon\"\n    [message]=\"notification.message\"\n    [dismissible]=\"notification.dismissible\"\n    [stTheme]=\"notification.theme ?? 'info'\"\n    (dismiss)=\"dismiss(notification.id)\"\n  >\n  </st-notification>\n}\n", dependencies: [{ kind: "component", type: StrataNotificationComponent, selector: "st-notification", inputs: ["icon", "message", "dismissible"], outputs: ["dismiss"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataNotificationContainerComponent, isStandalone: true, selector: "st-notification-container", ngImport: i0, template: "@if (overflowCount() > 0) {\n  <div class=\"st-notification-overflow\">\n    <span class=\"st-notification-overflow-text\">+{{ overflowCount() }} more</span>\n    <button\n      type=\"button\"\n      class=\"st-notification-overflow-clear\"\n      aria-label=\"Dismiss all notifications\"\n      (click)=\"dismissAll()\"\n    >\n      <st-icon name=\"close\"></st-icon>\n    </button>\n  </div>\n}\n\n@for (notification of visibleNotifications(); track notification.id) {\n  <st-notification\n    [id]=\"notification.id\"\n    [icon]=\"notification.icon\"\n    [title]=\"notification.title\"\n    [message]=\"notification.message\"\n    [dismissible]=\"notification.dismissible\"\n    [duration]=\"notification.duration ?? 3000\"\n    [showProgress]=\"notification.showProgress\"\n    [pauseOnHover]=\"notification.pauseOnHover\"\n    [actions]=\"notification.actions\"\n    [stTheme]=\"notification.theme ?? 'default'\"\n    (dismiss)=\"dismiss(notification.id)\"\n  >\n  </st-notification>\n}\n\n\n", dependencies: [{ kind: "component", type: StrataNotificationComponent, selector: "st-notification", inputs: ["id", "title", "icon", "message", "duration", "dismissible", "showProgress", "pauseOnHover", "actions"], outputs: ["dismiss", "actionClick"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
 }
 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\n    [icon]=\"notification.icon\"\n    [message]=\"notification.message\"\n    [dismissible]=\"notification.dismissible\"\n    [stTheme]=\"notification.theme ?? 'info'\"\n    (dismiss)=\"dismiss(notification.id)\"\n  >\n  </st-notification>\n}\n" }]
+            args: [{ selector: 'st-notification-container', imports: [StrataNotificationComponent, StrataThemeDirective, StrataIconComponent], template: "@if (overflowCount() > 0) {\n  <div class=\"st-notification-overflow\">\n    <span class=\"st-notification-overflow-text\">+{{ overflowCount() }} more</span>\n    <button\n      type=\"button\"\n      class=\"st-notification-overflow-clear\"\n      aria-label=\"Dismiss all notifications\"\n      (click)=\"dismissAll()\"\n    >\n      <st-icon name=\"close\"></st-icon>\n    </button>\n  </div>\n}\n\n@for (notification of visibleNotifications(); track notification.id) {\n  <st-notification\n    [id]=\"notification.id\"\n    [icon]=\"notification.icon\"\n    [title]=\"notification.title\"\n    [message]=\"notification.message\"\n    [dismissible]=\"notification.dismissible\"\n    [duration]=\"notification.duration ?? 3000\"\n    [showProgress]=\"notification.showProgress\"\n    [pauseOnHover]=\"notification.pauseOnHover\"\n    [actions]=\"notification.actions\"\n    [stTheme]=\"notification.theme ?? 'default'\"\n    (dismiss)=\"dismiss(notification.id)\"\n  >\n  </st-notification>\n}\n\n\n" }]
         }] });
 
 class StrataNumberDisplayComponent {
@@ -3078,6 +3370,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             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 }] }] } });
 
+let nextUniqueId = 0;
+class StrataNumberStepperComponent {
+    defaultId = `st-stepper-${nextUniqueId++}`;
+    inputRef = viewChild('nativeInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value) });
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value) });
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => {
+            const parsed = numberAttribute(value);
+            return parsed > 0 ? parsed : 1;
+        } });
+    precision = input(undefined, { ...(ngDevMode ? { debugName: "precision" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value) });
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    stepperLayout = input('split', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperLayout" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    state = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    message = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : booleanAttribute(value) });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.id() ?? this.name() ?? this.defaultId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => (this.disabled() ?? false) || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveState = computed(() => {
+        if (this.error()) {
+            return 'error';
+        }
+        return this.state() ?? 'default';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
+    isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
+    isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
+    isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
+    canIncrement = computed(() => {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return false;
+        }
+        const val = this.value();
+        const maxVal = this.max();
+        if (val !== undefined && val !== null && maxVal !== undefined && val >= maxVal) {
+            return false;
+        }
+        return true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canIncrement" }] : /* istanbul ignore next */ []));
+    canDecrement = computed(() => {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return false;
+        }
+        const val = this.value();
+        const minVal = this.min();
+        if (val !== undefined && val !== null && minVal !== undefined && val <= minVal) {
+            return false;
+        }
+        return true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDecrement" }] : /* istanbul ignore next */ []));
+    formattedValue = computed(() => {
+        const val = this.value();
+        if (val === undefined || val === null || isNaN(val)) {
+            return '';
+        }
+        return String(val);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    stepUp() {
+        if (!this.canIncrement()) {
+            return;
+        }
+        const current = this.value() ?? this.min() ?? 0;
+        let next = current + this.step();
+        const maxVal = this.max();
+        if (maxVal !== undefined && next > maxVal) {
+            next = maxVal;
+        }
+        next = this.roundToPrecision(next, this.precision());
+        this.updateValue(next);
+    }
+    stepDown() {
+        if (!this.canDecrement()) {
+            return;
+        }
+        const current = this.value() ?? this.max() ?? 0;
+        let next = current - this.step();
+        const minVal = this.min();
+        if (minVal !== undefined && next < minVal) {
+            next = minVal;
+        }
+        next = this.roundToPrecision(next, this.precision());
+        this.updateValue(next);
+    }
+    onNativeInput(event) {
+        const inputEl = event.target;
+        const raw = inputEl.value.trim();
+        if (raw === '') {
+            this.updateValue(undefined);
+            return;
+        }
+        const parsed = Number(raw);
+        if (!isNaN(parsed)) {
+            this.updateValue(parsed);
+        }
+    }
+    onNativeBlur() {
+        this.onTouched();
+        const val = this.value();
+        if (val === undefined || val === null || isNaN(val)) {
+            return;
+        }
+        let clamped = val;
+        const minVal = this.min();
+        const maxVal = this.max();
+        if (minVal !== undefined && clamped < minVal) {
+            clamped = minVal;
+        }
+        else if (maxVal !== undefined && clamped > maxVal) {
+            clamped = maxVal;
+        }
+        clamped = this.roundToPrecision(clamped, this.precision());
+        if (clamped !== val) {
+            this.updateValue(clamped);
+        }
+    }
+    onNativeKeyDown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.stepUp();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.stepDown();
+        }
+    }
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    blur() {
+        this.inputRef()?.nativeElement.blur();
+    }
+    writeValue(val) {
+        if (val === null || val === undefined || isNaN(val)) {
+            this.value.set(undefined);
+        }
+        else {
+            this.value.set(Number(val));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    updateValue(nextVal) {
+        this.value.set(nextVal);
+        this.onChange(nextVal);
+    }
+    roundToPrecision(val, precision) {
+        if (precision !== undefined) {
+            const factor = Math.pow(10, precision);
+            return Math.round(val * factor) / factor;
+        }
+        const stepDecimals = this.getDecimalCount(this.step());
+        if (stepDecimals > 0) {
+            const factor = Math.pow(10, stepDecimals);
+            return Math.round(val * factor) / factor;
+        }
+        return val;
+    }
+    getDecimalCount(val) {
+        const s = String(val);
+        const dotIndex = s.indexOf('.');
+        return dotIndex >= 0 ? s.length - dotIndex - 1 : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNumberStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataNumberStepperComponent, isStandalone: true, selector: "st-number-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stepperLayout: { classPropertyName: "stepperLayout", publicName: "stepperLayout", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-layout-split": "stepperLayout() === \"split\"", "class.st-layout-stacked": "stepperLayout() === \"stacked\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StrataNumberStepperComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div class=\"st-stepper-wrapper\">\n  @if (stepperLayout() === 'split') {\n    <button\n      type=\"button\"\n      class=\"st-stepper-btn st-stepper-btn-dec\"\n      [disabled]=\"!canDecrement()\"\n      (click)=\"stepDown()\"\n      aria-label=\"Decrement\"\n      tabindex=\"-1\"\n    >\n      <st-icon name=\"arrow-down\"></st-icon>\n    </button>\n    <input\n      #nativeInput\n      [id]=\"effectiveId()\"\n      [name]=\"name() ?? effectiveId()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [value]=\"formattedValue()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onNativeBlur()\"\n      (keydown)=\"onNativeKeyDown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"st-stepper-btn st-stepper-btn-inc\"\n      [disabled]=\"!canIncrement()\"\n      (click)=\"stepUp()\"\n      aria-label=\"Increment\"\n      tabindex=\"-1\"\n    >\n      <st-icon name=\"arrow-up\"></st-icon>\n    </button>\n  } @else {\n    <input\n      #nativeInput\n      [id]=\"effectiveId()\"\n      [name]=\"name() ?? effectiveId()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [value]=\"formattedValue()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onNativeBlur()\"\n      (keydown)=\"onNativeKeyDown($event)\"\n    />\n    <div class=\"st-stepper-stacked-actions\">\n      <button\n        type=\"button\"\n        class=\"st-stepper-btn st-stepper-btn-inc\"\n        [disabled]=\"!canIncrement()\"\n        (click)=\"stepUp()\"\n        aria-label=\"Increment\"\n        tabindex=\"-1\"\n      >\n        <st-icon name=\"arrow-up\"></st-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"st-stepper-btn st-stepper-btn-dec\"\n        [disabled]=\"!canDecrement()\"\n        (click)=\"stepDown()\"\n        aria-label=\"Decrement\"\n        tabindex=\"-1\"\n      >\n        <st-icon name=\"arrow-down\"></st-icon>\n      </button>\n    </div>\n  }\n</div>\n\n@if (message()) {\n  <div class=\"st-stepper-footer\">\n    <span\n      class=\"st-stepper-message\"\n      [class.st-message-error]=\"isMessageError()\"\n      [class.st-message-success]=\"isMessageSuccess()\"\n      [class.st-message-warning]=\"isMessageWarning()\"\n      [attr.role]=\"isMessageError() ? 'alert' : null\"\n    >\n      {{ message() }}\n    </span>\n  </div>\n}\n", dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataNumberStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-number-stepper', imports: [StrataIconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataNumberStepperComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-size-sm]': 'size() === "sm"',
+                        '[class.st-size-md]': 'size() === "md"',
+                        '[class.st-size-lg]': 'size() === "lg"',
+                        '[class.st-layout-split]': 'stepperLayout() === "split"',
+                        '[class.st-layout-stacked]': 'stepperLayout() === "stacked"',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[class.st-state-error]': 'effectiveState() === "error"',
+                        '[class.st-state-success]': 'effectiveState() === "success"',
+                        '[class.st-state-warning]': 'effectiveState() === "warning"',
+                        '[class.st-error]': 'effectiveState() === "error"',
+                        '[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
+                    }, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div class=\"st-stepper-wrapper\">\n  @if (stepperLayout() === 'split') {\n    <button\n      type=\"button\"\n      class=\"st-stepper-btn st-stepper-btn-dec\"\n      [disabled]=\"!canDecrement()\"\n      (click)=\"stepDown()\"\n      aria-label=\"Decrement\"\n      tabindex=\"-1\"\n    >\n      <st-icon name=\"arrow-down\"></st-icon>\n    </button>\n    <input\n      #nativeInput\n      [id]=\"effectiveId()\"\n      [name]=\"name() ?? effectiveId()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [value]=\"formattedValue()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onNativeBlur()\"\n      (keydown)=\"onNativeKeyDown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"st-stepper-btn st-stepper-btn-inc\"\n      [disabled]=\"!canIncrement()\"\n      (click)=\"stepUp()\"\n      aria-label=\"Increment\"\n      tabindex=\"-1\"\n    >\n      <st-icon name=\"arrow-up\"></st-icon>\n    </button>\n  } @else {\n    <input\n      #nativeInput\n      [id]=\"effectiveId()\"\n      [name]=\"name() ?? effectiveId()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [value]=\"formattedValue()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onNativeBlur()\"\n      (keydown)=\"onNativeKeyDown($event)\"\n    />\n    <div class=\"st-stepper-stacked-actions\">\n      <button\n        type=\"button\"\n        class=\"st-stepper-btn st-stepper-btn-inc\"\n        [disabled]=\"!canIncrement()\"\n        (click)=\"stepUp()\"\n        aria-label=\"Increment\"\n        tabindex=\"-1\"\n      >\n        <st-icon name=\"arrow-up\"></st-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"st-stepper-btn st-stepper-btn-dec\"\n        [disabled]=\"!canDecrement()\"\n        (click)=\"stepDown()\"\n        aria-label=\"Decrement\"\n        tabindex=\"-1\"\n      >\n        <st-icon name=\"arrow-down\"></st-icon>\n      </button>\n    </div>\n  }\n</div>\n\n@if (message()) {\n  <div class=\"st-stepper-footer\">\n    <span\n      class=\"st-stepper-message\"\n      [class.st-message-error]=\"isMessageError()\"\n      [class.st-message-success]=\"isMessageSuccess()\"\n      [class.st-message-warning]=\"isMessageWarning()\"\n      [attr.role]=\"isMessageError() ? 'alert' : null\"\n    >\n      {{ message() }}\n    </span>\n  </div>\n}\n" }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stepperLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperLayout", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+
 class StrataSpinnerComponent {
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -3740,6 +4264,12 @@ class StrataSegmentedControlItemComponent {
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     value = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    badge = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    badgeVariant = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
+    badgeSize = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []));
     effectiveValue = computed(() => this.value() ?? this.text(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
     selected = model(false, /* @ts-ignore */
@@ -3772,11 +4302,11 @@ class StrataSegmentedControlItemComponent {
         this.onClick();
     }
     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 }, value: { classPropertyName: "value", publicName: "value", 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()", "keydown.space": "onKeydown($event)", "keydown.enter": "onKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "effectiveDisabled()", "class.st-disabled": "effectiveDisabled()", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "{{ text() }}\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", 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()", "keydown.space": "onKeydown($event)", "keydown.enter": "onKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "effectiveDisabled()", "class.st-disabled": "effectiveDisabled()", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "<span>{{ text() }}</span>\n@if (badge() !== undefined) {\n  <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n}\n<ng-content select=\"st-badge\"></ng-content>\n", styles: [""], dependencies: [{ kind: "component", type: StrataBadgeComponent, selector: "st-badge", inputs: ["value", "icon", "max", "variant", "size", "placement", "visible", "showZero", "ariaLabel"] }] });
 }
 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: {
+            args: [{ selector: 'st-segmented-control-item', imports: [StrataBadgeComponent], host: {
                         role: 'tab',
                         '[attr.aria-selected]': 'selected()',
                         '[attr.aria-disabled]': 'effectiveDisabled()',
@@ -3784,8 +4314,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '(click)': 'onClick()',
                         '(keydown.space)': 'onKeydown($event)',
                         '(keydown.enter)': 'onKeydown($event)'
-                    }, template: "{{ text() }}\n" }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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"] }], tabIndex: [{
+                    }, template: "<span>{{ text() }}</span>\n@if (badge() !== undefined) {\n  <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n}\n<ng-content select=\"st-badge\"></ng-content>\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], badgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSize", 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"] }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
             }], disabledAttribute: [{
@@ -3954,7 +4484,7 @@ class StrataSegmentedControlComponent {
                 useExisting: forwardRef(() => StrataSegmentedControlComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"st-segmented-control-track\">\n  <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</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-message\"\n    [class.st-message-error]=\"isMessageError()\"\n    [class.st-message-success]=\"isMessageSuccess()\"\n    [class.st-message-warning]=\"isMessageWarning()\"\n    [attr.role]=\"isMessageError() ? 'alert' : null\"\n  >\n    {{ message() }}\n  </div>\n}\n\n" });
+        ], queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"st-segmented-control-track\">\n  <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'\"></div>\n</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-message\"\n    [class.st-message-error]=\"isMessageError()\"\n    [class.st-message-success]=\"isMessageSuccess()\"\n    [class.st-message-warning]=\"isMessageWarning()\"\n    [attr.role]=\"isMessageError() ? 'alert' : null\"\n  >\n    {{ message() }}\n  </div>\n}\n\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
             type: Component,
@@ -3977,7 +4507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null',
                         '[class.st-disabled]': 'effectiveDisabled()',
                         '[attr.aria-disabled]': 'effectiveDisabled()'
-                    }, template: "<div class=\"st-segmented-control-track\">\n  <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</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-message\"\n    [class.st-message-error]=\"isMessageError()\"\n    [class.st-message-success]=\"isMessageSuccess()\"\n    [class.st-message-warning]=\"isMessageWarning()\"\n    [attr.role]=\"isMessageError() ? 'alert' : null\"\n  >\n    {{ message() }}\n  </div>\n}\n\n" }]
+                    }, template: "<div class=\"st-segmented-control-track\">\n  <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'\"></div>\n</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-message\"\n    [class.st-message-error]=\"isMessageError()\"\n    [class.st-message-success]=\"isMessageSuccess()\"\n    [class.st-message-warning]=\"isMessageWarning()\"\n    [attr.role]=\"isMessageError() ? 'alert' : null\"\n  >\n    {{ message() }}\n  </div>\n}\n\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { ...{
                             read: ElementRef
                         }, isSignal: true }] }] } });
@@ -4386,6 +4916,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n  [attr.tabindex]=\"effectiveDisabled() ? -1 : 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@if (message()) {\n  <div\n    class=\"st-select-message\"\n    [class.st-message-error]=\"isMessageError()\"\n    [class.st-message-success]=\"isMessageSuccess()\"\n    [class.st-message-warning]=\"isMessageWarning()\"\n    [attr.role]=\"isMessageError() ? 'alert' : null\"\n  >\n    {{ message() }}\n  </div>\n}\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: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", 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 StrataSkeletonComponent {
+    variant = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    animation = input('shimmer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    radius = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    count = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    lastLineWidth = input('70%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastLineWidth" }] : /* istanbul ignore next */ []));
+    gap = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    loading = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Loading...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    normalizedVariant = computed(() => {
+        const v = this.variant();
+        if (v === 'circle' || v === 'circular')
+            return 'circular';
+        if (v === 'rect' || v === 'rectangular')
+            return 'rectangular';
+        if (v === 'pill' || v === 'rounded')
+            return 'rounded';
+        return 'text';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedVariant" }] : /* istanbul ignore next */ []));
+    normalizedWidth = computed(() => this.formatDimension(this.width()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedWidth" }] : /* istanbul ignore next */ []));
+    normalizedHeight = computed(() => this.formatDimension(this.height()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedHeight" }] : /* istanbul ignore next */ []));
+    normalizedRadius = computed(() => this.formatDimension(this.radius()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedRadius" }] : /* istanbul ignore next */ []));
+    normalizedGap = computed(() => this.formatDimension(this.gap()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedGap" }] : /* istanbul ignore next */ []));
+    normalizedLastLineWidth = computed(() => this.formatDimension(this.lastLineWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedLastLineWidth" }] : /* istanbul ignore next */ []));
+    isMultiLine = computed(() => this.normalizedVariant() === 'text' && this.count() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMultiLine" }] : /* istanbul ignore next */ []));
+    lineIndices = computed(() => {
+        const n = Math.max(1, Math.floor(this.count()));
+        return Array.from({ length: n }, (_, i) => i);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineIndices" }] : /* istanbul ignore next */ []));
+    get hostRole() {
+        return this.loading() ? 'status' : null;
+    }
+    get hostAriaBusy() {
+        return this.loading() ? 'true' : null;
+    }
+    get hostAriaLive() {
+        return this.loading() ? 'polite' : null;
+    }
+    get hostAriaLabel() {
+        return this.loading() ? this.ariaLabel() : null;
+    }
+    get hostClasses() {
+        const classes = [
+            'st-skeleton',
+            `st-skeleton-${this.normalizedVariant()}`,
+            `st-skeleton-anim-${this.animation()}`
+        ];
+        if (this.size()) {
+            classes.push(`st-skeleton-${this.size()}`);
+        }
+        if (this.isMultiLine()) {
+            classes.push('st-skeleton-multiline');
+        }
+        if (!this.loading()) {
+            classes.push('st-skeleton-loaded');
+        }
+        return classes.join(' ');
+    }
+    getLineWidth(index, isLast) {
+        if (isLast && this.normalizedVariant() === 'text' && this.isMultiLine()) {
+            return this.normalizedLastLineWidth() ?? this.normalizedWidth();
+        }
+        return this.normalizedWidth();
+    }
+    formatDimension(value) {
+        if (value === undefined || value === null || value === '') {
+            return undefined;
+        }
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSkeletonComponent, isStandalone: true, selector: "st-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, lastLineWidth: { classPropertyName: "lastLineWidth", publicName: "lastLineWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-busy": "this.hostAriaBusy", "attr.aria-live": "this.hostAriaLive", "attr.aria-label": "this.hostAriaLabel", "class": "this.hostClasses" } }, ngImport: i0, template: "@if (loading()) {\n  @if (isMultiLine()) {\n    <div class=\"st-skeleton-group\" [style.gap]=\"normalizedGap()\">\n      @for (idx of lineIndices(); track idx; let last = $last) {\n        <div\n          class=\"st-skeleton-bone\"\n          [style.width]=\"getLineWidth(idx, last)\"\n          [style.height]=\"normalizedHeight()\"\n          [style.border-radius]=\"normalizedRadius()\">\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"st-skeleton-bone\"\n      [style.width]=\"normalizedWidth()\"\n      [style.height]=\"normalizedHeight()\"\n      [style.border-radius]=\"normalizedRadius()\">\n    </div>\n  }\n} @else {\n  <ng-content></ng-content>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-skeleton', imports: [], template: "@if (loading()) {\n  @if (isMultiLine()) {\n    <div class=\"st-skeleton-group\" [style.gap]=\"normalizedGap()\">\n      @for (idx of lineIndices(); track idx; let last = $last) {\n        <div\n          class=\"st-skeleton-bone\"\n          [style.width]=\"getLineWidth(idx, last)\"\n          [style.height]=\"normalizedHeight()\"\n          [style.border-radius]=\"normalizedRadius()\">\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"st-skeleton-bone\"\n      [style.width]=\"normalizedWidth()\"\n      [style.height]=\"normalizedHeight()\"\n      [style.border-radius]=\"normalizedRadius()\">\n    </div>\n  }\n} @else {\n  <ng-content></ng-content>\n}\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], lastLineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLineWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], hostAriaLive: [{
+                type: HostBinding,
+                args: ['attr.aria-live']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class StrataStepComponent {
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -4523,15 +5168,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], ctorParameters: () => [], propDecorators: { currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }, { type: i0.Output, args: ["currentStepChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], showCheckmarkOnCompleted: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckmarkOnCompleted", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataStepComponent), { isSignal: true }] }] } });
 
 class StrataTabItemComponent {
-    /**
-     * The text label for the tab.
-     * Can also be provided via content projection.
-     */
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the tab is currently selected.
-     */
+    badge = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    badgeVariant = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
+    badgeSize = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []));
     selected = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     /**
@@ -4566,15 +5210,15 @@ class StrataTabItemComponent {
         this.selectionChanged.emit();
     }
     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" });
+    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 }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", 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  <span>{{ text() }}</span>\n  @if (badge() !== undefined) {\n    <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n  }\n  <ng-content select=\"st-badge\"></ng-content>\n} @else {\n  <ng-content></ng-content>\n}\n", dependencies: [{ kind: "component", type: StrataBadgeComponent, selector: "st-badge", inputs: ["value", "icon", "max", "variant", "size", "placement", "visible", "showZero", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-tab-item', imports: [], host: {
+            args: [{ selector: 'st-tab-item', imports: [StrataBadgeComponent], host: {
                         'role': 'tab',
                         '(click)': 'onClick()'
-                    }, template: "@if (text()) {\n  {{ text() }}\n} @else {\n  <ng-content></ng-content>\n}\n" }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], isSelected: [{
+                    }, template: "@if (text()) {\n  <span>{{ text() }}</span>\n  @if (badge() !== undefined) {\n    <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n  }\n  <ng-content select=\"st-badge\"></ng-content>\n} @else {\n  <ng-content></ng-content>\n}\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], badgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSize", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], isSelected: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
             }], isDisabled: [{
@@ -4701,5 +5345,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, getDefaultShortcutLabels, isApplePlatform, provideBaseIcons, provideIcons, provideStrata, resolveIsApple };
+export { BreakpointService, CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, getDefaultShortcutLabels, isApplePlatform, provideBaseIcons, provideIcons, provideStrata, resolveIsApple };
 //# sourceMappingURL=ngx-strata.mjs.map