atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/progress/progress.js

@@ -149,6 +149,30 @@ export class Progress {
      * Enable glassmorphism effect for the trail
      */
     glass = false;
+    /**
+     * Status-bar variant: shows a lifecycle label (Not Started / Running / Interrupted / Completed)
+     * above the progress bar derived automatically from percent + status.
+     */
+    statusBar = false;
+    /**
+     * Alignment of the status badge inside the status bar header.
+     * 'left' (default) — badge left, percent right.
+     * 'center' — badge and percent centered together.
+     * 'right' — badge right, percent left.
+     */
+    statusBarAlign = 'left';
+    /**
+     * Position of the status chip/badge in status-bar mode.
+     * 'inside' (default) — inside the progress bar trail (requires minimum height of 32px).
+     * 'top' — above the progress bar (allows smaller progress bar heights).
+     */
+    statusBarPosition = 'inside';
+    /**
+     * Custom text labels for each status-bar state.
+     * Pass any subset to override — unset keys keep their defaults.
+     * e.g. { notStarted: 'Pending', running: 'In Progress', interrupted: 'Paused', completed: 'Done' }
+     */
+    statusLabels = {};
     /**
      * Enable dynamic glow effect based on status
      */
@@ -196,6 +220,8 @@ export class Progress {
             if (typeof this.multiProgress === 'string') {
                 this.multiProgress = JSON.parse(this.multiProgress);
             }
+            if (typeof this.statusLabels === 'string')
+                this.statusLabels = JSON.parse(this.statusLabels);
         }
         catch (e) {
             console.warn('Failed to parse complex progress prop', e);
@@ -211,6 +237,9 @@ export class Progress {
     handleStrokeColorChange() {
         this.normalizeProps();
     }
+    handleStatusChange(newStatus) {
+        this.currentStatus = newStatus;
+    }
     applyThresholds(val) {
         if (!this.thresholds.length)
             return;
@@ -294,16 +323,54 @@ export class Progress {
         }
         return nodes;
     }
+    getStatusInfo() {
+        const lbl = this.statusLabels || {};
+        if (this.currentStatus === 'interrupted') {
+            return { label: lbl.interrupted ?? 'Interrupted', cssClass: 'interrupted', iconName: 'ban' };
+        }
+        if (this.animatedPercent >= 100 || this.currentStatus === 'completed') {
+            return { label: lbl.completed ?? 'Completed', cssClass: 'completed', iconName: 'check-circle' };
+        }
+        if (this.animatedPercent <= 0) {
+            return { label: lbl.notStarted ?? 'Not Started', cssClass: 'not-started', iconName: 'circle' };
+        }
+        return { label: lbl.running ?? 'Running', cssClass: 'running', iconName: 'loader' };
+    }
+    renderStatusBarChip(isOnTop = false) {
+        const { label, cssClass, iconName } = this.getStatusInfo();
+        const pct = Number(this.animatedPercent.toFixed(this.decimalPrecision));
+        let style = {};
+        if (!isOnTop) {
+            style = { position: 'absolute', top: '50%', transform: 'translateY(-50%)', zIndex: '2' };
+            if (this.statusBarAlign === 'right') {
+                style.right = '8px';
+            }
+            else if (this.statusBarAlign === 'center') {
+                style.left = '50%';
+                style.transform = 'translate(-50%, -50%)';
+            }
+            else {
+                style.left = '8px';
+            }
+        }
+        return (h("div", { class: `progress-status-chip progress-status-chip--${cssClass}`, style: style }, h("ui-icon", { name: iconName, library: "lucide" }), h("span", null, label), h("span", { "aria-hidden": "true", style: { opacity: '0.45', margin: '0 1px' } }, "\u00B7"), h("span", null, pct, "%")));
+    }
     getStrokeColor() {
-        if (this.currentStatus === 'success') {
+        if (this.currentStatus === 'success' || this.currentStatus === 'completed') {
             return '#52c41a';
         }
-        if (this.currentStatus === 'exception' || this.currentStatus === 'danger') {
+        if (this.currentStatus === 'exception' || this.currentStatus === 'danger' || this.currentStatus === 'interrupted') {
             return '#ff4d4f';
         }
         if (this.currentStatus === 'warning') {
             return '#faad14';
         }
+        if (this.currentStatus === 'empty') {
+            return '#d9d9d9';
+        }
+        if (this.currentStatus === 'running') {
+            return '#1890ff';
+        }
         const hasGradient = this.gradient || (typeof this.strokeColor === 'object' && this.strokeColor !== null);
         if (hasGradient) {
             return `url(#${this.gradientId})`;
@@ -335,27 +402,34 @@ export class Progress {
             }
             backgroundStyle = `linear-gradient(${direction}, ${fromColor}, ${toColor})`;
         }
+        const showStatusOnTop = this.statusBar && this.statusBarPosition === 'top';
+        // When status-bar chip is active and inside, ensure the trail is at least 32px tall so the chip fits
+        const effectiveStrokeWidth = (this.statusBar && this.statusBarPosition === 'inside' && this.orientation !== 'vertical')
+            ? Math.max(this.strokeWidth, 32) : this.strokeWidth;
         const progressStyle = {
             [this.orientation === 'vertical' ? 'height' : 'width']: this.indeterminate ? '100%' : `${Math.min(this.animatedPercent, 100)}%`,
             [this.orientation === 'vertical' ? 'width' : 'height']: '100%',
-            borderRadius: this.strokeLinecap === 'round' ? `${this.strokeWidth}px` : '0',
+            borderRadius: this.strokeLinecap === 'round' ? `${effectiveStrokeWidth}px` : '0',
             background: backgroundStyle,
+            color: strokeColor,
             ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
         };
         const trailStyle = {
-            [this.orientation === 'vertical' ? 'width' : 'height']: `${this.strokeWidth}px`,
+            [this.orientation === 'vertical' ? 'width' : 'height']: `${effectiveStrokeWidth}px`,
             [this.orientation === 'vertical' ? 'height' : 'width']: this.orientation === 'vertical'
                 ? (typeof this.height === 'number' ? `${this.height}px` : this.height)
                 : (typeof this.width === 'number' ? `${this.width}px` : this.width),
-            borderRadius: this.strokeLinecap === 'round' ? `${this.strokeWidth}px` : '0',
+            borderRadius: this.strokeLinecap === 'round' ? `${effectiveStrokeWidth}px` : '0',
             background: this.trailColor,
             cursor: this.interactive ? 'pointer' : 'default',
-            flex: '1'
+            flex: showStatusOnTop ? 'none' : '1'
         };
         return (h("div", { class: {
                 'progress-line-wrapper': true,
+                'progress-status-bar': this.statusBar,
+                'progress-status-bar--top': showStatusOnTop,
                 [`progress-orient-${this.orientation}`]: true
-            } }, this.labelPosition === 'top' && this.showInfo && this.renderProgressInfo(), h("div", { class: "progress-line-trail", style: trailStyle, onMouseDown: this.handleInteraction, onTouchStart: this.handleInteraction }, this.vitality && h("div", { class: "progress-vitality-pulse" }), this.renderTicks(), this.showBuffer && this.buffer > 0 && (h("div", { class: "progress-buffer-bar", style: {
+            } }, showStatusOnTop && (h("div", { class: `progress-status-header progress-status-header--${this.statusBarAlign}` }, this.renderStatusBarChip(true))), !this.statusBar && this.labelPosition === 'top' && this.showInfo && this.renderProgressInfo(), h("div", { class: "progress-line-trail", style: trailStyle, onMouseDown: this.handleInteraction, onTouchStart: this.handleInteraction }, this.statusBar && this.statusBarPosition === 'inside' && this.renderStatusBarChip(false), this.vitality && h("div", { class: "progress-vitality-pulse" }), this.renderTicks(), this.showBuffer && this.buffer > 0 && (h("div", { class: "progress-buffer-bar", style: {
                 [this.orientation === 'vertical' ? 'height' : 'width']: `${Math.min(this.buffer, 100)}%`,
                 [this.orientation === 'vertical' ? 'width' : 'height']: `${this.strokeWidth}px`,
                 background: `${strokeColor}33`,
@@ -371,7 +445,7 @@ export class Progress {
                 [this.orientation === 'vertical' ? 'height' : 'width']: `${((this.success.percent ?? 0) / this.animatedPercent) * 100}%`,
                 background: this.success.strokeColor || '#52c41a',
                 ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
-            } }))), this.peakMarker > 0 && (h("div", { class: "progress-peak-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${this.peakMarker}%` }, title: `Session Peak: ${this.peakMarker}%` })), this.milestones.map(milestone => (h("div", { class: "milestone-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${milestone.percent}%` }, title: milestone.label }, milestone.icon ? h("ui-icon", { name: milestone.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" }) : h("div", { class: "milestone-dot" }))))), this.multiProgress.length > 0 && this.renderMultiProgress(), this.labelPosition !== 'top' && this.showInfo && this.renderProgressInfo(), this.showTimeEstimate && this.estimatedTime > 0 && this.renderTimeEstimate(), this.showPauseButton && this.renderPauseButton()));
+            } }))), this.peakMarker > 0 && (h("div", { class: "progress-peak-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${this.peakMarker}%` }, title: `Session Peak: ${this.peakMarker}%` })), this.milestones.map(milestone => (h("div", { class: "milestone-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${milestone.percent}%` }, title: milestone.label }, milestone.icon ? h("ui-icon", { name: milestone.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" }) : h("div", { class: "milestone-dot" }))))), this.multiProgress.length > 0 && this.renderMultiProgress(), !this.statusBar && this.labelPosition !== 'top' && this.showInfo && this.renderProgressInfo(), this.showTimeEstimate && this.estimatedTime > 0 && this.renderTimeEstimate(), this.showPauseButton && this.renderPauseButton()));
     }
     renderMultiProgress() {
         return (h("div", { class: "multi-progress-container", style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' } }, this.multiProgress.map((prog) => (h("div", { class: "multi-progress-item", style: { display: 'flex', alignItems: 'center', gap: '12px' } }, h("div", { class: "multi-progress-bar-wrap", style: { flex: '1', height: `${this.strokeWidth}px`, background: this.trailColor, borderRadius: '4px', overflow: 'hidden' } }, h("div", { class: "multi-progress-bar", style: {
@@ -433,7 +507,7 @@ export class Progress {
         const isGradientProp = typeof this.strokeColor === 'object' && this.strokeColor !== null;
         const gradientObj2 = isGradientProp ? this.strokeColor : null;
         const hasGradient = this.gradient || isGradientProp;
-        return (h("div", { class: "progress-circle-wrapper", style: { width: `${size}px`, height: `${size}px` } }, h("svg", { width: size, height: size }, hasGradient && (h("defs", null, h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, h("stop", { offset: "0%", "stop-color": gradientObj2 ? (gradientObj2.from || strokeColor) : strokeColor }), h("stop", { offset: "100%", "stop-color": gradientObj2 ? (gradientObj2.to || '#52c41a') : (this.status === 'normal' ? '#69c0ff' : strokeColor) })))), h("path", { d: pathString, stroke: this.trailColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap }), h("path", { d: pathString, stroke: strokeColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap, "stroke-dasharray": circumference, "stroke-dashoffset": offset, class: {
+        return (h("div", { class: "progress-circle-wrapper", style: { width: `${size}px`, height: `${size}px` } }, h("svg", { width: size, height: size }, hasGradient && (h("defs", null, h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, h("stop", { offset: "0%", "stop-color": gradientObj2 ? (gradientObj2.from || strokeColor) : strokeColor }), h("stop", { offset: "100%", "stop-color": gradientObj2 ? (gradientObj2.to || '#52c41a') : (this.status === 'normal' ? '#69c0ff' : strokeColor) })))), h("path", { d: pathString, stroke: this.trailColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap }), h("path", { d: pathString, stroke: strokeColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap, "stroke-dasharray": circumference, "stroke-dashoffset": offset, style: { color: strokeColor }, class: {
                 'progress-circle-path': true,
                 'progress-indeterminate': this.indeterminate,
                 'progress-liquid': this.liquid
@@ -457,28 +531,35 @@ export class Progress {
         const text = this.dataLabels || this.format(roundedPercent);
         const infoStyle = this.percentageColor ? { color: this.percentageColor } : {};
         const iconEl = this.icon ? h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { marginRight: '6px' } }) : null;
-        if (this.status === 'success') {
-            return (h("span", { class: "progress-text", style: infoStyle }, iconEl || h("ui-icon", { name: "check-circle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        if (this.currentStatus === 'success' || this.currentStatus === 'completed') {
+            return (h("span", { class: "progress-text progress-text-success", style: infoStyle }, iconEl || h("ui-icon", { name: "check-circle", library: "fontawesome" }), this.labelPosition !== 'inside' && (this.dataLabels || (this.currentStatus === 'completed' ? 'Completed' : text))));
         }
-        if (this.status === 'exception' || this.status === 'danger') {
-            return (h("span", { class: "progress-text progress-text-exception", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-triangle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        if (this.currentStatus === 'exception' || this.currentStatus === 'danger' || this.currentStatus === 'interrupted') {
+            return (h("span", { class: "progress-text progress-text-exception", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-triangle", library: "fontawesome" }), this.labelPosition !== 'inside' && (this.dataLabels || (this.currentStatus === 'interrupted' ? 'Interrupted' : text))));
         }
-        if (this.status === 'warning') {
+        if (this.currentStatus === 'warning') {
             return (h("span", { class: "progress-text progress-text-warning", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-circle", library: "fontawesome" }), text));
         }
+        if (this.currentStatus === 'empty') {
+            return (h("span", { class: "progress-text progress-text-empty", style: infoStyle }, iconEl || h("ui-icon", { name: "circle", library: "fontawesome", style: { opacity: 0.4 } }), this.labelPosition !== 'inside' && (this.dataLabels || 'Empty')));
+        }
+        if (this.currentStatus === 'running') {
+            return (h("span", { class: "progress-text progress-text-running", style: infoStyle }, iconEl || h("ui-icon", { name: "sync", library: "fontawesome", class: "fa-spin", style: { color: '#1890ff' } }), this.labelPosition !== 'inside' && (this.dataLabels || `Running (${text})`)));
+        }
         return (h("span", { class: "progress-text", style: infoStyle }, iconEl, text));
     }
     render() {
         const progressClass = {
             'progress': true,
             [`progress-${this.type}`]: true,
-            'progress-active': this.status === 'active' || this.indeterminate,
+            'progress-active': this.status === 'active' || this.currentStatus === 'running' || this.indeterminate,
             [`progress-${this.size}`]: this.type !== 'line',
             'progress-indeterminate': this.indeterminate,
             'progress-liquid': this.liquid,
             'progress-glass': this.glass,
             'progress-glow': this.glow,
             'progress-skeleton': this.skeleton,
+            [`progress-${this.currentStatus}`]: true,
         };
         let content;
         if (this.steps > 0 && this.type === 'line') {
@@ -491,7 +572,7 @@ export class Progress {
             content = this.renderCircleProgress();
         }
         const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
-        return (h(Host, { key: '0f584282c7c54dc1e352dcd047f9393219ea05d7', role: "progressbar", "aria-valuenow": roundedPercent, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": this.dataLabels || `Progress: ${this.percent}%`, style: this.orientation === 'vertical' ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height } : {} }, h("div", { key: '7a81c6056d073cf9cdd90abf2e7748772f0f322d', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (h("svg", { key: '1bee402a754d87ab25395c92acde5edd76da64a2', style: { position: 'absolute', width: '0', height: '0' } }, h("filter", { key: 'bebea12167e23049848d62e1fd182958dc249f2b', id: "liquid-filter" }, h("feGaussianBlur", { key: 'a31af8c228fc7a4a9391b46f12a3e5a5a08ed6eb', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), h("feColorMatrix", { key: 'b4dddec3e0f1dfd172a3281e8c67897a89436387', in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), h("feBlend", { key: 'f5c08e7d756af6ae228c47115dffd9a4e32142c7', in: "SourceGraphic", in2: "goo" })))))));
+        return (h(Host, { key: '21dcb1b89582338f185767a4301e4cf435c1842c', role: "progressbar", "aria-valuenow": roundedPercent, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": this.dataLabels || `Progress: ${this.percent}%`, style: this.orientation === 'vertical' ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height } : {} }, h("div", { key: '7aebc6dc0cb2804300c171598c47699d8c8fabe8', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (h("svg", { key: '7a70f4821a0752d1106107e9fa9618cf2b4de889', style: { position: 'absolute', width: '0', height: '0' } }, h("filter", { key: 'a899fcbc62ef322086eee654f24d0bf8b1cf83a6', id: "liquid-filter" }, h("feGaussianBlur", { key: '5b8dc993e949a4cddd661d3b45b9c44fe25e4f4d', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), h("feColorMatrix", { key: '55da24d44b6cb35cd28e0f301d3c8316e3554e8d', in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), h("feBlend", { key: 'e59ec2eda298c0796be6b28a1b2afd9a6dadab63', in: "SourceGraphic", in2: "goo" })))))));
     }
     static get is() { return "ui-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -551,8 +632,8 @@ export class Progress {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'success' | 'exception' | 'normal' | 'active' | 'warning' | 'danger'",
-                    "resolved": "\"active\" | \"danger\" | \"exception\" | \"normal\" | \"success\" | \"warning\"",
+                    "original": "'success' | 'exception' | 'normal' | 'active' | 'warning' | 'danger' | 'empty' | 'running' | 'completed' | 'interrupted'",
+                    "resolved": "\"active\" | \"completed\" | \"danger\" | \"empty\" | \"exception\" | \"interrupted\" | \"normal\" | \"running\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -1259,6 +1340,84 @@ export class Progress {
                 "attribute": "glass",
                 "defaultValue": "false"
             },
+            "statusBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status-bar variant: shows a lifecycle label (Not Started / Running / Interrupted / Completed)\r\nabove the progress bar derived automatically from percent + status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-bar",
+                "defaultValue": "false"
+            },
+            "statusBarAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of the status badge inside the status bar header.\r\n'left' (default) \u2014 badge left, percent right.\r\n'center' \u2014 badge and percent centered together.\r\n'right' \u2014 badge right, percent left."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-bar-align",
+                "defaultValue": "'left'"
+            },
+            "statusBarPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inside' | 'top'",
+                    "resolved": "\"inside\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the status chip/badge in status-bar mode.\r\n'inside' (default) \u2014 inside the progress bar trail (requires minimum height of 32px).\r\n'top' \u2014 above the progress bar (allows smaller progress bar heights)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-bar-position",
+                "defaultValue": "'inside'"
+            },
+            "statusLabels": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{\r\n    notStarted?: string;\r\n    running?: string;\r\n    interrupted?: string;\r\n    completed?: string;\r\n  }",
+                    "resolved": "{ notStarted?: string; running?: string; interrupted?: string; completed?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text labels for each status-bar state.\r\nPass any subset to override \u2014 unset keys keep their defaults.\r\ne.g. { notStarted: 'Pending', running: 'In Progress', interrupted: 'Paused', completed: 'Done' }"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
             "glow": {
                 "type": "boolean",
                 "mutable": false,
@@ -1409,6 +1568,9 @@ export class Progress {
             }, {
                 "propName": "strokeColor",
                 "methodName": "handleStrokeColorChange"
+            }, {
+                "propName": "status",
+                "methodName": "handleStatusChange"
             }];
     }
 }

package/dist/collection/components/radio/radio.css

@@ -132,8 +132,8 @@
   overflow: hidden;
   --ui-radio-border: var(--border-strong, #94a3b8);
   --ui-radio-bg: var(--bg-primary, #ffffff);
-  --ui-radio-label: var(--label-color, var(--text-primary, #111827));
-  --ui-radio-description: var(--label-subtitle-color, var(--text-secondary, #6b7280));
+  --ui-radio-label: var(--label-color, inherit);
+  --ui-radio-description: var(--label-subtitle-color, inherit);
   --ui-radio-circle-hover: rgba(0, 0, 0, 0.05);
 }
 
@@ -155,7 +155,7 @@
   width: 100%;
   box-sizing: border-box;
   font-family: inherit;
-  color: var(--text-primary);
+  color: inherit;
 }
 .radio-container.radio-rtl {
   direction: rtl;

package/dist/collection/components/radio/radio.js

@@ -186,7 +186,7 @@ export class Radio {
             'radio-checked': this.checked,
             'radio-ripple': this.rippleEffect && !this.disabled,
         };
-        return (h("div", { key: '0c4ce7ac6764c4d375ba9fad698b92085fb210e8', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: 'cd53fbd547c5721b8f1cde8c291de8338cedc41e', class: "radio-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: 'fe2026a06d12c129b3eb17dd81ed9bc6f6b13938', class: radioClasses }, h("input", { key: 'd68ab326208dd78f6ba549343b68e770b9327332', type: "radio", class: "radio-input", checked: this.checked, disabled: this.disabled || this.skeleton, readonly: this.readonly, value: this.value, name: this.name, tabindex: this.radioTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: el => this.inputElement = el }), h("div", { key: '0d1088ea92be9fa9a6264921291e7deef5cddeb6', class: "radio-circle" }, h("div", { key: '7f86f494d8fba0f6bd19e377df69528be4772b21', class: "glow-layer" }), this.renderDot()), this.badge && !this.skeleton && h("span", { key: '91b0b95ccd42b008bfc3aecede34a72759885371', class: "radio-badge" }, this.badge), this.tooltip && !this.skeleton && (h("div", { key: '25103349c130ec435844598f0105161008bf683b', class: `radio-tooltip radio-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel(), this.skeleton && h("div", { key: '7022cb0f5cf4ca8c10e533265083eac0dfd3021d', class: "radio-skeleton-shimmer" })), (this.invalid || !this.internals.validity.valid) && (h("div", { key: 'b019b76af7c19c92e35dcf6349100f34b6a68a45', class: "radio-error-message", role: "alert" }, this.internals.validationMessage || 'Selection required'))));
+        return (h("div", { key: 'b54ecdd72f2dd25da0b654f53de87e122d893c5a', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: 'd8fa8d11513fc55e98988d64026bcfcd98a6935e', class: "radio-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: '88ebbd340c372a88c1303b3fd7658d50a5bccb7e', class: radioClasses }, h("input", { key: '7cb357282d3d6dbd096bf7d7e5e2283b3e06151e', type: "radio", class: "radio-input", checked: this.checked, disabled: this.disabled || this.skeleton, readonly: this.readonly, value: this.value, name: this.name, tabindex: this.radioTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: el => this.inputElement = el }), h("div", { key: 'b3aee957eb560fc767647972f771ba737062d079', class: "radio-circle" }, h("div", { key: '0ffe9c1f0d68e9d51c3a1a8a28f8c749c04599b6', class: "glow-layer" }), this.renderDot()), this.badge && !this.skeleton && h("span", { key: 'e50c2be805ac926c3e219a0e48150d672f6f19fc', class: "radio-badge" }, this.badge), this.tooltip && !this.skeleton && (h("div", { key: '7ab0f9af0f637b05d53bab4e07d4abf914f4f213', class: `radio-tooltip radio-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel(), this.skeleton && h("div", { key: '528ad8986ae65d7d6dc8bd23cb3789546ba6c2ee', class: "radio-skeleton-shimmer" })), (this.invalid || !this.internals.validity.valid) && (h("div", { key: '7e1e9296250290e022ca8003a1e35d2e1c403b72', class: "radio-error-message", role: "alert" }, this.internals.validationMessage || 'Selection required'))));
     }
     static get is() { return "ui-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable-panel/resizable-panel.js

@@ -439,7 +439,7 @@ export class AppResizablePanel {
             'resizable-dragging': this.isDragging,
             'resizable-animated': this.animated && !this.isDragging,
         };
-        return (h(Host, { key: '222dabdb3f919a430a8dc35008607dd9ad21f670' }, h("div", { key: '6fab04ac24283a3dc1be30ca97488639021e0c13', class: containerClasses, ref: el => this.containerRef = el }, this.internalPanels.map((panel, index) => (h("div", { key: panel.id, class: "panel-wrapper", style: {
+        return (h(Host, { key: 'e95db5c4b7d28becf543e44ab2d80a1fb5a34f5a' }, h("div", { key: 'c8c49f4e023ba66b1535447b567eebe685e9f464', class: containerClasses, ref: el => this.containerRef = el }, this.internalPanels.map((panel, index) => (h("div", { key: panel.id, class: "panel-wrapper", style: {
                 [this.direction === 'horizontal' ? 'width' : 'height']: panel.collapsed ? `${this.handleSize}px` : `${panel.size}%`,
             } }, h("div", { class: {
                 'resizable-panel': true,

package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.js

@@ -528,14 +528,14 @@ export class SmartLocationDropdown {
         const filtered = this.filteredOptions;
         const hasSelection = this.selectedIds.size > 0;
         const canCreate = this.allowCustomValue && !!this.searchQuery.trim() && filtered.length === 0;
-        return (h("div", { key: '0d1270c7b8941a54d23f12b336a40248127a9515', class: { 'location-dropdown': true, open: this.isOpen, disabled: this.disabled } }, h("div", { key: '454a4fb32bdfcbb31f61ab24f69dd720f1d7975c', class: "location-trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", tabIndex: this.disabled ? -1 : 0, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown }, h("span", { key: '06e96ca6b9ce142e1c6eb4145d75de7c6753d0aa', class: { 'trigger-text': true, placeholder: !hasSelection } }, this.getDisplayText()), h("div", { key: '75bf60390f1983473a30b6c7fa6906d7bd39a99d', class: "trigger-icons" }, hasSelection && this.clearable && !this.disabled && (h("ui-button", { key: '274b970b60c84e37ba60ef76a226d8dffd21f85b', class: "clear-btn", onButtonClick: this.clearSelection, "aria-label": "Clear selected locations", variant: "plain", icon: "x", iconLibrary: "lucide", iconOnly: true })), h("ui-icon", { key: '872eb5b33bb7c84ebdf68d0685af115d78b893ba', name: "chevron-down", library: "lucide", size: "16px", class: { arrow: true, open: this.isOpen } }))), this.renderSelectedChips(), this.isOpen && (h("div", { key: '5285b7a36ec106df13afbfde4bae0127567dd459', class: { menu: true, top: this.dropdownPosition === 'top' }, role: "listbox", ref: el => (this.menuElement = el), style: {
+        return (h("div", { key: 'b1807bf502b50ae9fc48efa846426ab643d6516d', class: { 'location-dropdown': true, open: this.isOpen, disabled: this.disabled } }, h("div", { key: 'de7b775e9b312bd39da8927975e588648b4ca809', class: "location-trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", tabIndex: this.disabled ? -1 : 0, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown }, h("span", { key: 'e608f40b0ef1251ae3f9c303338ff415eb31b0cd', class: { 'trigger-text': true, placeholder: !hasSelection } }, this.getDisplayText()), h("div", { key: 'afbfc578336c32718d974e0ca2b28df8ae1bae2f', class: "trigger-icons" }, hasSelection && this.clearable && !this.disabled && (h("ui-button", { key: '65ce58563ea6447785f79325425f410ccac696b5', class: "clear-btn", onButtonClick: this.clearSelection, "aria-label": "Clear selected locations", variant: "plain", icon: "x", iconLibrary: "lucide", iconOnly: true })), h("ui-icon", { key: 'c30d26150e745053e5c64c7747692dc0e16de079', name: "chevron-down", library: "lucide", size: "16px", class: { arrow: true, open: this.isOpen } }))), this.renderSelectedChips(), this.isOpen && (h("div", { key: '17e2bda731910b2eacdcfa94c40697cb8cad6792', class: { menu: true, top: this.dropdownPosition === 'top' }, role: "listbox", ref: el => (this.menuElement = el), style: {
                 maxHeight: `${this.maxHeight}px`,
                 left: `${this.menuLeft}px`,
                 width: `${this.menuWidth}px`,
                 position: 'fixed',
                 zIndex: '10020',
                 top: `${this.menuTop}px`,
-            } }, this.searchable && (h("div", { key: '96c9247325ad38fa7ad1378141a8de53fe23c062', class: "search-row" }, h("ui-input", { key: '16e6a0e35ae37de129b1812ecd7ed7c46c3b84c3', ref: el => (this.searchInputRef = el), class: "search-input", value: this.searchQuery, placeholder: this.searchPlaceholder, onInputChange: (e) => this.onSearchInput_Custom(e.detail), onKeyDown: this.handleKeyDown, variant: "plain" }))), this.loading && h("div", { key: '8be3bb6ff2b546d4b77dedea4efdced3cf456a73', class: "status loading" }, "Loading locations..."), !this.loading && this.loadError && h("div", { key: '2990bc4eb6413fc9ad02ec4214af9701f3ddb63f', class: "status error" }, this.loadError), !this.loading && filtered.length > 0 && (h("div", { key: 'cc1da47a2b1e0703c8f9cf3b12f66c53f4c72215', class: "options-list" }, filtered.map((option, index) => this.renderOption(option, index)))), !this.loading && filtered.length === 0 && !canCreate && h("div", { key: '74871de825014986333f513ab8a78eee94efffca', class: "status empty" }, "No locations found"), canCreate && (h("ui-button", { key: '0fd041bedf71502bea54a09d658669ccd3bcc68f', class: "create-btn", onButtonClick: () => this.createCustomLocation(this.searchQuery.trim()), variant: "plain", align: "start", fullWidth: true, icon: "plus", iconLibrary: "lucide", label: `Create "${this.searchQuery.trim()}"` })), (this.showFavorites || this.showRecent) && !this.searchQuery && (h("div", { key: '5a4c6ecc6768d6a6ee8b3731e4d12b845c936a8f', class: "footer-meta" }, this.showFavorites && h("span", { key: 'e2cac6f8adb895ba9f262be9924ea9a5619c95e3' }, "Favorites: ", this.favoriteIds.length), this.showRecent && h("span", { key: 'f541571f8f6dd69ce531f7a54cc8cd6d06b3d8a8' }, "Recent: ", this.recentIds.length)))))));
+            } }, this.searchable && (h("div", { key: '927ac16ca61d07d1e0d9acf9cc6712ccd5e3be8a', class: "search-row" }, h("ui-input", { key: '95af520eb196a47d11ac31489237314049532bc2', ref: el => (this.searchInputRef = el), class: "search-input", value: this.searchQuery, placeholder: this.searchPlaceholder, onInputChange: (e) => this.onSearchInput_Custom(e.detail), onKeyDown: this.handleKeyDown, variant: "plain" }))), this.loading && h("div", { key: 'c5b48b1d0f1e08353dc8def6b7b962c15918f724', class: "status loading" }, "Loading locations..."), !this.loading && this.loadError && h("div", { key: '3a8f50555d86a4cf07fd27b810fe9c74168cac0e', class: "status error" }, this.loadError), !this.loading && filtered.length > 0 && (h("div", { key: '07298b5d440946c7a6d11e3ebae2d3c28d16c467', class: "options-list" }, filtered.map((option, index) => this.renderOption(option, index)))), !this.loading && filtered.length === 0 && !canCreate && h("div", { key: 'a01eb5729544c38466b7c16de2fe6e11baba36e4', class: "status empty" }, "No locations found"), canCreate && (h("ui-button", { key: '06c249712c8bf168d522678abe6fd68ae4d25949', class: "create-btn", onButtonClick: () => this.createCustomLocation(this.searchQuery.trim()), variant: "plain", align: "start", fullWidth: true, icon: "plus", iconLibrary: "lucide", label: `Create "${this.searchQuery.trim()}"` })), (this.showFavorites || this.showRecent) && !this.searchQuery && (h("div", { key: '0cfe965844fa111cb8888b1392e3dcac8b35c51a', class: "footer-meta" }, this.showFavorites && h("span", { key: '0b5f1c8816ed31ab7cdc5988f1271a2c7b384372' }, "Favorites: ", this.favoriteIds.length), this.showRecent && h("span", { key: 'aec4a486adee16e6100efa773475fc03d8b2f155' }, "Recent: ", this.recentIds.length)))))));
     }
     static get is() { return "ui-smart-location-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/smart-stepper/smart-step.js

@@ -27,11 +27,11 @@ export class SmartStep {
      */
     disabled = false;
     render() {
-        return (h("div", { key: '7912868ea46545c73c98f85bc9d0802886f2ba53', class: "smart-step-wrapper" }, h("div", { key: '2637db22877a82f431cc2d73ed429ef4d71234b5', class: {
+        return (h("div", { key: 'a2c117d2cec46a6f1fdafab7cb152026a1c637be', class: "smart-step-wrapper" }, h("div", { key: '470c34c7b17ad9b6e829ebfb30e1b4c3848d1c09', class: {
                 'step-header': true,
                 'disabled': this.disabled,
                 [`status-${this.status}`]: true
-            } }, h("div", { key: 'fcc0061eec43b8d0e0d7061b0568d6347cb43f6f', class: "step-icon" }, this.icon ? (h("span", { class: "custom-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.2rem" }))) : h("span", { class: "step-number" })), h("div", { key: '4ae00fbeddc8142d1363af77403adb66e9a6a80c', class: "step-text" }, h("span", { key: '0a207e9a3e5c9f2bd3287e9ba9b98619002a19f6', class: "step-title" }, this.label), this.description && h("span", { key: '06b8af4ed304fdab44c356c89fbbacf119b96529', class: "step-desc" }, this.description))), h("div", { key: 'f73bc6bee24a8f0073cb965f85495bbaa7bbd904', class: "stepper-content" }, h("slot", { key: '834d661b9f7ec0a8263def69738de7b64f6e545d' }))));
+            } }, h("div", { key: '6a6cbddfd46581cbdb2e22ba9dfddad491faf93b', class: "step-icon" }, this.icon ? (h("span", { class: "custom-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.2rem" }))) : h("span", { class: "step-number" })), h("div", { key: '2d11b3d888e9cc500723d0be29a8c6fc580372b7', class: "step-text" }, h("span", { key: '8a13c5542cc413516b7a083e26330a34f7a43990', class: "step-title" }, this.label), this.description && h("span", { key: '1ad7e4e299a6d6faa338445a926279ec3d04c7b3', class: "step-desc" }, this.description))), h("div", { key: 'df61b0cb3ba51afbba28d4075c8e7a128616b74a', class: "stepper-content" }, h("slot", { key: '277c02deb6d5ee2c2ac992e3ea3da964cf8dd9e2' }))));
     }
     static get is() { return "smart-step"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/smart-stepper/smart-stepper.js

@@ -123,7 +123,7 @@ export class SmartStepper {
             `stepper-${this.orientation}`,
             `stepper-${this.size}`
         ].join(' ');
-        return (h("div", { key: '055f2373e201924afcb4c2038ff1bd6c0d096111', class: containerClasses }, h("div", { key: 'f0f5dbbb155ba61648a4633bff44548cd4cb28e3', class: "stepper-header", onClick: this.handleStepClick }, h("slot", { key: 'fa4ef01b0c1b248dd5ac90b8ab9bc7689b943caa' })), h("div", { key: '592f2c79d4916c14c1e7a5a3ffaad77a257a01a3', class: "stepper-content-area" }, h("slot", { key: '958a6697b165c1b0499ac1433476a8cccf14bf9f', name: "content" }))));
+        return (h("div", { key: '5243803a66e8bfae497796c6bf73d4f006fa35e4', class: containerClasses }, h("div", { key: '6a7b4c7d81107e2f42ededb0e598c18ad0c8966a', class: "stepper-header", onClick: this.handleStepClick }, h("slot", { key: 'dcec321fde59e2b21f49344fd1d105a822d2d9c4' })), h("div", { key: 'd9fff061e8c196a8eef547c036ba9c9a384d59d8', class: "stepper-content-area" }, h("slot", { key: 'a89db3104943e20880b5633732e801dfdcd70dff', name: "content" }))));
     }
     static get is() { return "ui-smart-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/snackbar/snackbar.js

@@ -951,7 +951,7 @@ export class Snackbar {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/speed-dial/speed-dial.js

@@ -739,7 +739,7 @@ export class SpeedDial {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/stack/stack.js

@@ -66,7 +66,7 @@ export class Stack {
         const allChildren = Array.from(this.el.children);
         // Update visibility after render to avoid layout thrashing
         requestAnimationFrame(() => this.updateChildrenVisibility(actualMax));
-        return (h(Host, { key: 'b4bb6771a1c77451d4942923c5d073e8a244364b', class: {
+        return (h(Host, { key: '6568eda1f5875356d720bc67a8c234f6f97effcf', class: {
                 'ui-stack': true,
                 [`stack-${this.direction}`]: true,
                 [`stack-wrap-${this.wrap}`]: true,
@@ -79,7 +79,7 @@ export class Stack {
                 'align-items': this.align,
                 'justify-content': this.justify,
                 'flex-wrap': this.wrap
-            } }, h("div", { key: '9da8fff23f86aa701e9924f551318b29f9af4cfb', class: "stack-container" }, h("slot", { key: '6525df2ac3797654bea059326ead5fe8a89e55ae' }), overflowCount > 0 && (h("div", { key: 'aa65e3619fad1f13b85b19c70b157ac96f559216', class: "stack-overflow-indicator", onClick: (e) => { e.stopPropagation(); this.toggleRoster(); }, onKeyDown: (e) => {
+            } }, h("div", { key: '3363f516615fadfd894b42961f94d83a7a254011', class: "stack-container" }, h("slot", { key: '5f2c8cb4d62229c4439858f5433f30ed78d9bd71' }), overflowCount > 0 && (h("div", { key: 'eb7614444d0beba127e9d1a9ca125265dbcd5e43', class: "stack-overflow-indicator", onClick: (e) => { e.stopPropagation(); this.toggleRoster(); }, onKeyDown: (e) => {
                 if (e.key === 'Enter')
                     this.toggleRoster();
             }, tabindex: "0", role: "button", title: `View ${overflowCount} more items` }, "+", overflowCount))), this.isRosterOpen && this.renderRoster(allChildren, this.childrenCount)));

package/dist/collection/components/step/step.js

@@ -14,7 +14,7 @@ export class Step {
     /** optional custom renderer - parent will call if present */
     renderContent;
     render() {
-        return (h("div", { key: '439655eeb3c34f1fb7a09232397787d8bb2edf9e', class: "ui-step-container", role: "presentation" }, h("div", { key: 'b9237abc63d6676e3e388c60bc189542eebc768e', class: "ui-step-slots-hidden", style: { display: 'none' } }, h("slot", { key: '84f2032dbf5c05170c1219e0ef81c40701460967', name: "icon" }), h("slot", { key: 'a7c22833c64c592f755bd31e8690d7d96e6da3d8', name: "title" }), h("slot", { key: 'fdb8aae3e821578d0cfc199247577c5c435445f5', name: "description" })), h("slot", { key: '09ffd6d687bf76e5692b20c9fa8238e460c09c9c' })));
+        return (h("div", { key: '34d10339a1b9505e53b2adb8059cfeee2bbb0841', class: "ui-step-container", role: "presentation" }, h("div", { key: 'adfe6db495ad914bb066963d5d01f89ec4c8b500', class: "ui-step-slots-hidden", style: { display: 'none' } }, h("slot", { key: 'f00c0378d9cb2233b917e714ff9c3b73687fb43c', name: "icon" }), h("slot", { key: 'c8fe113292f4181096a2254012cef1c5f2ce9239', name: "title" }), h("slot", { key: '933b9f3adda9b05fa55fad607db3838329c540ed', name: "description" })), h("slot", { key: '16fa7b618483d991cfab40c55bb6e3f42cf431c0' })));
     }
     static get is() { return "ui-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -306,8 +306,8 @@ export class UISwitch {
         return (h("div", { class: "switch-confirm-overlay", onClick: this.handleCancel }, h("div", { class: "switch-confirm-dialog", onClick: e => e.stopPropagation() }, h("div", { class: "confirm-message" }, this.confirmationMessage), h("div", { class: "confirm-actions" }, h("ui-button", { variant: "ghost", size: "sm", onClick: this.handleCancel, label: "Cancel" }), h("ui-button", { variant: "primary", size: "sm", onClick: this.handleConfirm, label: "Confirm" })))));
     }
     render() {
-        const labelElement = this.label && (h("span", { key: 'aaea5d41fe17902800129034edee86b1ba98d9e9', class: "switch-label" }, this.label, this.required && h("span", { key: '93e398287cfb42f1d43052d6f0492dc1cc1b7133', class: "switch-required" }, "*"), this.description && this.descriptionPosition === 'bottom' && (h("span", { key: '91cc70cec284734e944886bbf28deeafb161eec0', class: "switch-description-bottom" }, this.description))));
-        const sideDescription = this.description && this.descriptionPosition === 'side' && (h("span", { key: '5c6b858c2d9e135407a82a394f1472475bca1222', class: "switch-description-side" }, this.description));
+        const labelElement = this.label && (h("span", { key: '7ebf67ab54d6402ea0df0c4de0970d6cc2e43824', class: "switch-label" }, this.label, this.required && h("span", { key: '7044082ec79f25bd865e823bf0b4f8387dc18e11', class: "switch-required" }, "*"), this.description && this.descriptionPosition === 'bottom' && (h("span", { key: 'efe44feacd88bb77a6a8c128811610e7c9e45f16', class: "switch-description-bottom" }, this.description))));
+        const sideDescription = this.description && this.descriptionPosition === 'side' && (h("span", { key: '3fd19deb053caafb0b8482378067b1e0e7c6e93f', class: "switch-description-side" }, this.description));
         const trackStyle = {};
         if (this.gradient && this.gradientColors) {
             try {
@@ -322,7 +322,7 @@ export class UISwitch {
         if (this.width) {
             hostStyle['--switch-track-width'] = this.width;
         }
-        return (h(Host, { key: '41e4d34b8c2aa2ee57e25823ffc67ac5316ec3e6', style: hostStyle, class: {
+        return (h(Host, { key: '2452fea25ee064d76b1255e099143b7c0c9b22da', style: hostStyle, class: {
                 'switch-host': true,
                 'switch-disabled': this.disabled || this.loading,
                 'switch-readonly': this.readonly,
@@ -339,7 +339,7 @@ export class UISwitch {
                 [`switch-elevation-${this.elevation}`]: this.elevation > 0,
                 [`switch-color-${this.color}`]: true,
                 [`switch-${this.variant}`]: true,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '6684aba1b0aa8ebb37558a0c7aee00c0be7cb1e9', part: "container", class: {
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'fbf20bb14cc99bd32eb4a52df4eefa60480804c4', part: "container", class: {
                 'switch-container-outer': true,
                 [`switch-${this.size}`]: true,
                 [`switch-color-${this.color}`]: true,
@@ -358,7 +358,7 @@ export class UISwitch {
                 'switch-shaking': this.isShaking,
                 'switch-animate': this.enableAnimation,
                 'switch-indeterminate': this.indeterminate,
-            } }, h("label", { key: 'd8092db9b999f61d13ed28de07b51f0756b90203', part: "label", class: {
+            } }, h("label", { key: 'e089fc07a8a05b88b7281756e8720f42e4e39dee', part: "label", class: {
                 'switch-container': true,
                 [`switch-${this.size}`]: true,
                 [`switch-color-${this.color}`]: true,
@@ -367,19 +367,19 @@ export class UISwitch {
                 [`thumb-${this.thumbShape}`]: true,
                 'switch-label-left': this.labelPosition === 'left',
                 'switch-label-right': this.labelPosition === 'right' || !this.labelPosition,
-            } }, this.labelPosition === 'left' && labelElement, h("div", { key: '45e4aebf40ca6590d98871188c95fc0cb7167820', part: "wrapper", class: "switch-wrapper" }, h("input", { key: '2f4f3b4641e4f2f8e53debbabc06ddedb57118a7', type: "checkbox", class: "switch-input", checked: this.checked, disabled: this.disabled || this.loading, readonly: this.readonly, name: this.name, value: this.value, required: this.required, tabindex: this.switchTabIndex, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "aria-label": this.ariaLabel || this.label, "aria-checked": this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false'), "aria-disabled": (this.disabled || this.loading).toString(), "aria-invalid": this.invalid.toString(), ref: el => {
+            } }, this.labelPosition === 'left' && labelElement, h("div", { key: '3e1ca73f5839376c5effc92ad13686465dfe1c69', part: "wrapper", class: "switch-wrapper" }, h("input", { key: '620498359d8a26fdc9413e936b423ebc92e9e921', type: "checkbox", class: "switch-input", checked: this.checked, disabled: this.disabled || this.loading, readonly: this.readonly, name: this.name, value: this.value, required: this.required, tabindex: this.switchTabIndex, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "aria-label": this.ariaLabel || this.label, "aria-checked": this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false'), "aria-disabled": (this.disabled || this.loading).toString(), "aria-invalid": this.invalid.toString(), ref: el => {
                 if (el && this.indeterminate)
                     el.indeterminate = true;
-            } }), h("div", { key: 'affc51e292c88c6eca57e14ea23ef57c88ef1719', part: "track", class: {
+            } }), h("div", { key: 'ed2db623b8d85ec19ec08b04d49f32ccbd22c2ca', part: "track", class: {
                 'switch-track': true,
                 'switch-track-checked': this.checked,
                 'switch-track-disabled': this.disabled || this.loading,
                 'switch-gradient': this.gradient,
-            }, style: trackStyle }, this.renderTrackText(), h("div", { key: 'be816a97508c3ec53b08a9436079e7475017c503', part: "thumb", class: {
+            }, style: trackStyle }, this.renderTrackText(), h("div", { key: 'f1fb7ac21b764239756664271a156a484d90ae71', part: "thumb", class: {
                 'switch-thumb': true,
                 'switch-thumb-checked': this.checked,
                 'switch-thumb-loading': this.loading,
-            } }, this.getIcon()), this.showRipple && h("div", { key: 'abc8476dd3e164ac6397443dfe46f89c244a8bdb', class: "switch-ripple" }), this.loading && h("div", { key: '049d77febd86e72fb513f4c8ba9012c31b0c55a9', class: "switch-loading-overlay" }))), this.labelPosition === 'right' && labelElement, sideDescription, this.renderSuccessFeedback()), this.renderHelperText(), this.renderTooltip()), this.renderConfirmDialog()));
+            } }, this.getIcon()), this.showRipple && h("div", { key: '12e603dc7715a81be1b49e10f3ff08ecd95d5a25', class: "switch-ripple" }), this.loading && h("div", { key: 'c09738abdd1ee94b9fd7ccb69569ab8b432425ed', class: "switch-loading-overlay" }))), this.labelPosition === 'right' && labelElement, sideDescription, this.renderSuccessFeedback()), this.renderHelperText(), this.renderTooltip()), this.renderConfirmDialog()));
     }
     static get is() { return "ui-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -554,7 +554,7 @@ export class UISwitch {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/tag-group/tag-group.js

@@ -371,11 +371,11 @@ export class TagGroup {
         const isEmpty = allTags.length === 0;
         const noResults = allTags.length > 0 && visibleTags.length === 0;
         const showInlineInput = (this.searchable || this.creatable) && !this.readOnly;
-        return (h(Host, { key: '100edcd7c662a814b0f9fb61726e2582e794a228' }, h("div", { key: '4c67c1ca95250f7b86aa920806a9c610fd177e5b', class: {
+        return (h(Host, { key: 'a27c92c78b6c9072b966c299c67ce1677ee9e036' }, h("div", { key: 'f043228fbbe2f79c2800384c2dacaa1cb0148505', class: {
                 'tag-group-container': true,
                 'is-readonly': this.readOnly,
                 'is-empty': isEmpty
-            } }, h("ui-stack", { key: '80cc96c4c1106e7627160f5396443f9f76ff05d5', spacing: this.spacing, overlap: this.overlap, max: this.isExpanded ? 0 : this.max, wrap: "wrap" }, h("slot", { key: '4d6a8877bc1aad8548782ca3eb79d55bd620a3b7' }), showInlineInput && (h("ui-input", { key: '1097f155dbea020ea979f38ad1557113d5f535f8', type: "text", class: "tag-group-inline-input", placeholder: isEmpty ? this.placeholder : '', value: this.searchQuery, onInputChange: this.handleSearch, onInputKeydown: this.handleAddTag, size: "sm", variant: "borderless", hideBorder: true, fullWidth: true }))), noResults && (h("div", { key: '887770e92e8f74e0c2299b082123aa99f0a8e973', class: "tag-group-empty no-results" }, h("span", { key: '0b99fe5f1f8f1a8e0546d6ef986e4868513f0c98' }, "No tags match \"", this.searchQuery, "\""))) || (isEmpty && this.readOnly && (h("div", { key: 'af1db7772425a2792d52641b9b6a0850a236d4dd', class: "tag-group-empty" }, h("ui-icon", { key: 'c436b83d899bddf9c606cb767b97cbd5485d4086', name: "tag", library: "lucide", size: "1.4em" }), h("span", { key: '22a6243817d886e23b529ead4366bcf81b2fe057' }, "No items assigned")))), this.collapsible && canShowExpand && (h("ui-button", { key: 'bf5f9ce800276a0c6294d48c9817b3b342b09a0c', variant: "ghost", size: "sm", class: "tag-group-overflow-toggle", onClick: this.toggleExpand, label: this.isExpanded ? 'Show less' : `View all ${allTags.length} items` })))));
+            } }, h("ui-stack", { key: 'ca9b9a02f7650193b1633fc4a1b0c5c37e51229a', spacing: this.spacing, overlap: this.overlap, max: this.isExpanded ? 0 : this.max, wrap: "wrap" }, h("slot", { key: 'd764e67e7dc971c7949d24db226ab9154a657e27' }), showInlineInput && (h("ui-input", { key: '271591fa4b6bdca9aa879a0179c87018bcd744fc', type: "text", class: "tag-group-inline-input", placeholder: isEmpty ? this.placeholder : '', value: this.searchQuery, onInputChange: this.handleSearch, onInputKeydown: this.handleAddTag, size: "sm", variant: "borderless", hideBorder: true, fullWidth: true }))), noResults && (h("div", { key: '32a338d6978df6192b25a0e98f27079aa3b39ef9', class: "tag-group-empty no-results" }, h("span", { key: 'ce1d744f56bbd0c85eab6e9c458fade4c1b12fd1' }, "No tags match \"", this.searchQuery, "\""))) || (isEmpty && this.readOnly && (h("div", { key: '306938778dae4c4c1890278a67a1df651850792b', class: "tag-group-empty" }, h("ui-icon", { key: 'b0d025b5476d3895ff968b72eb06d5afff79b870', name: "tag", library: "lucide", size: "1.4em" }), h("span", { key: '52debfaff2c840d1a8c56119f81ec22380082392' }, "No items assigned")))), this.collapsible && canShowExpand && (h("ui-button", { key: 'a689ec4aa7f4536f0babc1edf0edeae22a151630', variant: "ghost", size: "sm", class: "tag-group-overflow-toggle", onClick: this.toggleExpand, label: this.isExpanded ? 'Show less' : `View all ${allTags.length} items` })))));
     }
     static get is() { return "ui-tag-group"; }
     static get encapsulation() { return "shadow"; }