@sigx/zero-daisyui 0.10.0 → 0.12.0

package/dist/css/components/drawer.css

@@ -79,7 +79,7 @@
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
         opacity: 1;
         translate: var(--drawer-travel);
-        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+        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;
         inset-block-start: 0;
         inset-block-end: 0;
@@ -91,7 +91,7 @@
 
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
         translate: none;
-        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+        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;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="start"][data-l-dock="sheet"] {
@@ -132,6 +132,23 @@
         border-start-end-radius: var(--radius-box);
     }
 
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state] {
+        transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px));
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"][data-swiping] {
+        transition: none;
+        user-select: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"]:where([data-placement="start"], [data-placement="end"]) {
+        touch-action: pan-y;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"]:where([data-placement="top"], [data-placement="bottom"]) {
+        touch-action: pan-x;
+    }
+
     [data-scope="drawer"][data-part="panel"]::backdrop {
         background: oklch(0% 0 0 / 0.4);
     }

package/dist/css/components/radio-group.css

@@ -13,6 +13,12 @@
         gap: var(--space-md);
     }
 
+    [data-scope="radio-group"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--space-lg);
+    }
+
     [data-scope="radio-group"][data-part="label"] {
         font-size: var(--text-sm);
         font-weight: var(--weight-semibold);

package/dist/css/components/select.css

@@ -71,7 +71,7 @@
         transform: rotate(180deg);
     }
 
-    [data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) [data-scope="select"][data-part="indicator"] {
+    [data-scope="select"][data-part="indicator"][data-clearable] {
         margin-inline-start: calc(var(--space-2xl) + var(--space-sm));
     }
 

package/dist/css/components/toast.css

@@ -75,13 +75,14 @@
         box-shadow: var(--shadow-lg);
         font-size: var(--text-sm);
         opacity: 0;
-        transform: translateY(var(--toast-from));
+        transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px)) translateY(var(--toast-from));
         transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+        touch-action: none;
     }
 
     [data-scope="toast"][data-part="root"][data-state="open"] {
         opacity: 1;
-        transform: none;
+        transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px));
     }
 
     [data-scope="toast"][data-part="root"][data-placement^="top"] {
@@ -92,6 +93,11 @@
         grid-template-columns: auto 1fr auto auto;
     }
 
+    [data-scope="toast"][data-part="root"][data-swiping] {
+        transition: none;
+        user-select: none;
+    }
+
     [data-scope="toast"][data-part="indicator"] {
         grid-column: 1;
         grid-row: 1 / span 2;
@@ -288,7 +294,7 @@
         }
 
         [data-scope="toast"][data-part="root"][data-state="open"] {
-            transform: none;
+            transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px));
         }
 
         [data-scope="toast"][data-part="indicator"][data-state="loading"] {

package/dist/css/index.css

@@ -3308,6 +3308,12 @@
         gap: var(--space-md);
     }
 
+    [data-scope="radio-group"][data-part="root"][data-orientation="horizontal"] {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--space-lg);
+    }
+
     [data-scope="radio-group"][data-part="label"] {
         font-size: var(--text-sm);
         font-weight: var(--weight-semibold);
@@ -4169,7 +4175,7 @@
         transform: rotate(180deg);
     }
 
-    [data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) [data-scope="select"][data-part="indicator"] {
+    [data-scope="select"][data-part="indicator"][data-clearable] {
         margin-inline-start: calc(var(--space-2xl) + var(--space-sm));
     }
 
@@ -4989,13 +4995,14 @@
         box-shadow: var(--shadow-lg);
         font-size: var(--text-sm);
         opacity: 0;
-        transform: translateY(var(--toast-from));
+        transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px)) translateY(var(--toast-from));
         transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+        touch-action: none;
     }
 
     [data-scope="toast"][data-part="root"][data-state="open"] {
         opacity: 1;
-        transform: none;
+        transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px));
     }
 
     [data-scope="toast"][data-part="root"][data-placement^="top"] {
@@ -5006,6 +5013,11 @@
         grid-template-columns: auto 1fr auto auto;
     }
 
+    [data-scope="toast"][data-part="root"][data-swiping] {
+        transition: none;
+        user-select: none;
+    }
+
     [data-scope="toast"][data-part="indicator"] {
         grid-column: 1;
         grid-row: 1 / span 2;
@@ -5202,7 +5214,7 @@
         }
 
         [data-scope="toast"][data-part="root"][data-state="open"] {
-            transform: none;
+            transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px));
         }
 
         [data-scope="toast"][data-part="indicator"][data-state="loading"] {
@@ -10388,7 +10400,7 @@
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
         opacity: 1;
         translate: var(--drawer-travel);
-        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+        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;
         inset-block-start: 0;
         inset-block-end: 0;
@@ -10400,7 +10412,7 @@
 
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
         translate: none;
-        transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+        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;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="start"][data-l-dock="sheet"] {
@@ -10441,6 +10453,23 @@
         border-start-end-radius: var(--radius-box);
     }
 
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state] {
+        transform: translate(var(--swipe-x, 0px), var(--swipe-y, 0px));
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"][data-swiping] {
+        transition: none;
+        user-select: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"]:where([data-placement="start"], [data-placement="end"]) {
+        touch-action: pan-y;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"]:where([data-placement="top"], [data-placement="bottom"]) {
+        touch-action: pan-x;
+    }
+
     [data-scope="drawer"][data-part="panel"]::backdrop {
         background: oklch(0% 0 0 / 0.4);
     }

package/dist/lynx/components/checkbox.css

@@ -9,6 +9,7 @@
     align-items: center;
     gap: var(--space-md);
     cursor: pointer;
+    flex-direction: row;
 }
 
 .zx-checkbox__root.zx-f-readonly {
@@ -21,7 +22,7 @@
 }
 
 .zx-checkbox__control {
-    display: inline-block;
+    display: flex;
     position: relative;
     vertical-align: middle;
     flex-shrink: 0;
@@ -69,8 +70,9 @@
 }
 
 .zx-checkbox__control.zx-f-focus-visible {
-    outline: 2px solid var(--checkbox-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--checkbox-accent), 0 1px var(--depth-shade) inset;
 }
 
 .zx-checkbox__control.zx-f-invalid {

package/dist/lynx/components/drawer.css

@@ -63,7 +63,7 @@
 
 .zx-drawer__panel.zx-l-dock-sheet {
     opacity: 1;
-    transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+    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;
@@ -72,7 +72,7 @@
 }
 
 .zx-drawer__panel.zx-l-dock-sheet.zx-s-open {
-    transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
+    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;
 }
 
 .zx-drawer__panel.zx-p-top.zx-l-dock-sheet {

package/dist/lynx/components/fieldset.css

@@ -3,19 +3,28 @@
 }
 
 .zx-fieldset__root {
-    display: grid;
+    display: flex;
     grid-template-columns: 1fr;
     grid-auto-rows: max-content;
     gap: var(--space-sm);
     min-inline-size: 0;
     margin: 0;
     border: none;
+    flex-direction: column;
+    padding-top: var(--space-xs);
+    padding-bottom: var(--space-xs);
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .zx-fieldset__legend {
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
     color: var(--fieldset-accent);
+    padding-top: var(--space-sm);
+    padding-bottom: var(--space-sm);
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .zx-fieldset__legend.zx-f-disabled {

package/dist/lynx/components/input.css

@@ -49,6 +49,7 @@
     box-shadow: var(--shadow-xs);
     overflow: hidden;
     transition: border-color var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
 }
 
 .zx-input__control.zx-f-invalid {
@@ -60,8 +61,9 @@
 }
 
 .zx-input__control.zx-f-focus-visible {
-    outline: 2px solid var(--input-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--input-accent);
 }
 
 .zx-input__input {
@@ -71,10 +73,32 @@
     border: none;
     outline: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     font-size: var(--text-sm);
     padding: var(--space-sm) var(--space-md);
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.zx-root .zx-input__input {
+    -x-placeholder-color: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-input__input {
+    -x-placeholder-color: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-input__input {
+    -x-placeholder-color: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-input__input {
+    -x-placeholder-color: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-input__input {
+    -x-placeholder-color: #9fb9d099;
 }
 
 .zx-input__input.zx-f-disabled {
@@ -111,10 +135,12 @@
 
 .zx-input__adornment.zx-p-start {
     order: -1;
+    padding-left: var(--space-md);
 }
 
 .zx-input__adornment.zx-p-end {
     order: 1;
+    padding-right: var(--space-md);
 }
 
 .zx-input__clear-trigger {
@@ -130,6 +156,7 @@
     font-weight: var(--weight-semibold);
     line-height: var(--leading-none);
     cursor: pointer;
+    margin-right: var(--space-xs);
 }
 
 .zx-root .zx-input__clear-trigger {
@@ -161,6 +188,11 @@
     outline-offset: 2px;
 }
 
+.zx-input__clear-trigger.zx-f-pressed {
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+}
+
 .zx-input__visibility-trigger {
     appearance: none;
     border: none;
@@ -174,6 +206,7 @@
     font-weight: var(--weight-semibold);
     line-height: var(--leading-none);
     cursor: pointer;
+    margin-right: var(--space-xs);
 }
 
 .zx-root .zx-input__visibility-trigger {
@@ -210,6 +243,11 @@
     outline-offset: 2px;
 }
 
+.zx-input__visibility-trigger.zx-f-pressed {
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+}
+
 .zx-input__root.zx-a-color-primary {
     --input-accent: var(--color-primary);
 }

package/dist/lynx/components/number-input.css

@@ -6,6 +6,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--space-sm);
+    align-items: flex-start;
 }
 
 .zx-number-input__label {
@@ -46,7 +47,7 @@
     border: var(--border) solid var(--color-base-300);
     border-radius: var(--radius-field);
     box-shadow: var(--shadow-xs);
-    overflow: hidden;
+    overflow: visible;
     transition: border-color var(--duration-fast) var(--ease-standard);
 }
 
@@ -59,8 +60,9 @@
 }
 
 .zx-number-input__control.zx-f-focus-visible {
-    outline: 2px solid var(--number-input-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--number-input-accent);
 }
 
 .zx-number-input__input {
@@ -70,12 +72,13 @@
     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);
     text-align: center;
     padding: var(--space-sm) var(--space-md);
+    flex-grow: 1;
 }
 
 .zx-number-input__input.zx-f-disabled {
@@ -95,8 +98,14 @@
     user-select: none;
     border-inline-start: var(--border) solid var(--color-base-300);
     transition: background var(--duration-fast) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding-left: var(--space-lg);
     padding-right: var(--space-lg);
+    border-left: var(--border) solid var(--color-base-300);
+    border-top-right-radius: var(--radius-field);
+    border-bottom-right-radius: var(--radius-field);
 }
 
 .zx-number-input__increment-trigger.zx-f-disabled {
@@ -121,8 +130,14 @@
     user-select: none;
     border-inline-end: var(--border) solid var(--color-base-300);
     transition: background var(--duration-fast) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding-left: var(--space-lg);
     padding-right: var(--space-lg);
+    border-right: var(--border) solid var(--color-base-300);
+    border-top-left-radius: var(--radius-field);
+    border-bottom-left-radius: var(--radius-field);
 }
 
 .zx-number-input__decrement-trigger.zx-f-disabled {

package/dist/lynx/components/radio-group.css

@@ -9,6 +9,12 @@
     gap: var(--space-md);
 }
 
+.zx-radio-group__root.zx-o-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--space-lg);
+}
+
 .zx-radio-group__label {
     font-size: var(--text-sm);
     font-weight: var(--weight-semibold);
@@ -23,6 +29,7 @@
     align-items: center;
     gap: var(--space-md);
     cursor: pointer;
+    flex-direction: row;
 }
 
 .zx-radio-group__item.zx-f-readonly {
@@ -35,7 +42,7 @@
 }
 
 .zx-radio-group__item-control {
-    display: inline-block;
+    display: flex;
     position: relative;
     vertical-align: middle;
     flex-shrink: 0;
@@ -81,8 +88,9 @@
 }
 
 .zx-radio-group__item-control.zx-f-focus-visible {
-    outline: 2px solid var(--radio-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--radio-accent), 0 1px var(--depth-shade) inset;
 }
 
 .zx-radio-group__item-indicator {

package/dist/lynx/components/select.css

@@ -62,6 +62,14 @@
     background: var(--color-base-200);
 }
 
+.zx-select__value {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .zx-root .zx-select__value.zx-f-placeholder {
     color: #18181b99;
 }
@@ -93,6 +101,10 @@
     transform: rotate(180deg);
 }
 
+.zx-select__indicator.zx-f-clearable {
+    margin-left: calc(24px + var(--space-xs));
+}
+
 .zx-select__clear-trigger {
     appearance: none;
     position: absolute;

package/dist/lynx/components/textarea.css

@@ -49,7 +49,7 @@
     width: 100%;
     min-width: 0;
     appearance: none;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     font-size: var(--text-sm);
     line-height: var(--leading-normal);
@@ -58,6 +58,26 @@
     transition: border-color var(--duration-fast) var(--ease-standard);
 }
 
+.zx-root .zx-textarea__textarea {
+    -x-placeholder-color: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-textarea__textarea {
+    -x-placeholder-color: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-textarea__textarea {
+    -x-placeholder-color: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-textarea__textarea {
+    -x-placeholder-color: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-textarea__textarea {
+    -x-placeholder-color: #9fb9d099;
+}
+
 .zx-textarea__textarea.zx-f-invalid {
     border-color: var(--color-error);
 }
@@ -68,8 +88,9 @@
 }
 
 .zx-textarea__textarea.zx-f-focus-visible {
-    outline: 2px solid var(--textarea-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--textarea-accent);
 }
 
 .zx-textarea__root.zx-a-color-primary {

package/dist/lynx/components/toggle-group.css

@@ -6,10 +6,21 @@
 .zx-toggle-group__root {
     display: flex;
     background: var(--color-base-200);
-    border: var(--border) solid var(--color-base-300);
+    border: 0 solid transparent;
     border-radius: var(--radius-field);
     box-shadow: var(--shadow-xs);
     overflow: hidden;
+    width: max-content;
+    flex-shrink: 0;
+    flex-direction: row;
+    border-top-width: var(--border);
+    border-right-width: var(--border);
+    border-bottom-width: var(--border);
+    border-left-width: var(--border);
+    border-top-color: var(--color-base-300);
+    border-right-color: var(--color-base-300);
+    border-bottom-color: var(--color-base-300);
+    border-left-color: var(--color-base-300);
 }
 
 .zx-toggle-group__root.zx-f-disabled {
@@ -18,6 +29,11 @@
 
 .zx-toggle-group__root.zx-o-vertical {
     flex-direction: column;
+    border-top-width: 0;
+}
+
+.zx-toggle-group__root.zx-o-horizontal {
+    border-left-width: 0;
 }
 
 .zx-toggle-group__item {
@@ -36,6 +52,8 @@
     line-height: var(--leading-none);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    flex-shrink: 0;
+    flex-wrap: nowrap;
 }
 
 .zx-toggle-group__item.zx-s-on {
@@ -49,8 +67,29 @@
 }
 
 .zx-toggle-group__item.zx-f-focus-visible {
-    outline: 2px solid var(--toggle-group-accent);
+    outline: none;
     outline-offset: -2px;
+    box-shadow: inset 0 0 0 2px var(--toggle-group-accent);
+}
+
+.zx-toggle-group__item.zx-f-pressed {
+    background: var(--color-base-300);
+}
+
+.zx-toggle-group__item.zx-s-on.zx-f-pressed {
+    background: var(--toggle-group-accent);
+}
+
+.zx-toggle-group__item.zx-o-horizontal {
+    border-left-width: var(--border);
+    border-left-style: solid;
+    border-left-color: var(--color-base-300);
+}
+
+.zx-toggle-group__item.zx-o-vertical {
+    border-top-width: var(--border);
+    border-top-style: solid;
+    border-top-color: var(--color-base-300);
 }
 
 .zx-toggle-group__item.zx-a-size-xs {