atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/progress/progress.css

@@ -24,6 +24,28 @@
 
 :host {
   display: block;
+  --progress-surface: var(--bg-primary, #ffffff);
+  --progress-surface-muted: var(--bg-secondary, #f8fafc);
+  --progress-text: var(--text-primary, #0f172a);
+  --progress-circle-label-color: var(--text-primary, #0f172a);
+  --progress-circle-label-shadow: none;
+  --progress-text-muted: var(--text-secondary, #475569);
+  --progress-border: var(--border-subtle, #e2e8f0);
+  --progress-trail-color: var(--bg-tertiary, #e2e8f0);
+  --progress-status-surface: color-mix(in srgb, var(--progress-surface) 84%, var(--progress-surface-muted) 16%);
+  --progress-chip-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
+  --progress-status-not-started-bg: color-mix(in srgb, var(--progress-surface-muted) 92%, transparent);
+  --progress-status-not-started-text: var(--progress-text-muted);
+  --progress-status-not-started-border: color-mix(in srgb, var(--progress-border) 90%, transparent);
+  --progress-status-running-bg: rgba(var(--color-primary-rgb, 24, 144, 255), 0.12);
+  --progress-status-running-text: var(--color-primary, #1d4ed8);
+  --progress-status-running-border: rgba(var(--color-primary-rgb, 24, 144, 255), 0.24);
+  --progress-status-interrupted-bg: rgba(var(--color-warning-rgb, 245, 158, 11), 0.14);
+  --progress-status-interrupted-text: var(--color-warning, #b45309);
+  --progress-status-interrupted-border: rgba(var(--color-warning-rgb, 245, 158, 11), 0.28);
+  --progress-status-completed-bg: rgba(var(--color-success-rgb, 16, 185, 129), 0.12);
+  --progress-status-completed-text: var(--color-success, #15803d);
+  --progress-status-completed-border: rgba(var(--color-success-rgb, 16, 185, 129), 0.24);
 }
 :host * {
   box-sizing: border-box;
@@ -200,10 +222,48 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 16px);
+  max-width: calc(100% - 16px);
   text-align: center;
+  line-height: 1.2;
   font-size: 24px;
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--progress-circle-label-color);
+  text-shadow: var(--progress-circle-label-shadow);
+  pointer-events: none;
+}
+.progress-circle-text .progress-text,
+.progress-circle-text .progress-text-success,
+.progress-circle-text .progress-text-running,
+.progress-circle-text .progress-text-warning,
+.progress-circle-text .progress-text-exception,
+.progress-circle-text .progress-text-empty,
+.progress-circle-text .progress-text i,
+.progress-circle-text .progress-text-success i,
+.progress-circle-text .progress-text-running i,
+.progress-circle-text .progress-text-warning i,
+.progress-circle-text .progress-text-exception i,
+.progress-circle-text .progress-text-empty i,
+.progress-circle-text .progress-text ui-icon {
+  color: inherit !important;
+}
+.progress-circle-text .progress-text-success ui-icon,
+.progress-circle-text .progress-text-running ui-icon,
+.progress-circle-text .progress-text-warning ui-icon,
+.progress-circle-text .progress-text-exception ui-icon,
+.progress-circle-text .progress-text-empty ui-icon {
+  color: inherit !important;
+}
+.progress-circle-text .progress-text {
+  min-width: 0;
+  max-width: 100%;
+  justify-content: center;
+  text-align: center;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
 }
 
 .progress-sm .progress-circle-text {
@@ -212,7 +272,7 @@
 
 .progress-text {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--progress-text-muted);
   white-space: nowrap;
   min-width: 32px;
   text-align: right;
@@ -226,8 +286,11 @@
   vertical-align: middle;
 }
 
-.progress-circle .progress-text {
+.progress-circle .progress-text,
+.progress-dashboard .progress-text {
   text-align: center;
+  justify-content: center;
+  min-width: 0;
 }
 
 .progress-text i {
@@ -253,30 +316,34 @@
 }
 
 .progress-text-empty {
-  color: var(--color-neutral, #8c8c8c) !important;
+  color: var(--progress-text-muted) !important;
 }
-.progress-text-empty i, .progress-text-empty ui-icon {
-  color: var(--color-neutral, #8c8c8c) !important;
+.progress-text-empty i,
+.progress-text-empty ui-icon {
+  color: var(--progress-text-muted) !important;
 }
 
 .progress-text-running {
   color: var(--color-primary, #1890ff) !important;
 }
-.progress-text-running i, .progress-text-running ui-icon {
+.progress-text-running i,
+.progress-text-running ui-icon {
   color: var(--color-primary, #1890ff) !important;
 }
 
 .progress-text-success {
   color: var(--color-success, #52c41a) !important;
 }
-.progress-text-success i, .progress-text-success ui-icon {
+.progress-text-success i,
+.progress-text-success ui-icon {
   color: var(--color-success, #52c41a) !important;
 }
 
 .progress-text-exception {
   color: var(--color-danger, #ff4d4f) !important;
 }
-.progress-text-exception i, .progress-text-exception ui-icon {
+.progress-text-exception i,
+.progress-text-exception ui-icon {
   color: var(--color-danger, #ff4d4f) !important;
 }
 
@@ -373,13 +440,13 @@
   }
 }
 .progress-glass .progress-line-trail {
-  background: rgba(255, 255, 255, 0.1) !important;
+  background: rgba(128, 128, 128, 0.15) !important;
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(128, 128, 128, 0.2);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 .progress-glass .progress-circle-wrapper path:first-child {
-  stroke: rgba(255, 255, 255, 0.2) !important;
+  stroke: rgba(128, 128, 128, 0.2) !important;
   filter: blur(1px);
 }
 
@@ -414,15 +481,13 @@
   filter: drop-shadow(0 0 6px rgba(24, 144, 255, 0.45)) !important;
 }
 
-.progress-industrial {
-  mask-size: 16px 100%;
-  mask-image: linear-gradient(to right, var(--text-primary, #000) 70%, transparent 70%);
+.progress-industrial .progress-line-trail {
+  mask-image: repeating-linear-gradient(to right, var(--text-primary, #000) 0, var(--text-primary, #000) 11px, transparent 11px, transparent 16px);
 }
-.progress-orient-vertical .progress-industrial {
-  mask-size: 100% 16px;
-  mask-image: linear-gradient(to top, var(--text-primary, #000) 70%, transparent 70%);
+.progress-orient-vertical .progress-industrial .progress-line-trail {
+  mask-image: repeating-linear-gradient(to top, var(--text-primary, #000) 0, var(--text-primary, #000) 11px, transparent 11px, transparent 16px);
 }
-.progress-industrial {
+.progress-industrial .progress-line-trail {
   box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -580,6 +645,7 @@
 .multi-progress-label {
   letter-spacing: 0.025em;
   text-transform: uppercase;
+  color: var(--progress-text-muted);
 }
 
 .time-estimate {
@@ -681,7 +747,7 @@
   padding: 4px 10px;
   border-radius: 999px;
   white-space: nowrap;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
+  box-shadow: var(--progress-chip-shadow);
   backdrop-filter: blur(4px);
   pointer-events: none;
   user-select: none;
@@ -690,27 +756,27 @@
   font-size: 11px;
 }
 .progress-status-chip--not-started {
-  background: rgba(241, 245, 249, 0.93);
-  color: #475569;
-  border: 1px solid #e2e8f0;
+  background: var(--progress-status-not-started-bg);
+  color: var(--progress-status-not-started-text);
+  border: 1px solid var(--progress-status-not-started-border);
 }
 .progress-status-chip--running {
-  background: rgba(239, 246, 255, 0.93);
-  color: #1d4ed8;
-  border: 1px solid #bfdbfe;
+  background: var(--progress-status-running-bg);
+  color: var(--progress-status-running-text);
+  border: 1px solid var(--progress-status-running-border);
 }
 .progress-status-chip--running ui-icon {
   animation: progress-spin 1s linear infinite;
 }
 .progress-status-chip--interrupted {
-  background: rgba(255, 251, 235, 0.93);
-  color: #b45309;
-  border: 1px solid #fde68a;
+  background: var(--progress-status-interrupted-bg);
+  color: var(--progress-status-interrupted-text);
+  border: 1px solid var(--progress-status-interrupted-border);
 }
 .progress-status-chip--completed {
-  background: rgba(240, 253, 244, 0.93);
-  color: #15803d;
-  border: 1px solid #bbf7d0;
+  background: var(--progress-status-completed-bg);
+  color: var(--progress-status-completed-text);
+  border: 1px solid var(--progress-status-completed-border);
 }
 
 @keyframes progress-spin {
@@ -720,4 +786,82 @@
   to {
     transform: rotate(360deg);
   }
+}
+/* Dark Mode Overrides */
+:host-context(.dark),
+:host-context(.dark-theme),
+:host-context([data-theme=dark]),
+:host(.dark-theme),
+:host(.dark),
+:host([data-theme=dark]) {
+  --progress-circle-label-color: var(--text-primary, #f8fafc);
+  --progress-circle-label-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
+}
+:host-context(.dark) .progress-circle-text,
+:host-context(.dark-theme) .progress-circle-text,
+:host-context([data-theme=dark]) .progress-circle-text,
+:host(.dark-theme) .progress-circle-text,
+:host(.dark) .progress-circle-text,
+:host([data-theme=dark]) .progress-circle-text {
+  color: var(--text-primary, #f8fafc);
+}
+:host-context(.dark) .progress-text,
+:host-context(.dark-theme) .progress-text,
+:host-context([data-theme=dark]) .progress-text,
+:host(.dark-theme) .progress-text,
+:host(.dark) .progress-text,
+:host([data-theme=dark]) .progress-text {
+  color: var(--text-secondary, #cbd5e1);
+}
+:host-context(.dark) .multi-progress-label,
+:host-context(.dark-theme) .multi-progress-label,
+:host-context([data-theme=dark]) .multi-progress-label,
+:host(.dark-theme) .multi-progress-label,
+:host(.dark) .multi-progress-label,
+:host([data-theme=dark]) .multi-progress-label {
+  color: var(--text-secondary, #cbd5e1);
+}
+:host-context(.dark) .progress-text-empty,
+:host-context(.dark) .progress-text-empty i,
+:host-context(.dark) .progress-text-empty ui-icon,
+:host-context(.dark-theme) .progress-text-empty,
+:host-context(.dark-theme) .progress-text-empty i,
+:host-context(.dark-theme) .progress-text-empty ui-icon,
+:host-context([data-theme=dark]) .progress-text-empty,
+:host-context([data-theme=dark]) .progress-text-empty i,
+:host-context([data-theme=dark]) .progress-text-empty ui-icon,
+:host(.dark-theme) .progress-text-empty,
+:host(.dark-theme) .progress-text-empty i,
+:host(.dark-theme) .progress-text-empty ui-icon,
+:host(.dark) .progress-text-empty,
+:host(.dark) .progress-text-empty i,
+:host(.dark) .progress-text-empty ui-icon,
+:host([data-theme=dark]) .progress-text-empty,
+:host([data-theme=dark]) .progress-text-empty i,
+:host([data-theme=dark]) .progress-text-empty ui-icon {
+  color: var(--text-secondary, #94a3b8) !important;
+}
+:host-context(.dark) .time-estimate,
+:host-context(.dark-theme) .time-estimate,
+:host-context([data-theme=dark]) .time-estimate,
+:host(.dark-theme) .time-estimate,
+:host(.dark) .time-estimate,
+:host([data-theme=dark]) .time-estimate {
+  color: var(--text-secondary, #94a3b8);
+}
+:host-context(.dark) .progress-line-trail,
+:host-context(.dark-theme) .progress-line-trail,
+:host-context([data-theme=dark]) .progress-line-trail,
+:host(.dark-theme) .progress-line-trail,
+:host(.dark) .progress-line-trail,
+:host([data-theme=dark]) .progress-line-trail {
+  background: var(--bg-tertiary, #334155);
+}
+:host-context(.dark) .multi-progress-bar-wrap,
+:host-context(.dark-theme) .multi-progress-bar-wrap,
+:host-context([data-theme=dark]) .multi-progress-bar-wrap,
+:host(.dark-theme) .multi-progress-bar-wrap,
+:host(.dark) .multi-progress-bar-wrap,
+:host([data-theme=dark]) .multi-progress-bar-wrap {
+  background: var(--bg-tertiary, #334155) !important;
 }

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
      */
@@ -195,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;
     /**
@@ -205,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 {
@@ -227,6 +236,33 @@ export class Progress {
             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;
@@ -380,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;
@@ -420,7 +466,7 @@ export class Progress {
                 ? (typeof this.height === 'number' ? `${this.height}px` : this.height)
                 : (typeof this.width === 'number' ? `${this.width}px` : this.width),
             borderRadius: this.strokeLinecap === 'round' ? `${effectiveStrokeWidth}px` : '0',
-            background: this.trailColor,
+            background: trailColor,
             cursor: this.interactive ? 'pointer' : 'default',
             flex: showStatusOnTop ? 'none' : '1'
         };
@@ -448,12 +494,13 @@ export class Progress {
             } }))), 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);
@@ -507,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, style: { color: strokeColor }, 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;
@@ -572,7 +629,7 @@ export class Progress {
             content = this.renderCircleProgress();
         }
         const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
-        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" })))))));
+        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"; }
@@ -706,7 +763,7 @@ export class Progress {
                 "setter": false,
                 "reflect": false,
                 "attribute": "trail-color",
-                "defaultValue": "'#f0f0f0'"
+                "defaultValue": "''"
             },
             "gradient": {
                 "type": "boolean",
@@ -1539,6 +1596,7 @@ export class Progress {
             "currentStatus": {},
             "animatedPercent": {},
             "isDragging": {},
+            "isDarkTheme": {},
             "gradientId": {}
         };
     }

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

@@ -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 {

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: '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'))));
+        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",