@sigx/zero-daisyui 0.11.0 → 0.12.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/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);

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/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/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 {

package/dist/lynx/components/toggle.css

@@ -12,7 +12,7 @@
     gap: 0.5em;
     color: var(--color-base-content);
     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);
     font-family: inherit;
@@ -20,12 +20,28 @@
     line-height: var(--leading-none);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+    width: max-content;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    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__root.zx-s-on {
     background: var(--toggle-accent);
     color: var(--toggle-on-accent);
     border-color: var(--toggle-accent);
+    border-top-color: var(--toggle-accent);
+    border-right-color: var(--toggle-accent);
+    border-bottom-color: var(--toggle-accent);
+    border-left-color: var(--toggle-accent);
 }
 
 .zx-toggle__root.zx-f-disabled {
@@ -34,8 +50,13 @@
 }
 
 .zx-toggle__root.zx-f-focus-visible {
-    outline: 2px solid var(--toggle-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--toggle-accent);
+}
+
+.zx-toggle__root.zx-f-pressed {
+    background: var(--color-base-300);
 }
 
 .zx-toggle__root.zx-f-pressed {
@@ -43,6 +64,10 @@
     box-shadow: none;
 }
 
+.zx-toggle__root.zx-s-on.zx-f-pressed {
+    background: var(--toggle-accent);
+}
+
 .zx-toggle__root.zx-a-color-primary {
     --toggle-accent: var(--color-primary);
     --toggle-on-accent: var(--color-primary-content);