ngx-strata 0.6.0 → 0.7.0

package/fesm2022/ngx-strata.mjs

@@ -99,6 +99,30 @@ const baseIconConfigs = [
     {
         name: 'calendar',
         url: 'assets/icons/calendar.svg'
+    },
+    {
+        name: 'clock',
+        url: 'assets/icons/clock.svg'
+    },
+    {
+        name: 'upload',
+        url: 'assets/icons/upload.svg'
+    },
+    {
+        name: 'camera',
+        url: 'assets/icons/camera.svg'
+    },
+    {
+        name: 'image',
+        url: 'assets/icons/image.svg'
+    },
+    {
+        name: 'check-single',
+        url: 'assets/icons/check-single.svg'
+    },
+    {
+        name: 'check-double',
+        url: 'assets/icons/check-double.svg'
     }
 ];
 
@@ -1220,6 +1244,8 @@ class StrataOverlayDirective {
     ...(ngDevMode ? [{ debugName: "overlayOffset" }] : /* istanbul ignore next */ []));
     overlayFitViewport = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overlayFitViewport" }] : /* istanbul ignore next */ []));
+    overlayTarget = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayTarget" }] : /* istanbul ignore next */ []));
     element = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
     config = inject(STRATA_CONFIG, { optional: true });
@@ -1228,12 +1254,25 @@ class StrataOverlayDirective {
     viewRef;
     ngOnChanges() {
         if (this.overlayOpen()) {
-            this.create();
+            if (!this.overlayEl) {
+                this.create();
+            }
+            else {
+                if (this.cleanup) {
+                    this.cleanup();
+                }
+                const target = this.getTarget();
+                this.cleanup = autoUpdate(target, this.overlayEl, () => this.updatePosition());
+                this.updatePosition();
+            }
         }
         else {
             this.destroy();
         }
     }
+    getTarget() {
+        return this.overlayTarget() ?? this.element.nativeElement;
+    }
     async create() {
         if (this.overlayEl)
             return;
@@ -1241,7 +1280,8 @@ class StrataOverlayDirective {
         this.viewRef.detectChanges();
         this.overlayEl = this.viewRef.rootNodes[0];
         document.body.appendChild(this.overlayEl);
-        this.cleanup = autoUpdate(this.element.nativeElement, this.overlayEl, () => this.updatePosition());
+        const target = this.getTarget();
+        this.cleanup = autoUpdate(target, this.overlayEl, () => this.updatePosition());
     }
     async updatePosition() {
         if (!this.overlayEl)
@@ -1264,14 +1304,15 @@ class StrataOverlayDirective {
         else {
             this.overlayEl.style.maxHeight = '';
         }
-        const { x, y } = await computePosition(this.element.nativeElement, this.overlayEl, {
+        const target = this.getTarget();
+        const { x, y } = await computePosition(target, this.overlayEl, {
             placement: this.overlayPlacement(),
             strategy: 'fixed',
             middleware
         });
         if (!this.overlayEl)
             return;
-        const { width } = this.element.nativeElement.getBoundingClientRect();
+        const width = 'getBoundingClientRect' in target ? target.getBoundingClientRect().width : 0;
         Object.assign(this.overlayEl.style, {
             position: 'fixed',
             left: `${x}px`,
@@ -1298,14 +1339,14 @@ class StrataOverlayDirective {
         this.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null }, overlayFitViewport: { classPropertyName: "overlayFitViewport", publicName: "overlayFitViewport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null }, overlayFitViewport: { classPropertyName: "overlayFitViewport", publicName: "overlayFitViewport", isSignal: true, isRequired: false, transformFunction: null }, overlayTarget: { classPropertyName: "overlayTarget", publicName: "overlayTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stOverlay]'
                 }]
-        }], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }], overlayFitViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayFitViewport", required: false }] }] } });
+        }], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }], overlayFitViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayFitViewport", required: false }] }], overlayTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTarget", required: false }] }] } });
 
 class StrataActionMenuComponent {
     projectedButton = contentChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : /* istanbul ignore next */ {}), descendants: true,
@@ -1321,18 +1362,28 @@ class StrataActionMenuComponent {
     ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
     closeOnOutsideClick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
+    trigger = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     renderer = inject(Renderer2);
     menuOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    customTarget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customTarget" }] : /* istanbul ignore next */ []));
+    contextMenuPlacement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenuPlacement" }] : /* istanbul ignore next */ []));
+    effectivePlacement = computed(() => {
+        return this.contextMenuPlacement() ?? this.placement();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlacement" }] : /* istanbul ignore next */ []));
     constructor() {
         effect((onCleanup) => {
             const button = this.projectedButton() ?? this.defaultButton();
-            if (!button) {
+            if (!button || !this.trigger()) {
                 return;
             }
             const unlisten = this.renderer.listen(button.nativeElement, 'click', () => {
-                this.menuOpen.set(!this.menuOpen());
+                this.toggle();
             });
             onCleanup(() => {
                 unlisten();
@@ -1352,7 +1403,20 @@ class StrataActionMenuComponent {
                 if (hostEl.contains(target) || (overlayEl && overlayEl.contains(target))) {
                     return;
                 }
-                this.menuOpen.set(false);
+                this.close();
+            });
+            onCleanup(() => {
+                unlisten();
+            });
+        });
+        effect((onCleanup) => {
+            if (!this.menuOpen()) {
+                return;
+            }
+            const unlisten = this.renderer.listen('document', 'keydown', (event) => {
+                if (event.key === 'Escape') {
+                    this.close();
+                }
             });
             onCleanup(() => {
                 unlisten();
@@ -1361,7 +1425,7 @@ class StrataActionMenuComponent {
         effect((onCleanup) => {
             const subs = this.actionMenuItems().map((item) => item.menuItemClicked.subscribe((shouldClose) => {
                 if (shouldClose) {
-                    this.menuOpen.set(false);
+                    this.close();
                 }
             }));
             onCleanup(() => {
@@ -1369,18 +1433,95 @@ class StrataActionMenuComponent {
             });
         });
     }
+    open() {
+        this.customTarget.set(null);
+        this.contextMenuPlacement.set(null);
+        this.menuOpen.set(true);
+    }
+    close() {
+        this.menuOpen.set(false);
+        this.customTarget.set(null);
+        this.contextMenuPlacement.set(null);
+    }
+    toggle() {
+        if (this.menuOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    openAt(position, placement = 'bottom-start') {
+        const clientX = 'clientX' in position ? position.clientX : position.x;
+        const clientY = 'clientY' in position ? position.clientY : position.y;
+        const virtualElement = {
+            getBoundingClientRect() {
+                return {
+                    x: clientX,
+                    y: clientY,
+                    top: clientY,
+                    left: clientX,
+                    bottom: clientY,
+                    right: clientX,
+                    width: 0,
+                    height: 0
+                };
+            }
+        };
+        this.customTarget.set(virtualElement);
+        this.contextMenuPlacement.set(placement);
+        this.menuOpen.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton [size]=\"buttonSize()\"><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [stOverlay]=\"menu\"\n  [overlayOpen]=\"menuOpen()\"\n  [overlayPlacement]=\"effectivePlacement()\"\n  [overlayTarget]=\"customTarget()\">\n  @if (trigger()) {\n    <ng-content select=\"button[stButton]\"></ng-content>\n    @if (!projectedButton()) {\n      <button stButton [size]=\"buttonSize()\"><st-icon name=\"more\"></st-icon></button>\n    }\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport", "overlayTarget"], outputs: ["overlayOpenChange"] }, { 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: StrataActionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-action-menu', imports: [StrataCardComponent, StrataOverlayDirective, StrataIconComponent, StrataButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton [size]=\"buttonSize()\"><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
+            args: [{ selector: 'st-action-menu', imports: [StrataCardComponent, StrataOverlayDirective, StrataIconComponent, StrataButtonDirective], template: "<div\n  [stOverlay]=\"menu\"\n  [overlayOpen]=\"menuOpen()\"\n  [overlayPlacement]=\"effectivePlacement()\"\n  [overlayTarget]=\"customTarget()\">\n  @if (trigger()) {\n    <ng-content select=\"button[stButton]\"></ng-content>\n    @if (!projectedButton()) {\n      <button stButton [size]=\"buttonSize()\"><st-icon name=\"more\"></st-icon></button>\n    }\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectedButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             descendants: true,
                             read: ElementRef
                         }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             read: ElementRef
-                        }, isSignal: true }] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }] } });
+                        }, isSignal: true }] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }] } });
+
+class StrataContextMenuDirective {
+    stContextMenu = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stContextMenu" }] : /* istanbul ignore next */ []));
+    stContextMenuDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stContextMenuDisabled" }] : /* istanbul ignore next */ []));
+    stContextMenuPlacement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stContextMenuPlacement" }] : /* istanbul ignore next */ []));
+    contextMenuOpened = output();
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    unlisten;
+    ngOnInit() {
+        this.unlisten = this.renderer.listen(this.elementRef.nativeElement, 'contextmenu', (event) => {
+            const menu = this.stContextMenu();
+            if (this.stContextMenuDisabled() || !menu) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.contextMenuOpened.emit(event);
+            menu.openAt(event, this.stContextMenuPlacement());
+        });
+    }
+    ngOnDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataContextMenuDirective, isStandalone: true, selector: "[stContextMenu]", inputs: { stContextMenu: { classPropertyName: "stContextMenu", publicName: "stContextMenu", isSignal: true, isRequired: true, transformFunction: null }, stContextMenuDisabled: { classPropertyName: "stContextMenuDisabled", publicName: "stContextMenuDisabled", isSignal: true, isRequired: false, transformFunction: null }, stContextMenuPlacement: { classPropertyName: "stContextMenuPlacement", publicName: "stContextMenuPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextMenuOpened: "contextMenuOpened" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stContextMenu]'
+                }]
+        }], propDecorators: { stContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "stContextMenu", required: true }] }], stContextMenuDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "stContextMenuDisabled", required: false }] }], stContextMenuPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "stContextMenuPlacement", required: false }] }], contextMenuOpened: [{ type: i0.Output, args: ["contextMenuOpened"] }] } });
 
 class StrataTextStackComponent {
     overflow = input('truncate', /* @ts-ignore */
@@ -1652,7 +1793,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" }]
         }], propDecorators: { justification: [{ type: i0.Input, args: [{ isSignal: true, alias: "justification", required: false }] }] } });
 
-class StrataTimePickerComponent {
+class StrataChatComponent {
+    spacing = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => `st-chat ${this.spacing()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataChatComponent, isStandalone: true, selector: "st-chat", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--st-chat-bg: transparent;--st-chat-gap: var(--st-space-3);--st-chat-gap-compact: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;background-color:var(--st-chat-bg);gap:var(--st-chat-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}:host.compact{gap:var(--st-chat-gap-compact);--st-chat-message-padding: var(--st-space-1) var(--st-space-2)}:host.comfortable{gap:var(--st-chat-gap)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat', imports: [], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<ng-content />\n", styles: [":host{--st-chat-bg: transparent;--st-chat-gap: var(--st-space-3);--st-chat-gap-compact: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;background-color:var(--st-chat-bg);gap:var(--st-chat-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}:host.compact{gap:var(--st-chat-gap-compact);--st-chat-message-padding: var(--st-space-1) var(--st-space-2)}:host.comfortable{gap:var(--st-chat-gap)}\n"] }]
+        }], propDecorators: { spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
+
+class StrataChatMessageComponent {
+    variant = input('incoming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    timestamp = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    showAvatar = input(true, { ...(ngDevMode ? { debugName: "showAvatar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    position = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    groupVariant = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupVariant" }] : /* istanbul ignore next */ []));
+    groupPosition = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPosition" }] : /* istanbul ignore next */ []));
+    groupShowAvatar = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupShowAvatar" }] : /* istanbul ignore next */ []));
+    groupPreserveAvatarSpace = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPreserveAvatarSpace" }] : /* istanbul ignore next */ []));
+    effectiveVariant = computed(() => this.groupVariant() ?? this.variant(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    effectivePosition = computed(() => this.groupPosition() ?? this.position(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePosition" }] : /* istanbul ignore next */ []));
+    effectiveShowAvatar = computed(() => this.groupShowAvatar() ?? this.showAvatar(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveShowAvatar" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = [
+            'st-chat-message',
+            this.effectiveVariant(),
+            this.effectivePosition()
+        ];
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    setGroupConfig(variant, position, showAvatar, preserveAvatarSpace) {
+        this.groupVariant.set(variant);
+        this.groupPosition.set(position);
+        this.groupShowAvatar.set(showAvatar);
+        this.groupPreserveAvatarSpace.set(preserveAvatarSpace);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataChatMessageComponent, isStandalone: true, selector: "st-chat-message", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"st-chat-message-container\">\n  @if (effectiveVariant() === 'incoming') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-message-body\">\n    <div class=\"st-chat-message-bubble\">\n      <div class=\"st-chat-message-media\">\n        <ng-content select=\"[slot=media]\" />\n      </div>\n      <div class=\"st-chat-message-text\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"st-chat-message-footer\">\n      @if (timestamp()) {\n        <span class=\"st-chat-message-timestamp\">{{ timestamp() }}</span>\n      }\n      @if (effectiveVariant() === 'outgoing' && status()) {\n        <span class=\"st-chat-message-status\" [class]=\"'status-' + status()\">\n          @if (status() === 'sent') {\n            <st-icon name=\"check-single\" size=\"xs\"></st-icon>\n          } @else if (status() === 'delivered' || status() === 'read') {\n            <st-icon name=\"check-double\" size=\"xs\"></st-icon>\n          }\n        </span>\n      }\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n\n  @if (effectiveVariant() === 'outgoing') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-message-bg-incoming: var(--st-color-bg-raised);--st-chat-message-color-incoming: var(--st-color-text-primary);--st-chat-message-border-incoming: var(--st-color-border-subtle);--st-chat-message-bg-outgoing: var(--st-color-control-primary-bg);--st-chat-message-color-outgoing: var(--st-color-control-primary-text);--st-chat-message-border-outgoing: transparent;--st-chat-message-radius: var(--st-border-radius-xl);--st-chat-message-radius-sm: var(--st-border-radius-sm);--st-chat-message-max-width: 75%;--st-chat-message-padding: var(--st-space-2) var(--st-space-3);--st-chat-avatar-size: 32px;--st-chat-avatar-gap: var(--st-space-2);--st-chat-status-read-color: var(--st-color-accent-default);display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap);width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size);min-width:var(--st-chat-avatar-size)}:host .st-chat-message-avatar:empty:not(.preserve-space){display:none}:host .st-chat-message-avatar.hidden{visibility:hidden}:host .st-chat-message-body{display:flex;flex-direction:column;max-width:var(--st-chat-message-max-width);min-width:0}:host .st-chat-message-bubble{padding:var(--st-chat-message-padding);font-size:var(--st-font-sm);line-height:1.45;word-break:break-word;overflow-wrap:anywhere;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;transition:background-color var(--st-transition-normal),border-color var(--st-transition-normal)}:host .st-chat-message-media{overflow:hidden;border-radius:calc(var(--st-chat-message-radius) - 2px);margin-bottom:var(--st-space-1);width:100%;max-width:100%}:host .st-chat-message-media:empty{display:none;margin-bottom:0}:host .st-chat-message-media img,:host .st-chat-message-media video{display:block;width:100%;max-width:100%;height:auto;max-height:280px;object-fit:cover;border-radius:inherit}:host .st-chat-message-text:empty{display:none}:host .st-chat-message-footer{display:flex;align-items:center;gap:var(--st-space-1);font-size:var(--st-font-xs);color:var(--st-color-text-tertiary);margin-top:2px;-webkit-user-select:none;user-select:none}:host .st-chat-message-footer:empty{display:none}:host .st-chat-message-footer .st-chat-message-timestamp{font-variant-numeric:tabular-nums}:host .st-chat-message-footer .st-chat-message-status{display:inline-flex;align-items:center;line-height:1}:host .st-chat-message-footer .st-chat-message-status.status-read{color:var(--st-chat-status-read-color)}:host.incoming .st-chat-message-container{justify-content:flex-start}:host.incoming .st-chat-message-body{align-items:flex-start}:host.incoming .st-chat-message-bubble{background-color:var(--st-chat-message-bg-incoming);color:var(--st-chat-message-color-incoming);border:1px solid var(--st-chat-message-border-incoming)}:host.incoming .st-chat-message-footer{justify-content:flex-start}:host.incoming.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-border-radius-xs)}:host.outgoing .st-chat-message-container{justify-content:flex-end}:host.outgoing .st-chat-message-body{align-items:flex-end}:host.outgoing .st-chat-message-bubble{background-color:var(--st-chat-message-bg-outgoing);color:var(--st-chat-message-color-outgoing);border:1px solid var(--st-chat-message-border-outgoing)}:host.outgoing .st-chat-message-footer{justify-content:flex-end}:host.outgoing.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-border-radius-xs) var(--st-chat-message-radius)}\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: StrataChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-message', imports: [StrataIconComponent], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<div class=\"st-chat-message-container\">\n  @if (effectiveVariant() === 'incoming') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-message-body\">\n    <div class=\"st-chat-message-bubble\">\n      <div class=\"st-chat-message-media\">\n        <ng-content select=\"[slot=media]\" />\n      </div>\n      <div class=\"st-chat-message-text\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"st-chat-message-footer\">\n      @if (timestamp()) {\n        <span class=\"st-chat-message-timestamp\">{{ timestamp() }}</span>\n      }\n      @if (effectiveVariant() === 'outgoing' && status()) {\n        <span class=\"st-chat-message-status\" [class]=\"'status-' + status()\">\n          @if (status() === 'sent') {\n            <st-icon name=\"check-single\" size=\"xs\"></st-icon>\n          } @else if (status() === 'delivered' || status() === 'read') {\n            <st-icon name=\"check-double\" size=\"xs\"></st-icon>\n          }\n        </span>\n      }\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n\n  @if (effectiveVariant() === 'outgoing') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-message-bg-incoming: var(--st-color-bg-raised);--st-chat-message-color-incoming: var(--st-color-text-primary);--st-chat-message-border-incoming: var(--st-color-border-subtle);--st-chat-message-bg-outgoing: var(--st-color-control-primary-bg);--st-chat-message-color-outgoing: var(--st-color-control-primary-text);--st-chat-message-border-outgoing: transparent;--st-chat-message-radius: var(--st-border-radius-xl);--st-chat-message-radius-sm: var(--st-border-radius-sm);--st-chat-message-max-width: 75%;--st-chat-message-padding: var(--st-space-2) var(--st-space-3);--st-chat-avatar-size: 32px;--st-chat-avatar-gap: var(--st-space-2);--st-chat-status-read-color: var(--st-color-accent-default);display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap);width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size);min-width:var(--st-chat-avatar-size)}:host .st-chat-message-avatar:empty:not(.preserve-space){display:none}:host .st-chat-message-avatar.hidden{visibility:hidden}:host .st-chat-message-body{display:flex;flex-direction:column;max-width:var(--st-chat-message-max-width);min-width:0}:host .st-chat-message-bubble{padding:var(--st-chat-message-padding);font-size:var(--st-font-sm);line-height:1.45;word-break:break-word;overflow-wrap:anywhere;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;transition:background-color var(--st-transition-normal),border-color var(--st-transition-normal)}:host .st-chat-message-media{overflow:hidden;border-radius:calc(var(--st-chat-message-radius) - 2px);margin-bottom:var(--st-space-1);width:100%;max-width:100%}:host .st-chat-message-media:empty{display:none;margin-bottom:0}:host .st-chat-message-media img,:host .st-chat-message-media video{display:block;width:100%;max-width:100%;height:auto;max-height:280px;object-fit:cover;border-radius:inherit}:host .st-chat-message-text:empty{display:none}:host .st-chat-message-footer{display:flex;align-items:center;gap:var(--st-space-1);font-size:var(--st-font-xs);color:var(--st-color-text-tertiary);margin-top:2px;-webkit-user-select:none;user-select:none}:host .st-chat-message-footer:empty{display:none}:host .st-chat-message-footer .st-chat-message-timestamp{font-variant-numeric:tabular-nums}:host .st-chat-message-footer .st-chat-message-status{display:inline-flex;align-items:center;line-height:1}:host .st-chat-message-footer .st-chat-message-status.status-read{color:var(--st-chat-status-read-color)}:host.incoming .st-chat-message-container{justify-content:flex-start}:host.incoming .st-chat-message-body{align-items:flex-start}:host.incoming .st-chat-message-bubble{background-color:var(--st-chat-message-bg-incoming);color:var(--st-chat-message-color-incoming);border:1px solid var(--st-chat-message-border-incoming)}:host.incoming .st-chat-message-footer{justify-content:flex-start}:host.incoming.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-border-radius-xs)}:host.outgoing .st-chat-message-container{justify-content:flex-end}:host.outgoing .st-chat-message-body{align-items:flex-end}:host.outgoing .st-chat-message-bubble{background-color:var(--st-chat-message-bg-outgoing);color:var(--st-chat-message-color-outgoing);border:1px solid var(--st-chat-message-border-outgoing)}:host.outgoing .st-chat-message-footer{justify-content:flex-end}:host.outgoing.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-border-radius-xs) var(--st-chat-message-radius)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+class StrataChatGroupComponent {
+    variant = input('incoming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    messages = contentChildren(StrataChatMessageComponent, { ...(ngDevMode ? { debugName: "messages" } : /* istanbul ignore next */ {}), descendants: true });
+    hostClasses = computed(() => `st-chat-group ${this.variant()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const items = this.messages();
+            const variant = this.variant();
+            const count = items.length;
+            items.forEach((msg, index) => {
+                if (count === 1) {
+                    msg.setGroupConfig(variant, 'single', true, false);
+                    return;
+                }
+                const isFirst = index === 0;
+                const isLast = index === count - 1;
+                const position = isFirst ? 'first' : isLast ? 'last' : 'middle';
+                const showAvatar = isLast;
+                const preserveAvatarSpace = variant === 'incoming' && !isLast;
+                msg.setGroupConfig(variant, position, showAvatar, preserveAvatarSpace);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataChatGroupComponent, isStandalone: true, selector: "st-chat-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "messages", predicate: StrataChatMessageComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{--st-chat-group-gap: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;gap:var(--st-chat-group-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-group', imports: [], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<ng-content />\n", styles: [":host{--st-chat-group-gap: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;gap:var(--st-chat-group-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], messages: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataChatMessageComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class StrataChatSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: StrataChatSeparatorComponent, isStandalone: true, selector: "st-chat-separator", host: { classAttribute: "st-chat-separator" }, ngImport: i0, template: "<div class=\"st-chat-separator-line\"></div>\n<div class=\"st-chat-separator-content\">\n  <ng-content />\n</div>\n<div class=\"st-chat-separator-line\"></div>\n", styles: [":host{--st-chat-separator-color: var(--st-color-text-tertiary);--st-chat-separator-line-color: var(--st-color-border-subtle);--st-chat-separator-font-size: var(--st-font-xs);display:flex;align-items:center;justify-content:center;gap:var(--st-space-3);width:100%;box-sizing:border-box}:host .st-chat-separator-line{flex:1;height:1px;background-color:var(--st-chat-separator-line-color)}:host .st-chat-separator-content{display:inline-flex;align-items:center;font-size:var(--st-chat-separator-font-size);color:var(--st-chat-separator-color);white-space:nowrap;font-weight:var(--st-font-weight-medium)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-separator', imports: [], host: {
+                        class: 'st-chat-separator'
+                    }, template: "<div class=\"st-chat-separator-line\"></div>\n<div class=\"st-chat-separator-content\">\n  <ng-content />\n</div>\n<div class=\"st-chat-separator-line\"></div>\n", styles: [":host{--st-chat-separator-color: var(--st-color-text-tertiary);--st-chat-separator-line-color: var(--st-color-border-subtle);--st-chat-separator-font-size: var(--st-font-xs);display:flex;align-items:center;justify-content:center;gap:var(--st-space-3);width:100%;box-sizing:border-box}:host .st-chat-separator-line{flex:1;height:1px;background-color:var(--st-chat-separator-line-color)}:host .st-chat-separator-content{display:inline-flex;align-items:center;font-size:var(--st-chat-separator-font-size);color:var(--st-chat-separator-color);white-space:nowrap;font-weight:var(--st-font-weight-medium)}\n"] }]
+        }] });
+
+class StrataChatTypingComponent {
+    variant = input('incoming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Typing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => `st-chat-typing ${this.variant()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatTypingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataChatTypingComponent, isStandalone: true, selector: "st-chat-typing", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"st-chat-typing-container\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  @if (variant() === 'incoming') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-typing-bubble\">\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n  </div>\n\n  @if (variant() === 'outgoing') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-typing-dot-size: 6px;--st-chat-typing-dot-color: var(--st-color-text-tertiary);--st-chat-typing-bubble-bg-incoming: var(--st-color-bg-raised);--st-chat-typing-bubble-bg-outgoing: var(--st-color-control-primary-bg);display:block;width:100%;box-sizing:border-box}:host .st-chat-typing-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap, var(--st-space-2));width:100%;box-sizing:border-box}:host .st-chat-typing-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size, 32px);min-width:var(--st-chat-avatar-size, 32px)}:host .st-chat-typing-avatar:empty{display:none}:host .st-chat-typing-bubble{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:var(--st-space-2) var(--st-space-3);min-height:32px;box-sizing:border-box;border-radius:var(--st-border-radius-xl)}:host .st-chat-typing-dot{width:var(--st-chat-typing-dot-size);height:var(--st-chat-typing-dot-size);border-radius:var(--st-border-radius-full);background-color:var(--st-chat-typing-dot-color);animation:st-chat-typing-bounce 1.4s infinite ease-in-out both}:host .st-chat-typing-dot:nth-child(1){animation-delay:-.32s}:host .st-chat-typing-dot:nth-child(2){animation-delay:-.16s}:host .st-chat-typing-dot:nth-child(3){animation-delay:0s}:host.incoming .st-chat-typing-container{justify-content:flex-start}:host.incoming .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-incoming);border:1px solid var(--st-color-border-subtle);border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm)}:host.outgoing .st-chat-typing-container{justify-content:flex-end}:host.outgoing .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-outgoing);border:1px solid transparent;border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm) var(--st-border-radius-xl)}@keyframes st-chat-typing-bounce{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatTypingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-typing', imports: [], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<div class=\"st-chat-typing-container\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  @if (variant() === 'incoming') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-typing-bubble\">\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n  </div>\n\n  @if (variant() === 'outgoing') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-typing-dot-size: 6px;--st-chat-typing-dot-color: var(--st-color-text-tertiary);--st-chat-typing-bubble-bg-incoming: var(--st-color-bg-raised);--st-chat-typing-bubble-bg-outgoing: var(--st-color-control-primary-bg);display:block;width:100%;box-sizing:border-box}:host .st-chat-typing-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap, var(--st-space-2));width:100%;box-sizing:border-box}:host .st-chat-typing-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size, 32px);min-width:var(--st-chat-avatar-size, 32px)}:host .st-chat-typing-avatar:empty{display:none}:host .st-chat-typing-bubble{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:var(--st-space-2) var(--st-space-3);min-height:32px;box-sizing:border-box;border-radius:var(--st-border-radius-xl)}:host .st-chat-typing-dot{width:var(--st-chat-typing-dot-size);height:var(--st-chat-typing-dot-size);border-radius:var(--st-border-radius-full);background-color:var(--st-chat-typing-dot-color);animation:st-chat-typing-bounce 1.4s infinite ease-in-out both}:host .st-chat-typing-dot:nth-child(1){animation-delay:-.32s}:host .st-chat-typing-dot:nth-child(2){animation-delay:-.16s}:host .st-chat-typing-dot:nth-child(3){animation-delay:0s}:host.incoming .st-chat-typing-container{justify-content:flex-start}:host.incoming .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-incoming);border:1px solid var(--st-color-border-subtle);border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm)}:host.outgoing .st-chat-typing-container{justify-content:flex-end}:host.outgoing .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-outgoing);border:1px solid transparent;border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm) var(--st-border-radius-xl)}@keyframes st-chat-typing-bounce{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class StrataTimeStepperComponent {
     format = input('24h', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     showSeconds = input(false, /* @ts-ignore */
@@ -1820,30 +2088,264 @@ class StrataTimePickerComponent {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataTimePickerComponent, isStandalone: true, selector: "st-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.st-time-picker": "true", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimeStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataTimeStepperComponent, isStandalone: true, selector: "st-time-stepper", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.st-time-stepper": "true", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => StrataTimePickerComponent),
+                useExisting: forwardRef(() => StrataTimeStepperComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"st-time-picker-inner\">\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementHours()\"\n      aria-label=\"Increment hours\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementHours()\" (keydown.arrowdown)=\"decrementHours()\">\n      {{ displayHours() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementHours()\"\n      aria-label=\"Decrement hours\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  <span class=\"st-time-sep\">:</span>\n\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementMinutes()\"\n      aria-label=\"Increment minutes\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementMinutes()\" (keydown.arrowdown)=\"decrementMinutes()\">\n      {{ displayMinutes() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementMinutes()\"\n      aria-label=\"Decrement minutes\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  @if (showSeconds()) {\n    <span class=\"st-time-sep\">:</span>\n\n    <div class=\"st-time-col\">\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"incrementSeconds()\"\n        aria-label=\"Increment seconds\"\n      >\n        <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n      </button>\n      <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementSeconds()\" (keydown.arrowdown)=\"decrementSeconds()\">\n        {{ displaySeconds() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"decrementSeconds()\"\n        aria-label=\"Decrement seconds\"\n      >\n        <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n      </button>\n    </div>\n  }\n\n  @if (is12h()) {\n    <div class=\"st-time-col st-meridiem-col\">\n      <button\n        type=\"button\"\n        class=\"st-meridiem-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"toggleMeridiem()\"\n        aria-label=\"Toggle AM PM\"\n      >\n        {{ meridiem() }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box}:host.st-size-sm .st-time-val{min-width:34px;height:32px;font-size:var(--st-font-md);border-radius:var(--st-border-radius-sm)}:host.st-size-sm .st-time-arrow-btn{width:34px;height:20px}:host.st-size-sm .st-time-sep{font-size:var(--st-font-lg);margin:0 2px}:host.st-size-sm .st-meridiem-btn{height:32px;font-size:var(--st-font-xs);padding:0 var(--st-space-2);border-radius:var(--st-border-radius-sm)}:host.st-size-lg .st-time-val{min-width:54px;height:50px;font-size:1.5rem;border-radius:var(--st-border-radius-lg)}:host.st-size-lg .st-time-arrow-btn{width:54px;height:28px}:host.st-size-lg .st-time-sep{font-size:1.75rem;margin:0 6px}:host.st-size-lg .st-meridiem-btn{height:50px;font-size:var(--st-font-md);padding:0 var(--st-space-4);border-radius:var(--st-border-radius-lg)}:host.st-disabled{opacity:.55;pointer-events:none}.st-time-picker-inner{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:0;background:transparent;border:none;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-time-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-1)}.st-time-arrow-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);width:44px;height:24px;border-radius:var(--st-border-radius-sm);transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-time-arrow-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-time-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.st-time-val{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;font-family:var(--st-font-mono);font-size:var(--st-font-lg);font-weight:var(--st-font-weight-semibold);background:transparent;border:1px solid var(--st-border);border-radius:var(--st-border-radius-md);color:var(--st-color-text-primary);outline:none;cursor:default;transition:border-color var(--st-transition-fast)}.st-time-val:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}.st-time-sep{font-weight:var(--st-font-weight-bold);color:var(--st-color-text-secondary);font-size:var(--st-font-xl);margin:0 4px}.st-meridiem-col{margin-left:var(--st-space-1)}.st-meridiem-btn{background:transparent;border:1px solid var(--st-border);color:var(--st-color-text-primary);border-radius:var(--st-border-radius-md);height:42px;font-size:var(--st-font-sm);font-weight:var(--st-font-weight-semibold);padding:0 var(--st-space-3);cursor:pointer;transition:background var(--st-transition-fast),border-color var(--st-transition-fast)}.st-meridiem-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));border-color:var(--st-color-border-strong)}.st-meridiem-btn:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
+        ], ngImport: i0, template: "<div class=\"st-time-stepper-inner\">\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementHours()\"\n      aria-label=\"Increment hours\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementHours()\" (keydown.arrowdown)=\"decrementHours()\">\n      {{ displayHours() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementHours()\"\n      aria-label=\"Decrement hours\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  <span class=\"st-time-sep\">:</span>\n\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementMinutes()\"\n      aria-label=\"Increment minutes\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementMinutes()\" (keydown.arrowdown)=\"decrementMinutes()\">\n      {{ displayMinutes() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementMinutes()\"\n      aria-label=\"Decrement minutes\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  @if (showSeconds()) {\n    <span class=\"st-time-sep\">:</span>\n\n    <div class=\"st-time-col\">\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"incrementSeconds()\"\n        aria-label=\"Increment seconds\"\n      >\n        <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n      </button>\n      <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementSeconds()\" (keydown.arrowdown)=\"decrementSeconds()\">\n        {{ displaySeconds() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"decrementSeconds()\"\n        aria-label=\"Decrement seconds\"\n      >\n        <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n      </button>\n    </div>\n  }\n\n  @if (is12h()) {\n    <div class=\"st-time-col st-meridiem-col\">\n      <button\n        type=\"button\"\n        class=\"st-meridiem-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"toggleMeridiem()\"\n        aria-label=\"Toggle AM PM\"\n      >\n        {{ meridiem() }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box}:host.st-disabled{opacity:.55;pointer-events:none}.st-time-stepper-inner{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:0;background:transparent;border:none;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-time-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-1)}.st-time-arrow-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);width:44px;height:24px;border-radius:var(--st-border-radius-sm);transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-time-arrow-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-time-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.st-time-val{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;font-family:var(--st-font-mono);font-size:var(--st-font-lg);font-weight:var(--st-font-weight-semibold);background:transparent;border:1px solid var(--st-border);border-radius:var(--st-border-radius-md);color:var(--st-color-text-primary);outline:none;cursor:default;transition:border-color var(--st-transition-fast)}.st-time-val:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}.st-time-sep{font-weight:var(--st-font-weight-bold);color:var(--st-color-text-secondary);font-size:var(--st-font-xl);margin:0 4px}.st-meridiem-col{margin-left:var(--st-space-1)}.st-meridiem-btn{background:transparent;border:1px solid var(--st-border);color:var(--st-color-text-primary);border-radius:var(--st-border-radius-md);height:42px;font-size:var(--st-font-sm);font-weight:var(--st-font-weight-semibold);padding:0 var(--st-space-3);cursor:pointer;transition:background var(--st-transition-fast),border-color var(--st-transition-fast)}.st-meridiem-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));border-color:var(--st-color-border-strong)}.st-meridiem-btn:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: StrataTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimeStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-time-picker', imports: [CommonModule, StrataIconComponent], providers: [
+            args: [{ selector: 'st-time-stepper', imports: [CommonModule, StrataIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => StrataTimePickerComponent),
+                            useExisting: forwardRef(() => StrataTimeStepperComponent),
                             multi: true
                         }
                     ], host: {
-                        '[class.st-time-picker]': 'true',
+                        '[class.st-time-stepper]': 'true',
                         '[class.st-disabled]': 'effectiveDisabled()',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null'
-                    }, template: "<div class=\"st-time-picker-inner\">\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementHours()\"\n      aria-label=\"Increment hours\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementHours()\" (keydown.arrowdown)=\"decrementHours()\">\n      {{ displayHours() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementHours()\"\n      aria-label=\"Decrement hours\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  <span class=\"st-time-sep\">:</span>\n\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementMinutes()\"\n      aria-label=\"Increment minutes\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementMinutes()\" (keydown.arrowdown)=\"decrementMinutes()\">\n      {{ displayMinutes() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementMinutes()\"\n      aria-label=\"Decrement minutes\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  @if (showSeconds()) {\n    <span class=\"st-time-sep\">:</span>\n\n    <div class=\"st-time-col\">\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"incrementSeconds()\"\n        aria-label=\"Increment seconds\"\n      >\n        <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n      </button>\n      <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementSeconds()\" (keydown.arrowdown)=\"decrementSeconds()\">\n        {{ displaySeconds() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"decrementSeconds()\"\n        aria-label=\"Decrement seconds\"\n      >\n        <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n      </button>\n    </div>\n  }\n\n  @if (is12h()) {\n    <div class=\"st-time-col st-meridiem-col\">\n      <button\n        type=\"button\"\n        class=\"st-meridiem-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"toggleMeridiem()\"\n        aria-label=\"Toggle AM PM\"\n      >\n        {{ meridiem() }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box}:host.st-size-sm .st-time-val{min-width:34px;height:32px;font-size:var(--st-font-md);border-radius:var(--st-border-radius-sm)}:host.st-size-sm .st-time-arrow-btn{width:34px;height:20px}:host.st-size-sm .st-time-sep{font-size:var(--st-font-lg);margin:0 2px}:host.st-size-sm .st-meridiem-btn{height:32px;font-size:var(--st-font-xs);padding:0 var(--st-space-2);border-radius:var(--st-border-radius-sm)}:host.st-size-lg .st-time-val{min-width:54px;height:50px;font-size:1.5rem;border-radius:var(--st-border-radius-lg)}:host.st-size-lg .st-time-arrow-btn{width:54px;height:28px}:host.st-size-lg .st-time-sep{font-size:1.75rem;margin:0 6px}:host.st-size-lg .st-meridiem-btn{height:50px;font-size:var(--st-font-md);padding:0 var(--st-space-4);border-radius:var(--st-border-radius-lg)}:host.st-disabled{opacity:.55;pointer-events:none}.st-time-picker-inner{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:0;background:transparent;border:none;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-time-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-1)}.st-time-arrow-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);width:44px;height:24px;border-radius:var(--st-border-radius-sm);transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-time-arrow-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-time-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.st-time-val{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;font-family:var(--st-font-mono);font-size:var(--st-font-lg);font-weight:var(--st-font-weight-semibold);background:transparent;border:1px solid var(--st-border);border-radius:var(--st-border-radius-md);color:var(--st-color-text-primary);outline:none;cursor:default;transition:border-color var(--st-transition-fast)}.st-time-val:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}.st-time-sep{font-weight:var(--st-font-weight-bold);color:var(--st-color-text-secondary);font-size:var(--st-font-xl);margin:0 4px}.st-meridiem-col{margin-left:var(--st-space-1)}.st-meridiem-btn{background:transparent;border:1px solid var(--st-border);color:var(--st-color-text-primary);border-radius:var(--st-border-radius-md);height:42px;font-size:var(--st-font-sm);font-weight:var(--st-font-weight-semibold);padding:0 var(--st-space-3);cursor:pointer;transition:background var(--st-transition-fast),border-color var(--st-transition-fast)}.st-meridiem-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));border-color:var(--st-color-border-strong)}.st-meridiem-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+                    }, template: "<div class=\"st-time-stepper-inner\">\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementHours()\"\n      aria-label=\"Increment hours\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementHours()\" (keydown.arrowdown)=\"decrementHours()\">\n      {{ displayHours() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementHours()\"\n      aria-label=\"Decrement hours\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  <span class=\"st-time-sep\">:</span>\n\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementMinutes()\"\n      aria-label=\"Increment minutes\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementMinutes()\" (keydown.arrowdown)=\"decrementMinutes()\">\n      {{ displayMinutes() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementMinutes()\"\n      aria-label=\"Decrement minutes\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  @if (showSeconds()) {\n    <span class=\"st-time-sep\">:</span>\n\n    <div class=\"st-time-col\">\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"incrementSeconds()\"\n        aria-label=\"Increment seconds\"\n      >\n        <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n      </button>\n      <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementSeconds()\" (keydown.arrowdown)=\"decrementSeconds()\">\n        {{ displaySeconds() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"decrementSeconds()\"\n        aria-label=\"Decrement seconds\"\n      >\n        <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n      </button>\n    </div>\n  }\n\n  @if (is12h()) {\n    <div class=\"st-time-col st-meridiem-col\">\n      <button\n        type=\"button\"\n        class=\"st-meridiem-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"toggleMeridiem()\"\n        aria-label=\"Toggle AM PM\"\n      >\n        {{ meridiem() }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box}:host.st-disabled{opacity:.55;pointer-events:none}.st-time-stepper-inner{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:0;background:transparent;border:none;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-time-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-1)}.st-time-arrow-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);width:44px;height:24px;border-radius:var(--st-border-radius-sm);transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-time-arrow-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-time-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.st-time-val{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;font-family:var(--st-font-mono);font-size:var(--st-font-lg);font-weight:var(--st-font-weight-semibold);background:transparent;border:1px solid var(--st-border);border-radius:var(--st-border-radius-md);color:var(--st-color-text-primary);outline:none;cursor:default;transition:border-color var(--st-transition-fast)}.st-time-val:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}.st-time-sep{font-weight:var(--st-font-weight-bold);color:var(--st-color-text-secondary);font-size:var(--st-font-xl);margin:0 4px}.st-meridiem-col{margin-left:var(--st-space-1)}.st-meridiem-btn{background:transparent;border:1px solid var(--st-border);color:var(--st-color-text-primary);border-radius:var(--st-border-radius-md);height:42px;font-size:var(--st-font-sm);font-weight:var(--st-font-weight-semibold);padding:0 var(--st-space-3);cursor:pointer;transition:background var(--st-transition-fast),border-color var(--st-transition-fast)}.st-meridiem-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));border-color:var(--st-color-border-strong)}.st-meridiem-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+let nextUniqueTimepickerId = 0;
+class StrataTimepickerComponent {
+    defaultId = `st-timepicker-${nextUniqueTimepickerId++}`;
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    placeholder = input('Select time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    format = input('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minuteStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    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 });
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    timeSelected = output();
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    textInputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textInputValue" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.id() ?? this.name() ?? this.defaultId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* 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 */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    overlayDirective = viewChild(StrataOverlayDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayDirective" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        const unlisten = this.renderer.listen('document', 'pointerdown', (event) => {
+            if (!this.open())
+                return;
+            const target = event.target;
+            if (!target)
+                return;
+            const hostEl = this.elementRef.nativeElement;
+            const overlayEl = this.overlayDirective()?.getOverlayElement();
+            if (hostEl.contains(target) || (overlayEl && overlayEl.contains(target))) {
+                return;
+            }
+            this.open.set(false);
+        });
+        this.destroyRef.onDestroy(() => unlisten());
+    }
+    toggle(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.open.set(!this.open());
+    }
+    onInputTextChange(value) {
+        this.textInputValue.set(value);
+        if (!value.trim()) {
+            this.updateTimeValue(null);
+            return;
+        }
+        const parsed = this.parseTimeString(value);
+        if (parsed) {
+            this.updateTimeValue(parsed);
+        }
+    }
+    onInputBlur() {
+        this.onTouched();
+        const val = this.value();
+        if (val) {
+            this.textInputValue.set(this.formatTimeValue(val));
+        }
+        else {
+            this.textInputValue.set('');
+        }
+    }
+    onStepperTimeSelected(val) {
+        this.updateTimeValue(val);
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.updateTimeValue(null);
+    }
+    formatTimeValue(val) {
+        if (!val)
+            return '';
+        let hours = 0;
+        let minutes = 0;
+        let seconds = 0;
+        if (val instanceof Date) {
+            hours = val.getHours();
+            minutes = val.getMinutes();
+            seconds = val.getSeconds();
+        }
+        else if (typeof val === 'string') {
+            const parts = val.trim().split(':');
+            hours = parseInt(parts[0], 10) || 0;
+            minutes = parseInt(parts[1], 10) || 0;
+            seconds = parts[2] ? parseInt(parts[2], 10) || 0 : 0;
+        }
+        const pad = (n) => n.toString().padStart(2, '0');
+        if (this.format() === '12h') {
+            const isPM = hours >= 12;
+            const h12 = hours % 12 || 12;
+            const meridiem = isPM ? 'PM' : 'AM';
+            return this.showSeconds()
+                ? `${pad(h12)}:${pad(minutes)}:${pad(seconds)} ${meridiem}`
+                : `${pad(h12)}:${pad(minutes)} ${meridiem}`;
+        }
+        return this.showSeconds()
+            ? `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+            : `${pad(hours)}:${pad(minutes)}`;
+    }
+    parseTimeString(input) {
+        const trimmed = input.trim();
+        if (!trimmed)
+            return null;
+        const is12hInput = /am|pm/i.test(trimmed);
+        const cleanTime = trimmed.replace(/\s*(am|pm)/i, '').trim();
+        const parts = cleanTime.split(':').map((p) => parseInt(p, 10));
+        if (parts.some((n) => isNaN(n)))
+            return null;
+        let [h, m, s] = parts;
+        m = m ?? 0;
+        s = s ?? 0;
+        if (is12hInput || this.format() === '12h') {
+            const isPM = /pm/i.test(trimmed);
+            if (h < 1 || h > 12 || m < 0 || m > 59 || s < 0 || s > 59)
+                return null;
+            if (isPM && h < 12)
+                h += 12;
+            if (!isPM && h === 12)
+                h = 0;
+        }
+        else {
+            if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59)
+                return null;
+        }
+        const pad = (n) => n.toString().padStart(2, '0');
+        return this.showSeconds() ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(h)}:${pad(m)}`;
+    }
+    updateTimeValue(val) {
+        this.value.set(val);
+        this.textInputValue.set(this.formatTimeValue(val));
+        this.timeSelected.emit(val);
+        this.onChange(val);
+        this.onTouched();
+    }
+    writeValue(val) {
+        this.value.set(val);
+        this.textInputValue.set(this.formatTimeValue(val));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataTimepickerComponent, isStandalone: true, selector: "st-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", timeSelected: "timeSelected" }, host: { properties: { "class.st-timepicker": "true", "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "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(() => StrataTimepickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"timeOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear time\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"clock\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #timeOverlay>\n  <div class=\"st-timepicker-dropdown\">\n    <st-time-stepper\n      [value]=\"value()\"\n      [format]=\"format()\"\n      [showSeconds]=\"showSeconds()\"\n      [minuteStep]=\"minuteStep()\"\n      [disabled]=\"effectiveDisabled()\"\n      (valueChange)=\"onStepperTimeSelected($event)\"\n    ></st-time-stepper>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-timepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport", "overlayTarget"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataTimeStepperComponent, selector: "st-time-stepper", inputs: ["format", "showSeconds", "minuteStep", "disabled", "value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-timepicker', imports: [
+                        CommonModule,
+                        FormsModule,
+                        StrataIconComponent,
+                        StrataOverlayDirective,
+                        StrataTimeStepperComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataTimepickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-timepicker]': 'true',
+                        '[class.st-size-sm]': 'size() === "sm"',
+                        '[class.st-size-md]': 'size() === "md"',
+                        '[class.st-size-lg]': 'size() === "lg"',
+                        '[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\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"timeOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear time\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"clock\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #timeOverlay>\n  <div class=\"st-timepicker-dropdown\">\n    <st-time-stepper\n      [value]=\"value()\"\n      [format]=\"format()\"\n      [showSeconds]=\"showSeconds()\"\n      [minuteStep]=\"minuteStep()\"\n      [disabled]=\"effectiveDisabled()\"\n      (valueChange)=\"onStepperTimeSelected($event)\"\n    ></st-time-stepper>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-timepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out;display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }] } });
+
 function isSameDay(a, b) {
     if (!a || !b)
         return false;
@@ -2622,7 +3124,7 @@ class StrataDatePickerComponent {
                 useExisting: forwardRef(() => StrataDatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"calendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #calendarOverlay>\n  <div class=\"st-datepicker-dropdown\" [class.st-datepicker-with-time]=\"showTime()\">\n    <st-calendar\n      mode=\"single\"\n      [size]=\"calendarSize()\"\n      [locale]=\"locale()\"\n      [value]=\"value()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (dateSelected)=\"onCalendarDateSelected($event)\"\n    ></st-calendar>\n    @if (showTime()) {\n      <div class=\"st-datepicker-time-side\">\n        <st-time-picker\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-picker>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-datepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-datepicker-dropdown.st-datepicker-with-time{display:flex;align-items:stretch;gap:0;padding:0}.st-datepicker-dropdown.st-datepicker-with-time>st-calendar{padding:var(--st-space-3)}.st-datepicker-time-side{display:flex;align-items:center;justify-content:center;padding:var(--st-space-3) var(--st-space-4);border-left:1px solid var(--st-border-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataCalendarComponent, selector: "st-calendar", inputs: ["mode", "size", "locale", "value", "rangeValue", "viewDate", "minDate", "maxDate", "disabledDates", "firstDayOfWeek", "showAdjacentMonths", "disabled"], outputs: ["valueChange", "rangeValueChange", "viewDateChange", "dateSelected", "rangeSelected"] }, { kind: "component", type: StrataTimePickerComponent, selector: "st-time-picker", inputs: ["format", "showSeconds", "minuteStep", "disabled", "value"], outputs: ["valueChange"] }] });
+        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"calendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #calendarOverlay>\n  <div class=\"st-datepicker-dropdown\" [class.st-datepicker-with-time]=\"showTime()\">\n    <st-calendar\n      mode=\"single\"\n      [size]=\"calendarSize()\"\n      [locale]=\"locale()\"\n      [value]=\"value()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (dateSelected)=\"onCalendarDateSelected($event)\"\n    ></st-calendar>\n    @if (showTime()) {\n      <div class=\"st-datepicker-time-side\">\n        <st-time-stepper\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-stepper>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-datepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-datepicker-dropdown.st-datepicker-with-time{display:flex;align-items:stretch;gap:0;padding:0}.st-datepicker-dropdown.st-datepicker-with-time>st-calendar{padding:var(--st-space-3)}.st-datepicker-time-side{display:flex;align-items:center;justify-content:center;padding:var(--st-space-3) var(--st-space-4);border-left:1px solid var(--st-border-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport", "overlayTarget"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataCalendarComponent, selector: "st-calendar", inputs: ["mode", "size", "locale", "value", "rangeValue", "viewDate", "minDate", "maxDate", "disabledDates", "firstDayOfWeek", "showAdjacentMonths", "disabled"], outputs: ["valueChange", "rangeValueChange", "viewDateChange", "dateSelected", "rangeSelected"] }, { kind: "component", type: StrataTimeStepperComponent, selector: "st-time-stepper", inputs: ["format", "showSeconds", "minuteStep", "disabled", "value"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDatePickerComponent, decorators: [{
             type: Component,
@@ -2632,7 +3134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         StrataIconComponent,
                         StrataOverlayDirective,
                         StrataCalendarComponent,
-                        StrataTimePickerComponent
+                        StrataTimeStepperComponent
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -2651,7 +3153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[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\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"calendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #calendarOverlay>\n  <div class=\"st-datepicker-dropdown\" [class.st-datepicker-with-time]=\"showTime()\">\n    <st-calendar\n      mode=\"single\"\n      [size]=\"calendarSize()\"\n      [locale]=\"locale()\"\n      [value]=\"value()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (dateSelected)=\"onCalendarDateSelected($event)\"\n    ></st-calendar>\n    @if (showTime()) {\n      <div class=\"st-datepicker-time-side\">\n        <st-time-picker\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-picker>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-datepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-datepicker-dropdown.st-datepicker-with-time{display:flex;align-items:stretch;gap:0;padding:0}.st-datepicker-dropdown.st-datepicker-with-time>st-calendar{padding:var(--st-space-3)}.st-datepicker-time-side{display:flex;align-items:center;justify-content:center;padding:var(--st-space-3) var(--st-space-4);border-left:1px solid var(--st-border-subtle)}\n"] }]
+                    }, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"calendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #calendarOverlay>\n  <div class=\"st-datepicker-dropdown\" [class.st-datepicker-with-time]=\"showTime()\">\n    <st-calendar\n      mode=\"single\"\n      [size]=\"calendarSize()\"\n      [locale]=\"locale()\"\n      [value]=\"value()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (dateSelected)=\"onCalendarDateSelected($event)\"\n    ></st-calendar>\n    @if (showTime()) {\n      <div class=\"st-datepicker-time-side\">\n        <st-time-stepper\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-stepper>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-datepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-datepicker-dropdown.st-datepicker-with-time{display:flex;align-items:stretch;gap:0;padding:0}.st-datepicker-dropdown.st-datepicker-with-time>st-calendar{padding:var(--st-space-3)}.st-datepicker-time-side{display:flex;align-items:center;justify-content:center;padding:var(--st-space-3) var(--st-space-4);border-left:1px solid var(--st-border-subtle)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", 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 }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }] } });
 
 let nextUniqueDateRangePickerId = 0;
@@ -2916,7 +3418,7 @@ class StrataDateRangePickerComponent {
                 useExisting: forwardRef(() => StrataDateRangePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"rangeCalendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date range\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #rangeCalendarOverlay>\n  <div class=\"st-date-range-dropdown\">\n    @if (showPresets() && presets().length > 0) {\n      <div class=\"st-date-range-presets\">\n        <div class=\"st-presets-title\">Presets</div>\n        @for (preset of presets(); track preset.label) {\n          <button\n            type=\"button\"\n            class=\"st-preset-btn\"\n            (click)=\"applyPreset(preset)\"\n          >\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"st-date-range-calendars\">\n      <st-calendar\n        mode=\"range\"\n        [size]=\"calendarSize()\"\n        [locale]=\"locale()\"\n        [rangeValue]=\"value()\"\n        [viewDate]=\"calendarViewDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        (rangeSelected)=\"onCalendarRangeSelected($event)\"\n        (viewDateChange)=\"calendarViewDate.set($event)\"\n      ></st-calendar>\n\n      @if (numberOfMonths() >= 2) {\n        <st-calendar\n          mode=\"range\"\n          [size]=\"calendarSize()\"\n          [locale]=\"locale()\"\n          [rangeValue]=\"value()\"\n          [viewDate]=\"secondCalendarViewDate()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          (rangeSelected)=\"onCalendarRangeSelected($event)\"\n          (viewDateChange)=\"onSecondCalendarViewDateChange($event)\"\n        ></st-calendar>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-date-range-dropdown{display:flex;background-color:var(--st-color-bg-raised);border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);box-shadow:var(--st-shadow-2);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-date-range-presets{display:flex;flex-direction:column;padding:var(--st-space-2);border-right:1px solid var(--st-border-subtle);min-width:130px;gap:2px}.st-presets-title{font-size:.75rem;font-weight:var(--st-font-weight-semibold);color:var(--st-color-text-tertiary);padding:4px 8px;text-transform:uppercase;letter-spacing:.05em}.st-preset-btn{background:transparent;border:none;font-family:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-secondary);padding:6px 8px;border-radius:var(--st-border-radius-sm);text-align:left;cursor:pointer;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}.st-preset-btn:hover{background-color:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-date-range-calendars{display:flex;gap:var(--st-space-4);padding:var(--st-space-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataCalendarComponent, selector: "st-calendar", inputs: ["mode", "size", "locale", "value", "rangeValue", "viewDate", "minDate", "maxDate", "disabledDates", "firstDayOfWeek", "showAdjacentMonths", "disabled"], outputs: ["valueChange", "rangeValueChange", "viewDateChange", "dateSelected", "rangeSelected"] }] });
+        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"rangeCalendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date range\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-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\n<ng-template #rangeCalendarOverlay>\n  <div class=\"st-date-range-dropdown\">\n    @if (showPresets() && presets().length > 0) {\n      <div class=\"st-date-range-presets\">\n        <div class=\"st-presets-title\">Presets</div>\n        @for (preset of presets(); track preset.label) {\n          <button\n            type=\"button\"\n            class=\"st-preset-btn\"\n            (click)=\"applyPreset(preset)\"\n          >\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"st-date-range-calendars\">\n      <st-calendar\n        mode=\"range\"\n        [size]=\"calendarSize()\"\n        [locale]=\"locale()\"\n        [rangeValue]=\"value()\"\n        [viewDate]=\"calendarViewDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        (rangeSelected)=\"onCalendarRangeSelected($event)\"\n        (viewDateChange)=\"calendarViewDate.set($event)\"\n      ></st-calendar>\n\n      @if (numberOfMonths() >= 2) {\n        <st-calendar\n          mode=\"range\"\n          [size]=\"calendarSize()\"\n          [locale]=\"locale()\"\n          [rangeValue]=\"value()\"\n          [viewDate]=\"secondCalendarViewDate()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          (rangeSelected)=\"onCalendarRangeSelected($event)\"\n          (viewDateChange)=\"onSecondCalendarViewDateChange($event)\"\n        ></st-calendar>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-date-range-dropdown{display:flex;background-color:var(--st-color-bg-raised);border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);box-shadow:var(--st-shadow-2);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-date-range-presets{display:flex;flex-direction:column;padding:var(--st-space-2);border-right:1px solid var(--st-border-subtle);min-width:130px;gap:2px}.st-presets-title{font-size:.75rem;font-weight:var(--st-font-weight-semibold);color:var(--st-color-text-tertiary);padding:4px 8px;text-transform:uppercase;letter-spacing:.05em}.st-preset-btn{background:transparent;border:none;font-family:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-secondary);padding:6px 8px;border-radius:var(--st-border-radius-sm);text-align:left;cursor:pointer;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}.st-preset-btn:hover{background-color:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-date-range-calendars{display:flex;gap:var(--st-space-4);padding:var(--st-space-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport", "overlayTarget"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataCalendarComponent, selector: "st-calendar", inputs: ["mode", "size", "locale", "value", "rangeValue", "viewDate", "minDate", "maxDate", "disabledDates", "firstDayOfWeek", "showAdjacentMonths", "disabled"], outputs: ["valueChange", "rangeValueChange", "viewDateChange", "dateSelected", "rangeSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDateRangePickerComponent, decorators: [{
             type: Component,
@@ -2964,6 +3466,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 class StrataFileUploadComponent {
     fileInput = viewChild('fileInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    cameraInput = viewChild('cameraInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cameraInput" }] : /* istanbul ignore next */ []));
     accept = input('*', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
     multiple = input(false, /* @ts-ignore */
@@ -2976,6 +3480,24 @@ class StrataFileUploadComponent {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    camera = input(undefined, { ...(ngDevMode ? { debugName: "camera" } : /* istanbul ignore next */ {}), transform: (val) => {
+            if (val === undefined || val === null) {
+                return undefined;
+            }
+            if (typeof val === 'string') {
+                if (val === '' || val === 'true') {
+                    return true;
+                }
+                if (val === 'false') {
+                    return false;
+                }
+            }
+            return Boolean(val);
+        } });
+    choosePhotoLabel = input('Choose Photo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "choosePhotoLabel" }] : /* istanbul ignore next */ []));
+    takePhotoLabel = input('Take Photo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "takePhotoLabel" }] : /* 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 });
@@ -2997,6 +3519,29 @@ class StrataFileUploadComponent {
     ...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
     isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
+    isImageAccept = computed(() => {
+        const acc = this.accept().toLowerCase();
+        if (!acc || acc === '*' || acc === '*/*') {
+            return false;
+        }
+        const rules = acc.split(',').map((r) => r.trim());
+        return rules.some((rule) => {
+            return (rule.startsWith('image/') ||
+                ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.heic', '.heif', '.svg'].some((ext) => rule.endsWith(ext)));
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isImageAccept" }] : /* istanbul ignore next */ []));
+    showCamera = computed(() => {
+        const cam = this.camera();
+        if (cam === false) {
+            return false;
+        }
+        if (cam === true) {
+            return true;
+        }
+        return this.isImageAccept();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCamera" }] : /* istanbul ignore next */ []));
     fileSelect = output();
     filesSelect = output();
     fileRejected = output();
@@ -3026,12 +3571,19 @@ class StrataFileUploadComponent {
     }
     onClick(event) {
         const target = event.target;
-        if (target === this.fileInput()?.nativeElement) {
+        if (target === this.fileInput()?.nativeElement || target === this.cameraInput()?.nativeElement) {
+            return;
+        }
+        if (target.closest('.st-file-upload-actions')) {
             return;
         }
         this.browse();
     }
     onKeydown(event) {
+        const target = event.target;
+        if (target.closest('.st-file-upload-actions')) {
+            return;
+        }
         event.preventDefault();
         this.browse();
     }
@@ -3067,16 +3619,27 @@ class StrataFileUploadComponent {
         this.processFiles(Array.from(inputEl.files));
         inputEl.value = '';
     }
-    browse() {
+    browse(event) {
+        event?.stopPropagation();
         if (this.disabled())
             return;
         this.fileInput()?.nativeElement.click();
     }
+    browseCamera(event) {
+        event?.stopPropagation();
+        if (this.disabled())
+            return;
+        this.cameraInput()?.nativeElement.click();
+    }
     clear() {
         const inputEl = this.fileInput()?.nativeElement;
         if (inputEl) {
             inputEl.value = '';
         }
+        const cameraEl = this.cameraInput()?.nativeElement;
+        if (cameraEl) {
+            cameraEl.value = '';
+        }
     }
     processFiles(files) {
         const acceptedFiles = [];
@@ -3119,12 +3682,17 @@ class StrataFileUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataFileUploadComponent, isStandalone: true, selector: "st-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 } }, outputs: { fileSelect: "fileSelect", filesSelect: "filesSelect", fileRejected: "fileRejected" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.st-disabled": "this.hostDisabled", "class.st-state-error": "this.hostError", "class.st-error": "this.hostError", "class.st-state-success": "this.hostSuccess", "class.st-state-warning": "this.hostWarning", "attr.aria-invalid": "this.hostAriaInvalid", "class.st-drag-over": "this.hostDragOver", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabIndex" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n  <div class=\"st-file-upload-icon-wrapper\">\n    <ng-content select=\"[uploadIcon]\">\n      <svg\n        class=\"st-file-upload-icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n    </ng-content>\n  </div>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataFileUploadComponent, isStandalone: true, selector: "st-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, choosePhotoLabel: { classPropertyName: "choosePhotoLabel", publicName: "choosePhotoLabel", isSignal: true, isRequired: false, transformFunction: null }, takePhotoLabel: { classPropertyName: "takePhotoLabel", publicName: "takePhotoLabel", 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 } }, outputs: { fileSelect: "fileSelect", filesSelect: "filesSelect", fileRejected: "fileRejected" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.st-disabled": "this.hostDisabled", "class.st-state-error": "this.hostError", "class.st-error": "this.hostError", "class.st-state-success": "this.hostSuccess", "class.st-state-warning": "this.hostWarning", "attr.aria-invalid": "this.hostAriaInvalid", "class.st-drag-over": "this.hostDragOver", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabIndex" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "cameraInput", first: true, predicate: ["cameraInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n@if (showCamera()) {\n  <input\n    #cameraInput\n    type=\"file\"\n    class=\"st-file-upload-input\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n}\n\n<div class=\"st-file-upload-content\">\n  <ng-content select=\"[uploadIcon]\">\n    <st-avatar size=\"md\" variant=\"rounded\" class=\"st-file-upload-avatar\">\n      <st-icon name=\"upload\"></st-icon>\n    </st-avatar>\n  </ng-content>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  @if (showCamera()) {\n    <st-button-group justification=\"center\" class=\"st-file-upload-actions\">\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [disabled]=\"disabled()\"\n        (click)=\"browse($event)\"\n      >\n        <st-icon name=\"image\" size=\"sm\"></st-icon>\n        <span>{{ choosePhotoLabel() }}</span>\n      </button>\n\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        class=\"st-file-upload-action-camera\"\n        [disabled]=\"disabled()\"\n        (click)=\"browseCamera($event)\"\n      >\n        <st-icon name=\"camera\" size=\"sm\"></st-icon>\n        <span>{{ takePhotoLabel() }}</span>\n      </button>\n    </st-button-group>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-file-upload-bg: var(--st-color-bg-default);--st-file-upload-border: var(--st-color-border-default);--st-file-upload-text: var(--st-color-text-primary);--st-file-upload-hint: var(--st-color-text-secondary);--st-file-upload-hover-bg: var(--st-color-bg-raised);--st-file-upload-hover-border: var(--st-color-accent-default);--st-file-upload-active-border: var(--st-color-accent-default);--st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));--st-file-upload-radius: var(--st-border-radius-xl);display:block;position:relative;box-sizing:border-box;background-color:var(--st-file-upload-bg);border:2px dashed var(--st-file-upload-border);border-radius:var(--st-file-upload-radius);padding:var(--st-space-6) var(--st-space-4);text-align:center;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast),transform var(--st-transition-fast);-webkit-user-select:none;user-select:none;outline:none}:host st-avatar{transition:transform .2s ease}:host:hover:not(.st-disabled){background-color:var(--st-file-upload-hover-bg);border-color:var(--st-file-upload-hover-border)}:host:hover:not(.st-disabled) st-avatar{transform:translateY(-2px)}:host:focus-visible:not(.st-disabled){outline:2px solid var(--st-color-accent-default);outline-offset:2px}:host.st-drag-over{background-color:var(--st-file-upload-active-bg);border-color:var(--st-file-upload-active-border);border-style:solid;transform:scale(1.01)}:host.st-drag-over st-avatar{transform:translateY(-4px) scale(1.05)}:host.st-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:host .st-file-upload-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host .st-file-upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-3)}:host .st-file-upload-text{display:flex;flex-direction:column;gap:var(--st-space-1)}:host .st-file-upload-label{font-size:.95rem;font-weight:500;color:var(--st-file-upload-text)}:host.st-state-error,:host.st-error{--st-file-upload-border: var(--st-color-feedback-error-default);--st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default))}:host.st-state-error:focus-visible:not(.st-disabled),:host.st-error:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-error-default)}:host.st-state-success{--st-file-upload-border: var(--st-color-feedback-success-default);--st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default))}:host.st-state-success:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-success-default)}:host.st-state-warning{--st-file-upload-border: var(--st-color-feedback-warning-default);--st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default))}:host.st-state-warning:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-warning-default)}:host .st-file-upload-hint{font-size:.8rem;color:var(--st-file-upload-hint)}:host .st-file-upload-hint.st-message-error{color:var(--st-color-feedback-error-text)}:host .st-file-upload-hint.st-message-success{color:var(--st-color-feedback-success-text)}:host .st-file-upload-hint.st-message-warning{color:var(--st-color-feedback-warning-text)}:host .st-file-upload-actions{margin-top:var(--st-space-2)}\n"], dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["src", "alt", "text", "size", "variant"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { 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: StrataFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-file-upload', imports: [], template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n  <div class=\"st-file-upload-icon-wrapper\">\n    <ng-content select=\"[uploadIcon]\">\n      <svg\n        class=\"st-file-upload-icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n    </ng-content>\n  </div>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", 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 }] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], filesSelect: [{ type: i0.Output, args: ["filesSelect"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], hostDisabled: [{
+            args: [{ selector: 'st-file-upload', imports: [
+                        StrataAvatarComponent,
+                        StrataButtonDirective,
+                        StrataButtonGroupComponent,
+                        StrataIconComponent
+                    ], template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n@if (showCamera()) {\n  <input\n    #cameraInput\n    type=\"file\"\n    class=\"st-file-upload-input\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n}\n\n<div class=\"st-file-upload-content\">\n  <ng-content select=\"[uploadIcon]\">\n    <st-avatar size=\"md\" variant=\"rounded\" class=\"st-file-upload-avatar\">\n      <st-icon name=\"upload\"></st-icon>\n    </st-avatar>\n  </ng-content>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  @if (showCamera()) {\n    <st-button-group justification=\"center\" class=\"st-file-upload-actions\">\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [disabled]=\"disabled()\"\n        (click)=\"browse($event)\"\n      >\n        <st-icon name=\"image\" size=\"sm\"></st-icon>\n        <span>{{ choosePhotoLabel() }}</span>\n      </button>\n\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        class=\"st-file-upload-action-camera\"\n        [disabled]=\"disabled()\"\n        (click)=\"browseCamera($event)\"\n      >\n        <st-icon name=\"camera\" size=\"sm\"></st-icon>\n        <span>{{ takePhotoLabel() }}</span>\n      </button>\n    </st-button-group>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-file-upload-bg: var(--st-color-bg-default);--st-file-upload-border: var(--st-color-border-default);--st-file-upload-text: var(--st-color-text-primary);--st-file-upload-hint: var(--st-color-text-secondary);--st-file-upload-hover-bg: var(--st-color-bg-raised);--st-file-upload-hover-border: var(--st-color-accent-default);--st-file-upload-active-border: var(--st-color-accent-default);--st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));--st-file-upload-radius: var(--st-border-radius-xl);display:block;position:relative;box-sizing:border-box;background-color:var(--st-file-upload-bg);border:2px dashed var(--st-file-upload-border);border-radius:var(--st-file-upload-radius);padding:var(--st-space-6) var(--st-space-4);text-align:center;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast),transform var(--st-transition-fast);-webkit-user-select:none;user-select:none;outline:none}:host st-avatar{transition:transform .2s ease}:host:hover:not(.st-disabled){background-color:var(--st-file-upload-hover-bg);border-color:var(--st-file-upload-hover-border)}:host:hover:not(.st-disabled) st-avatar{transform:translateY(-2px)}:host:focus-visible:not(.st-disabled){outline:2px solid var(--st-color-accent-default);outline-offset:2px}:host.st-drag-over{background-color:var(--st-file-upload-active-bg);border-color:var(--st-file-upload-active-border);border-style:solid;transform:scale(1.01)}:host.st-drag-over st-avatar{transform:translateY(-4px) scale(1.05)}:host.st-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:host .st-file-upload-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host .st-file-upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-3)}:host .st-file-upload-text{display:flex;flex-direction:column;gap:var(--st-space-1)}:host .st-file-upload-label{font-size:.95rem;font-weight:500;color:var(--st-file-upload-text)}:host.st-state-error,:host.st-error{--st-file-upload-border: var(--st-color-feedback-error-default);--st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default))}:host.st-state-error:focus-visible:not(.st-disabled),:host.st-error:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-error-default)}:host.st-state-success{--st-file-upload-border: var(--st-color-feedback-success-default);--st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default))}:host.st-state-success:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-success-default)}:host.st-state-warning{--st-file-upload-border: var(--st-color-feedback-warning-default);--st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default))}:host.st-state-warning:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-warning-default)}:host .st-file-upload-hint{font-size:.8rem;color:var(--st-file-upload-hint)}:host .st-file-upload-hint.st-message-error{color:var(--st-color-feedback-error-text)}:host .st-file-upload-hint.st-message-success{color:var(--st-color-feedback-success-text)}:host .st-file-upload-hint.st-message-warning{color:var(--st-color-feedback-warning-text)}:host .st-file-upload-actions{margin-top:var(--st-space-2)}\n"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], cameraInput: [{ type: i0.ViewChild, args: ['cameraInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], camera: [{ type: i0.Input, args: [{ isSignal: true, alias: "camera", required: false }] }], choosePhotoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "choosePhotoLabel", required: false }] }], takePhotoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "takePhotoLabel", 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 }] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], filesSelect: [{ type: i0.Output, args: ["filesSelect"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], hostDisabled: [{
                 type: HostBinding,
                 args: ['class.st-disabled']
             }], hostError: [{
@@ -4304,7 +4872,7 @@ class StrataModalComponent {
     }
     ngOnDestroy() {
         if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
-            this.previousActiveElement.focus();
+            this.previousActiveElement.focus({ preventScroll: true });
         }
     }
     ngAfterViewInit() {
@@ -4331,10 +4899,10 @@ class StrataModalComponent {
     focusInitialElement() {
         const autofocus = this.elementRef.nativeElement.querySelector('[autofocus]');
         if (autofocus && typeof autofocus.focus === 'function') {
-            autofocus.focus();
+            autofocus.focus({ preventScroll: true });
             return;
         }
-        this.elementRef.nativeElement.focus();
+        this.elementRef.nativeElement.focus({ preventScroll: true });
     }
     onCardClick(event) {
         event.stopPropagation();
@@ -4355,7 +4923,7 @@ class StrataModalComponent {
                 document.activeElement === this.elementRef.nativeElement ||
                 !this.elementRef.nativeElement.contains(document.activeElement)) {
                 event.preventDefault();
-                last.focus();
+                last.focus({ preventScroll: true });
             }
         }
         else {
@@ -4363,7 +4931,7 @@ class StrataModalComponent {
                 document.activeElement === this.elementRef.nativeElement ||
                 !this.elementRef.nativeElement.contains(document.activeElement)) {
                 event.preventDefault();
-                first.focus();
+                first.focus({ preventScroll: true });
             }
         }
     }
@@ -5602,7 +6170,7 @@ 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.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"] }] });
+    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: [":host{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast);border:none;color:var(--st-color-text-primary);flex-shrink:0;text-wrap:nowrap;background-color:transparent;position:relative;z-index:1;box-sizing:border-box}:host:hover:not([disabled]):not(.st-disabled):not([aria-selected=true]){cursor:pointer;background-color:var(--st-color-control-bg-hover);color:var(--st-color-text-primary)}:host[aria-selected=true]{color:var(--st-color-control-primary-text);cursor:default}:host[disabled],:host.st-disabled{pointer-events:none;color:var(--st-color-text-tertiary);cursor:unset}:host st-badge{flex-shrink:0}:host-context(.st-segmented-control-full-width){flex:1}\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: StrataSegmentedControlItemComponent, decorators: [{
             type: Component,
@@ -5614,7 +6182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '(click)': 'onClick()',
                         '(keydown.space)': 'onKeydown($event)',
                         '(keydown.enter)': 'onKeydown($event)'
-                    }, 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" }]
+                    }, 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: [":host{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast);border:none;color:var(--st-color-text-primary);flex-shrink:0;text-wrap:nowrap;background-color:transparent;position:relative;z-index:1;box-sizing:border-box}:host:hover:not([disabled]):not(.st-disabled):not([aria-selected=true]){cursor:pointer;background-color:var(--st-color-control-bg-hover);color:var(--st-color-text-primary)}:host[aria-selected=true]{color:var(--st-color-control-primary-text);cursor:default}:host[disabled],:host.st-disabled{pointer-events:none;color:var(--st-color-text-tertiary);cursor:unset}:host st-badge{flex-shrink:0}:host-context(.st-segmented-control-full-width){flex:1}\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']
@@ -5784,7 +6352,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'\"></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", styles: [":host{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs);--st-segmented-control-border-radius: var(--st-border-radius-md);--st-segmented-control-border-color: transparent;--st-segmented-control-error-border: var(--st-color-feedback-error-default);--st-segmented-control-success-border: var(--st-color-feedback-success-default);--st-segmented-control-warning-border: var(--st-color-feedback-warning-default);display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;box-sizing:border-box}:host.st-size-sm{--st-segmented-control-height: var(--st-interactive-element-height-sm);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);--st-segmented-control-font-size: 12px;--st-segmented-control-padding-x: var(--st-size-xxxs)}:host.st-size-sm .st-segmented-control-track{padding:2px;gap:2px}:host.st-size-md{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs)}:host.st-size-md .st-segmented-control-track{padding:4px;gap:4px}:host.st-size-lg{--st-segmented-control-height: var(--st-interactive-element-height-lg);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 16px;--st-segmented-control-padding-x: var(--st-size-xs)}:host.st-size-lg .st-segmented-control-track{padding:4px;gap:4px}:host.st-state-error{--st-segmented-control-border-color: var(--st-segmented-control-error-border)}:host.st-state-success{--st-segmented-control-border-color: var(--st-segmented-control-success-border)}:host.st-state-warning{--st-segmented-control-border-color: var(--st-segmented-control-warning-border)}:host.st-segmented-control-full-width{width:100%}:host.st-segmented-control-full-width .st-segmented-control-track{display:flex;width:100%}.st-segmented-control-track{display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:fit-content;max-width:100%;min-width:0;position:relative;border-radius:var(--st-segmented-control-border-radius);border:1px solid var(--st-segmented-control-border-color);box-sizing:border-box;background-color:var(--st-color-bg-raised);height:var(--st-segmented-control-height);padding:4px;gap:4px;transition:border-color var(--st-transition-fast);-ms-overflow-style:none;scrollbar-width:none}.st-segmented-control-track::-webkit-scrollbar{display:none}.selection-item{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}#selection-indicator{cursor:default;position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:calc(var(--st-segmented-control-border-radius) - 2px);background-color:var(--st-color-control-primary-bg);color:var(--st-color-control-primary-text);text-wrap:nowrap;box-shadow:var(--st-shadow-1);transition:left var(--st-transition-fast),width var(--st-transition-fast)}.st-segmented-control-message{margin-top:var(--st-space-1);font-size:var(--st-font-size-sm, 12px);color:var(--st-color-text-secondary)}.st-segmented-control-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-segmented-control-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-segmented-control-message.st-message-warning{color:var(--st-color-feedback-warning-text)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
             type: Component,
@@ -5807,7 +6375,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'\"></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", styles: [":host{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs);--st-segmented-control-border-radius: var(--st-border-radius-md);--st-segmented-control-border-color: transparent;--st-segmented-control-error-border: var(--st-color-feedback-error-default);--st-segmented-control-success-border: var(--st-color-feedback-success-default);--st-segmented-control-warning-border: var(--st-color-feedback-warning-default);display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;box-sizing:border-box}:host.st-size-sm{--st-segmented-control-height: var(--st-interactive-element-height-sm);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);--st-segmented-control-font-size: 12px;--st-segmented-control-padding-x: var(--st-size-xxxs)}:host.st-size-sm .st-segmented-control-track{padding:2px;gap:2px}:host.st-size-md{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs)}:host.st-size-md .st-segmented-control-track{padding:4px;gap:4px}:host.st-size-lg{--st-segmented-control-height: var(--st-interactive-element-height-lg);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 16px;--st-segmented-control-padding-x: var(--st-size-xs)}:host.st-size-lg .st-segmented-control-track{padding:4px;gap:4px}:host.st-state-error{--st-segmented-control-border-color: var(--st-segmented-control-error-border)}:host.st-state-success{--st-segmented-control-border-color: var(--st-segmented-control-success-border)}:host.st-state-warning{--st-segmented-control-border-color: var(--st-segmented-control-warning-border)}:host.st-segmented-control-full-width{width:100%}:host.st-segmented-control-full-width .st-segmented-control-track{display:flex;width:100%}.st-segmented-control-track{display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:fit-content;max-width:100%;min-width:0;position:relative;border-radius:var(--st-segmented-control-border-radius);border:1px solid var(--st-segmented-control-border-color);box-sizing:border-box;background-color:var(--st-color-bg-raised);height:var(--st-segmented-control-height);padding:4px;gap:4px;transition:border-color var(--st-transition-fast);-ms-overflow-style:none;scrollbar-width:none}.st-segmented-control-track::-webkit-scrollbar{display:none}.selection-item{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}#selection-indicator{cursor:default;position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:calc(var(--st-segmented-control-border-radius) - 2px);background-color:var(--st-color-control-primary-bg);color:var(--st-color-control-primary-text);text-wrap:nowrap;box-shadow:var(--st-shadow-1);transition:left var(--st-transition-fast),width var(--st-transition-fast)}.st-segmented-control-message{margin-top:var(--st-space-1);font-size:var(--st-font-size-sm, 12px);color:var(--st-color-text-secondary)}.st-segmented-control-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-segmented-control-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-segmented-control-message.st-message-warning{color:var(--st-color-feedback-warning-text)}\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 }] }] } });
@@ -6184,7 +6752,7 @@ class StrataSingleSelectComponent {
                 useExisting: forwardRef(() => StrataSingleSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"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>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "label", "id", "name", "state", "error", "message", "colorMessage", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+        ], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"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>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport", "overlayTarget"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "label", "id", "name", "state", "error", "message", "colorMessage", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
             type: Component,
@@ -6645,5 +7213,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, 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, StrataCalendarComponent, StrataCardComponent, StrataCheckboxComponent, StrataDatePickerComponent, StrataDateRangePickerComponent, 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, StrataTimePickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
+export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, 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, StrataCalendarComponent, StrataCardComponent, StrataChatComponent, StrataChatGroupComponent, StrataChatMessageComponent, StrataChatSeparatorComponent, StrataChatTypingComponent, StrataCheckboxComponent, StrataContextMenuDirective, StrataDatePickerComponent, StrataDateRangePickerComponent, 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, StrataTimeStepperComponent, StrataTimepickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
 //# sourceMappingURL=ngx-strata.mjs.map