@sigx/zero-daisyui 0.5.0 → 0.7.0

package/dist/lynx/components/stats.css

@@ -4,6 +4,7 @@
 
 .zx-stats__root {
     display: flex;
+    overflow-x: auto;
     border: var(--border) solid var(--color-base-200);
     border-radius: var(--radius-box);
     background: var(--color-base-100);
@@ -49,6 +50,7 @@
 
 .zx-stats__value {
     grid-column: 1;
+    white-space: nowrap;
     font-size: var(--text-2xl);
     font-weight: var(--weight-bold);
     font-variant-numeric: tabular-nums;
@@ -86,36 +88,164 @@
     align-self: center;
 }
 
-.zx-stats__root.zx-a-color-primary {
-    --stats-accent: var(--color-primary);
+.zx-root .zx-stats__item.zx-a-color-primary {
+    --stats-accent: #3f2bcb;
 }
 
-.zx-stats__root.zx-a-color-secondary {
-    --stats-accent: var(--color-secondary);
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-primary {
+    --stats-accent: #6567ff;
 }
 
-.zx-stats__root.zx-a-color-accent {
-    --stats-accent: var(--color-accent);
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-primary {
+    --stats-accent: #a0e791;
 }
 
-.zx-stats__root.zx-a-color-neutral {
-    --stats-accent: var(--color-neutral);
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-primary {
+    --stats-accent: #5c7da6;
 }
 
-.zx-stats__root.zx-a-color-info {
-    --stats-accent: var(--color-info);
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-primary {
+    --stats-accent: #fb8a62;
 }
 
-.zx-stats__root.zx-a-color-success {
-    --stats-accent: var(--color-success);
+.zx-root .zx-stats__item.zx-a-color-secondary {
+    --stats-accent: #ad316f;
 }
 
-.zx-stats__root.zx-a-color-warning {
-    --stats-accent: var(--color-warning);
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-secondary {
+    --stats-accent: #fa7cb6;
 }
 
-.zx-stats__root.zx-a-color-error {
-    --stats-accent: var(--color-error);
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-secondary {
+    --stats-accent: #ed9984;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-secondary {
+    --stats-accent: #677e98;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-secondary {
+    --stats-accent: #e68aac;
+}
+
+.zx-root .zx-stats__item.zx-a-color-accent {
+    --stats-accent: #2b786d;
+}
+
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-accent {
+    --stats-accent: #93e5d9;
+}
+
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-accent {
+    --stats-accent: #bfade1;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-accent {
+    --stats-accent: #5e7d8c;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-accent {
+    --stats-accent: #ab9fe8;
+}
+
+.zx-root .zx-stats__item.zx-a-color-neutral {
+    --stats-accent: #121214;
+}
+
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-neutral {
+    --stats-accent: #878e92;
+}
+
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-neutral {
+    --stats-accent: #71828c;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-neutral {
+    --stats-accent: #3a4150;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-neutral {
+    --stats-accent: #667a8a;
+}
+
+.zx-root .zx-stats__item.zx-a-color-info {
+    --stats-accent: #2685b3;
+}
+
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-info {
+    --stats-accent: #70ceff;
+}
+
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-info {
+    --stats-accent: #6ce2f3;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-info {
+    --stats-accent: #89728a;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-info {
+    --stats-accent: #91d4e3;
+}
+
+.zx-root .zx-stats__item.zx-a-color-success {
+    --stats-accent: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-success {
+    --stats-accent: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-success {
+    --stats-accent: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-success {
+    --stats-accent: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-success {
+    --stats-accent: #a6cebe;
+}
+
+.zx-root .zx-stats__item.zx-a-color-warning {
+    --stats-accent: #755a2b;
+}
+
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-warning {
+    --stats-accent: #f5ddac;
+}
+
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-warning {
+    --stats-accent: #cecfa6;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-warning {
+    --stats-accent: #7d7463;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-warning {
+    --stats-accent: #c5c1b7;
+}
+
+.zx-root .zx-stats__item.zx-a-color-error {
+    --stats-accent: #d9576d;
+}
+
+.zx-root.zx-theme-dark .zx-stats__item.zx-a-color-error {
+    --stats-accent: #ff7d90;
+}
+
+.zx-root.zx-theme-dim .zx-stats__item.zx-a-color-error {
+    --stats-accent: #f5b3a4;
+}
+
+.zx-root.zx-theme-nord .zx-stats__item.zx-a-color-error {
+    --stats-accent: #a85b64;
+}
+
+.zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-error {
+    --stats-accent: #f2bbc0;
 }
 
 .zx-stats__value.zx-a-size-xs {

package/dist/lynx/components/steps.css

@@ -100,6 +100,10 @@
     padding-bottom: var(--space-lg);
 }
 
+.zx-steps__item.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-steps__indicator {
     display: flex;
     align-items: center;

package/dist/lynx/components/switch.css

@@ -30,6 +30,10 @@
     flex-direction: row;
 }
 
+.zx-switch__root.zx-f-readonly {
+    cursor: default;
+}
+
 .zx-switch__root.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -45,6 +49,7 @@
     padding: calc((var(--size-selector) * 6) * 0.125);
     border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 6) * 0.125) + var(--border));
     border: var(--border) solid var(--switch-ink);
+    box-shadow: 0 1px var(--depth-shade) inset;
     user-select: none;
     transition: border-color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
 }
@@ -96,6 +101,7 @@
     height: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
     border-radius: var(--radius-selector);
     background-color: var(--switch-ink);
+    box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
     transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-instant) var(--ease-standard);
 }
 

package/dist/lynx/components/table.css

@@ -12,6 +12,11 @@
     background: var(--color-base-100);
 }
 
+.zx-table__root.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: -2px;
+}
+
 .zx-table__table {
     border-collapse: collapse;
     inline-size: 100%;
@@ -117,6 +122,58 @@
     padding: var(--space-lg) var(--table-pad-inline);
 }
 
+.zx-table__sort-trigger {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    border: 0;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    gap: var(--space-2xs);
+    padding: 0;
+    border-radius: var(--radius-selector);
+    background: transparent;
+    color: inherit;
+    transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.zx-table__sort-trigger.zx-s-ascending {
+    color: var(--table-accent);
+}
+
+.zx-table__sort-trigger.zx-s-descending {
+    color: var(--table-accent);
+}
+
+.zx-table__sort-trigger.zx-f-disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+}
+
+.zx-table__sort-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-table__sort-indicator {
+    display: inline-block;
+    font-size: 0.75em;
+    line-height: 1;
+    transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
+}
+
+.zx-table__sort-indicator.zx-s-descending {
+    transform: rotate(180deg);
+}
+
+.zx-table__sort-indicator.zx-s-none {
+    opacity: 0;
+}
+
 .zx-table__cell {
     padding: var(--space-sm) var(--table-pad-inline);
     text-align: var(--table-cell-align);

package/dist/lynx/components/tabs.css

@@ -1,3 +1,7 @@
+.zx-tabs__root {
+    --tabs-ring-room: 4px;
+}
+
 .zx-tabs__root {
     display: flex;
     flex-direction: column;
@@ -7,6 +11,12 @@
 .zx-tabs__list {
     display: flex;
     align-self: flex-start;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    padding: var(--tabs-ring-room);
+    scroll-padding-inline: var(--tabs-ring-room);
+    position: relative;
 }
 
 .zx-tabs__tab {
@@ -21,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 {
@@ -58,6 +67,15 @@
     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 {
     font-size: var(--text-md);
 }
@@ -86,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;
 }
@@ -126,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 {
@@ -166,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 {
@@ -206,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 {
@@ -246,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 {
@@ -286,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 {
@@ -326,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 {
@@ -366,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 {
@@ -406,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 {