@sigx/zero-daisyui 0.11.0 → 0.13.0

package/README.md

@@ -30,6 +30,11 @@ each is geometry that interpolates between states, so it rides the size ramp and
 animates. Under `forced-colors` and `print` the checkbox swaps to a `✔`/`−`
 glyph; the rating keeps its geometry, since no glyph can say "half".
 
+Daisy has no group component for radios or checkboxes; its forms stack rows. The
+`radio-group` and `checkbox-group` roots stack their items the same way, and
+`orientation="horizontal"` lays them in a wrapping row with a `--space-lg` gap
+(#393).
+
 The slider is **rebuilt** with `appearance: none` (#26), like every other skin,
 instead of a stock native range behind `accent-color`: daisy's `range.css` track
 (half the thumb's height, `--radius-selector`) and its real thumb — a `base-100`

package/dist/css/components/combobox.css

@@ -16,11 +16,12 @@
         flex-wrap: wrap;
         min-width: 13rem;
         box-sizing: border-box;
-        height: calc(var(--size-field) * 12);
+        height: auto;
         background: var(--color-base-100);
         border: var(--border) solid var(--color-base-300);
         border-radius: var(--radius-field);
         box-shadow: var(--shadow-xs);
+        min-height: calc(var(--size-field) * 12);
         transition: border-color var(--duration-fast) var(--ease-standard);
     }
 

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/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);
@@ -5236,11 +5242,12 @@
         flex-wrap: wrap;
         min-width: 13rem;
         box-sizing: border-box;
-        height: calc(var(--size-field) * 12);
+        height: auto;
         background: var(--color-base-100);
         border: var(--border) solid var(--color-base-300);
         border-radius: var(--radius-field);
         box-shadow: var(--shadow-xs);
+        min-height: calc(var(--size-field) * 12);
         transition: border-color var(--duration-fast) var(--ease-standard);
     }
 

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;
@@ -34,7 +35,6 @@
     color: var(--checkbox-on-accent);
     box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
     background-size: auto, calc(var(--noise) * 100%);
-    background-image: none, var(--fx-noise);
     cursor: pointer;
     transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
 }
@@ -69,8 +69,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 {
@@ -83,27 +84,59 @@
 
 .zx-checkbox__indicator {
     display: block;
-    width: 100%;
+    width: 50%;
     height: 100%;
     opacity: 0;
-    background-color: var(--checkbox-on-accent);
-    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
-    box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
+    background-color: transparent;
+    box-shadow: none;
     font-size: 16px;
     line-height: 0.75;
-    transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    transition: opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    box-sizing: border-box;
+    margin-left: 20%;
+    border-style: solid;
+    border-color: var(--checkbox-on-accent);
+    border-top-width: 0;
+    border-left-width: 0;
+    border-right-width: calc(((var(--size-selector) * 6) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 6) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    transform-origin: 60% 50%;
     transform: rotate(45deg);
 }
 
+.zx-checkbox__indicator.zx-a-size-xs {
+    border-right-width: calc(((var(--size-selector) * 4) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 4) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
+.zx-checkbox__indicator.zx-a-size-sm {
+    border-right-width: calc(((var(--size-selector) * 5) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 5) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
+.zx-checkbox__indicator.zx-a-size-lg {
+    border-right-width: calc(((var(--size-selector) * 7) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 7) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
+.zx-checkbox__indicator.zx-a-size-xl {
+    border-right-width: calc(((var(--size-selector) * 8) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 8) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
 .zx-checkbox__indicator.zx-s-checked {
-    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
     opacity: 1;
 }
 
 .zx-checkbox__indicator.zx-s-indeterminate {
-    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
     opacity: 1;
-    transform: translateY(-35%) rotate(0deg);
+    width: 60%;
+    height: 20%;
+    align-self: center;
+    border-right-width: 0;
+    border-bottom-width: 0;
+    background-color: var(--checkbox-on-accent);
+    transform: rotate(0deg);
 }
 
 .zx-checkbox__label {

package/dist/lynx/components/combobox.css

@@ -13,11 +13,12 @@
     flex-wrap: wrap;
     min-width: 208px;
     box-sizing: border-box;
-    height: calc(var(--size-field) * 12);
+    height: auto;
     background: var(--color-base-100);
     border: var(--border) solid var(--color-base-300);
     border-radius: var(--radius-field);
     box-shadow: var(--shadow-xs);
+    min-height: calc(var(--size-field) * 12);
     transition: border-color var(--duration-fast) var(--ease-standard);
 }
 

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,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);
     text-align: center;
     padding: var(--space-sm) var(--space-md);
+    flex-grow: 1;
+}
+
+.zx-root .zx-number-input__input {
+    -x-placeholder-color: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-number-input__input {
+    -x-placeholder-color: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-number-input__input {
+    -x-placeholder-color: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-number-input__input {
+    -x-placeholder-color: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-number-input__input {
+    -x-placeholder-color: #9fb9d099;
 }
 
 .zx-number-input__input.zx-f-disabled {
@@ -95,8 +118,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 +150,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 {
@@ -92,7 +100,6 @@
     border-radius: 9999px;
     background-color: transparent;
     background-size: auto, calc(var(--noise) * 100%);
-    background-image: none, var(--fx-noise);
     transition: background-color var(--duration-instant) var(--ease-standard);
 }
 

package/dist/lynx/components/textarea.css

@@ -45,21 +45,43 @@
     border-radius: var(--radius-field);
     box-shadow: var(--shadow-xs);
     display: block;
-    min-height: calc(calc(var(--size-field) * 12) * 2);
+    min-height: calc(var(--size-field) * 24);
     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);
     padding: var(--space-sm) var(--space-md);
     resize: vertical;
     transition: border-color var(--duration-fast) var(--ease-standard);
+    --textarea-edge: var(--color-base-300);
+}
+
+.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);
+    --textarea-edge: var(--color-error);
 }
 
 .zx-textarea__textarea.zx-f-disabled {
@@ -68,8 +90,10 @@
 }
 
 .zx-textarea__textarea.zx-f-focus-visible {
-    outline: 2px solid var(--textarea-accent);
+    outline: none;
     outline-offset: 2px;
+    border-color: var(--color-base-100);
+    box-shadow: 0 0 0 2px var(--textarea-accent), inset 0 0 0 2px var(--textarea-edge);
 }
 
 .zx-textarea__root.zx-a-color-primary {
@@ -106,24 +130,24 @@
 
 .zx-textarea__textarea.zx-a-size-xs {
     font-size: var(--text-xs);
-    min-height: calc(calc(var(--size-field) * 8) * 2);
+    min-height: calc(var(--size-field) * 16);
     padding: var(--space-2xs) var(--space-xs);
 }
 
 .zx-textarea__textarea.zx-a-size-sm {
     font-size: var(--text-xs);
-    min-height: calc(calc(var(--size-field) * 10) * 2);
+    min-height: calc(var(--size-field) * 20);
     padding: var(--space-xs) var(--space-sm);
 }
 
 .zx-textarea__textarea.zx-a-size-lg {
     font-size: var(--text-md);
-    min-height: calc(calc(var(--size-field) * 14) * 2);
+    min-height: calc(var(--size-field) * 28);
     padding: var(--space-md) var(--space-lg);
 }
 
 .zx-textarea__textarea.zx-a-size-xl {
     font-size: var(--text-lg);
-    min-height: calc(calc(var(--size-field) * 16) * 2);
+    min-height: calc(var(--size-field) * 32);
     padding: var(--space-lg) var(--space-xl);
 }

package/dist/lynx/components/toast.css

@@ -117,10 +117,6 @@
     animation: zero-daisyui-toast-spin 0.75s linear infinite;
 }
 
-.zx-toast__indicator.zx-s-complete {
-    clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
-}
-
 .zx-root .zx-toast__indicator.zx-s-complete {
     background: #2a7858;
 }
@@ -141,10 +137,6 @@
     background: #a6cebe;
 }
 
-.zx-toast__indicator.zx-s-error {
-    clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
-}
-
 .zx-root .zx-toast__indicator.zx-s-error {
     background: #8f424e;
 }

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 {
@@ -36,6 +47,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 +62,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 {
@@ -112,3 +146,21 @@
     --toggle-group-accent: var(--color-error);
     --toggle-group-on-accent: var(--color-error-content);
 }
+.zx-toggle-group__item.zx-m-first.zx-o-horizontal {
+    border-left-width: calc(var(--border) * 0);
+    border-top-left-radius: calc(var(--radius-field) - var(--border));
+    border-bottom-left-radius: calc(var(--radius-field) - var(--border));
+}
+.zx-toggle-group__item.zx-m-first.zx-o-vertical {
+    border-top-width: calc(var(--border) * 0);
+    border-top-left-radius: calc(var(--radius-field) - var(--border));
+    border-top-right-radius: calc(var(--radius-field) - var(--border));
+}
+.zx-toggle-group__item.zx-m-last.zx-o-horizontal {
+    border-top-right-radius: calc(var(--radius-field) - var(--border));
+    border-bottom-right-radius: calc(var(--radius-field) - var(--border));
+}
+.zx-toggle-group__item.zx-m-last.zx-o-vertical {
+    border-bottom-left-radius: calc(var(--radius-field) - var(--border));
+    border-bottom-right-radius: calc(var(--radius-field) - var(--border));
+}