atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/skeleton/skeleton-loader.css

@@ -24,16 +24,19 @@
 }
 
 :host {
-  /* Default mapping for Light themes: darker base (tertiary), lighter shimmer (secondary) */
-  --skeleton-bg: var(--skeleton-loader-bg, var(--bg-tertiary, #e2e8f0));
-  --skeleton-wave-bg: var(--skeleton-loader-wave-bg, var(--bg-secondary, #f3f4f6));
+  /* High contrast fallbacks for light themes - rich slate gray base with sharp white sweep */
+  --skeleton-bg: #9ca6b3;
+  --skeleton-wave-bg: #ffffff;
+  /* Dynamic mapping for Light themes: blend in 42% slate-600 to give deep, highly visible base contrast */
+  --skeleton-bg: var(--skeleton-loader-bg, color-mix(in srgb, var(--bg-tertiary, #e2e8f0) 58%, #475569 42%));
+  --skeleton-wave-bg: var(--skeleton-loader-wave-bg, #ffffff);
   --skeleton-border-radius: var(--skeleton-loader-border-radius, 4px);
   --skeleton-progress-bar-bg: var(--skeleton-loader-progress-bar-bg, var(--bg-primary, #ffffff));
   --skeleton-focus-ring: var(--skeleton-loader-focus-ring, var(--color-primary, #10b981));
   --skeleton-focus-shadow: var(--skeleton-loader-focus-shadow, #dbeafe);
 }
 
-/* Reverse mapping for Dark themes: darker base (secondary), lighter shimmer (tertiary) */
+/* Reverse mapping for Dark themes: boost visibility and contrast dynamically */
 :host-context([data-theme=dark]),
 :host-context([data-theme=blue]),
 :host-context([data-theme=violet]),
@@ -48,39 +51,42 @@
 :host([dark=dark]),
 :host-context(.skeleton-dark),
 .skeleton-dark {
-  --skeleton-bg: var(--skeleton-loader-bg, var(--bg-secondary, #1e293b));
-  --skeleton-wave-bg: var(--skeleton-loader-wave-bg, var(--bg-tertiary, #334155));
+  /* High contrast fallbacks for dark themes */
+  --skeleton-bg: #111827;
+  --skeleton-wave-bg: #374151;
+  --skeleton-bg: var(--skeleton-loader-bg, color-mix(in srgb, var(--bg-secondary, #1e293b) 80%, #000000 20%));
+  --skeleton-wave-bg: var(--skeleton-loader-wave-bg, color-mix(in srgb, var(--bg-tertiary, #334155) 75%, #ffffff 25%));
 }
 
 /* Named color variants — use theme-aware color tokens with opacity for bg/wave */
 .skeleton-color-primary {
-  --skeleton-bg: color-mix(in srgb, var(--color-primary, #10b981) 20%, transparent);
-  --skeleton-wave-bg: color-mix(in srgb, var(--color-primary, #10b981) 40%, transparent);
+  --skeleton-bg: color-mix(in srgb, var(--color-primary, #10b981) 25%, transparent);
+  --skeleton-wave-bg: color-mix(in srgb, var(--color-primary, #10b981) 50%, transparent);
 }
 
 .skeleton-color-secondary {
-  --skeleton-bg: color-mix(in srgb, var(--color-secondary, #64748b) 20%, transparent);
-  --skeleton-wave-bg: color-mix(in srgb, var(--color-secondary, #64748b) 40%, transparent);
+  --skeleton-bg: color-mix(in srgb, var(--color-secondary, #64748b) 25%, transparent);
+  --skeleton-wave-bg: color-mix(in srgb, var(--color-secondary, #64748b) 50%, transparent);
 }
 
 .skeleton-color-success {
-  --skeleton-bg: color-mix(in srgb, var(--color-success, #22c55e) 20%, transparent);
-  --skeleton-wave-bg: color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent);
+  --skeleton-bg: color-mix(in srgb, var(--color-success, #22c55e) 25%, transparent);
+  --skeleton-wave-bg: color-mix(in srgb, var(--color-success, #22c55e) 50%, transparent);
 }
 
 .skeleton-color-danger {
-  --skeleton-bg: color-mix(in srgb, var(--color-danger, #ef4444) 20%, transparent);
-  --skeleton-wave-bg: color-mix(in srgb, var(--color-danger, #ef4444) 40%, transparent);
+  --skeleton-bg: color-mix(in srgb, var(--color-danger, #ef4444) 25%, transparent);
+  --skeleton-wave-bg: color-mix(in srgb, var(--color-danger, #ef4444) 50%, transparent);
 }
 
 .skeleton-color-warning {
-  --skeleton-bg: color-mix(in srgb, var(--color-warning, #f59e0b) 20%, transparent);
-  --skeleton-wave-bg: color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent);
+  --skeleton-bg: color-mix(in srgb, var(--color-warning, #f59e0b) 25%, transparent);
+  --skeleton-wave-bg: color-mix(in srgb, var(--color-warning, #f59e0b) 50%, transparent);
 }
 
 .skeleton-color-info {
-  --skeleton-bg: color-mix(in srgb, var(--color-info, #38bdf8) 20%, transparent);
-  --skeleton-wave-bg: color-mix(in srgb, var(--color-info, #38bdf8) 40%, transparent);
+  --skeleton-bg: color-mix(in srgb, var(--color-info, #38bdf8) 25%, transparent);
+  --skeleton-wave-bg: color-mix(in srgb, var(--color-info, #38bdf8) 50%, transparent);
 }
 
 .skeleton-replication-container ::slotted([slot=custom]:focus-visible) {
@@ -123,24 +129,19 @@
 }
 
 .skeleton-animated.skeleton-pulse {
-  animation: skeleton-pulse var(--skeleton-wave-speed, 1.5s) ease-in-out infinite;
+  animation: skeleton-pulse var(--skeleton-wave-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
 .skeleton-animated.skeleton-wave {
-  background: linear-gradient(var(--skeleton-wave-angle, 90deg), var(--skeleton-bg, #f0f0f0) 25%, var(--skeleton-wave-bg, #e0e0e0) 50%, var(--skeleton-bg, #f0f0f0) 75%);
-  background-size: 200% 100%;
-  animation: skeleton-wave var(--skeleton-wave-speed, 1.5s) ease-in-out infinite;
-  /* Enhanced visibility for dark mode */
-}
-.skeleton-dark .skeleton-animated.skeleton-wave {
-  background: linear-gradient(var(--skeleton-wave-angle, 90deg), var(--skeleton-bg, #1e293b) 25%, var(--skeleton-wave-bg, #334155) 50%, var(--skeleton-bg, #1e293b) 75%);
+  background: linear-gradient(var(--skeleton-wave-angle, 110deg), var(--skeleton-bg) 25%, var(--skeleton-wave-bg) 50%, var(--skeleton-bg) 75%);
   background-size: 200% 100%;
+  animation: skeleton-wave var(--skeleton-wave-speed, 1.4s) linear infinite;
 }
 
 .skeleton-animated.skeleton-shimmer {
-  background: linear-gradient(110deg, var(--skeleton-bg, #f0f0f0) 8%, var(--skeleton-wave-bg, #e0e0e0) 18%, var(--skeleton-bg, #f0f0f0) 33%);
+  background: linear-gradient(110deg, var(--skeleton-bg) 25%, var(--skeleton-wave-bg) 50%, var(--skeleton-bg) 75%);
   background-size: 200% 100%;
-  animation: skeleton-shimmer var(--skeleton-wave-speed, 1.5s) linear infinite;
+  animation: skeleton-shimmer var(--skeleton-wave-speed, 1.3s) linear infinite;
 }
 
 .skeleton-animated.skeleton-sheen::after {
@@ -151,16 +152,53 @@
   bottom: 0;
   left: 0;
   transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-  animation: skeleton-sheen var(--skeleton-wave-speed, 1.5s) infinite;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
+  animation: skeleton-sheen var(--skeleton-wave-speed, 1.4s) cubic-bezier(0.25, 1, 0.5, 1) infinite;
+}
+.skeleton-dark .skeleton-animated.skeleton-sheen::after {
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
 }
 
 .skeleton-animated.skeleton-glow {
-  animation: skeleton-glow var(--skeleton-wave-speed, 1.5s) ease-in-out infinite alternate;
+  animation: skeleton-glow var(--skeleton-wave-speed, 1.8s) ease-in-out infinite;
 }
 
 .skeleton-animated.skeleton-flicker {
-  animation: skeleton-flicker 0.2s infinite;
+  animation: skeleton-flicker 0.25s ease-in-out infinite;
+}
+
+.skeleton-animated.skeleton-neon-sweep {
+  position: relative;
+  background: var(--skeleton-bg, #e2e8f0);
+}
+.skeleton-animated.skeleton-neon-sweep::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb, 16, 185, 129), 0) 20%, rgba(var(--color-primary-rgb, 16, 185, 129), 0.9) 50%, rgba(var(--color-primary-rgb, 16, 185, 129), 0) 80%, transparent 100%);
+  transform: translateX(-150%) skewX(-20deg);
+  animation: skeleton-neon-sweep var(--skeleton-wave-speed, 1.5s) cubic-bezier(0.25, 1, 0.5, 1) infinite;
+  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 16, 185, 129), 0.45);
+}
+
+.skeleton-animated.skeleton-liquify {
+  background: linear-gradient(135deg, var(--skeleton-bg) 0%, var(--skeleton-bg) 35%, color-mix(in srgb, var(--skeleton-wave-bg) 75%, var(--skeleton-bg)) 47%, var(--skeleton-wave-bg) 50%, color-mix(in srgb, var(--skeleton-wave-bg) 75%, var(--skeleton-bg)) 53%, var(--skeleton-bg) 65%, var(--skeleton-bg) 100%);
+  background-size: 250% 100%;
+  animation: skeleton-liquify var(--skeleton-wave-speed, 2s) cubic-bezier(0.33, 1, 0.68, 1) infinite;
+}
+
+.skeleton-animated.skeleton-aurora {
+  background: linear-gradient(45deg, var(--skeleton-bg) 0%, color-mix(in srgb, #3b82f6 28%, var(--skeleton-bg)) 30%, color-mix(in srgb, #a855f7 28%, var(--skeleton-bg)) 50%, color-mix(in srgb, #10b981 25%, var(--skeleton-bg)) 70%, var(--skeleton-bg) 100%);
+  background-size: 300% 300%;
+  animation: skeleton-aurora 4s ease infinite;
+}
+.skeleton-dark .skeleton-animated.skeleton-aurora {
+  background: linear-gradient(45deg, var(--skeleton-bg) 0%, color-mix(in srgb, #3b82f6 24%, var(--skeleton-bg)) 30%, color-mix(in srgb, #c084fc 24%, var(--skeleton-bg)) 50%, color-mix(in srgb, #34d399 20%, var(--skeleton-bg)) 70%, var(--skeleton-bg) 100%);
+  background-size: 300% 300%;
+  animation: skeleton-aurora 4s ease infinite;
 }
 
 /* Shape-specific styles */
@@ -322,10 +360,12 @@
 /* Animations */
 @keyframes skeleton-pulse {
   0%, 100% {
+    background-color: var(--skeleton-bg);
     opacity: 1;
   }
   50% {
-    opacity: 0.6;
+    background-color: var(--skeleton-wave-bg);
+    opacity: 0.4;
   }
 }
 @keyframes skeleton-wave {
@@ -345,33 +385,75 @@
   }
 }
 @keyframes skeleton-sheen {
+  0% {
+    transform: translateX(-100%);
+  }
   100% {
     transform: translateX(100%);
   }
 }
 @keyframes skeleton-glow {
-  from {
-    box-shadow: 0 0 5px rgba(255, 255, 255, 0), inset 0 0 5px rgba(255, 255, 255, 0);
+  0%, 100% {
+    box-shadow: 0 0 8px rgba(var(--color-primary-rgb, 16, 185, 129), 0.15), inset 0 0 4px rgba(var(--color-primary-rgb, 16, 185, 129), 0.05);
+    filter: brightness(0.95);
+    opacity: 0.8;
   }
-  to {
-    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
+  50% {
+    box-shadow: 0 0 24px rgba(var(--color-primary-rgb, 16, 185, 129), 0.65), inset 0 0 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.3);
+    filter: brightness(1.2);
+    opacity: 1;
   }
 }
 @keyframes skeleton-flicker {
-  0% {
+  0%, 100% {
+    opacity: 0.35;
+    filter: brightness(0.85);
+  }
+  20% {
+    opacity: 0.85;
+    filter: brightness(1);
+  }
+  40% {
+    opacity: 0.45;
+    filter: brightness(0.9);
+  }
+  60% {
     opacity: 0.95;
+    filter: brightness(1.15);
   }
-  25% {
-    opacity: 1;
+  80% {
+    opacity: 0.55;
+    filter: brightness(0.95);
+  }
+}
+@keyframes skeleton-neon-sweep {
+  0% {
+    transform: translateX(-150%) skewX(-20deg);
+  }
+  70%, 100% {
+    transform: translateX(150%) skewX(-20deg);
+  }
+}
+@keyframes skeleton-liquify {
+  0% {
+    background-position: 250% 0;
   }
   50% {
-    opacity: 0.9;
+    background-position: -50% 0;
   }
-  75% {
-    opacity: 1;
+  100% {
+    background-position: 250% 0;
+  }
+}
+@keyframes skeleton-aurora {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
   }
   100% {
-    opacity: 0.95;
+    background-position: 0% 50%;
   }
 }
 /* Custom properties for theming — defaults are set via the component's `color` prop */
@@ -395,6 +477,12 @@
 .skeleton-speed-slow.skeleton-glow {
   animation-duration: 3s;
 }
+.skeleton-speed-slow.skeleton-neon-sweep::after {
+  animation-duration: 3.2s;
+}
+.skeleton-speed-slow.skeleton-liquify {
+  animation-duration: 4s;
+}
 
 .skeleton-speed-normal.skeleton-pulse {
   animation-duration: 1.5s;
@@ -411,6 +499,12 @@
 .skeleton-speed-normal.skeleton-glow {
   animation-duration: 1.5s;
 }
+.skeleton-speed-normal.skeleton-neon-sweep::after {
+  animation-duration: 1.8s;
+}
+.skeleton-speed-normal.skeleton-liquify {
+  animation-duration: 2.2s;
+}
 
 .skeleton-speed-fast.skeleton-pulse {
   animation-duration: 0.8s;
@@ -426,4 +520,10 @@
 }
 .skeleton-speed-fast.skeleton-glow {
   animation-duration: 0.8s;
+}
+.skeleton-speed-fast.skeleton-neon-sweep::after {
+  animation-duration: 1.1s;
+}
+.skeleton-speed-fast.skeleton-liquify {
+  animation-duration: 1.2s;
 }

package/dist/collection/components/skeleton/skeleton-loader.js

@@ -99,7 +99,7 @@ export class SkeletonLoader {
     /**
      * Animation type: 'pulse' or 'wave'
      */
-    animationType = 'pulse';
+    animationType = 'neon-sweep';
     /**
      * Custom class for additional styling
      */
@@ -198,9 +198,11 @@ export class SkeletonLoader {
     getSkeletonStyles() {
         // Use size dimensions as defaults if width/height are not explicitly set
         const sizeDims = this.getSizeDimensions();
+        const hasExplicitWidth = this.width !== '100%';
+        const hasExplicitHeight = this.height !== '20px';
         const baseStyles = {
-            width: this.width !== '100%' ? this.width : sizeDims.width,
-            height: this.height !== '20px' ? this.height : sizeDims.height,
+            width: hasExplicitWidth ? this.width : sizeDims.width,
+            height: hasExplicitHeight ? this.height : sizeDims.height,
         };
         switch (this.shape) {
             case 'circle':
@@ -250,7 +252,9 @@ export class SkeletonLoader {
                     '3xl': '48px',
                     '4xl': '64px',
                 };
-                baseStyles.height = textSizeMap[this.size] || '18px';
+                if (!hasExplicitHeight) {
+                    baseStyles.height = textSizeMap[this.size] || '18px';
+                }
                 break;
             case 'avatar':
                 baseStyles.borderRadius = '50%';
@@ -1006,8 +1010,8 @@ export class SkeletonLoader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'pulse' | 'wave' | 'shimmer' | 'sheen' | 'glow' | 'flicker'",
-                    "resolved": "\"flicker\" | \"glow\" | \"pulse\" | \"sheen\" | \"shimmer\" | \"wave\"",
+                    "original": "'pulse' | 'wave' | 'shimmer' | 'sheen' | 'glow' | 'flicker' | 'neon-sweep' | 'liquify' | 'aurora'",
+                    "resolved": "\"aurora\" | \"flicker\" | \"glow\" | \"liquify\" | \"neon-sweep\" | \"pulse\" | \"sheen\" | \"shimmer\" | \"wave\"",
                     "references": {}
                 },
                 "required": false,
@@ -1020,7 +1024,7 @@ export class SkeletonLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "animation-type",
-                "defaultValue": "'pulse'"
+                "defaultValue": "'neon-sweep'"
             },
             "customClass": {
                 "type": "string",

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: 'ca00812f8227d533a34fd34e5d8bcc6675edec3a', class: "smart-step-wrapper" }, h("div", { key: 'd6423ecd8c2750642350bf37cac75856978bfc73', 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: 'e5713ed3234ff8890c08f97a8cff4ff7983d33af', 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: '6998e7b67ceefb8989481ce0014d5c3a6839a281', class: "step-text" }, h("span", { key: '77f73e8dcadc1bca1ebeccd5607e2c5dc98f7467', class: "step-title" }, this.label), this.description && h("span", { key: '9be4ea8f959a789ec36d4a41286809f2a07a764b', class: "step-desc" }, this.description))), h("div", { key: '0fb598a2aeb3427be0c3fd5b9fe32db65d83f67f', class: "stepper-content" }, h("slot", { key: 'd8a515d242a0b233e00acc3d3377bd65e07e173f' }))));
     }
     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: '5f68b30cf9e222adb3173b3d24cb1660b1f88480', class: containerClasses }, h("div", { key: '01fa7e21cfe43f093fb695105ac720c2beb8c2f3', class: "stepper-header", onClick: this.handleStepClick }, h("slot", { key: 'e79f5035758931b91aa9041a72e59ae616ed5ad7' })), h("div", { key: '822a7a9b69e18ce7644d427ee5447992c232a4c9', class: "stepper-content-area" }, h("slot", { key: 'e81303bd4161bc6dd4dbb7525cf15d02106ce3e3', 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/speedometer/speedometer.css

@@ -46,9 +46,17 @@
 }
 
 .tick-label {
-  font-size: 11px;
-  fill: var(--text-muted, #6b7280);
-  font-weight: 500;
+  font-size: 12px;
+  fill: var(--text-secondary, #475569);
+  opacity: 0.98;
+  font-weight: 700;
+  stroke: var(--bg-primary, #ffffff);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+.tick-mark {
+  opacity: 0.95;
 }
 
 .value-display {
@@ -63,19 +71,21 @@
 .value-number-svg {
   font-size: 32px;
   font-weight: 700;
-  fill: var(--text-primary, #1f2937);
+  fill: currentColor;
   transition: fill 0.3s ease;
 }
 
 .value-unit-svg {
   font-size: 18px;
   font-weight: 500;
-  fill: var(--text-muted, #6b7280);
+  fill: currentColor;
+  opacity: 0.6;
 }
 
 .value-label-svg {
   font-size: 13px;
-  fill: var(--text-muted, #6b7280);
+  fill: currentColor;
+  opacity: 0.6;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -92,4 +102,14 @@
 }
 .speedometer-container:hover .value-arc {
   filter: drop-shadow(0 4px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3));
+}
+
+@media (prefers-color-scheme: dark) {
+  .tick-label {
+    fill: var(--text-primary, #e5e7eb);
+    stroke: rgba(15, 23, 42, 0.9);
+  }
+  .tick-mark {
+    opacity: 1;
+  }
 }

package/dist/collection/components/speedometer/speedometer.js

@@ -156,6 +156,19 @@ export class Speedometer {
             this.parsedGradients = gradString.split(',').map(s => s.trim());
         }
     }
+    getEffectiveRanges() {
+        if (this.parsedRanges.length > 0) {
+            return this.parsedRanges;
+        }
+        const span = this.maxValue - this.minValue;
+        const greenMax = this.minValue + span * 0.4;
+        const orangeMax = this.minValue + span * 0.7;
+        return [
+            { min: this.minValue, max: greenMax, color: 'var(--color-success, #22c55e)' },
+            { min: greenMax, max: orangeMax, color: 'var(--color-warning, #f59e0b)' },
+            { min: orangeMax, max: this.maxValue, color: 'var(--color-danger, #ef4444)' },
+        ];
+    }
     animateToValue(targetValue) {
         if (this.animationFrame) {
             cancelAnimationFrame(this.animationFrame);
@@ -277,11 +290,9 @@ export class Speedometer {
         }
     }
     getColorForValue(value) {
-        if (this.parsedRanges.length === 0) {
-            return 'var(--primary-color)'; // Default theme-based color
-        }
-        const range = this.parsedRanges.find(r => value >= r.min && value <= r.max);
-        return range ? range.color : this.parsedRanges[0].color;
+        const effectiveRanges = this.getEffectiveRanges();
+        const range = effectiveRanges.find(r => value >= r.min && value <= r.max);
+        return range ? range.color : effectiveRanges[0].color;
     }
     valueToAngle(value) {
         const percentage = (value - this.minValue) / (this.maxValue - this.minValue);
@@ -317,33 +328,33 @@ export class Speedometer {
         if (this.parsedGradients.length > 1) {
             strokeColor = `url(#${this.gradientId})`;
         }
-        return (h("g", null, h("defs", null, this.parsedGradients.length > 1 && (h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, this.parsedGradients.map((color, index) => (h("stop", { offset: `${(index / (this.parsedGradients.length - 1)) * 100}%`, "stop-color": color })))))), h("path", { d: backgroundPath, fill: "none", stroke: "#e5e7eb", "stroke-width": strokeWidth, "stroke-linecap": "round" }), this.parsedRanges.length > 0 ? (this.parsedRanges.map(range => {
+        return (h("g", null, h("defs", null, this.parsedGradients.length > 1 && (h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, this.parsedGradients.map((color, index) => (h("stop", { key: `${color}-${index}`, offset: `${(index / (this.parsedGradients.length - 1)) * 100}%`, "stop-color": color })))))), h("path", { d: backgroundPath, fill: "none", stroke: "#e5e7eb", "stroke-width": strokeWidth, "stroke-linecap": "round" }), this.getEffectiveRanges().map((range, index) => {
             const rangeStartAngle = this.valueToAngle(range.min);
             const rangeEndAngle = this.valueToAngle(range.max);
             const rangePath = this.createArc(center, center, radius, rangeStartAngle, rangeEndAngle);
-            return (h("path", { d: rangePath, fill: "none", stroke: range.color, "stroke-width": strokeWidth, "stroke-linecap": "round", opacity: "0.3" }));
-        })) : null, h("path", { d: valuePath, fill: "none", stroke: strokeColor, "stroke-width": strokeWidth, "stroke-linecap": "round", class: "value-arc" })));
+            return (h("path", { key: `${range.min}-${range.max}-${index}`, d: rangePath, fill: "none", stroke: range.color, "stroke-width": strokeWidth, "stroke-linecap": "round", opacity: "0.38", class: "range-segment" }));
+        }), h("path", { d: valuePath, fill: "none", stroke: strokeColor, "stroke-width": strokeWidth, "stroke-linecap": "round", class: "value-arc" })));
     }
     renderTicks() {
         if (!this.showTicks)
             return null;
         const center = this.size / 2;
         const outerRadius = (this.size / 2) - 20;
-        const innerRadius = outerRadius - 10;
+        const innerRadius = outerRadius - 12;
+        const labelRadius = innerRadius - Math.max(20, Math.round(this.size * 0.08));
         const ticks = [];
         for (let i = 0; i <= this.tickCount; i++) {
             const percentage = i / this.tickCount;
             const angle = this.startAngle + (this.endAngle - this.startAngle) * percentage;
             const outer = this.polarToCartesian(center, center, outerRadius, angle);
             const inner = this.polarToCartesian(center, center, innerRadius, angle);
-            ticks.push(h("line", { x1: outer.x, y1: outer.y, x2: inner.x, y2: inner.y, stroke: "#9ca3af", "stroke-width": "2", "stroke-linecap": "round" }));
+            ticks.push(h("line", { x1: outer.x, y1: outer.y, x2: inner.x, y2: inner.y, stroke: "var(--text-secondary, #64748b)", "stroke-width": "2.5", "stroke-linecap": "round", class: "tick-mark" }));
             // Add labels for major ticks
             if (i % 2 === 0) {
-                const labelRadius = innerRadius - 15;
                 const labelPos = this.polarToCartesian(center, center, labelRadius, angle);
                 const tickValue = this.minValue + (this.maxValue - this.minValue) * percentage;
                 const displayValue = Math.round(tickValue);
-                ticks.push(h("text", { x: labelPos.x, y: labelPos.y, "text-anchor": "middle", "dominant-baseline": "middle", class: "tick-label" }, this.parsedLabels[tickValue] !== undefined ? this.parsedLabels[tickValue] : displayValue));
+                ticks.push(h("text", { x: labelPos.x, y: labelPos.y, "text-anchor": "middle", "dominant-baseline": "middle", class: "tick-label", "paint-order": "stroke" }, this.parsedLabels[tickValue] ?? displayValue));
             }
         }
         return h("g", null, ticks);
@@ -386,10 +397,10 @@ export class Speedometer {
         const displayUnit = this.showPercentage ? '%' : this.unit;
         const center = this.size / 2;
         const valueY = this.size - Math.max(15, Math.round(this.size * 0.1));
-        return (h("g", { class: "value-group", style: { fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' } }, h("text", { x: center, y: valueY, "text-anchor": "middle", class: "value-number-svg", fill: "currentColor", "font-weight": "700" }, displayValue, displayUnit && h("tspan", { class: "value-unit-svg", "font-size": "0.6em", dx: "4", "font-weight": "500" }, displayUnit)), this.label && (h("text", { x: center, y: valueY + 20, "text-anchor": "middle", class: "value-label-svg", fill: "#9ca3af", "font-size": "12", "font-weight": "500", style: { textTransform: 'uppercase', letterSpacing: '0.5px' } }, this.label))));
+        return (h("g", { class: "value-group", style: { fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' } }, h("text", { x: center, y: valueY, "text-anchor": "middle", class: "value-number-svg", fill: "currentColor", "font-weight": "700" }, displayValue, displayUnit && h("tspan", { class: "value-unit-svg", "font-size": "0.6em", dx: "4", "font-weight": "500" }, displayUnit)), this.label && (h("text", { x: center, y: valueY + 20, "text-anchor": "middle", class: "value-label-svg", "font-size": "12", "font-weight": "500", style: { textTransform: 'uppercase', letterSpacing: '0.5px' } }, this.label))));
     }
     render() {
-        return (h("div", { key: '570b60c58715ce7a233153441a669a866e4df90a', class: {
+        return (h("div", { key: '79553b35dfa7f6238e8f71e157af9be8071b38f3', class: {
                 'speedometer-container': true,
                 'interactive': this.interactive,
                 'is-dragging': this.isDragging
@@ -397,7 +408,7 @@ export class Speedometer {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 cursor: this.interactive ? (this.isDragging ? 'grabbing' : 'grab') : 'default'
-            } }, h("svg", { key: 'a05ee4e7e85418f36e106209ec363f84071ff58f', width: this.size, height: this.size, viewBox: `0 0 ${this.size} ${this.size}`, class: "speedometer-svg" }, this.renderArc(), this.renderTicks(), this.secondaryValue !== undefined && this.renderNeedle(this.secondaryValue, '#9ca3af', true), this.renderNeedle(this.animatedValue, this.needleColor), this.renderValue())));
+            } }, h("svg", { key: 'b7d59896164480aec8d960c116e460b6a0a7c86d', width: this.size, height: this.size, viewBox: `0 0 ${this.size} ${this.size}`, class: "speedometer-svg" }, this.renderArc(), this.renderTicks(), this.secondaryValue !== undefined && this.renderNeedle(this.secondaryValue, '#9ca3af', true), this.renderNeedle(this.animatedValue, this.needleColor), this.renderValue())));
     }
     static get is() { return "ui-speedometer"; }
     static get encapsulation() { return "shadow"; }

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: 'b4bd86fd867061218a62b94f247a30f1c4710919', 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: '3364fa9b69d8aa4c9c92add70a6bfc969d14ab96', class: "stack-container" }, h("slot", { key: '14b6de27b7e2c72ed9c677fff51ea721dc6eb2d1' }), overflowCount > 0 && (h("div", { key: 'bab9856ee9b5caa06b7765619efad7cf2b175e2e', 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: 'de59e6d6505c76bc976aa2bf5855dad0ef5e89c0', class: "ui-step-container", role: "presentation" }, h("div", { key: 'c8fd7d9d902baf954efb14320019baeee0fd8779', class: "ui-step-slots-hidden", style: { display: 'none' } }, h("slot", { key: 'd10ff568dfe41f6afe9c01c463126356a320145d', name: "icon" }), h("slot", { key: 'b980bfd228b83625eedee13544f4f8528ef91631', name: "title" }), h("slot", { key: '81c6b9421b60a56a3f2af19f5f81188ac4fc7ce6', name: "description" })), h("slot", { key: '5fd79b9a25c3f97af09cfab85a00172e663e6275' })));
     }
     static get is() { return "ui-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1148,7 +1148,7 @@ export class Stepper {
                 "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",