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

package/dist/lynx/index.css

@@ -1354,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);
@@ -1364,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 {
@@ -1435,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 {
@@ -1445,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);
@@ -1455,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 {
@@ -1473,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);
@@ -1483,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 {
@@ -1584,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); }
@@ -1616,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);
@@ -1626,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 {
@@ -1673,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);
@@ -1683,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 {
@@ -1784,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 {
@@ -1813,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);
@@ -1823,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 {
@@ -1948,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 {
@@ -1977,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);
@@ -1987,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 {
@@ -2241,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 {
@@ -2587,13 +2610,13 @@
     width: 100%;
     height: 100%;
     opacity: 0;
-    rotate: 45deg;
     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 {
@@ -2604,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 {
@@ -3121,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 {
@@ -3165,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 {
@@ -3185,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 {
@@ -3206,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 {
@@ -3550,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);
@@ -3562,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 {
@@ -3702,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 {
@@ -4066,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 {
@@ -4215,7 +4246,7 @@
 
 .zx-toast__viewport.zx-p-top-start {
     top: 0;
-    inset-inline-start: 0;
+    left: 0;
 }
 
 .zx-toast__viewport.zx-p-top {
@@ -4226,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 {
@@ -4244,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 {
@@ -4931,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 {
@@ -4952,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 {
@@ -5441,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 {
@@ -5804,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 {
@@ -5845,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 {
@@ -5887,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 {
@@ -6878,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 {
@@ -7267,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 {
@@ -7957,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;
@@ -7968,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 {
@@ -8296,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 {
@@ -8368,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 {
@@ -8661,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);
@@ -8671,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 {
@@ -8717,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);
@@ -8727,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 {
@@ -8828,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 {
@@ -9559,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;
@@ -9573,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 {
@@ -9588,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;
@@ -9602,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 {
@@ -10261,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 {