@sigx/zero-daisyui 0.14.0 → 0.16.0

package/dist/lynx/components/chat.css

@@ -4,9 +4,11 @@
 }
 
 .zx-chat__root {
-    display: grid;
+    display: flex;
     column-gap: var(--space-sm);
     row-gap: var(--space-2xs);
+    flex-direction: column;
+    align-items: flex-start;
     padding-top: var(--space-2xs);
     padding-bottom: var(--space-2xs);
 }
@@ -19,6 +21,7 @@
 .zx-chat__root.zx-p-end {
     grid-template-columns: minmax(0, 1fr) auto;
     justify-items: end;
+    align-items: flex-end;
 }
 
 .zx-chat__avatar {
@@ -53,7 +56,7 @@
 }
 
 .zx-chat__bubble {
-    max-inline-size: 90%;
+    max-width: 90%;
     padding: var(--space-xs) var(--space-lg);
     font-size: var(--text-sm);
     background: var(--chat-fill);
@@ -144,3 +147,9 @@
     font-size: var(--text-lg);
     padding: var(--space-md) var(--space-xl);
 }
+.zx-chat__root.zx-p-start .zx-chat__bubble {
+    border-bottom-left-radius: 0;
+}
+.zx-chat__root.zx-p-end .zx-chat__bubble {
+    border-bottom-right-radius: 0;
+}

package/dist/lynx/components/combobox.css

@@ -5,13 +5,16 @@
 .zx-combobox__root {
     display: flex;
     flex-direction: column;
+    width: 320px;
+    max-width: 100%;
+    min-width: 48px;
 }
 
 .zx-combobox__control {
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
-    min-width: 208px;
+    min-width: 48px;
     box-sizing: border-box;
     height: auto;
     background: var(--color-base-100);
@@ -20,6 +23,7 @@
     box-shadow: var(--shadow-xs);
     min-height: calc(var(--size-field) * 12);
     transition: border-color var(--duration-fast) var(--ease-standard);
+    width: 100%;
 }
 
 .zx-combobox__control.zx-s-open {
@@ -35,8 +39,9 @@
 }
 
 .zx-combobox__control.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-combobox__input {
@@ -48,13 +53,33 @@
     border: none;
     outline: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
     padding: var(--space-sm) var(--space-lg);
 }
 
+.zx-root .zx-combobox__input {
+    -x-placeholder-color: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-combobox__input {
+    -x-placeholder-color: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-combobox__input {
+    -x-placeholder-color: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-combobox__input {
+    -x-placeholder-color: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-combobox__input {
+    -x-placeholder-color: #9fb9d099;
+}
+
 .zx-combobox__input.zx-f-disabled {
     cursor: not-allowed;
 }
@@ -75,8 +100,9 @@
 }
 
 .zx-combobox__tag.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-combobox__tag-label {
@@ -87,7 +113,7 @@
     appearance: none;
     border: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     border-radius: var(--radius-selector);
     padding: 0 var(--space-2xs);
@@ -102,8 +128,9 @@
 }
 
 .zx-combobox__tag-remove.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: inset 0 0 0 2px var(--color-base-content);
 }
 
 .zx-root .zx-combobox__tag-remove.zx-f-pressed {
@@ -130,11 +157,14 @@
     appearance: none;
     border: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     opacity: 0.6;
     padding: 0 var(--space-lg);
     cursor: pointer;
     transition: transform var(--duration-normal) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .zx-combobox__trigger.zx-s-open {
@@ -145,17 +175,24 @@
     cursor: not-allowed;
 }
 
+.zx-combobox__trigger.zx-f-pressed {
+    opacity: 1;
+}
+
 .zx-combobox__clear-trigger {
     appearance: none;
     border: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     opacity: 0.6;
     padding: 0 var(--space-xs);
     line-height: var(--leading-none);
     cursor: pointer;
     transition: opacity var(--duration-fast) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .zx-combobox__popup {
@@ -169,6 +206,7 @@
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
     min-width: 208px;
+    --combobox-accent: var(--color-primary);
 }
 
 .zx-combobox__popup.zx-s-open {
@@ -216,6 +254,10 @@
     cursor: not-allowed;
 }
 
+.zx-combobox__item.zx-f-pressed {
+    background: var(--color-base-200);
+}
+
 .zx-combobox__item-indicator {
     font-size: var(--text-xs);
 }
@@ -244,34 +286,66 @@
     --combobox-accent: var(--color-primary);
 }
 
+.zx-combobox__popup.zx-a-color-primary {
+    --combobox-accent: var(--color-primary);
+}
+
 .zx-combobox__root.zx-a-color-secondary {
     --combobox-accent: var(--color-secondary);
 }
 
+.zx-combobox__popup.zx-a-color-secondary {
+    --combobox-accent: var(--color-secondary);
+}
+
 .zx-combobox__root.zx-a-color-accent {
     --combobox-accent: var(--color-accent);
 }
 
+.zx-combobox__popup.zx-a-color-accent {
+    --combobox-accent: var(--color-accent);
+}
+
 .zx-combobox__root.zx-a-color-neutral {
     --combobox-accent: var(--color-neutral);
 }
 
+.zx-combobox__popup.zx-a-color-neutral {
+    --combobox-accent: var(--color-neutral);
+}
+
 .zx-combobox__root.zx-a-color-info {
     --combobox-accent: var(--color-info);
 }
 
+.zx-combobox__popup.zx-a-color-info {
+    --combobox-accent: var(--color-info);
+}
+
 .zx-combobox__root.zx-a-color-success {
     --combobox-accent: var(--color-success);
 }
 
+.zx-combobox__popup.zx-a-color-success {
+    --combobox-accent: var(--color-success);
+}
+
 .zx-combobox__root.zx-a-color-warning {
     --combobox-accent: var(--color-warning);
 }
 
+.zx-combobox__popup.zx-a-color-warning {
+    --combobox-accent: var(--color-warning);
+}
+
 .zx-combobox__root.zx-a-color-error {
     --combobox-accent: var(--color-error);
 }
 
+.zx-combobox__popup.zx-a-color-error {
+    --combobox-accent: var(--color-error);
+}
+
 .zx-combobox__control.zx-a-size-xs {
     min-height: calc(var(--size-field) * 8);
 }

package/dist/lynx/components/container.css

@@ -6,6 +6,7 @@
 }
 
 .zx-container__root {
-    inline-size: 100%;
-    max-inline-size: var(--l-measure);
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--l-measure);
 }

package/dist/lynx/components/diff.css

@@ -25,7 +25,7 @@
 }
 
 .zx-diff__handle {
-    inline-size: var(--diff-hit);
+    width: var(--diff-hit);
     display: grid;
     place-items: center;
     cursor: ew-resize;

package/dist/lynx/components/divider.css

@@ -12,30 +12,30 @@
 }
 
 .zx-divider__root.zx-o-horizontal {
-    inline-size: 100%;
-    block-size: var(--border);
+    width: 100%;
+    height: var(--border);
 }
 
 .zx-divider__root.zx-o-horizontal.zx-a-size-lg {
-    block-size: calc(var(--border) * 2);
+    height: calc(var(--border) * 2);
 }
 
 .zx-divider__root.zx-o-horizontal.zx-a-size-xl {
-    block-size: calc(var(--border) * 3);
+    height: calc(var(--border) * 3);
 }
 
 .zx-divider__root.zx-o-vertical {
     flex-direction: column;
-    min-block-size: 1em;
-    inline-size: var(--border);
+    min-height: 1em;
+    width: var(--border);
 }
 
 .zx-divider__root.zx-o-vertical.zx-a-size-lg {
-    inline-size: calc(var(--border) * 2);
+    width: calc(var(--border) * 2);
 }
 
 .zx-divider__root.zx-o-vertical.zx-a-size-xl {
-    inline-size: calc(var(--border) * 3);
+    width: calc(var(--border) * 3);
 }
 
 .zx-divider__label {
@@ -106,13 +106,14 @@
 }
 .zx-divider__root.zx-m-labelled.zx-o-horizontal {
     flex-direction: row;
-    block-size: var(--divider-fit);
+    height: var(--divider-fit);
 }
 .zx-divider__root.zx-m-labelled.zx-o-vertical {
-    inline-size: var(--divider-fit);
+    width: var(--divider-fit);
 }
 .zx-divider__root.zx-m-segment {
     flex: 1 1 0;
+    align-self: center;
 }
 .zx-divider__root.zx-m-segment.zx-o-horizontal {
     min-width: 0;

package/dist/lynx/components/drawer.css

@@ -16,6 +16,9 @@
     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;
 }
 
 .zx-drawer__trigger.zx-f-disabled {
@@ -24,8 +27,15 @@
 }
 
 .zx-drawer__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-drawer__trigger.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-drawer__panel {
@@ -40,8 +50,9 @@
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-xl);
     box-sizing: border-box;
-    inline-size: 100%;
-    max-inline-size: var(--l-measure);
+    --l-measure: 320px;
+    width: 100%;
+    max-width: var(--l-measure);
 }
 
 .zx-drawer__panel.zx-s-open {
@@ -55,18 +66,20 @@
 
 .zx-drawer__panel.zx-p-top {
     --drawer-travel: 0 -100%;
+    --l-measure: none;
 }
 
 .zx-drawer__panel.zx-p-bottom {
     --drawer-travel: 0 100%;
+    --l-measure: none;
 }
 
 .zx-drawer__panel.zx-l-dock-sheet {
     opacity: 1;
     transition: translate var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
-    position: fixed;
-    block-size: 100dvh;
-    max-block-size: 100dvh;
+    position: relative;
+    height: auto;
+    max-height: none;
     margin: 0;
     border-radius: 0;
 }
@@ -76,17 +89,37 @@
 }
 
 .zx-drawer__panel.zx-p-top.zx-l-dock-sheet {
-    block-size: auto;
-    max-block-size: 85dvh;
+    height: auto;
+    max-height: 85%;
     border-end-start-radius: var(--radius-box);
     border-end-end-radius: var(--radius-box);
+    border-bottom-left-radius: var(--radius-box);
+    border-bottom-right-radius: var(--radius-box);
 }
 
 .zx-drawer__panel.zx-p-bottom.zx-l-dock-sheet {
-    block-size: auto;
-    max-block-size: 85dvh;
+    height: auto;
+    max-height: 85%;
     border-start-start-radius: var(--radius-box);
     border-start-end-radius: var(--radius-box);
+    border-top-left-radius: var(--radius-box);
+    border-top-right-radius: var(--radius-box);
+}
+
+.zx-drawer__panel.zx-p-start.zx-l-dock-sheet.zx-s-open {
+    animation: zero-daisy-drawer-in-start var(--duration-slow) var(--ease-standard);
+}
+
+.zx-drawer__panel.zx-p-end.zx-l-dock-sheet.zx-s-open {
+    animation: zero-daisy-drawer-in-end var(--duration-slow) var(--ease-standard);
+}
+
+.zx-drawer__panel.zx-p-top.zx-l-dock-sheet.zx-s-open {
+    animation: zero-daisy-drawer-in-top var(--duration-slow) var(--ease-standard);
+}
+
+.zx-drawer__panel.zx-p-bottom.zx-l-dock-sheet.zx-s-open {
+    animation: zero-daisy-drawer-in-bottom var(--duration-slow) var(--ease-standard);
 }
 
 .zx-drawer__backdrop {
@@ -117,6 +150,9 @@
     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;
 }
 
 .zx-drawer__close.zx-f-disabled {
@@ -124,8 +160,15 @@
 }
 
 .zx-drawer__close.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-drawer__close.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-drawer__trigger.zx-a-color-primary {
@@ -243,3 +286,15 @@
     padding-left: calc(var(--size-field) * 6);
     padding-right: calc(var(--size-field) * 6);
 }
+@keyframes zero-daisy-drawer-in-start {
+    from { transform: translateX(-100%); } to { transform: translateX(0); }
+}
+@keyframes zero-daisy-drawer-in-end {
+    from { transform: translateX(100%); } to { transform: translateX(0); }
+}
+@keyframes zero-daisy-drawer-in-top {
+    from { transform: translateY(-100%); } to { transform: translateY(0); }
+}
+@keyframes zero-daisy-drawer-in-bottom {
+    from { transform: translateY(100%); } to { transform: translateY(0); }
+}

package/dist/lynx/components/empty-state.css

@@ -52,7 +52,7 @@
 }
 
 .zx-empty-state__description {
-    max-inline-size: 100%;
+    max-width: 100%;
     font-size: var(--text-sm);
     line-height: var(--leading-normal);
     text-align: center;

package/dist/lynx/components/fieldset.css

@@ -7,7 +7,7 @@
     grid-template-columns: 1fr;
     grid-auto-rows: max-content;
     gap: var(--space-sm);
-    min-inline-size: 0;
+    min-width: 0;
     margin: 0;
     border: none;
     flex-direction: column;