@sigx/zero-daisyui 0.2.0-beta.4 → 0.2.0-beta.6

package/dist/lynx/index.css

@@ -462,6 +462,7 @@
     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 {
@@ -526,6 +527,26 @@
     --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-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;
 }
@@ -546,6 +567,26 @@
     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;
 }
@@ -566,6 +607,26 @@
     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;
 }
@@ -586,6 +647,26 @@
     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;
 }
@@ -606,6 +687,26 @@
     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;
 }
@@ -626,6 +727,26 @@
     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;
 }
@@ -646,6 +767,26 @@
     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;
 }
@@ -666,6 +807,26 @@
     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;
 }
@@ -692,7 +853,7 @@
 }
 
 .zx-tabs__tab.zx-a-variant-border.zx-s-active {
-    border-bottom-color: currentColor;
+    border-bottom-color: var(--tab-active-ink);
 }
 
 .zx-tabs__tab.zx-a-variant-lift {
@@ -1193,7 +1354,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1203,6 +1363,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-dialog__trigger.zx-f-disabled {
@@ -1274,7 +1436,7 @@
     display: flex;
     justify-content: flex-end;
     gap: var(--space-md);
-    margin-block-start: 1.5rem;
+    margin-top: 1.5rem;
 }
 
 .zx-dialog__close {
@@ -1284,7 +1446,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1294,6 +1455,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-dialog__close.zx-f-disabled {
@@ -1312,7 +1475,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1322,6 +1484,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-dialog__cancel.zx-f-disabled {
@@ -1423,26 +1587,30 @@
 
 .zx-dialog__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-dialog__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-dialog__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-dialog__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);
 }
 @keyframes zero-daisy-pop {
     from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }
@@ -1455,7 +1623,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1465,6 +1632,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-popover__trigger.zx-f-disabled {
@@ -1512,7 +1681,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 8);
-    padding-inline: calc(var(--size-field) * 3);
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1522,6 +1690,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 3);
+    padding-right: calc(var(--size-field) * 3);
 }
 
 .zx-popover__close.zx-f-disabled {
@@ -1623,26 +1793,30 @@
 
 .zx-popover__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-popover__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-popover__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-popover__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);
 }
 
 .zx-tooltip__trigger {
@@ -1652,7 +1826,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1662,6 +1835,8 @@
     box-shadow: var(--shadow-xs);
     cursor: help;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-tooltip__trigger.zx-f-disabled {
@@ -1787,26 +1962,30 @@
 
 .zx-tooltip__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-tooltip__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-tooltip__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-tooltip__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);
 }
 
 .zx-menu__trigger {
@@ -1816,7 +1995,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -1826,6 +2004,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-menu__trigger.zx-f-disabled {
@@ -2080,26 +2260,30 @@
 
 .zx-menu__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-menu__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-menu__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-menu__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);
 }
 
 .zx-field__root {
@@ -2373,6 +2557,7 @@
     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;
@@ -2425,13 +2610,13 @@
     width: 100%;
     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;
     line-height: 0.75;
-    transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), translate var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    transform: rotate(45deg);
 }
 
 .zx-checkbox__indicator.zx-s-checked {
@@ -2442,8 +2627,7 @@
 .zx-checkbox__indicator.zx-s-indeterminate {
     clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
     opacity: 1;
-    translate: 0 -35%;
-    rotate: 0deg;
+    transform: translateY(-35%) rotate(0deg);
 }
 
 .zx-checkbox__label {
@@ -2572,6 +2756,7 @@
     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);
@@ -2600,7 +2785,7 @@
 }
 
 .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;
 }
 
@@ -2621,7 +2806,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);
 }
 
@@ -2958,7 +3143,7 @@
     --progress-accent: #e4a7a9;
 }
 @keyframes zero-daisy-indeterminate {
-    from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }
+    from { margin-left: -40%; } to { margin-left: 100%; }
 }
 
 .zx-slider__root {
@@ -3002,10 +3187,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 {
@@ -3022,15 +3208,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 {
@@ -3043,11 +3229,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 {
@@ -3387,7 +3573,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);
@@ -3399,6 +3584,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 {
@@ -3539,32 +3726,37 @@
 
 .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);
 }
 
 .zx-button__root {
@@ -3903,14 +4095,16 @@
 }
 
 .zx-button__root.zx-m-square {
-    padding-inline: 0;
     aspect-ratio: 1;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .zx-button__root.zx-m-circle {
-    padding-inline: 0;
     aspect-ratio: 1;
     border-radius: 9999px;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .zx-button__root.zx-m-active {
@@ -4052,7 +4246,7 @@
 
 .zx-toast__viewport.zx-p-top-start {
     top: 0;
-    inset-inline-start: 0;
+    left: 0;
 }
 
 .zx-toast__viewport.zx-p-top {
@@ -4063,13 +4257,13 @@
 
 .zx-toast__viewport.zx-p-top-end {
     top: 0;
-    inset-inline-end: 0;
+    right: 0;
 }
 
 .zx-toast__viewport.zx-p-bottom-start {
     bottom: 0;
-    inset-inline-start: 0;
     flex-direction: column-reverse;
+    left: 0;
 }
 
 .zx-toast__viewport.zx-p-bottom {
@@ -4081,8 +4275,8 @@
 
 .zx-toast__viewport.zx-p-bottom-end {
     bottom: 0;
-    inset-inline-end: 0;
     flex-direction: column-reverse;
+    right: 0;
 }
 
 .zx-toast__root {
@@ -4768,11 +4962,12 @@
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-none);
-    padding-inline: var(--space-lg);
     cursor: pointer;
     user-select: none;
     border-inline-start: var(--border) solid var(--color-base-300);
     transition: background var(--duration-fast) var(--ease-standard);
+    padding-left: var(--space-lg);
+    padding-right: var(--space-lg);
 }
 
 .zx-number-input__increment-trigger.zx-f-disabled {
@@ -4789,11 +4984,12 @@
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-none);
-    padding-inline: var(--space-lg);
     cursor: pointer;
     user-select: none;
     border-inline-end: var(--border) solid var(--color-base-300);
     transition: background var(--duration-fast) var(--ease-standard);
+    padding-left: var(--space-lg);
+    padding-right: var(--space-lg);
 }
 
 .zx-number-input__decrement-trigger.zx-f-disabled {
@@ -5278,7 +5474,7 @@
 .zx-tree-view__branch-content {
     display: flex;
     flex-direction: column;
-    padding-inline-start: var(--space-lg);
+    padding-left: var(--space-lg);
 }
 
 .zx-tree-view__root.zx-a-color-primary {
@@ -5641,9 +5837,9 @@
     font: inherit;
     font-size: var(--text-sm);
     padding: var(--space-sm) var(--space-md);
-    padding-inline-end: calc(var(--space-md) + 1.25em);
     cursor: pointer;
     transition: border-color var(--duration-fast) var(--ease-standard);
+    padding-right: calc(var(--space-md) + 1.25em);
 }
 
 .zx-native-select__control.zx-f-invalid {
@@ -5682,10 +5878,10 @@
 
 .zx-native-select__indicator {
     position: absolute;
-    inset-inline-end: var(--space-md);
     pointer-events: none;
     opacity: 0.6;
     font-size: var(--text-sm);
+    right: var(--space-md);
 }
 
 .zx-native-select__root.zx-a-color-primary {
@@ -5724,28 +5920,28 @@
     height: calc(var(--size-field) * 8);
     font-size: var(--text-xs);
     padding: var(--space-2xs) var(--space-xs);
-    padding-inline-end: calc(var(--space-xs) + 1.25em);
+    padding-right: calc(var(--space-xs) + 1.25em);
 }
 
 .zx-native-select__control.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
     font-size: var(--text-xs);
     padding: var(--space-xs) var(--space-sm);
-    padding-inline-end: calc(var(--space-sm) + 1.25em);
+    padding-right: calc(var(--space-sm) + 1.25em);
 }
 
 .zx-native-select__control.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
     font-size: var(--text-md);
     padding: var(--space-md) var(--space-lg);
-    padding-inline-end: calc(var(--space-lg) + 1.25em);
+    padding-right: calc(var(--space-lg) + 1.25em);
 }
 
 .zx-native-select__control.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
     font-size: var(--text-lg);
     padding: var(--space-lg) var(--space-xl);
-    padding-inline-end: calc(var(--space-xl) + 1.25em);
+    padding-right: calc(var(--space-xl) + 1.25em);
 }
 
 .zx-card__root {
@@ -6715,51 +6911,51 @@
 }
 
 .zx-indicator__item.zx-p-top-start {
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    translate: -50% -50%;
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
 }
 
 .zx-indicator__item.zx-p-top {
-    inset-block-start: 0;
-    inset-inline-start: 50%;
-    translate: -50% -50%;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .zx-indicator__item.zx-p-top-end {
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    translate: 50% -50%;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
 }
 
 .zx-indicator__item.zx-p-start {
-    inset-block-start: 50%;
-    inset-inline-start: 0;
-    translate: -50% -50%;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
 }
 
 .zx-indicator__item.zx-p-end {
-    inset-block-start: 50%;
-    inset-inline-end: 0;
-    translate: 50% -50%;
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
 }
 
 .zx-indicator__item.zx-p-bottom-start {
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    translate: -50% 50%;
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
 }
 
 .zx-indicator__item.zx-p-bottom {
-    inset-block-end: 0;
-    inset-inline-start: 50%;
-    translate: -50% 50%;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
 }
 
 .zx-indicator__item.zx-p-bottom-end {
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    translate: 50% 50%;
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
 }
 
 .zx-indicator__item.zx-a-color-primary {
@@ -7104,7 +7300,8 @@
     display: grid;
     column-gap: var(--space-sm);
     row-gap: var(--space-2xs);
-    padding-block: var(--space-2xs);
+    padding-top: var(--space-2xs);
+    padding-bottom: var(--space-2xs);
 }
 
 .zx-chat__root.zx-p-start {
@@ -7794,7 +7991,6 @@
     justify-content: center;
     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);
     border: none;
@@ -7805,6 +8001,8 @@
     appearance: none;
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    padding-left: var(--space-2xs);
+    padding-right: var(--space-2xs);
 }
 
 .zx-pagination__item.zx-a-size-xs {
@@ -8133,7 +8331,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 {
@@ -8205,53 +8403,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 {
@@ -8498,7 +8696,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -8508,6 +8705,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-drawer__trigger.zx-f-disabled {
@@ -8554,7 +8753,6 @@
     justify-content: center;
     gap: 0.5em;
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--color-base-content);
@@ -8564,6 +8762,8 @@
     box-shadow: var(--shadow-xs);
     cursor: pointer;
     transition: background var(--duration-normal) var(--ease-standard);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-drawer__close.zx-f-disabled {
@@ -8665,26 +8865,30 @@
 
 .zx-drawer__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-drawer__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-drawer__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-drawer__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);
 }
 
 .zx-table__root {
@@ -9396,8 +9600,6 @@
 .zx-carousel__prev-trigger {
     appearance: none;
     position: absolute;
-    inset-block-start: calc(50% - var(--carousel-nav) / 2);
-    inset-inline-start: var(--space-sm);
     inline-size: var(--carousel-nav);
     block-size: var(--carousel-nav);
     display: grid;
@@ -9410,6 +9612,8 @@
     border-radius: 9999px;
     cursor: pointer;
     z-index: 1;
+    top: calc(50% - var(--carousel-nav) / 2);
+    left: var(--space-sm);
 }
 
 .zx-carousel__prev-trigger.zx-f-disabled {
@@ -9425,8 +9629,6 @@
 .zx-carousel__next-trigger {
     appearance: none;
     position: absolute;
-    inset-block-start: calc(50% - var(--carousel-nav) / 2);
-    inset-inline-end: var(--space-sm);
     inline-size: var(--carousel-nav);
     block-size: var(--carousel-nav);
     display: grid;
@@ -9439,6 +9641,8 @@
     border-radius: 9999px;
     cursor: pointer;
     z-index: 1;
+    top: calc(50% - var(--carousel-nav) / 2);
+    right: var(--space-sm);
 }
 
 .zx-carousel__next-trigger.zx-f-disabled {
@@ -10098,19 +10302,21 @@
 .zx-diff__after {
     grid-area: 1 / 1;
     position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
 }
 
 .zx-diff__handle {
-    inset-block: 0;
     inline-size: var(--diff-hit);
-    margin-inline-start: calc(var(--diff-hit) / -2);
     display: grid;
     place-items: center;
     cursor: ew-resize;
     touch-action: none;
     z-index: 1;
+    top: 0;
+    bottom: 0;
+    margin-left: calc(var(--diff-hit) / -2);
 }
 
 .zx-diff__handle.zx-f-focus-visible {