@sigx/zero-daisyui 0.6.0 → 0.7.0

package/dist/lynx/components/tabs.css

@@ -16,6 +16,7 @@
     overflow-x: auto;
     padding: var(--tabs-ring-room);
     scroll-padding-inline: var(--tabs-ring-room);
+    position: relative;
 }
 
 .zx-tabs__tab {
@@ -30,7 +31,6 @@
     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 {
@@ -67,8 +67,13 @@
     outline-offset: 2px;
 }
 
+.zx-tabs__tab.zx-f-pressed {
+    color: var(--color-base-content);
+}
+
 .zx-tabs__indicator {
     display: none;
+    --tab-active-ink: var(--color-base-content);
 }
 
 .zx-tabs__panel {
@@ -99,26 +104,6 @@
     --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;
 }
@@ -139,24 +124,24 @@
     color: #fb8a62;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-secondary {
-    --tab-active-ink: #ad316f;
+.zx-root .zx-tabs__indicator.zx-a-color-primary {
+    --tab-active-ink: #3f2bcb;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary {
-    --tab-active-ink: #fa7cb6;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-primary {
+    --tab-active-ink: #6567ff;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary {
-    --tab-active-ink: #ed9984;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-primary {
+    --tab-active-ink: #a0e791;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary {
-    --tab-active-ink: #677e98;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-primary {
+    --tab-active-ink: #5c7da6;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary {
-    --tab-active-ink: #e68aac;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-primary {
+    --tab-active-ink: #fb8a62;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
@@ -179,24 +164,24 @@
     color: #e68aac;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-accent {
-    --tab-active-ink: #2b786d;
+.zx-root .zx-tabs__indicator.zx-a-color-secondary {
+    --tab-active-ink: #ad316f;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent {
-    --tab-active-ink: #93e5d9;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-secondary {
+    --tab-active-ink: #fa7cb6;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent {
-    --tab-active-ink: #bfade1;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-secondary {
+    --tab-active-ink: #ed9984;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent {
-    --tab-active-ink: #5e7d8c;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-secondary {
+    --tab-active-ink: #677e98;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent {
-    --tab-active-ink: #ab9fe8;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-secondary {
+    --tab-active-ink: #e68aac;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-accent.zx-s-active {
@@ -219,24 +204,24 @@
     color: #ab9fe8;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-neutral {
-    --tab-active-ink: #121214;
+.zx-root .zx-tabs__indicator.zx-a-color-accent {
+    --tab-active-ink: #2b786d;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral {
-    --tab-active-ink: #878e92;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-accent {
+    --tab-active-ink: #93e5d9;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral {
-    --tab-active-ink: #71828c;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-accent {
+    --tab-active-ink: #bfade1;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral {
-    --tab-active-ink: #3a4150;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-accent {
+    --tab-active-ink: #5e7d8c;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral {
-    --tab-active-ink: #667a8a;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-accent {
+    --tab-active-ink: #ab9fe8;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
@@ -259,24 +244,24 @@
     color: #667a8a;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-info {
-    --tab-active-ink: #2685b3;
+.zx-root .zx-tabs__indicator.zx-a-color-neutral {
+    --tab-active-ink: #121214;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info {
-    --tab-active-ink: #70ceff;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-neutral {
+    --tab-active-ink: #878e92;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info {
-    --tab-active-ink: #6ce2f3;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-neutral {
+    --tab-active-ink: #71828c;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info {
-    --tab-active-ink: #89728a;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-neutral {
+    --tab-active-ink: #3a4150;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info {
-    --tab-active-ink: #91d4e3;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-neutral {
+    --tab-active-ink: #667a8a;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-info.zx-s-active {
@@ -299,24 +284,24 @@
     color: #91d4e3;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-success {
-    --tab-active-ink: #2a7858;
+.zx-root .zx-tabs__indicator.zx-a-color-info {
+    --tab-active-ink: #2685b3;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success {
-    --tab-active-ink: #92e5c2;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-info {
+    --tab-active-ink: #70ceff;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success {
-    --tab-active-ink: #8ee0c9;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-info {
+    --tab-active-ink: #6ce2f3;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success {
-    --tab-active-ink: #6b7d6a;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-info {
+    --tab-active-ink: #89728a;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success {
-    --tab-active-ink: #a6cebe;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-info {
+    --tab-active-ink: #91d4e3;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-success.zx-s-active {
@@ -339,24 +324,24 @@
     color: #a6cebe;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-warning {
-    --tab-active-ink: #755a2b;
+.zx-root .zx-tabs__indicator.zx-a-color-success {
+    --tab-active-ink: #2a7858;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning {
-    --tab-active-ink: #f5ddac;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-success {
+    --tab-active-ink: #92e5c2;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning {
-    --tab-active-ink: #cecfa6;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-success {
+    --tab-active-ink: #8ee0c9;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning {
-    --tab-active-ink: #7d7463;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-success {
+    --tab-active-ink: #6b7d6a;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning {
-    --tab-active-ink: #c5c1b7;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-success {
+    --tab-active-ink: #a6cebe;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-warning.zx-s-active {
@@ -379,24 +364,24 @@
     color: #c5c1b7;
 }
 
-.zx-root .zx-tabs__tab.zx-a-color-error {
-    --tab-active-ink: #d9576d;
+.zx-root .zx-tabs__indicator.zx-a-color-warning {
+    --tab-active-ink: #755a2b;
 }
 
-.zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error {
-    --tab-active-ink: #ff7d90;
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-warning {
+    --tab-active-ink: #f5ddac;
 }
 
-.zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error {
-    --tab-active-ink: #f5b3a4;
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-warning {
+    --tab-active-ink: #cecfa6;
 }
 
-.zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error {
-    --tab-active-ink: #a85b64;
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-warning {
+    --tab-active-ink: #7d7463;
 }
 
-.zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error {
-    --tab-active-ink: #f2bbc0;
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-warning {
+    --tab-active-ink: #c5c1b7;
 }
 
 .zx-root .zx-tabs__tab.zx-a-color-error.zx-s-active {
@@ -419,13 +404,37 @@
     color: #f2bbc0;
 }
 
+.zx-root .zx-tabs__indicator.zx-a-color-error {
+    --tab-active-ink: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-error {
+    --tab-active-ink: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-error {
+    --tab-active-ink: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-error {
+    --tab-active-ink: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-error {
+    --tab-active-ink: #f2bbc0;
+}
+
 .zx-tabs__tab.zx-a-variant-border {
     border-radius: var(--radius-field);
-    border-bottom: 3px solid transparent;
 }
 
-.zx-tabs__tab.zx-a-variant-border.zx-s-active {
+.zx-tabs__indicator.zx-a-variant-border {
+    display: flex;
+    box-sizing: border-box;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
     border-bottom-color: var(--tab-active-ink);
+    transform: scaleX(0.8);
 }
 
 .zx-tabs__tab.zx-a-variant-lift {

package/dist/lynx/components/timeline.css

@@ -17,8 +17,11 @@
 }
 
 .zx-timeline__item {
-    display: grid;
+    display: flex;
     position: relative;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
 }
 
 .zx-timeline__item.zx-o-vertical {
@@ -43,30 +46,42 @@
     align-items: center;
     justify-content: center;
     font-size: 0;
+    width: calc(var(--size-selector) * 3);
+    height: calc(var(--size-selector) * 3);
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
 .zx-timeline__marker.zx-a-size-xs {
     inline-size: calc(var(--size-selector) * 2);
     block-size: calc(var(--size-selector) * 2);
     border: calc((var(--size-selector) * 2) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 2);
+    height: calc(var(--size-selector) * 2);
 }
 
 .zx-timeline__marker.zx-a-size-sm {
     inline-size: calc(var(--size-selector) * 2.5);
     block-size: calc(var(--size-selector) * 2.5);
     border: calc((var(--size-selector) * 2.5) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 2.5);
+    height: calc(var(--size-selector) * 2.5);
 }
 
 .zx-timeline__marker.zx-a-size-lg {
     inline-size: calc(var(--size-selector) * 3.5);
     block-size: calc(var(--size-selector) * 3.5);
     border: calc((var(--size-selector) * 3.5) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 3.5);
+    height: calc(var(--size-selector) * 3.5);
 }
 
 .zx-timeline__marker.zx-a-size-xl {
     inline-size: calc(var(--size-selector) * 4);
     block-size: calc(var(--size-selector) * 4);
     border: calc((var(--size-selector) * 4) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
 }
 
 .zx-timeline__connector {
@@ -80,6 +95,31 @@
     inline-size: var(--border);
     min-block-size: var(--space-lg);
     block-size: 100%;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: 100%;
+    height: var(--space-lg);
+    background: transparent;
+    border-left-width: var(--border);
+    border-left-style: solid;
+    border-left-color: var(--color-base-300);
+    margin-left: calc((var(--size-selector) * 3) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-xs {
+    margin-left: calc((var(--size-selector) * 2) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-sm {
+    margin-left: calc((var(--size-selector) * 2.5) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-lg {
+    margin-left: calc((var(--size-selector) * 3.5) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-xl {
+    margin-left: calc((var(--size-selector) * 4) / 2 - var(--border) / 2);
 }
 
 .zx-timeline__connector.zx-o-horizontal {
@@ -89,6 +129,12 @@
     block-size: var(--border);
     min-inline-size: var(--space-lg);
     inline-size: 100%;
+    order: 1;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    height: var(--border);
+    min-width: var(--space-lg);
 }
 
 .zx-timeline__content {
@@ -106,24 +152,35 @@
     grid-row: 1;
     justify-self: end;
     text-align: end;
+    order: -1;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
 }
 
 .zx-timeline__content.zx-o-vertical.zx-p-end {
     grid-column: 3;
     grid-row: 1;
     justify-self: start;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
 }
 
 .zx-timeline__content.zx-o-horizontal.zx-p-start {
     grid-row: 1;
     grid-column: 1;
     align-self: end;
+    order: -1;
+    flex-basis: 100%;
 }
 
 .zx-timeline__content.zx-o-horizontal.zx-p-end {
     grid-row: 3;
     grid-column: 1;
     align-self: start;
+    order: 2;
+    flex-basis: 100%;
 }
 
 .zx-timeline__marker.zx-a-color-primary {

package/dist/lynx/components/toast.css

@@ -12,52 +12,62 @@
     border: none;
     background: transparent;
     overflow: visible;
+    width: auto;
     list-style: none;
     flex-direction: column;
     gap: var(--space-sm);
     pointer-events: none;
+    display: flex;
 }
 
 .zx-toast__viewport.zx-p-top-start {
     top: 0;
     left: 0;
+    align-items: flex-start;
 }
 
 .zx-toast__viewport.zx-p-top {
     top: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    transform: none;
+    right: 0;
+    align-items: center;
 }
 
 .zx-toast__viewport.zx-p-top-end {
     top: 0;
     right: 0;
+    align-items: flex-end;
 }
 
 .zx-toast__viewport.zx-p-bottom-start {
     bottom: 0;
     flex-direction: column-reverse;
     left: 0;
+    align-items: flex-start;
 }
 
 .zx-toast__viewport.zx-p-bottom {
     bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    transform: none;
     flex-direction: column-reverse;
+    right: 0;
+    align-items: center;
 }
 
 .zx-toast__viewport.zx-p-bottom-end {
     bottom: 0;
     flex-direction: column-reverse;
     right: 0;
+    align-items: flex-end;
 }
 
 .zx-toast__root {
     pointer-events: auto;
-    display: grid;
+    display: flex;
     grid-template-columns: 1fr auto auto;
-    align-items: center;
+    align-items: flex-start;
     column-gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     background: var(--toast-bg);
@@ -68,6 +78,11 @@
     opacity: 0;
     transform: translateY(var(--toast-from));
     transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 24rem;
 }
 
 .zx-toast__root.zx-s-open {
@@ -75,20 +90,36 @@
     transform: none;
 }
 
+.zx-toast__root.zx-p-top-start {
+    --toast-from: -8px;
+}
+
+.zx-toast__root.zx-p-top {
+    --toast-from: -8px;
+}
+
+.zx-toast__root.zx-p-top-end {
+    --toast-from: -8px;
+}
+
 .zx-toast__title {
     grid-column: 1;
     font-weight: var(--weight-semibold);
+    padding-right: 1.75em;
 }
 
 .zx-toast__description {
     grid-column: 1;
     font-size: var(--text-xs);
+    color: var(--toast-ink);
+    opacity: 0.75;
 }
 
 .zx-toast__action {
     grid-column: 2;
     grid-row: 1;
     appearance: none;
+    border: var(--border) solid var(--toast-ink);
     background: transparent;
     color: var(--toast-ink);
     border-radius: 9999px;
@@ -96,6 +127,7 @@
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);
     cursor: pointer;
+    margin-top: var(--space-xs);
 }
 
 .zx-toast__action.zx-f-disabled {
@@ -119,6 +151,9 @@
     padding: var(--space-2xs) var(--space-xs);
     font-size: var(--text-xs);
     cursor: pointer;
+    position: absolute;
+    top: var(--space-xs);
+    right: var(--space-xs);
 }
 
 .zx-toast__close.zx-f-disabled {