@sigx/zero-daisyui 0.14.0 → 0.16.0

package/dist/lynx/components/file-upload.css

@@ -4,9 +4,11 @@
 }
 
 .zx-file-upload__root {
-    display: grid;
+    display: flex;
     gap: var(--space-sm);
     justify-items: start;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .zx-file-upload__label {
@@ -32,6 +34,7 @@
     border: var(--border) solid var(--color-base-300);
     border-radius: var(--radius-field);
     cursor: pointer;
+    flex-direction: row;
 }
 
 .zx-file-upload__trigger.zx-f-disabled {
@@ -44,8 +47,15 @@
 }
 
 .zx-file-upload__trigger.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-file-upload__trigger.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-file-upload__dropzone {
@@ -57,6 +67,10 @@
     border-radius: var(--radius-box);
     background: var(--color-base-100);
     cursor: pointer;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .zx-file-upload__dropzone.zx-a-size-xs {
@@ -100,6 +114,26 @@
     color: var(--color-base-content);
 }
 
+.zx-root .zx-file-upload__dropzone.zx-f-highlighted {
+    background: #edf0fe;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-f-highlighted {
+    background: #212839;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-f-highlighted {
+    background: #323d43;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-f-highlighted {
+    background: #e0e6ee;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-f-highlighted {
+    background: #232427;
+}
+
 .zx-file-upload__dropzone.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -110,8 +144,10 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    display: grid;
+    display: flex;
     gap: var(--space-xs);
+    align-self: stretch;
+    flex-direction: column;
 }
 
 .zx-file-upload__item {
@@ -122,6 +158,7 @@
     border: var(--border) solid var(--color-base-200);
     border-radius: var(--radius-field);
     background: var(--color-base-100);
+    flex-direction: row;
 }
 
 .zx-file-upload__item.zx-f-disabled {
@@ -203,8 +240,13 @@
 }
 
 .zx-file-upload__item-remove.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-file-upload__item-remove.zx-f-pressed {
+    background: var(--color-base-200);
 }
 
 .zx-file-upload__clear-trigger {
@@ -226,8 +268,13 @@
 }
 
 .zx-file-upload__clear-trigger.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-file-upload__clear-trigger.zx-f-pressed {
+    background: var(--color-base-200);
 }
 
 .zx-root .zx-file-upload__root.zx-a-color-primary {
@@ -250,6 +297,26 @@
     --fu-accent: #fb8a62;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
+    background: #edf0fe;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
+    background: #212839;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
+    background: #323d43;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
+    background: #e0e6ee;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-primary.zx-f-highlighted {
+    background: #232427;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-secondary {
     --fu-accent: #ad316f;
 }
@@ -270,6 +337,26 @@
     --fu-accent: #e68aac;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
+    background: #fff1f6;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
+    background: #2e2732;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
+    background: #3a3740;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
+    background: #e3e9f0;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-secondary.zx-f-highlighted {
+    background: #24232b;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-accent {
     --fu-accent: #2b786d;
 }
@@ -290,6 +377,26 @@
     --fu-accent: #ab9fe8;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
+    background: #f2fcf9;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
+    background: #212f34;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
+    background: #353748;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
+    background: #e4ebf1;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-accent.zx-f-highlighted {
+    background: #1d2431;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-neutral {
     --fu-accent: #121214;
 }
@@ -310,6 +417,26 @@
     --fu-accent: #667a8a;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
+    background: #e8e8e8;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
+    background: #1b2127;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
+    background: #292f3b;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
+    background: #dee2e8;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-neutral.zx-f-highlighted {
+    background: #131d23;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-info {
     --fu-accent: #2685b3;
 }
@@ -330,6 +457,26 @@
     --fu-accent: #91d4e3;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
+    background: #f1faff;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
+    background: #202e38;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
+    background: #2f3d4a;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
+    background: #e8e7ee;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-info.zx-f-highlighted {
+    background: #1a292f;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-success {
     --fu-accent: #2a7858;
 }
@@ -350,6 +497,26 @@
     --fu-accent: #a6cebe;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
+    background: #f1fcf6;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
+    background: #212f32;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
+    background: #303d46;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
+    background: #e6ebec;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-success.zx-f-highlighted {
+    background: #1c292c;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-warning {
     --fu-accent: #755a2b;
 }
@@ -370,6 +537,26 @@
     --fu-accent: #c5c1b7;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
+    background: #fffaf0;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
+    background: #2c2e2e;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
+    background: #373c41;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
+    background: #ececec;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-warning.zx-f-highlighted {
+    background: #21282b;
+}
+
 .zx-root .zx-file-upload__root.zx-a-color-error {
     --fu-accent: #d9576d;
 }
@@ -390,6 +577,26 @@
     --fu-accent: #f2bbc0;
 }
 
+.zx-root .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
+    background: #fff3f4;
+}
+
+.zx-root.zx-theme-dark .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
+    background: #2e2930;
+}
+
+.zx-root.zx-theme-dim .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
+    background: #393943;
+}
+
+.zx-root.zx-theme-nord .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
+    background: #eae4e8;
+}
+
+.zx-root.zx-theme-sunset .zx-file-upload__dropzone.zx-a-color-error.zx-f-highlighted {
+    background: #22272d;
+}
+
 .zx-file-upload__root.zx-a-size-xs {
     --fu-font: var(--text-xs);
 }

package/dist/lynx/components/grid.css

@@ -13,7 +13,7 @@
 
 .zx-grid__root {
     display: grid;
-    min-inline-size: 0;
+    min-width: 0;
     grid-template-columns: var(--l-cols);
     column-gap: var(--l-gap-x);
     row-gap: var(--l-gap-y);
@@ -24,5 +24,5 @@
 .zx-grid__cell {
     --l-span: auto;
     grid-column: var(--l-span);
-    min-inline-size: 0;
+    min-width: 0;
 }

package/dist/lynx/components/kbd.css

@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: 1.75em;
+    min-width: 1.75em;
     padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
     background: var(--kbd-fill);
     color: var(--kbd-ink);
@@ -22,7 +22,6 @@
     flex-shrink: 0;
     flex-wrap: nowrap;
     flex-direction: row;
-    min-width: 1.75em;
     border-top-width: var(--border);
     border-right-width: var(--border);
     border-left-width: var(--border);
@@ -31,6 +30,7 @@
     border-right-color: var(--color-base-300);
     border-bottom-color: var(--color-base-300);
     border-left-color: var(--color-base-300);
+    font-family: Menlo, monospace;
 }
 
 .zx-kbd__root.zx-a-color-primary {
@@ -76,7 +76,6 @@
 .zx-kbd__root.zx-a-size-xs {
     font-size: var(--text-xs);
     padding: 0 var(--space-xs);
-    min-inline-size: 1.5em;
     min-width: 1.5em;
 }
 

package/dist/lynx/components/menu.css

@@ -16,6 +16,10 @@
     transition: background var(--duration-normal) var(--ease-standard);
     padding-left: calc(var(--size-field) * 4);
     padding-right: calc(var(--size-field) * 4);
+    width: max-content;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    flex-direction: row;
 }
 
 .zx-menu__trigger.zx-f-disabled {
@@ -28,8 +32,15 @@
 }
 
 .zx-menu__trigger.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-menu__trigger.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-menu__popup {
@@ -43,6 +54,8 @@
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
     min-width: 208px;
+    display: flex;
+    flex-direction: column;
 }
 
 .zx-menu__popup.zx-s-open {
@@ -61,6 +74,7 @@
     cursor: pointer;
     outline: none;
     transition: background var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
 }
 
 .zx-menu__item.zx-f-highlighted {
@@ -83,6 +97,7 @@
     cursor: pointer;
     outline: none;
     transition: background var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
 }
 
 .zx-menu__checkbox-item.zx-f-highlighted {
@@ -105,6 +120,7 @@
     cursor: pointer;
     outline: none;
     transition: background var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
 }
 
 .zx-menu__radio-item.zx-f-highlighted {
@@ -134,6 +150,7 @@
     cursor: pointer;
     outline: none;
     transition: background var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
 }
 
 .zx-menu__sub-trigger.zx-f-highlighted {
@@ -160,6 +177,8 @@
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
     min-width: 208px;
+    display: flex;
+    flex-direction: column;
 }
 
 .zx-menu__sub-popup.zx-s-open {

package/dist/lynx/components/nav-list.css

@@ -35,7 +35,8 @@
 }
 
 .zx-nav-list__item {
-    display: block;
+    display: flex;
+    flex-direction: column;
 }
 
 .zx-nav-list__link {
@@ -43,12 +44,20 @@
     align-items: center;
     gap: var(--space-sm);
     text-decoration: none;
+    appearance: none;
+    background: none;
+    border: 0;
+    font: inherit;
+    text-align: start;
+    width: 100%;
+    cursor: pointer;
     color: var(--nav-ink);
     padding: var(--space-sm) var(--space-lg);
     border-radius: var(--radius-field);
     font-weight: var(--weight-medium);
     line-height: var(--leading-tight);
     transition: background var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
 }
 
 .zx-nav-list__link.zx-s-active {
@@ -63,10 +72,12 @@
 
 .zx-nav-list__icon {
     display: flex;
-    inline-size: 1.25em;
+    width: 1.25em;
     justify-content: center;
     flex: none;
     line-height: var(--leading-none);
+    flex-direction: row;
+    align-items: center;
 }
 
 .zx-nav-list__meta {
@@ -75,6 +86,8 @@
     font-size: var(--text-xs);
     font-variant-numeric: tabular-nums;
     opacity: 0.7;
+    margin-left: auto;
+    flex-direction: row;
 }
 
 .zx-nav-list__root.zx-a-color-primary {

package/dist/lynx/components/navbar.css

@@ -2,10 +2,11 @@
     display: flex;
     align-items: center;
     gap: var(--space-sm);
-    min-block-size: 64px;
+    min-height: 64px;
     padding: var(--space-sm);
     background: var(--color-base-100);
     color: var(--color-base-content);
+    flex-direction: row;
 }
 
 .zx-navbar__start {
@@ -14,6 +15,9 @@
     gap: var(--space-sm);
     flex: 1 1 0%;
     justify-content: flex-start;
+    flex-direction: row;
+    flex-basis: auto;
+    flex-shrink: 0;
 }
 
 .zx-navbar__center {
@@ -21,6 +25,8 @@
     align-items: center;
     gap: var(--space-sm);
     justify-content: center;
+    flex-direction: row;
+    flex-shrink: 0;
 }
 
 .zx-navbar__end {
@@ -29,6 +35,9 @@
     gap: var(--space-sm);
     flex: 1 1 0%;
     justify-content: flex-end;
+    flex-direction: row;
+    flex-basis: auto;
+    flex-shrink: 0;
 }
 
 .zx-navbar__root.zx-a-color-primary {
@@ -72,20 +81,20 @@
 }
 
 .zx-navbar__root.zx-a-size-xs {
-    min-block-size: 40px;
+    min-height: 40px;
     font-size: var(--text-sm);
 }
 
 .zx-navbar__root.zx-a-size-sm {
-    min-block-size: 48px;
+    min-height: 48px;
     font-size: var(--text-sm);
 }
 
 .zx-navbar__root.zx-a-size-lg {
-    min-block-size: 80px;
+    min-height: 80px;
 }
 
 .zx-navbar__root.zx-a-size-xl {
-    min-block-size: 96px;
+    min-height: 96px;
     font-size: var(--text-lg);
 }