@sigx/zero-daisyui 0.2.0-beta.3 → 0.2.0-beta.5

package/dist/lynx/index.css

@@ -446,24 +446,23 @@
 }
 
 .zx-tabs__list {
-    display: inline-flex;
+    display: flex;
     align-self: flex-start;
-    padding: var(--space-xs);
-    gap: var(--space-xs);
-    background: var(--color-base-200);
-    border-radius: var(--radius-field);
 }
 
 .zx-tabs__tab {
     appearance: none;
     border: none;
     background: transparent;
-    padding: var(--space-sm) var(--space-xl);
+    --tab-py: var(--space-sm);
+    --tab-px: var(--space-xl);
+    padding: var(--tab-py) var(--tab-px);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
-    border-radius: calc(var(--radius-field) - 0.25rem);
     cursor: pointer;
+    position: relative;
     transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
+    --tab-active-ink: var(--color-base-content);
 }
 
 .zx-root .zx-tabs__tab {
@@ -487,9 +486,7 @@
 }
 
 .zx-tabs__tab.zx-s-active {
-    background: var(--color-base-100);
     color: var(--color-base-content);
-    box-shadow: var(--shadow-sm);
 }
 
 .zx-tabs__tab.zx-f-disabled {
@@ -508,60 +505,425 @@
 
 .zx-tabs__tab.zx-a-size-xs {
     font-size: var(--text-xs);
-    padding: var(--space-2xs) var(--space-md);
+    --tab-py: var(--space-2xs);
+    --tab-px: var(--space-md);
 }
 
 .zx-tabs__tab.zx-a-size-sm {
     font-size: var(--text-xs);
-    padding: var(--space-xs) var(--space-lg);
+    --tab-py: var(--space-xs);
+    --tab-px: var(--space-lg);
 }
 
 .zx-tabs__tab.zx-a-size-lg {
     font-size: var(--text-md);
-    padding: var(--space-md) var(--space-2xl);
+    --tab-py: var(--space-md);
+    --tab-px: var(--space-2xl);
 }
 
 .zx-tabs__tab.zx-a-size-xl {
     font-size: var(--text-lg);
-    padding: var(--space-lg) var(--space-2xl);
+    --tab-py: var(--space-lg);
+    --tab-px: var(--space-2xl);
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #6567ff;
 }
 
-.zx-tabs__tab.zx-a-color-primary.zx-s-active {
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary {
+    --tab-active-ink: #fb8a62;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #3f2bcb;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #6567ff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #a0e791;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #5c7da6;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary.zx-s-active {
+    color: #fb8a62;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary {
+    --tab-active-ink: #e68aac;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #ad316f;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #fa7cb6;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+    color: #e68aac;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent {
+    --tab-active-ink: #ab9fe8;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent.zx-s-active {
+    color: #ab9fe8;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral {
+    --tab-active-ink: #667a8a;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+    color: #667a8a;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info {
+    --tab-active-ink: #91d4e3;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info.zx-s-active {
+    color: #91d4e3;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success {
+    --tab-active-ink: #a6cebe;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success.zx-s-active {
+    color: #a6cebe;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning {
+    --tab-active-ink: #c5c1b7;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning.zx-s-active {
+    color: #c5c1b7;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error {
+    --tab-active-ink: #f2bbc0;
+}
+
+.zx-root .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error.zx-s-active {
+    color: #f2bbc0;
+}
+
+.zx-tabs__tab.zx-a-variant-border {
+    border-radius: var(--radius-field);
+    border-bottom: 3px solid transparent;
+}
+
+.zx-tabs__tab.zx-a-variant-border.zx-s-active {
+    border-bottom-color: var(--tab-active-ink);
+}
+
+.zx-tabs__tab.zx-a-variant-lift {
+    --tab-radius-limit: var(--radius-field);
+    border-start-start-radius: var(--tab-radius-limit);
+    border-start-end-radius: var(--tab-radius-limit);
+    border-width: 0 0 var(--border) 0;
+    border-style: solid;
+    border-color: var(--color-base-300);
+    padding: calc(var(--tab-py) + var(--border)) var(--tab-px) var(--tab-py);
+}
+
+.zx-tabs__tab.zx-a-variant-lift.zx-s-active {
+    background: var(--color-base-100);
+    border-width: var(--border) var(--border) 0 var(--border);
+    padding: var(--tab-py) calc(var(--tab-px) - var(--border)) calc(var(--tab-py) + var(--border));
+}
+
+.zx-tabs__list.zx-a-variant-box {
+    padding: var(--space-xs);
+    gap: var(--space-xs);
+    background: var(--color-base-200);
+    border-radius: var(--radius-field);
+}
+
+.zx-tabs__tab.zx-a-variant-box {
+    border-radius: calc(var(--radius-field) - 0.25rem);
+}
+
+.zx-tabs__tab.zx-a-variant-box.zx-s-active {
+    background: var(--color-base-100);
+    box-shadow: var(--shadow-sm);
+}
+
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-primary.zx-s-active {
     background: var(--color-primary);
     color: var(--color-primary-content);
 }
 
-.zx-tabs__tab.zx-a-color-secondary.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-secondary.zx-s-active {
     background: var(--color-secondary);
     color: var(--color-secondary-content);
 }
 
-.zx-tabs__tab.zx-a-color-accent.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-accent.zx-s-active {
     background: var(--color-accent);
     color: var(--color-accent-content);
 }
 
-.zx-tabs__tab.zx-a-color-neutral.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-neutral.zx-s-active {
     background: var(--color-neutral);
     color: var(--color-neutral-content);
 }
 
-.zx-tabs__tab.zx-a-color-info.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-info.zx-s-active {
     background: var(--color-info);
     color: var(--color-info-content);
 }
 
-.zx-tabs__tab.zx-a-color-success.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-success.zx-s-active {
     background: var(--color-success);
     color: var(--color-success-content);
 }
 
-.zx-tabs__tab.zx-a-color-warning.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-warning.zx-s-active {
     background: var(--color-warning);
     color: var(--color-warning-content);
 }
 
-.zx-tabs__tab.zx-a-color-error.zx-s-active {
+.zx-tabs__tab.zx-a-variant-box.zx-a-color-error.zx-s-active {
     background: var(--color-error);
     color: var(--color-error-content);
 }
@@ -807,8 +1169,6 @@
 }
 
 .zx-switch__root {
-    --switch-size: calc(var(--size-selector) * 6);
-    --switch-p: calc(var(--switch-size) * 0.125);
     --switch-accent: var(--color-primary);
 }
 
@@ -833,10 +1193,11 @@
 }
 
 .zx-switch__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--space-lg);
     cursor: pointer;
+    flex-direction: row;
 }
 
 .zx-switch__root.zx-f-disabled {
@@ -845,26 +1206,49 @@
 }
 
 .zx-switch__control {
-    display: inline-grid;
-    grid-template-columns: 0fr 1fr 1fr;
-    place-content: center;
-    position: relative;
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
     flex-shrink: 0;
     box-sizing: border-box;
-    width: calc((var(--switch-size) * 2) - (var(--border) + var(--switch-p)) * 2);
-    height: var(--switch-size);
-    padding: var(--switch-p);
-    --switch-radius-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
-    border: var(--border) solid currentColor;
-    color: var(--switch-ink);
+    width: calc(((var(--size-selector) * 6) * 2) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
+    height: calc(var(--size-selector) * 6);
+    padding: calc((var(--size-selector) * 6) * 0.125);
+    border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 6) * 0.125) + var(--border));
+    border: var(--border) solid var(--switch-ink);
     user-select: none;
-    transition: color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard), grid-template-columns var(--duration-normal) var(--ease-standard);
+    transition: border-color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
+}
+
+.zx-switch__control.zx-a-size-xs {
+    width: calc(((var(--size-selector) * 4) * 2) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2);
+    height: calc(var(--size-selector) * 4);
+    padding: calc((var(--size-selector) * 4) * 0.125);
+    border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 4) * 0.125) + var(--border));
+}
+
+.zx-switch__control.zx-a-size-sm {
+    width: calc(((var(--size-selector) * 5) * 2) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2);
+    height: calc(var(--size-selector) * 5);
+    padding: calc((var(--size-selector) * 5) * 0.125);
+    border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 5) * 0.125) + var(--border));
+}
+
+.zx-switch__control.zx-a-size-lg {
+    width: calc(((var(--size-selector) * 7) * 2) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2);
+    height: calc(var(--size-selector) * 7);
+    padding: calc((var(--size-selector) * 7) * 0.125);
+    border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 7) * 0.125) + var(--border));
+}
+
+.zx-switch__control.zx-a-size-xl {
+    width: calc(((var(--size-selector) * 8) * 2) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2);
+    height: calc(var(--size-selector) * 8);
+    padding: calc((var(--size-selector) * 8) * 0.125);
+    border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 8) * 0.125) + var(--border));
 }
 
 .zx-switch__control.zx-s-checked {
-    grid-template-columns: 1fr 1fr 0fr;
-    color: var(--switch-accent);
+    border-color: var(--switch-accent);
     background-color: var(--color-base-100);
 }
 
@@ -878,37 +1262,57 @@
 }
 
 .zx-switch__thumb {
-    grid-row-start: 1;
-    grid-column-start: 2;
-    aspect-ratio: 1;
-    width: 100%;
-    height: 100%;
+    width: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
+    height: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
     border-radius: var(--radius-selector);
-    background-color: currentColor;
-    background-size: auto, calc(var(--noise) * 100%);
-    background-image: none, var(--fx-noise);
-    transition: background-color var(--duration-instant) var(--ease-standard);
+    background-color: var(--switch-ink);
+    transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-instant) var(--ease-standard);
 }
 
-.zx-switch__label {
-    font-size: var(--text-sm);
-    font-weight: var(--weight-medium);
+.zx-switch__thumb.zx-a-size-xs {
+    width: calc((var(--size-selector) * 4) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2);
+    height: calc((var(--size-selector) * 4) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2);
+}
+
+.zx-switch__thumb.zx-a-size-sm {
+    width: calc((var(--size-selector) * 5) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2);
+    height: calc((var(--size-selector) * 5) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2);
+}
+
+.zx-switch__thumb.zx-a-size-lg {
+    width: calc((var(--size-selector) * 7) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2);
+    height: calc((var(--size-selector) * 7) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2);
+}
+
+.zx-switch__thumb.zx-a-size-xl {
+    width: calc((var(--size-selector) * 8) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2);
+    height: calc((var(--size-selector) * 8) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2);
+}
+
+.zx-switch__thumb.zx-s-checked {
+    background-color: var(--switch-accent);
+    transform: translateX(calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2));
 }
 
-.zx-switch__root.zx-a-size-xs {
-    --switch-size: calc(var(--size-selector) * 4);
+.zx-switch__thumb.zx-s-checked.zx-a-size-xs {
+    transform: translateX(calc((var(--size-selector) * 4) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2));
 }
 
-.zx-switch__root.zx-a-size-sm {
-    --switch-size: calc(var(--size-selector) * 5);
+.zx-switch__thumb.zx-s-checked.zx-a-size-sm {
+    transform: translateX(calc((var(--size-selector) * 5) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2));
 }
 
-.zx-switch__root.zx-a-size-lg {
-    --switch-size: calc(var(--size-selector) * 7);
+.zx-switch__thumb.zx-s-checked.zx-a-size-lg {
+    transform: translateX(calc((var(--size-selector) * 7) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2));
 }
 
-.zx-switch__root.zx-a-size-xl {
-    --switch-size: calc(var(--size-selector) * 8);
+.zx-switch__thumb.zx-s-checked.zx-a-size-xl {
+    transform: translateX(calc((var(--size-selector) * 8) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2));
+}
+
+.zx-switch__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
 }
 
 .zx-switch__root.zx-a-color-primary {
@@ -945,7 +1349,7 @@
 
 .zx-dialog__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -1036,7 +1440,7 @@
 
 .zx-dialog__close {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -1064,7 +1468,7 @@
 
 .zx-dialog__cancel {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -1207,7 +1611,7 @@
 
 .zx-popover__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -1264,7 +1668,7 @@
 
 .zx-popover__close {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -1404,7 +1808,7 @@
 
 .zx-tooltip__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -1568,7 +1972,7 @@
 
 .zx-menu__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -2104,14 +2508,13 @@
 }
 
 .zx-checkbox__root {
-    --checkbox-size: calc(var(--size-selector) * 6);
     --checkbox-pad: 0.25rem;
     --checkbox-accent: var(--color-primary);
     --checkbox-on-accent: var(--color-primary-content);
 }
 
 .zx-checkbox__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.625rem;
     cursor: pointer;
@@ -2128,9 +2531,10 @@
     vertical-align: middle;
     flex-shrink: 0;
     box-sizing: border-box;
-    width: var(--checkbox-size);
-    height: var(--checkbox-size);
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
     padding: var(--checkbox-pad);
+    border: var(--border) solid var(--checkbox-accent);
     border-radius: var(--radius-selector);
     color: var(--checkbox-on-accent);
     box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
@@ -2140,6 +2544,26 @@
     transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
 }
 
+.zx-checkbox__control.zx-a-size-xs {
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
+}
+
+.zx-checkbox__control.zx-a-size-sm {
+    width: calc(var(--size-selector) * 5);
+    height: calc(var(--size-selector) * 5);
+}
+
+.zx-checkbox__control.zx-a-size-lg {
+    width: calc(var(--size-selector) * 7);
+    height: calc(var(--size-selector) * 7);
+}
+
+.zx-checkbox__control.zx-a-size-xl {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
 .zx-checkbox__control.zx-s-checked {
     background-color: var(--checkbox-accent);
     box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
@@ -2164,7 +2588,7 @@
     height: 100%;
     opacity: 0;
     rotate: 45deg;
-    background-color: currentColor;
+    background-color: var(--checkbox-on-accent);
     clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
     box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
     font-size: 1rem;
@@ -2230,7 +2654,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-xs {
-    --checkbox-size: calc(var(--size-selector) * 4);
     --checkbox-pad: 0.125rem;
 }
 
@@ -2239,7 +2662,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-sm {
-    --checkbox-size: calc(var(--size-selector) * 5);
     --checkbox-pad: 0.1875rem;
 }
 
@@ -2248,7 +2670,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-md {
-    --checkbox-size: calc(var(--size-selector) * 6);
     --checkbox-pad: 0.25rem;
 }
 
@@ -2257,7 +2678,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-lg {
-    --checkbox-size: calc(var(--size-selector) * 7);
     --checkbox-pad: 0.3125rem;
 }
 
@@ -2266,7 +2686,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-xl {
-    --checkbox-size: calc(var(--size-selector) * 8);
     --checkbox-pad: 0.375rem;
 }
 
@@ -2275,7 +2694,6 @@
 }
 
 .zx-radio-group__root {
-    --radio-size: calc(var(--size-selector) * 6);
     --radio-pad: 0.25rem;
     --radio-accent: var(--color-primary);
 }
@@ -2296,7 +2714,7 @@
 }
 
 .zx-radio-group__item {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.625rem;
     cursor: pointer;
@@ -2313,9 +2731,10 @@
     vertical-align: middle;
     flex-shrink: 0;
     box-sizing: border-box;
-    width: var(--radio-size);
-    height: var(--radio-size);
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
     padding: var(--radio-pad);
+    border: var(--border) solid var(--radio-accent);
     border-radius: 9999px;
     color: var(--radio-accent);
     background-color: var(--color-base-100);
@@ -2323,8 +2742,28 @@
     transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
 }
 
+.zx-radio-group__item-control.zx-a-size-xs {
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
+}
+
+.zx-radio-group__item-control.zx-a-size-sm {
+    width: calc(var(--size-selector) * 5);
+    height: calc(var(--size-selector) * 5);
+}
+
+.zx-radio-group__item-control.zx-a-size-lg {
+    width: calc(var(--size-selector) * 7);
+    height: calc(var(--size-selector) * 7);
+}
+
+.zx-radio-group__item-control.zx-a-size-xl {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
 .zx-radio-group__item-control.zx-s-checked {
-    border-color: currentColor;
+    border-color: var(--radio-accent);
     animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
 }
 
@@ -2345,7 +2784,7 @@
 }
 
 .zx-radio-group__item-indicator.zx-s-checked {
-    background-color: currentColor;
+    background-color: var(--radio-accent);
     box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
 }
 
@@ -2387,7 +2826,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-xs {
-    --radio-size: calc(var(--size-selector) * 4);
     --radio-pad: 0.125rem;
 }
 
@@ -2396,7 +2834,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-sm {
-    --radio-size: calc(var(--size-selector) * 5);
     --radio-pad: 0.1875rem;
 }
 
@@ -2405,7 +2842,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-md {
-    --radio-size: calc(var(--size-selector) * 6);
     --radio-pad: 0.25rem;
 }
 
@@ -2414,7 +2850,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-lg {
-    --radio-size: calc(var(--size-selector) * 7);
     --radio-pad: 0.3125rem;
 }
 
@@ -2423,7 +2858,6 @@
 }
 
 .zx-radio-group__root.zx-a-size-xl {
-    --radio-size: calc(var(--size-selector) * 8);
     --radio-pad: 0.375rem;
 }
 
@@ -2434,10 +2868,6 @@
     0% { padding: calc(var(--radio-pad) * 1.25); } 50% { padding: calc(var(--radio-pad) * 0.75); }
 }
 
-.zx-progress__root {
-    --progress-track-size: calc(var(--size-selector) * 2.5);
-}
-
 .zx-root .zx-progress__root {
     --progress-accent: #4c45db;
 }
@@ -2472,12 +2902,28 @@
 
 .zx-progress__track {
     width: 100%;
-    height: var(--progress-track-size);
+    height: calc(var(--size-selector) * 2.5);
     background: var(--color-base-300);
     border-radius: var(--radius-box);
     overflow: hidden;
 }
 
+.zx-progress__track.zx-a-size-xs {
+    height: var(--size-selector);
+}
+
+.zx-progress__track.zx-a-size-sm {
+    height: calc(var(--size-selector) * 1.5);
+}
+
+.zx-progress__track.zx-a-size-lg {
+    height: calc(var(--size-selector) * 3.5);
+}
+
+.zx-progress__track.zx-a-size-xl {
+    height: calc(var(--size-selector) * 4.5);
+}
+
 .zx-progress__range {
     height: 100%;
     background: var(--progress-accent);
@@ -2674,26 +3120,6 @@
 .zx-root.zx-theme-sunset .zx-progress__root.zx-a-color-error {
     --progress-accent: #e4a7a9;
 }
-
-.zx-progress__root.zx-a-size-xs {
-    --progress-track-size: var(--size-selector);
-}
-
-.zx-progress__root.zx-a-size-sm {
-    --progress-track-size: calc(var(--size-selector) * 1.5);
-}
-
-.zx-progress__root.zx-a-size-md {
-    --progress-track-size: calc(var(--size-selector) * 2.5);
-}
-
-.zx-progress__root.zx-a-size-lg {
-    --progress-track-size: calc(var(--size-selector) * 3.5);
-}
-
-.zx-progress__root.zx-a-size-xl {
-    --progress-track-size: calc(var(--size-selector) * 4.5);
-}
 @keyframes zero-daisy-indeterminate {
     from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }
 }
@@ -2752,6 +3178,7 @@
 .zx-slider__range {
     height: 100%;
     border-radius: 9999px;
+    background: var(--slider-accent);
 }
 
 .zx-slider__thumb {
@@ -2762,9 +3189,11 @@
     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);
 }
 
 .zx-slider__thumb.zx-f-focus-visible {
@@ -3110,13 +3539,13 @@
 }
 
 .zx-select__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
 }
 
 .zx-select__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--space-lg);
@@ -3329,7 +3758,7 @@
 
 .zx-button__root {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -3598,26 +4027,31 @@
 }
 
 .zx-button__root.zx-a-size-xs {
+    height: calc(var(--size-field) * 6);
     padding: var(--space-2xs) var(--space-xs);
     font-size: var(--text-xs);
 }
 
 .zx-button__root.zx-a-size-sm {
+    height: calc(var(--size-field) * 8);
     padding: var(--space-xs) var(--space-sm);
     font-size: var(--text-sm);
 }
 
 .zx-button__root.zx-a-size-md {
+    height: calc(var(--size-field) * 10);
     padding: var(--space-sm) var(--space-lg);
     font-size: var(--text-md);
 }
 
 .zx-button__root.zx-a-size-lg {
+    height: calc(var(--size-field) * 12);
     padding: var(--space-md) var(--space-xl);
     font-size: var(--text-lg);
 }
 
 .zx-button__root.zx-a-size-xl {
+    height: calc(var(--size-field) * 14);
     padding: var(--space-lg) var(--space-2xl);
     font-size: var(--text-xl);
 }
@@ -3656,7 +4090,6 @@
 }
 
 .zx-avatar__root {
-    --avatar-size: calc(var(--size-selector) * 10);
     --avatar-text: var(--text-sm);
     --avatar-ring: var(--color-primary);
 }
@@ -3664,8 +4097,8 @@
 .zx-avatar__root {
     position: relative;
     display: inline-grid;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
+    width: calc(var(--size-selector) * 10);
+    height: calc(var(--size-selector) * 10);
     border-radius: 9999px;
     overflow: hidden;
     vertical-align: middle;
@@ -3673,6 +4106,26 @@
     box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
 }
 
+.zx-avatar__root.zx-a-size-xs {
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
+}
+
+.zx-avatar__root.zx-a-size-sm {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
+.zx-avatar__root.zx-a-size-lg {
+    width: calc(var(--size-selector) * 12);
+    height: calc(var(--size-selector) * 12);
+}
+
+.zx-avatar__root.zx-a-size-xl {
+    width: calc(var(--size-selector) * 16);
+    height: calc(var(--size-selector) * 16);
+}
+
 .zx-avatar__image {
     grid-area: 1 / 1;
     width: 100%;
@@ -3725,22 +4178,18 @@
 }
 
 .zx-avatar__root.zx-a-size-xs {
-    --avatar-size: calc(var(--size-selector) * 6);
     --avatar-text: var(--text-xs);
 }
 
 .zx-avatar__root.zx-a-size-sm {
-    --avatar-size: calc(var(--size-selector) * 8);
     --avatar-text: var(--text-xs);
 }
 
 .zx-avatar__root.zx-a-size-lg {
-    --avatar-size: calc(var(--size-selector) * 12);
     --avatar-text: var(--text-md);
 }
 
 .zx-avatar__root.zx-a-size-xl {
-    --avatar-size: calc(var(--size-selector) * 16);
     --avatar-text: var(--text-lg);
 }
 
@@ -3949,12 +4398,12 @@
 }
 
 .zx-combobox__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
 }
 
 .zx-combobox__control {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
     min-width: 13rem;
     box-sizing: border-box;
@@ -4169,7 +4618,7 @@
 
 .zx-toggle__root {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -4280,7 +4729,7 @@
 }
 
 .zx-toggle-group__root {
-    display: inline-flex;
+    display: flex;
     background: var(--color-base-200);
     border: var(--border) solid var(--color-base-300);
     border-radius: var(--radius-field);
@@ -4298,7 +4747,7 @@
 
 .zx-toggle-group__item {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -4394,7 +4843,7 @@
 }
 
 .zx-number-input__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -4429,7 +4878,7 @@
 }
 
 .zx-number-input__control {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);
@@ -4583,10 +5032,6 @@
     padding: var(--space-lg) var(--space-xl);
 }
 
-.zx-rating-group__root {
-    --rating-size: calc(var(--size-selector) * 6);
-}
-
 .zx-root .zx-rating-group__root {
     --rating-fill: #c68005;
 }
@@ -4608,7 +5053,7 @@
 }
 
 .zx-rating-group__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -4643,7 +5088,7 @@
 }
 
 .zx-rating-group__control {
-    display: inline-flex;
+    display: flex;
     gap: var(--space-2xs);
 }
 
@@ -4658,7 +5103,7 @@
 }
 
 .zx-rating-group__item {
-    font-size: var(--rating-size);
+    font-size: calc(var(--size-selector) * 6);
     line-height: var(--leading-none);
     cursor: pointer;
     user-select: none;
@@ -4669,6 +5114,22 @@
     transition: color var(--duration-fast) var(--ease-standard), mask-size var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
 }
 
+.zx-rating-group__item.zx-a-size-xs {
+    font-size: calc(var(--size-selector) * 4);
+}
+
+.zx-rating-group__item.zx-a-size-sm {
+    font-size: calc(var(--size-selector) * 5);
+}
+
+.zx-rating-group__item.zx-a-size-lg {
+    font-size: calc(var(--size-selector) * 7);
+}
+
+.zx-rating-group__item.zx-a-size-xl {
+    font-size: calc(var(--size-selector) * 8);
+}
+
 .zx-root .zx-rating-group__item {
     color: #07070899;
 }
@@ -4877,22 +5338,6 @@
     --rating-fill: #b18182;
 }
 
-.zx-rating-group__root.zx-a-size-xs {
-    --rating-size: calc(var(--size-selector) * 4);
-}
-
-.zx-rating-group__root.zx-a-size-sm {
-    --rating-size: calc(var(--size-selector) * 5);
-}
-
-.zx-rating-group__root.zx-a-size-lg {
-    --rating-size: calc(var(--size-selector) * 7);
-}
-
-.zx-rating-group__root.zx-a-size-xl {
-    --rating-size: calc(var(--size-selector) * 8);
-}
-
 .zx-tree-view__root {
     --tree-accent: var(--color-primary);
     --tree-text: var(--text-sm);
@@ -5060,7 +5505,7 @@
 }
 
 .zx-input__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -5095,7 +5540,7 @@
 }
 
 .zx-input__control {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);
@@ -5210,7 +5655,7 @@
 }
 
 .zx-textarea__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
 }
@@ -5341,7 +5786,7 @@
 
 .zx-native-select__root {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
 }
 
@@ -5599,7 +6044,7 @@
 
 .zx-alert__icon {
     grid-row: 1 / span 2;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     color: var(--alert-ink);
     font-size: var(--text-lg);
@@ -5856,7 +6301,7 @@
 }
 
 .zx-badge__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.375em;
     background: var(--badge-fill);
@@ -5933,7 +6378,6 @@
 
 .zx-divider__root {
     --divider-ink: var(--color-base-300);
-    --divider-thickness: var(--border);
 }
 
 .zx-divider__root {
@@ -5944,14 +6388,30 @@
 
 .zx-divider__root.zx-o-horizontal {
     inline-size: 100%;
-    block-size: var(--divider-thickness);
+    block-size: var(--border);
+}
+
+.zx-divider__root.zx-o-horizontal.zx-a-size-lg {
+    block-size: calc(var(--border) * 2);
+}
+
+.zx-divider__root.zx-o-horizontal.zx-a-size-xl {
+    block-size: calc(var(--border) * 3);
 }
 
 .zx-divider__root.zx-o-vertical {
-    inline-size: var(--divider-thickness);
+    inline-size: var(--border);
     min-block-size: 1em;
 }
 
+.zx-divider__root.zx-o-vertical.zx-a-size-lg {
+    inline-size: calc(var(--border) * 2);
+}
+
+.zx-divider__root.zx-o-vertical.zx-a-size-xl {
+    inline-size: calc(var(--border) * 3);
+}
+
 .zx-divider__root.zx-a-color-primary {
     --divider-ink: var(--color-primary);
 }
@@ -5984,22 +6444,6 @@
     --divider-ink: var(--color-error);
 }
 
-.zx-divider__root.zx-a-size-xs {
-    --divider-thickness: var(--border);
-}
-
-.zx-divider__root.zx-a-size-sm {
-    --divider-thickness: var(--border);
-}
-
-.zx-divider__root.zx-a-size-lg {
-    --divider-thickness: calc(var(--border) * 2);
-}
-
-.zx-divider__root.zx-a-size-xl {
-    --divider-thickness: calc(var(--border) * 3);
-}
-
 .zx-skeleton__root {
     --skeleton-fill: var(--color-base-300);
 }
@@ -6196,15 +6640,14 @@
 }
 
 .zx-spinner__root {
-    --spinner-size: calc(var(--size-field) * 0.5);
     --spinner-ink: var(--color-primary);
     --spinner-track: var(--color-base-300);
 }
 
 .zx-spinner__root {
     display: inline-block;
-    inline-size: var(--spinner-size);
-    block-size: var(--spinner-size);
+    inline-size: calc(var(--size-field) * 0.5);
+    block-size: calc(var(--size-field) * 0.5);
     box-sizing: border-box;
     border-radius: 50%;
     border: calc(var(--border) * 2) solid var(--spinner-track);
@@ -6212,6 +6655,26 @@
     animation: zero-daisyui-spin 0.7s linear infinite;
 }
 
+.zx-spinner__root.zx-a-size-xs {
+    inline-size: calc(var(--size-field) * 0.35);
+    block-size: calc(var(--size-field) * 0.35);
+}
+
+.zx-spinner__root.zx-a-size-sm {
+    inline-size: calc(var(--size-field) * 0.42);
+    block-size: calc(var(--size-field) * 0.42);
+}
+
+.zx-spinner__root.zx-a-size-lg {
+    inline-size: calc(var(--size-field) * 0.7);
+    block-size: calc(var(--size-field) * 0.7);
+}
+
+.zx-spinner__root.zx-a-size-xl {
+    inline-size: calc(var(--size-field) * 0.9);
+    block-size: calc(var(--size-field) * 0.9);
+}
+
 .zx-spinner__root.zx-a-color-primary {
     --spinner-ink: var(--color-primary);
 }
@@ -6243,22 +6706,6 @@
 .zx-spinner__root.zx-a-color-error {
     --spinner-ink: var(--color-error);
 }
-
-.zx-spinner__root.zx-a-size-xs {
-    --spinner-size: calc(var(--size-field) * 0.35);
-}
-
-.zx-spinner__root.zx-a-size-sm {
-    --spinner-size: calc(var(--size-field) * 0.42);
-}
-
-.zx-spinner__root.zx-a-size-lg {
-    --spinner-size: calc(var(--size-field) * 0.7);
-}
-
-.zx-spinner__root.zx-a-size-xl {
-    --spinner-size: calc(var(--size-field) * 0.9);
-}
 @keyframes zero-daisyui-spin {
     to { transform: rotate(360deg); }
 }
@@ -6269,7 +6716,7 @@
 }
 
 .zx-kbd__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     min-inline-size: 1.75em;
@@ -6348,20 +6795,43 @@
 
 .zx-status__root {
     --status-ink: var(--color-base-content);
-    --status-size: calc(var(--size-selector) * 2.5);
 }
 
 .zx-status__root {
     display: inline-block;
-    inline-size: var(--status-size);
-    block-size: var(--status-size);
+    inline-size: calc(var(--size-selector) * 2.5);
+    block-size: calc(var(--size-selector) * 2.5);
     box-sizing: border-box;
     vertical-align: middle;
     background: var(--status-ink);
-    border: calc(var(--status-size) / 2) solid var(--status-ink);
+    border: calc((var(--size-selector) * 2.5) / 2) solid var(--status-ink);
     border-radius: 9999px;
 }
 
+.zx-status__root.zx-a-size-xs {
+    inline-size: calc(var(--size-selector) * 1.5);
+    block-size: calc(var(--size-selector) * 1.5);
+    border: calc((var(--size-selector) * 1.5) / 2) solid var(--status-ink);
+}
+
+.zx-status__root.zx-a-size-sm {
+    inline-size: calc(var(--size-selector) * 2);
+    block-size: calc(var(--size-selector) * 2);
+    border: calc((var(--size-selector) * 2) / 2) solid var(--status-ink);
+}
+
+.zx-status__root.zx-a-size-lg {
+    inline-size: calc(var(--size-selector) * 3);
+    block-size: calc(var(--size-selector) * 3);
+    border: calc((var(--size-selector) * 3) / 2) solid var(--status-ink);
+}
+
+.zx-status__root.zx-a-size-xl {
+    inline-size: calc(var(--size-selector) * 3.5);
+    block-size: calc(var(--size-selector) * 3.5);
+    border: calc((var(--size-selector) * 3.5) / 2) solid var(--status-ink);
+}
+
 .zx-status__root.zx-a-color-primary {
     --status-ink: var(--color-primary);
 }
@@ -6394,25 +6864,9 @@
     --status-ink: var(--color-error);
 }
 
-.zx-status__root.zx-a-size-xs {
-    --status-size: calc(var(--size-selector) * 1.5);
-}
-
-.zx-status__root.zx-a-size-sm {
-    --status-size: calc(var(--size-selector) * 2);
-}
-
-.zx-status__root.zx-a-size-lg {
-    --status-size: calc(var(--size-selector) * 3);
-}
-
-.zx-status__root.zx-a-size-xl {
-    --status-size: calc(var(--size-selector) * 3.5);
-}
-
 .zx-indicator__root {
     position: relative;
-    display: inline-flex;
+    display: flex;
     vertical-align: middle;
     max-width: max-content;
 }
@@ -6657,7 +7111,6 @@
 
 .zx-timeline__root {
     --timeline-accent: var(--color-base-content);
-    --timeline-marker-size: calc(var(--size-selector) * 3);
 }
 
 .zx-timeline__root {
@@ -6689,18 +7142,42 @@
 }
 
 .zx-timeline__marker {
-    inline-size: var(--timeline-marker-size);
-    block-size: var(--timeline-marker-size);
+    inline-size: calc(var(--size-selector) * 3);
+    block-size: calc(var(--size-selector) * 3);
     box-sizing: border-box;
     border-radius: 9999px;
     background: var(--timeline-accent);
-    border: calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent);
+    border: calc((var(--size-selector) * 3) / 2) solid var(--timeline-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0;
 }
 
+.zx-timeline__marker.zx-a-size-xs {
+    inline-size: calc(var(--size-selector) * 2);
+    block-size: calc(var(--size-selector) * 2);
+    border: calc((var(--size-selector) * 2) / 2) solid var(--timeline-accent);
+}
+
+.zx-timeline__marker.zx-a-size-sm {
+    inline-size: calc(var(--size-selector) * 2.5);
+    block-size: calc(var(--size-selector) * 2.5);
+    border: calc((var(--size-selector) * 2.5) / 2) solid var(--timeline-accent);
+}
+
+.zx-timeline__marker.zx-a-size-lg {
+    inline-size: calc(var(--size-selector) * 3.5);
+    block-size: calc(var(--size-selector) * 3.5);
+    border: calc((var(--size-selector) * 3.5) / 2) solid var(--timeline-accent);
+}
+
+.zx-timeline__marker.zx-a-size-xl {
+    inline-size: calc(var(--size-selector) * 4);
+    block-size: calc(var(--size-selector) * 4);
+    border: calc((var(--size-selector) * 4) / 2) solid var(--timeline-accent);
+}
+
 .zx-timeline__connector {
     background: var(--color-base-300);
 }
@@ -6765,34 +7242,18 @@
     --timeline-accent: var(--color-error);
 }
 
-.zx-timeline__marker.zx-a-size-xs {
-    --timeline-marker-size: calc(var(--size-selector) * 2);
-}
-
 .zx-timeline__content.zx-a-size-xs {
     font-size: var(--text-xs);
 }
 
-.zx-timeline__marker.zx-a-size-sm {
-    --timeline-marker-size: calc(var(--size-selector) * 2.5);
-}
-
 .zx-timeline__content.zx-a-size-sm {
     font-size: var(--text-xs);
 }
 
-.zx-timeline__marker.zx-a-size-lg {
-    --timeline-marker-size: calc(var(--size-selector) * 3.5);
-}
-
 .zx-timeline__content.zx-a-size-lg {
     font-size: var(--text-md);
 }
 
-.zx-timeline__marker.zx-a-size-xl {
-    --timeline-marker-size: calc(var(--size-selector) * 4);
-}
-
 .zx-timeline__content.zx-a-size-xl {
     font-size: var(--text-md);
 }
@@ -6944,8 +7405,6 @@
 }
 
 .zx-radial-progress__root {
-    --radial-size: calc(var(--size-selector) * 16);
-    --radial-thickness: calc(var(--size-selector) * 1.5);
     --radial-ink: var(--color-primary);
     --radial-track: var(--color-base-200);
 }
@@ -6954,11 +7413,31 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: var(--radial-size);
-    block-size: var(--radial-size);
+    inline-size: calc(var(--size-selector) * 16);
+    block-size: calc(var(--size-selector) * 16);
     border-radius: 50%;
 }
 
+.zx-radial-progress__root.zx-a-size-xs {
+    inline-size: calc(var(--size-selector) * 10);
+    block-size: calc(var(--size-selector) * 10);
+}
+
+.zx-radial-progress__root.zx-a-size-sm {
+    inline-size: calc(var(--size-selector) * 13);
+    block-size: calc(var(--size-selector) * 13);
+}
+
+.zx-radial-progress__root.zx-a-size-lg {
+    inline-size: calc(var(--size-selector) * 20);
+    block-size: calc(var(--size-selector) * 20);
+}
+
+.zx-radial-progress__root.zx-a-size-xl {
+    inline-size: calc(var(--size-selector) * 24);
+    block-size: calc(var(--size-selector) * 24);
+}
+
 .zx-root .zx-radial-progress__root.zx-s-complete {
     --radial-ink: #00748c;
 }
@@ -7041,32 +7520,12 @@
 .zx-radial-progress__root.zx-a-color-error {
     --radial-ink: var(--color-error);
 }
-
-.zx-radial-progress__root.zx-a-size-xs {
-    --radial-size: calc(var(--size-selector) * 10);
-    --radial-thickness: calc(var(--size-selector) * 1);
-}
-
-.zx-radial-progress__root.zx-a-size-sm {
-    --radial-size: calc(var(--size-selector) * 13);
-    --radial-thickness: calc(var(--size-selector) * 1.25);
-}
-
-.zx-radial-progress__root.zx-a-size-lg {
-    --radial-size: calc(var(--size-selector) * 20);
-    --radial-thickness: calc(var(--size-selector) * 2);
-}
-
-.zx-radial-progress__root.zx-a-size-xl {
-    --radial-size: calc(var(--size-selector) * 24);
-    --radial-thickness: calc(var(--size-selector) * 2.5);
-}
 @keyframes zero-daisyui-radial-spin {
     to { transform: rotate(360deg); }
 }
 
 .zx-join__root {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
 }
 
@@ -7483,7 +7942,6 @@
 .zx-pagination__root {
     --pg-accent: var(--color-primary);
     --pg-accent-content: var(--color-primary-content);
-    --pg-size: calc(var(--size-field) * 10);
     --pg-font: var(--text-sm);
 }
 
@@ -7494,11 +7952,11 @@
 }
 
 .zx-pagination__item {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     padding-inline: var(--space-2xs);
     background: var(--color-base-200);
     color: var(--color-base-content);
@@ -7512,6 +7970,26 @@
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
 }
 
+.zx-pagination__item.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__item.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__item.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__item.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-pagination__item.zx-s-active {
     background: var(--pg-accent);
     color: var(--pg-accent-content);
@@ -7528,15 +8006,35 @@
 }
 
 .zx-pagination__ellipsis {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     font-size: var(--pg-font);
     user-select: none;
 }
 
+.zx-pagination__ellipsis.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__ellipsis.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__ellipsis.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__ellipsis.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-root .zx-pagination__ellipsis {
     color: #08080aa6;
 }
@@ -7558,11 +8056,11 @@
 }
 
 .zx-pagination__prev-trigger {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     background: var(--color-base-200);
     color: var(--color-base-content);
     border: none;
@@ -7574,6 +8072,26 @@
     transition: background var(--duration-fast) var(--ease-standard);
 }
 
+.zx-pagination__prev-trigger.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__prev-trigger.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__prev-trigger.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__prev-trigger.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-pagination__prev-trigger.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -7585,11 +8103,11 @@
 }
 
 .zx-pagination__next-trigger {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: var(--pg-size);
-    block-size: var(--pg-size);
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
     background: var(--color-base-200);
     color: var(--color-base-content);
     border: none;
@@ -7601,6 +8119,26 @@
     transition: background var(--duration-fast) var(--ease-standard);
 }
 
+.zx-pagination__next-trigger.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__next-trigger.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__next-trigger.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__next-trigger.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
 .zx-pagination__next-trigger.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -7652,27 +8190,16 @@
 }
 
 .zx-pagination__root.zx-a-size-xs {
-    --pg-size: calc(var(--size-field) * 7);
     --pg-font: var(--text-xs);
 }
 
-.zx-pagination__root.zx-a-size-sm {
-    --pg-size: calc(var(--size-field) * 9);
-}
-
-.zx-pagination__root.zx-a-size-lg {
-    --pg-size: calc(var(--size-field) * 12);
-}
-
 .zx-pagination__root.zx-a-size-xl {
-    --pg-size: calc(var(--size-field) * 14);
     --pg-font: var(--text-lg);
 }
 
 .zx-steps__root {
     --steps-accent: var(--color-primary);
     --steps-accent-content: var(--color-primary-content);
-    --steps-ind: calc(var(--size-selector) * 7);
     --steps-font: var(--text-sm);
 }
 
@@ -7773,13 +8300,13 @@
 }
 
 .zx-steps__indicator {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: var(--steps-ind);
-    block-size: var(--steps-ind);
+    inline-size: calc(var(--size-selector) * 7);
+    block-size: calc(var(--size-selector) * 7);
     border-radius: 9999px;
-    font-size: calc(var(--steps-ind) * 0.45);
+    font-size: calc((var(--size-selector) * 7) * 0.45);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-none);
     position: relative;
@@ -7788,6 +8315,30 @@
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
 }
 
+.zx-steps__indicator.zx-a-size-xs {
+    inline-size: calc(var(--size-selector) * 5);
+    block-size: calc(var(--size-selector) * 5);
+    font-size: calc((var(--size-selector) * 5) * 0.45);
+}
+
+.zx-steps__indicator.zx-a-size-sm {
+    inline-size: calc(var(--size-selector) * 6);
+    block-size: calc(var(--size-selector) * 6);
+    font-size: calc((var(--size-selector) * 6) * 0.45);
+}
+
+.zx-steps__indicator.zx-a-size-lg {
+    inline-size: calc(var(--size-selector) * 8);
+    block-size: calc(var(--size-selector) * 8);
+    font-size: calc((var(--size-selector) * 8) * 0.45);
+}
+
+.zx-steps__indicator.zx-a-size-xl {
+    inline-size: calc(var(--size-selector) * 9);
+    block-size: calc(var(--size-selector) * 9);
+    font-size: calc((var(--size-selector) * 9) * 0.45);
+}
+
 .zx-steps__indicator.zx-s-active {
     background: var(--steps-accent);
     color: var(--steps-accent-content);
@@ -7817,19 +8368,55 @@
 }
 
 .zx-steps__separator.zx-o-horizontal {
-    inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
+    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7) / 2);
     inset-inline-start: 50%;
     inline-size: 100%;
     block-size: var(--border);
 }
 
+.zx-steps__separator.zx-o-horizontal.zx-a-size-xs {
+    inset-block-start: 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);
+}
+
+.zx-steps__separator.zx-o-horizontal.zx-a-size-lg {
+    inset-block-start: 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);
+}
+
 .zx-steps__separator.zx-o-vertical {
-    inset-inline-start: calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + var(--steps-ind));
+    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);
 }
 
+.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));
+}
+
+.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));
+}
+
+.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));
+}
+
+.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));
+}
+
 .zx-steps__title {
     font-weight: var(--weight-medium);
 }
@@ -8060,26 +8647,16 @@
 }
 
 .zx-steps__root.zx-a-size-xs {
-    --steps-ind: calc(var(--size-selector) * 5);
     --steps-font: var(--text-xs);
 }
 
-.zx-steps__root.zx-a-size-sm {
-    --steps-ind: calc(var(--size-selector) * 6);
-}
-
-.zx-steps__root.zx-a-size-lg {
-    --steps-ind: calc(var(--size-selector) * 8);
-}
-
 .zx-steps__root.zx-a-size-xl {
-    --steps-ind: calc(var(--size-selector) * 9);
     --steps-font: var(--text-md);
 }
 
 .zx-drawer__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -8135,7 +8712,7 @@
 
 .zx-drawer__close {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -8275,7 +8852,6 @@
 
 .zx-table__root {
     --table-accent: var(--color-base-content);
-    --table-pad-block: var(--space-sm);
     --table-pad-inline: var(--space-md);
     --table-font: var(--text-sm);
 }
@@ -8297,10 +8873,26 @@
 .zx-table__caption {
     caption-side: top;
     text-align: start;
-    padding: var(--table-pad-block) var(--table-pad-inline);
+    padding: var(--space-sm) var(--table-pad-inline);
     font-size: var(--text-xs);
 }
 
+.zx-table__caption.zx-a-size-xs {
+    padding: calc(var(--space-xs) / 2) var(--table-pad-inline);
+}
+
+.zx-table__caption.zx-a-size-sm {
+    padding: var(--space-xs) var(--table-pad-inline);
+}
+
+.zx-table__caption.zx-a-size-lg {
+    padding: var(--space-md) var(--table-pad-inline);
+}
+
+.zx-table__caption.zx-a-size-xl {
+    padding: var(--space-lg) var(--table-pad-inline);
+}
+
 .zx-root .zx-table__caption {
     color: #07070899;
 }
@@ -8354,17 +8946,49 @@
 }
 
 .zx-table__header-cell {
-    padding: var(--table-pad-block) var(--table-pad-inline);
+    padding: var(--space-sm) var(--table-pad-inline);
     text-align: start;
     font-weight: var(--weight-semibold);
     font-size: var(--text-xs);
 }
 
+.zx-table__header-cell.zx-a-size-xs {
+    padding: calc(var(--space-xs) / 2) var(--table-pad-inline);
+}
+
+.zx-table__header-cell.zx-a-size-sm {
+    padding: var(--space-xs) var(--table-pad-inline);
+}
+
+.zx-table__header-cell.zx-a-size-lg {
+    padding: var(--space-md) var(--table-pad-inline);
+}
+
+.zx-table__header-cell.zx-a-size-xl {
+    padding: var(--space-lg) var(--table-pad-inline);
+}
+
 .zx-table__cell {
-    padding: var(--table-pad-block) var(--table-pad-inline);
+    padding: var(--space-sm) var(--table-pad-inline);
     text-align: start;
 }
 
+.zx-table__cell.zx-a-size-xs {
+    padding: calc(var(--space-xs) / 2) var(--table-pad-inline);
+}
+
+.zx-table__cell.zx-a-size-sm {
+    padding: var(--space-xs) var(--table-pad-inline);
+}
+
+.zx-table__cell.zx-a-size-lg {
+    padding: var(--space-md) var(--table-pad-inline);
+}
+
+.zx-table__cell.zx-a-size-xl {
+    padding: var(--space-lg) var(--table-pad-inline);
+}
+
 .zx-root .zx-table__root.zx-a-color-primary {
     --table-accent: #3f2bcb;
 }
@@ -8526,32 +9150,27 @@
 }
 
 .zx-table__root.zx-a-size-xs {
-    --table-pad-block: calc(var(--space-xs) / 2);
     --table-pad-inline: var(--space-xs);
     --table-font: var(--text-xs);
 }
 
 .zx-table__root.zx-a-size-sm {
-    --table-pad-block: var(--space-xs);
     --table-pad-inline: var(--space-sm);
     --table-font: var(--text-xs);
 }
 
 .zx-table__root.zx-a-size-lg {
-    --table-pad-block: var(--space-md);
     --table-pad-inline: var(--space-lg);
     --table-font: var(--text-md);
 }
 
 .zx-table__root.zx-a-size-xl {
-    --table-pad-block: var(--space-lg);
     --table-pad-inline: var(--space-xl);
     --table-font: var(--text-md);
 }
 
 .zx-file-upload__root {
     --fu-accent: var(--color-primary);
-    --fu-pad: var(--space-lg);
     --fu-font: var(--text-sm);
 }
 
@@ -8572,7 +9191,7 @@
 
 .zx-file-upload__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--space-xs);
     padding: var(--space-xs) var(--space-lg);
@@ -8602,7 +9221,7 @@
 
 .zx-file-upload__dropzone {
     justify-self: stretch;
-    padding: var(--fu-pad);
+    padding: var(--space-lg);
     text-align: center;
     font-size: var(--fu-font);
     border: calc(var(--border) * 2) dashed var(--color-base-300);
@@ -8611,6 +9230,22 @@
     cursor: pointer;
 }
 
+.zx-file-upload__dropzone.zx-a-size-xs {
+    padding: var(--space-sm);
+}
+
+.zx-file-upload__dropzone.zx-a-size-sm {
+    padding: var(--space-md);
+}
+
+.zx-file-upload__dropzone.zx-a-size-lg {
+    padding: var(--space-xl);
+}
+
+.zx-file-upload__dropzone.zx-a-size-xl {
+    padding: calc(var(--space-xl) * 1.25);
+}
+
 .zx-root .zx-file-upload__dropzone {
     color: #07070899;
 }
@@ -8880,22 +9515,18 @@
 }
 
 .zx-file-upload__root.zx-a-size-xs {
-    --fu-pad: var(--space-sm);
     --fu-font: var(--text-xs);
 }
 
 .zx-file-upload__root.zx-a-size-sm {
-    --fu-pad: var(--space-md);
     --fu-font: var(--text-xs);
 }
 
 .zx-file-upload__root.zx-a-size-lg {
-    --fu-pad: var(--space-xl);
     --fu-font: var(--text-md);
 }
 
 .zx-file-upload__root.zx-a-size-xl {
-    --fu-pad: calc(var(--space-xl) * 1.25);
     --fu-font: var(--text-md);
 }
 
@@ -9411,7 +10042,7 @@
 }
 
 .zx-countdown__root {
-    display: inline-flex;
+    display: flex;
     align-items: baseline;
     gap: 0.1em;
     font-size: var(--countdown-font);