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

package/dist/lynx/components/button.css

@@ -334,14 +334,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 {

package/dist/lynx/components/carousel.css

@@ -27,8 +27,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;
@@ -41,6 +39,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 {
@@ -56,8 +56,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;
@@ -70,6 +68,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 {

package/dist/lynx/components/chat.css

@@ -7,7 +7,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 {

package/dist/lynx/components/checkbox.css

@@ -78,13 +78,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 {
@@ -95,8 +95,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 {

package/dist/lynx/components/dialog.css

@@ -5,7 +5,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);
@@ -15,6 +14,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 {
@@ -86,7 +87,7 @@
     display: flex;
     justify-content: flex-end;
     gap: var(--space-md);
-    margin-block-start: 1.5rem;
+    margin-top: 1.5rem;
 }
 
 .zx-dialog__close {
@@ -96,7 +97,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);
@@ -106,6 +106,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 {
@@ -124,7 +126,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);
@@ -134,6 +135,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 {
@@ -235,26 +238,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); }

package/dist/lynx/components/diff.css

@@ -19,19 +19,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 {

package/dist/lynx/components/drawer.css

@@ -5,7 +5,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);
@@ -15,6 +14,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 {
@@ -61,7 +62,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);
@@ -71,6 +71,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 {
@@ -172,24 +174,28 @@
 
 .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);
 }

package/dist/lynx/components/indicator.css

@@ -12,51 +12,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 {

package/dist/lynx/components/menu.css

@@ -5,7 +5,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);
@@ -15,6 +14,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 {
@@ -269,24 +270,28 @@
 
 .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);
 }

package/dist/lynx/components/native-select.css

@@ -22,9 +22,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 {
@@ -63,10 +63,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 {
@@ -105,26 +105,26 @@
     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);
 }

package/dist/lynx/components/number-input.css

@@ -91,11 +91,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 {
@@ -112,11 +113,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 {

package/dist/lynx/components/pagination.css

@@ -16,7 +16,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;
@@ -27,6 +26,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 {

package/dist/lynx/components/popover.css

@@ -5,7 +5,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);
@@ -15,6 +14,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 {
@@ -62,7 +63,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);
@@ -72,6 +72,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 {
@@ -173,24 +175,28 @@
 
 .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);
 }

package/dist/lynx/components/progress.css

@@ -251,5 +251,5 @@
     --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%; }
 }

package/dist/lynx/components/select.css

@@ -14,7 +14,6 @@
     justify-content: space-between;
     gap: var(--space-lg);
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
     color: var(--color-base-content);
@@ -26,6 +25,8 @@
     transition: background var(--duration-normal) var(--ease-standard);
     box-sizing: border-box;
     min-width: 13rem;
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-select__trigger.zx-f-disabled {
@@ -166,30 +167,35 @@
 
 .zx-select__trigger.zx-a-size-xs {
     height: calc(var(--size-field) * 8);
-    padding-inline: calc(var(--size-field) * 2);
     font-size: var(--text-xs);
+    padding-left: calc(var(--size-field) * 2);
+    padding-right: calc(var(--size-field) * 2);
 }
 
 .zx-select__trigger.zx-a-size-sm {
     height: calc(var(--size-field) * 10);
-    padding-inline: calc(var(--size-field) * 3);
     font-size: var(--text-sm);
+    padding-left: calc(var(--size-field) * 3);
+    padding-right: calc(var(--size-field) * 3);
 }
 
 .zx-select__trigger.zx-a-size-md {
     height: calc(var(--size-field) * 12);
-    padding-inline: calc(var(--size-field) * 4);
     font-size: var(--text-sm);
+    padding-left: calc(var(--size-field) * 4);
+    padding-right: calc(var(--size-field) * 4);
 }
 
 .zx-select__trigger.zx-a-size-lg {
     height: calc(var(--size-field) * 14);
-    padding-inline: calc(var(--size-field) * 5);
     font-size: var(--text-md);
+    padding-left: calc(var(--size-field) * 5);
+    padding-right: calc(var(--size-field) * 5);
 }
 
 .zx-select__trigger.zx-a-size-xl {
     height: calc(var(--size-field) * 16);
-    padding-inline: calc(var(--size-field) * 6);
     font-size: var(--text-lg);
+    padding-left: calc(var(--size-field) * 6);
+    padding-right: calc(var(--size-field) * 6);
 }

package/dist/lynx/components/slider.css

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