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

package/dist/lynx/components/slider.css

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

package/dist/lynx/components/steps.css

@@ -97,7 +97,7 @@
     align-items: flex-start;
     text-align: start;
     column-gap: var(--space-sm);
-    padding-block-end: var(--space-lg);
+    padding-bottom: var(--space-lg);
 }
 
 .zx-steps__indicator {
@@ -169,53 +169,53 @@
 }
 
 .zx-steps__separator.zx-o-horizontal {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7) / 2);
-    inset-inline-start: 50%;
     inline-size: 100%;
     block-size: var(--border);
+    top: calc(var(--space-xs) + (var(--size-selector) * 7) / 2);
+    left: 50%;
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-xs {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 5) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 5) / 2);
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-sm {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 6) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 6) / 2);
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-lg {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 8) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 8) / 2);
 }
 
 .zx-steps__separator.zx-o-horizontal.zx-a-size-xl {
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 9) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 9) / 2);
 }
 
 .zx-steps__separator.zx-o-vertical {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 7) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7));
-    inset-block-end: calc(var(--space-xs) * -1);
     inline-size: var(--border);
+    left: calc(var(--space-xs) + ((var(--size-selector) * 7) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 7));
+    bottom: calc(var(--space-xs) * -1);
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-xs {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 5) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 5));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 5) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 5));
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-sm {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 6) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 6));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 6) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 6));
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-lg {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 8) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 8));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 8) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 8));
 }
 
 .zx-steps__separator.zx-o-vertical.zx-a-size-xl {
-    inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 9) - var(--border)) / 2);
-    inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 9));
+    left: calc(var(--space-xs) + ((var(--size-selector) * 9) - var(--border)) / 2);
+    top: calc(var(--space-xs) + (var(--size-selector) * 9));
 }
 
 .zx-steps__title {

package/dist/lynx/components/tabs.css

@@ -21,6 +21,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 {
@@ -85,6 +86,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;
 }
@@ -105,6 +126,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;
 }
@@ -125,6 +166,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;
 }
@@ -145,6 +206,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;
 }
@@ -165,6 +246,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;
 }
@@ -185,6 +286,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;
 }
@@ -205,6 +326,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;
 }
@@ -225,6 +366,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;
 }
@@ -251,7 +412,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 {

package/dist/lynx/components/toast.css

@@ -20,7 +20,7 @@
 
 .zx-toast__viewport.zx-p-top-start {
     top: 0;
-    inset-inline-start: 0;
+    left: 0;
 }
 
 .zx-toast__viewport.zx-p-top {
@@ -31,13 +31,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 {
@@ -49,8 +49,8 @@
 
 .zx-toast__viewport.zx-p-bottom-end {
     bottom: 0;
-    inset-inline-end: 0;
     flex-direction: column-reverse;
+    right: 0;
 }
 
 .zx-toast__root {

package/dist/lynx/components/tooltip.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: 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 {
@@ -140,24 +141,28 @@
 
 .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);
 }

package/dist/lynx/components/tree-view.css

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