@sigx/zero-daisyui 0.6.0 → 0.8.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 {
@@ -63,12 +63,18 @@
 }
 
 .zx-tabs__tab.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
+}
+
+.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 +105,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 +125,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 +165,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 +205,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 +245,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 +285,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 +325,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 +365,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 +405,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 {
@@ -460,6 +470,11 @@
     box-shadow: var(--shadow-sm);
 }
 
+.zx-tabs__tab.zx-a-variant-box.zx-f-focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base-200), 0 0 0 4px var(--color-base-content);
+}
+
 .zx-tabs__tab.zx-a-variant-box.zx-a-color-primary.zx-s-active {
     background: var(--color-primary);
     color: var(--color-primary-content);

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,67 @@
     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__title {
+    display: block;
+    margin: 0;
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+}
+
+.zx-timeline__description {
+    display: block;
+    margin: 0;
+}
+
+.zx-root .zx-timeline__description {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-timeline__description {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-timeline__description {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-timeline__description {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-timeline__description {
+    color: #9fb9d0b3;
 }
 
 .zx-timeline__marker.zx-a-color-primary {