atomicuilibrary 0.0.1 → 0.1.3

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class Progress {
+    themeObserver;
     /**
      * Type of progress
      */
@@ -24,7 +25,7 @@ export class Progress {
     /**
      * Color of unfilled part
      */
-    trailColor = '#f0f0f0';
+    trailColor = '';
     /**
      * Enable automatic gradient based on status or strokeColor
      */
@@ -149,6 +150,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
      */
@@ -171,6 +196,7 @@ export class Progress {
     ticks = 0;
     animatedPercent = 0;
     isDragging = false;
+    isDarkTheme = false;
     gradientId = `ui-progress-gradient-${Math.random().toString(36).substr(2, 9)}`;
     el;
     /**
@@ -181,6 +207,13 @@ export class Progress {
         this.animatedPercent = this.percent;
         this.currentStatus = this.status;
         this.normalizeProps();
+        this.syncThemeMode();
+    }
+    componentDidLoad() {
+        this.setupThemeObserver();
+    }
+    disconnectedCallback() {
+        this.themeObserver?.disconnect();
     }
     normalizeProps() {
         try {
@@ -196,11 +229,40 @@ 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);
         }
     }
+    setupThemeObserver() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.themeObserver?.disconnect();
+        this.themeObserver = new MutationObserver(() => {
+            this.syncThemeMode();
+        });
+        const observerConfig = {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme'],
+        };
+        this.themeObserver.observe(document.documentElement, observerConfig);
+        if (document.body) {
+            this.themeObserver.observe(document.body, observerConfig);
+        }
+        if (this.el.parentElement) {
+            this.themeObserver.observe(this.el.parentElement, observerConfig);
+        }
+    }
+    syncThemeMode() {
+        const host = this.el;
+        const darkThemeSelector = '[data-theme="dark"], .dark, .dark-theme';
+        const closestDarkAncestor = host?.closest(darkThemeSelector);
+        const htmlIsDark = document.documentElement.matches(darkThemeSelector);
+        const bodyIsDark = !!document.body && document.body.matches(darkThemeSelector);
+        this.isDarkTheme = !!closestDarkAncestor || htmlIsDark || bodyIsDark;
+    }
     handlePercentChange(newPercent) {
         if (newPercent > this.peakMarker) {
             this.peakMarker = newPercent;
@@ -211,6 +273,9 @@ export class Progress {
     handleStrokeColorChange() {
         this.normalizeProps();
     }
+    handleStatusChange(newStatus) {
+        this.currentStatus = newStatus;
+    }
     applyThresholds(val) {
         if (!this.thresholds.length)
             return;
@@ -294,16 +359,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})`;
@@ -313,8 +416,18 @@ export class Progress {
         }
         return '#1890ff';
     }
+    getTrailColor() {
+        if (typeof this.trailColor === 'string' && this.trailColor.trim().length > 0) {
+            return this.trailColor;
+        }
+        if (this.statusBar) {
+            return 'var(--progress-status-surface, var(--progress-trail-color, var(--bg-secondary, #f1f5f9)))';
+        }
+        return 'var(--progress-trail-color, var(--bg-tertiary, #e2e8f0))';
+    }
     renderLineProgress() {
         const strokeColor = this.getStrokeColor();
+        const trailColor = this.getTrailColor();
         const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
         let backgroundStyle = strokeColor;
         const isGradientProp = typeof this.strokeColor === 'object' && this.strokeColor !== null;
@@ -335,27 +448,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',
-            background: this.trailColor,
+            borderRadius: this.strokeLinecap === 'round' ? `${effectiveStrokeWidth}px` : '0',
+            background: 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,15 +491,16 @@ 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: {
+        const trailColor = this.getTrailColor();
+        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: trailColor, borderRadius: '4px', overflow: 'hidden' } }, h("div", { class: "multi-progress-bar", style: {
                 width: `${prog.percent}%`,
                 background: prog.color || this.getStrokeColor(),
                 height: '100%',
                 transition: 'width 0.5s ease'
-            } })), prog.label && h("span", { class: "multi-progress-label", style: { fontSize: '11px', fontWeight: '700', color: '#64748b' } }, prog.label))))));
+            } })), prog.label && h("span", { class: "multi-progress-label", style: { fontSize: '11px', fontWeight: '700' } }, prog.label))))));
     }
     renderTimeEstimate() {
         const minutes = Math.floor(this.estimatedTime / 60);
@@ -433,11 +554,21 @@ 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: {
+        const circleLabelColor = this.isDarkTheme ? '#ffffff' : '#000000';
+        const circleLabelShadow = this.isDarkTheme ? '0 1px 2px rgba(15, 23, 42, 0.55)' : 'none';
+        return (h("div", { class: "progress-circle-wrapper", style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                '--progress-circle-label-color': circleLabelColor,
+                '--progress-circle-label-shadow': circleLabelShadow,
+            } }, 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
-            } })), this.showInfo && (h("div", { class: "progress-circle-text" }, iconEl, this.renderProgressInfo()))));
+            } })), this.showInfo && (h("div", { class: "progress-circle-text", style: {
+                color: circleLabelColor,
+                textShadow: circleLabelShadow,
+            } }, iconEl, this.renderProgressInfo()))));
     }
     getCirclePath(cx, cy, radius, gapDegree, rotation) {
         const gapRad = (gapDegree * Math.PI) / 180;
@@ -457,28 +588,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 +629,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: '707d27a2cea5d03dcadd12448e1cb618f32e956b', 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: 'cc1721fbe6b18ae128cae17afd926c3fee09da83', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (h("svg", { key: 'f6ef9f72eebaa4ca34ac9fc3692ec0655aabb1a9', style: { position: 'absolute', width: '0', height: '0' } }, h("filter", { key: 'a452fc5c65e180b97ddd07bde94280123c28fa49', id: "liquid-filter" }, h("feGaussianBlur", { key: 'ed16a5c601664b2fa99bba8d08efb4360cad5fa6', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), h("feColorMatrix", { key: 'd9f249633f95de8be325c85ffd09c7d35d39e3e6', 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: 'fd21fbfc70afae8e47a8a04c407d52203504be43', in: "SourceGraphic", in2: "goo" })))))));
     }
     static get is() { return "ui-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -551,8 +689,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,
@@ -625,7 +763,7 @@ export class Progress {
                 "setter": false,
                 "reflect": false,
                 "attribute": "trail-color",
-                "defaultValue": "'#f0f0f0'"
+                "defaultValue": "''"
             },
             "gradient": {
                 "type": "boolean",
@@ -1259,6 +1397,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,
@@ -1380,6 +1596,7 @@ export class Progress {
             "currentStatus": {},
             "animatedPercent": {},
             "isDragging": {},
+            "isDarkTheme": {},
             "gradientId": {}
         };
     }
@@ -1409,6 +1626,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);
 }
 
@@ -147,6 +147,8 @@
   --ui-radio-border: var(--border-default, #64748b);
   --ui-radio-bg: var(--bg-secondary, #111827);
   --ui-radio-circle-hover: rgba(255, 255, 255, 0.05);
+  --ui-radio-label: var(--label-color, #f1f5f9);
+  --ui-radio-description: var(--label-subtitle-color, #cbd5e1);
 }
 
 .radio-container {
@@ -155,7 +157,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: '3abf98f57fcc73d239e1139500693581f76cb5af', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: '1996220a75aed7b29913bffe6ab70fe132702d07', class: "radio-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: '333a70165b3fcc79587fb722386c1c16ac1ae10c', class: radioClasses }, h("input", { key: 'e314964bafbb1db4f06a1b322ff211a070c50c23', 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: 'c1b86631f08cf92e75783527d79b2cff3505ed37', class: "radio-circle" }, h("div", { key: 'b4da276c391006054977bf87ad772df9d97888a8', class: "glow-layer" }), this.renderDot()), this.badge && !this.skeleton && h("span", { key: '088b7d455d8720ea4686b1c8f7395da7add5650c', class: "radio-badge" }, this.badge), this.tooltip && !this.skeleton && (h("div", { key: 'be89fae1312be5703e3d74f128da5281e8a93065', class: `radio-tooltip radio-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel(), this.skeleton && h("div", { key: '9309804190940eef047ac4e349f4cd19dab62861', class: "radio-skeleton-shimmer" })), (this.invalid || !this.internals.validity.valid) && (h("div", { key: '83bde20ce3a0c825c3f7bfe58a963272df6ade2f', class: "radio-error-message", role: "alert" }, this.internals.validationMessage || 'Selection required'))));
     }
     static get is() { return "ui-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -500,7 +500,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",