@sigx/zero-daisyui 0.2.0-beta.5 → 0.3.0-beta.1

package/dist/lynx/components/select.css

@@ -14,7 +14,6 @@
     justify-content: space-between;
     gap: var(--space-lg);
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
     color: var(--color-base-content);
@@ -26,6 +25,8 @@
     transition: background var(--duration-normal) var(--ease-standard);
     box-sizing: border-box;
     min-width: 13rem;
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-select__trigger.zx-f-disabled {
@@ -47,23 +48,23 @@
 }
 
 .zx-root .zx-select__value.zx-f-placeholder {
-    color: #07070899;
+    color: #18181b99;
 }
 
 .zx-root.zx-theme-dark .zx-select__value.zx-f-placeholder {
-    color: #767d8099;
+    color: #ecf9ff99;
 }
 
 .zx-root.zx-theme-dim .zx-select__value.zx-f-placeholder {
-    color: #57656a99;
+    color: #b2ccd699;
 }
 
 .zx-root.zx-theme-nord .zx-select__value.zx-f-placeholder {
-    color: #12151b99;
+    color: #2e344099;
 }
 
 .zx-root.zx-theme-sunset .zx-select__value.zx-f-placeholder {
-    color: #4d5b6799;
+    color: #9fb9d099;
 }
 
 .zx-select__indicator {
@@ -104,7 +105,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.625rem;
+    gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
@@ -166,30 +167,35 @@
 
 .zx-select__trigger.zx-a-size-xs {
     height: calc(var(--size-field) * 8);
-    padding-inline: calc(var(--size-field) * 2);
     font-size: var(--text-xs);
+    padding-left: calc(var(--size-field) * 2);
+    padding-right: calc(var(--size-field) * 2);
 }
 
 .zx-select__trigger.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
-    padding-inline: calc(var(--size-field) * 3);
     font-size: var(--text-sm);
+    padding-left: calc(var(--size-field) * 3);
+    padding-right: calc(var(--size-field) * 3);
 }
 
 .zx-select__trigger.zx-a-size-md {
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-select__trigger.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
-    padding-inline: calc(var(--size-field) * 5);
     font-size: var(--text-md);
+    padding-left: calc(var(--size-field) * 5);
+    padding-right: calc(var(--size-field) * 5);
 }
 
 .zx-select__trigger.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
-    padding-inline: calc(var(--size-field) * 6);
     font-size: var(--text-lg);
+    padding-left: calc(var(--size-field) * 6);
+    padding-right: calc(var(--size-field) * 6);
 }

package/dist/lynx/components/slider.css

@@ -39,10 +39,11 @@
 
 .zx-slider__track {
     height: calc(var(--size-selector) * 2);
-    margin-block: calc(var(--size-selector) * 1.5);
     border-radius: 9999px;
     background: var(--color-base-300);
     cursor: pointer;
+    margin-top: calc(var(--size-selector) * 1.5);
+    margin-bottom: calc(var(--size-selector) * 1.5);
 }
 
 .zx-slider__track.zx-f-disabled {
@@ -59,15 +60,15 @@
     box-sizing: border-box;
     width: calc(var(--size-selector) * 5);
     height: calc(var(--size-selector) * 5);
-    inset-block-start: 50%;
-    translate: 0 -50%;
-    margin-inline-start: calc(var(--size-selector) * -2.5);
     border-radius: 9999px;
     background: var(--color-base-100);
     cursor: pointer;
     outline: none;
     touch-action: none;
     border: 0.25rem solid var(--slider-accent);
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: calc(var(--size-selector) * -2.5);
 }
 
 .zx-slider__thumb.zx-f-focus-visible {
@@ -80,11 +81,11 @@
 }
 
 .zx-slider__mark {
-    padding-block-start: calc(var(--size-selector) * 2 + var(--space-2xs));
     font-size: var(--text-xs);
     line-height: 1;
     white-space: nowrap;
     opacity: 0.6;
+    padding-top: calc(var(--size-selector) * 2 + var(--space-2xs));
 }
 
 .zx-slider__value-text {

package/dist/lynx/components/spacer.css

@@ -0,0 +1,11 @@
+.zx-spacer__root {
+    --l-space: 0;
+    --l-space-grow: 1;
+}
+
+.zx-spacer__root {
+    flex-grow: var(--l-space-grow);
+    flex-shrink: 0;
+    flex-basis: var(--l-space);
+    align-self: stretch;
+}

package/dist/lynx/components/stack.css

@@ -0,0 +1,35 @@
+.zx-stack__root {
+    --l-gap: 0;
+    --l-gap-x: var(--l-gap);
+    --l-gap-y: var(--l-gap);
+    --l-pad: 0;
+    --l-pad-x: var(--l-pad);
+    --l-pad-y: var(--l-pad);
+    --l-align: stretch;
+    --l-justify: flex-start;
+    --l-wrap: nowrap;
+}
+
+.zx-stack__root {
+    display: flex;
+    min-inline-size: 0;
+    column-gap: var(--l-gap-x);
+    row-gap: var(--l-gap-y);
+    align-items: var(--l-align);
+    justify-content: var(--l-justify);
+    flex-wrap: var(--l-wrap);
+}
+
+.zx-stack__root.zx-o-horizontal {
+    flex-direction: row;
+}
+
+.zx-stack__root.zx-o-vertical {
+    flex-direction: column;
+}
+
+.zx-stack__item {
+    --l-grow: 0;
+    flex-grow: var(--l-grow);
+    min-inline-size: 0;
+}

package/dist/lynx/components/stats.css

@@ -28,23 +28,23 @@
 }
 
 .zx-root .zx-stats__title {
-    color: #0a0a0cb3;
+    color: #18181bb3;
 }
 
 .zx-root.zx-theme-dark .zx-stats__title {
-    color: #929a9eb3;
+    color: #ecf9ffb3;
 }
 
 .zx-root.zx-theme-dim .zx-stats__title {
-    color: #6d7e84b3;
+    color: #b2ccd6b3;
 }
 
 .zx-root.zx-theme-nord .zx-stats__title {
-    color: #181c24b3;
+    color: #2e3440b3;
 }
 
 .zx-root.zx-theme-sunset .zx-stats__title {
-    color: #617180b3;
+    color: #9fb9d0b3;
 }
 
 .zx-stats__value {
@@ -61,23 +61,23 @@
 }
 
 .zx-root .zx-stats__desc {
-    color: #0a0a0cb3;
+    color: #18181bb3;
 }
 
 .zx-root.zx-theme-dark .zx-stats__desc {
-    color: #929a9eb3;
+    color: #ecf9ffb3;
 }
 
 .zx-root.zx-theme-dim .zx-stats__desc {
-    color: #6d7e84b3;
+    color: #b2ccd6b3;
 }
 
 .zx-root.zx-theme-nord .zx-stats__desc {
-    color: #181c24b3;
+    color: #2e3440b3;
 }
 
 .zx-root.zx-theme-sunset .zx-stats__desc {
-    color: #617180b3;
+    color: #9fb9d0b3;
 }
 
 .zx-stats__figure {

package/dist/lynx/components/steps.css

@@ -58,23 +58,23 @@
 }
 
 .zx-root .zx-steps__item.zx-s-inactive {
-    color: #08080aa6;
+    color: #18181ba6;
 }
 
 .zx-root.zx-theme-dark .zx-steps__item.zx-s-inactive {
-    color: #848b8fa6;
+    color: #ecf9ffa6;
 }
 
 .zx-root.zx-theme-dim .zx-steps__item.zx-s-inactive {
-    color: #627177a6;
+    color: #b2ccd6a6;
 }
 
 .zx-root.zx-theme-nord .zx-steps__item.zx-s-inactive {
-    color: #151920a6;
+    color: #2e3440a6;
 }
 
 .zx-root.zx-theme-sunset .zx-steps__item.zx-s-inactive {
-    color: #576674a6;
+    color: #9fb9d0a6;
 }
 
 .zx-steps__item.zx-f-disabled {
@@ -97,7 +97,7 @@
     align-items: flex-start;
     text-align: start;
     column-gap: var(--space-sm);
-    padding-block-end: var(--space-lg);
+    padding-bottom: var(--space-lg);
 }
 
 .zx-steps__indicator {
@@ -146,7 +146,7 @@
 }
 
 .zx-steps__indicator.zx-s-complete {
-    color: var(--steps-accent-ink);
+    color: var(--steps-complete-ink);
 }
 
 .zx-steps__indicator.zx-s-inactive {
@@ -169,53 +169,53 @@
 }
 
 .zx-steps__separator.zx-o-horizontal {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7) / 2);
-    inset-inline-start: 50%;
     inline-size: 100%;
     block-size: var(--border);
+    top: calc(var(--space-xs) + (var(--size-selector) * 7) / 2);
+    left: 50%;
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-xs {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 5) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 5) / 2);
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-sm {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 6) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 6) / 2);
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-lg {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 8) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 8) / 2);
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-xl {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 9) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 9) / 2);
 }
 
 .zx-steps__separator.zx-o-vertical {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 7) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7));
-    inset-block-end: calc(var(--space-xs) * -1);
     inline-size: var(--border);
+    left: calc(var(--space-xs) + ((var(--size-selector) * 7) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 7));
+    bottom: calc(var(--space-xs) * -1);
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-xs {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 5) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 5));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 5) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 5));
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-sm {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 6) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 6));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 6) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 6));
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-lg {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 8) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 8));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 8) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 8));
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-xl {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 9) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 9));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 9) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 9));
 }
 
 .zx-steps__title {
@@ -228,223 +228,263 @@
 }
 
 .zx-root .zx-steps__description {
-    color: #0a0a0cb3;
+    color: #18181bb3;
 }
 
 .zx-root.zx-theme-dark .zx-steps__description {
-    color: #929a9eb3;
+    color: #ecf9ffb3;
 }
 
 .zx-root.zx-theme-dim .zx-steps__description {
-    color: #6d7e84b3;
+    color: #b2ccd6b3;
 }
 
 .zx-root.zx-theme-nord .zx-steps__description {
-    color: #181c24b3;
+    color: #2e3440b3;
 }
 
 .zx-root.zx-theme-sunset .zx-steps__description {
-    color: #617180b3;
+    color: #9fb9d0b3;
 }
 
-.zx-steps__root.zx-a-color-primary {
+.zx-steps__item.zx-a-color-primary {
     --steps-accent: var(--color-primary);
     --steps-accent-content: var(--color-primary-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-primary {
+.zx-root .zx-steps__item.zx-a-color-primary {
     --steps-accent-ink: #3f2bcb;
+    --steps-complete-ink: #322c99;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-primary {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-primary {
     --steps-accent-ink: #6567ff;
+    --steps-complete-ink: #8391ff;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-primary {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-primary {
     --steps-accent-ink: #a0e791;
+    --steps-complete-ink: #a5e0a6;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-primary {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-primary {
     --steps-accent-ink: #5c7da6;
+    --steps-complete-ink: #4f698a;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-primary {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-primary {
     --steps-accent-ink: #fb8a62;
+    --steps-complete-ink: #e79983;
 }
 
-.zx-steps__root.zx-a-color-secondary {
+.zx-steps__item.zx-a-color-secondary {
     --steps-accent: var(--color-secondary);
     --steps-accent-content: var(--color-secondary-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-secondary {
+.zx-root .zx-steps__item.zx-a-color-secondary {
     --steps-accent-ink: #ad316f;
+    --steps-complete-ink: #ad316f;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-secondary {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-secondary {
     --steps-accent-ink: #fa7cb6;
+    --steps-complete-ink: #fa7cb6;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-secondary {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-secondary {
     --steps-accent-ink: #ed9984;
+    --steps-complete-ink: #ed9984;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-secondary {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-secondary {
     --steps-accent-ink: #677e98;
+    --steps-complete-ink: #677e98;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-secondary {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-secondary {
     --steps-accent-ink: #e68aac;
+    --steps-complete-ink: #e68aac;
 }
 
-.zx-steps__root.zx-a-color-accent {
+.zx-steps__item.zx-a-color-accent {
     --steps-accent: var(--color-accent);
     --steps-accent-content: var(--color-accent-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-accent {
+.zx-root .zx-steps__item.zx-a-color-accent {
     --steps-accent-ink: #2b786d;
+    --steps-complete-ink: #2b786d;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-accent {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-accent {
     --steps-accent-ink: #93e5d9;
+    --steps-complete-ink: #93e5d9;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-accent {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-accent {
     --steps-accent-ink: #bfade1;
+    --steps-complete-ink: #bfade1;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-accent {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-accent {
     --steps-accent-ink: #5e7d8c;
+    --steps-complete-ink: #5e7d8c;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-accent {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-accent {
     --steps-accent-ink: #ab9fe8;
+    --steps-complete-ink: #ab9fe8;
 }
 
-.zx-steps__root.zx-a-color-neutral {
+.zx-steps__item.zx-a-color-neutral {
     --steps-accent: var(--color-neutral);
     --steps-accent-content: var(--color-neutral-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-neutral {
+.zx-root .zx-steps__item.zx-a-color-neutral {
     --steps-accent-ink: #121214;
+    --steps-complete-ink: #121214;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-neutral {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-neutral {
     --steps-accent-ink: #878e92;
+    --steps-complete-ink: #878e92;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-neutral {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-neutral {
     --steps-accent-ink: #71828c;
+    --steps-complete-ink: #71828c;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-neutral {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-neutral {
     --steps-accent-ink: #3a4150;
+    --steps-complete-ink: #3a4150;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-neutral {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-neutral {
     --steps-accent-ink: #667a8a;
+    --steps-complete-ink: #667a8a;
 }
 
-.zx-steps__root.zx-a-color-info {
+.zx-steps__item.zx-a-color-info {
     --steps-accent: var(--color-info);
     --steps-accent-content: var(--color-info-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-info {
+.zx-root .zx-steps__item.zx-a-color-info {
     --steps-accent-ink: #2685b3;
+    --steps-complete-ink: #2685b3;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-info {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-info {
     --steps-accent-ink: #70ceff;
+    --steps-complete-ink: #70ceff;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-info {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-info {
     --steps-accent-ink: #6ce2f3;
+    --steps-complete-ink: #6ce2f3;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-info {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-info {
     --steps-accent-ink: #89728a;
+    --steps-complete-ink: #89728a;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-info {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-info {
     --steps-accent-ink: #91d4e3;
+    --steps-complete-ink: #91d4e3;
 }
 
-.zx-steps__root.zx-a-color-success {
+.zx-steps__item.zx-a-color-success {
     --steps-accent: var(--color-success);
     --steps-accent-content: var(--color-success-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-success {
+.zx-root .zx-steps__item.zx-a-color-success {
     --steps-accent-ink: #2a7858;
+    --steps-complete-ink: #2a7858;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-success {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-success {
     --steps-accent-ink: #92e5c2;
+    --steps-complete-ink: #92e5c2;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-success {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-success {
     --steps-accent-ink: #8ee0c9;
+    --steps-complete-ink: #8ee0c9;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-success {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-success {
     --steps-accent-ink: #6b7d6a;
+    --steps-complete-ink: #6b7d6a;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-success {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-success {
     --steps-accent-ink: #a6cebe;
+    --steps-complete-ink: #a6cebe;
 }
 
-.zx-steps__root.zx-a-color-warning {
+.zx-steps__item.zx-a-color-warning {
     --steps-accent: var(--color-warning);
     --steps-accent-content: var(--color-warning-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-warning {
+.zx-root .zx-steps__item.zx-a-color-warning {
     --steps-accent-ink: #755a2b;
+    --steps-complete-ink: #755a2b;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-warning {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-warning {
     --steps-accent-ink: #f5ddac;
+    --steps-complete-ink: #f5ddac;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-warning {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-warning {
     --steps-accent-ink: #cecfa6;
+    --steps-complete-ink: #cecfa6;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-warning {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-warning {
     --steps-accent-ink: #7d7463;
+    --steps-complete-ink: #7d7463;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-warning {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-warning {
     --steps-accent-ink: #c5c1b7;
+    --steps-complete-ink: #c5c1b7;
 }
 
-.zx-steps__root.zx-a-color-error {
+.zx-steps__item.zx-a-color-error {
     --steps-accent: var(--color-error);
     --steps-accent-content: var(--color-error-content);
 }
 
-.zx-root .zx-steps__root.zx-a-color-error {
+.zx-root .zx-steps__item.zx-a-color-error {
     --steps-accent-ink: #d9576d;
+    --steps-complete-ink: #b34d5e;
 }
 
-.zx-root.zx-theme-dark .zx-steps__root.zx-a-color-error {
+.zx-root.zx-theme-dark .zx-steps__item.zx-a-color-error {
     --steps-accent-ink: #ff7d90;
+    --steps-complete-ink: #ff95a3;
 }
 
-.zx-root.zx-theme-dim .zx-steps__root.zx-a-color-error {
+.zx-root.zx-theme-dim .zx-steps__item.zx-a-color-error {
     --steps-accent-ink: #f5b3a4;
+    --steps-complete-ink: #eab8ad;
 }
 
-.zx-root.zx-theme-nord .zx-steps__root.zx-a-color-error {
+.zx-root.zx-theme-nord .zx-steps__item.zx-a-color-error {
     --steps-accent-ink: #a85b64;
+    --steps-complete-ink: #92555e;
 }
 
-.zx-root.zx-theme-sunset .zx-steps__root.zx-a-color-error {
+.zx-root.zx-theme-sunset .zx-steps__item.zx-a-color-error {
     --steps-accent-ink: #f2bbc0;
+    --steps-complete-ink: #e4bbc3;
 }
 
 .zx-steps__root.zx-a-size-xs {