@sigx/zero-daisyui 0.16.0 → 0.17.0

package/dist/css/components/collapsible.css

@@ -66,9 +66,30 @@
         transform: rotate(225deg);
     }
 
+    [data-scope="collapsible"][data-part="trigger"]:where(button) {
+        appearance: none;
+        margin: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font-family: inherit;
+        font-style: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        text-transform: inherit;
+        text-align: start;
+        inline-size: 100%;
+        box-sizing: border-box;
+    }
+
     [data-scope="collapsible"][data-part="panel"] {
         padding: 0 var(--space-2xl) var(--space-xl);
         font-size: var(--text-md);
+        overflow: clip;
+    }
+
+    [data-scope="collapsible"][data-part="panel"][data-state="open"] {
+        transition: block-size var(--duration-normal) var(--ease-standard), padding-block var(--duration-normal) var(--ease-standard);
     }
 
     [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
@@ -76,6 +97,13 @@
         animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
     }
 
+    [data-scope="collapsible"][data-part="panel"][data-state="closed"][hidden] {
+        block-size: 0;
+        padding-block: 0;
+        border-block-width: 0;
+        animation: none;
+    }
+
     [data-scope="collapsible"][data-part="root"][data-color="primary"] {
         --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -164,6 +192,10 @@
         [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
             animation: none;
         }
+
+        [data-scope="collapsible"][data-part="panel"][data-state="open"] {
+            transition: none;
+        }
     }
 }
 @keyframes collapsible-panel-exit {

package/dist/css/index.css

@@ -845,9 +845,30 @@
         transform: rotate(225deg);
     }
 
+    [data-scope="collapsible"][data-part="trigger"]:where(button) {
+        appearance: none;
+        margin: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font-family: inherit;
+        font-style: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        text-transform: inherit;
+        text-align: start;
+        inline-size: 100%;
+        box-sizing: border-box;
+    }
+
     [data-scope="collapsible"][data-part="panel"] {
         padding: 0 var(--space-2xl) var(--space-xl);
         font-size: var(--text-md);
+        overflow: clip;
+    }
+
+    [data-scope="collapsible"][data-part="panel"][data-state="open"] {
+        transition: block-size var(--duration-normal) var(--ease-standard), padding-block var(--duration-normal) var(--ease-standard);
     }
 
     [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
@@ -855,6 +876,13 @@
         animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
     }
 
+    [data-scope="collapsible"][data-part="panel"][data-state="closed"][hidden] {
+        block-size: 0;
+        padding-block: 0;
+        border-block-width: 0;
+        animation: none;
+    }
+
     [data-scope="collapsible"][data-part="root"][data-color="primary"] {
         --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -943,6 +971,10 @@
         [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
             animation: none;
         }
+
+        [data-scope="collapsible"][data-part="panel"][data-state="open"] {
+            transition: none;
+        }
     }
 }
 @keyframes collapsible-panel-exit {

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

@@ -201,6 +201,7 @@
 .zx-file-upload__item-size {
     font-size: var(--text-xs);
     font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
 }
 
 .zx-root .zx-file-upload__item-size {
@@ -232,6 +233,7 @@
     padding: var(--space-2xs) var(--space-xs);
     line-height: var(--leading-none);
     cursor: pointer;
+    flex-shrink: 0;
 }
 
 .zx-file-upload__item-remove.zx-f-disabled {

package/dist/lynx/components/table.css

@@ -192,6 +192,7 @@
     font-size: 0.75em;
     line-height: 1;
     transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
+    flex-shrink: 0;
 }
 
 .zx-table__sort-indicator.zx-s-descending {

package/dist/lynx/components/tree-view.css

@@ -37,7 +37,7 @@
     border-radius: var(--radius-field);
     cursor: pointer;
     outline: none;
-    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    transition: background var(--duration-fast) var(--ease-standard);
 }
 
 .zx-tree-view__item.zx-f-selected {
@@ -82,7 +82,7 @@
     border-radius: var(--radius-field);
     cursor: pointer;
     outline: none;
-    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    transition: background var(--duration-fast) var(--ease-standard);
     user-select: none;
 }
 

package/dist/lynx/index.css

@@ -8164,7 +8164,7 @@
     border-radius: var(--radius-field);
     cursor: pointer;
     outline: none;
-    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    transition: background var(--duration-fast) var(--ease-standard);
 }
 
 .zx-tree-view__item.zx-f-selected {
@@ -8209,7 +8209,7 @@
     border-radius: var(--radius-field);
     cursor: pointer;
     outline: none;
-    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    transition: background var(--duration-fast) var(--ease-standard);
     user-select: none;
 }
 
@@ -14456,6 +14456,7 @@
     font-size: 0.75em;
     line-height: 1;
     transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
+    flex-shrink: 0;
 }
 
 .zx-table__sort-indicator.zx-s-descending {
@@ -15245,6 +15246,7 @@
 .zx-file-upload__item-size {
     font-size: var(--text-xs);
     font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
 }
 
 .zx-root .zx-file-upload__item-size {
@@ -15276,6 +15278,7 @@
     padding: var(--space-2xs) var(--space-xs);
     line-height: var(--leading-none);
     cursor: pointer;
+    flex-shrink: 0;
 }
 
 .zx-file-upload__item-remove.zx-f-disabled {

package/dist/lynx/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://signalxjs.github.io/zero/schemas/lynx-manifest.schema.json",
   "manifestVersion": 1,
-  "zeroVersion": "0.16.0",
+  "zeroVersion": "0.17.0",
   "name": "daisyui",
   "themes": [
     {

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://signalxjs.github.io/zero/schemas/ds-manifest.schema.json",
   "manifestVersion": 1,
-  "zeroVersion": "0.16.0",
+  "zeroVersion": "0.17.0",
   "name": "daisyui",
   "themes": [
     {

package/dist/recipes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../src/recipes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../src/recipes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAwB,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA+VxE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,IAAI,EAAE,WAqVlB,CAAC;AA4BF,eAAO,MAAM,WAAW,EAAE,WA+ExB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,WA0R1B,CAAC;AAmJF,eAAO,MAAM,MAAM,EAAE,WA0GpB,CAAC;AA4CF,eAAO,MAAM,OAAO,EAAE,WAoDrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAoDrB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,WAyCvB,CAAC;AAGF,eAAO,MAAM,IAAI,EAAE,WA4LlB,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,WAmCrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,WAoDnB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,EAAE,WAuEtB,CAAC;AAkEF,eAAO,MAAM,QAAQ,EAAE,WA6PtB,CAAC;AAMF,eAAO,MAAM,UAAU,EAAE,WAoJxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,WAkC3B,CAAC;AAgCF,eAAO,MAAM,QAAQ,EAAE,WAiGtB,CAAC;AAMF,eAAO,MAAM,MAAM,EAAE,WAocpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAkGvB,CAAC;AA+DF,eAAO,MAAM,MAAM,EAAE,WAmQpB,CAAC;AAqDF,eAAO,MAAM,MAAM,EAAE,WAoTpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,WAoJpB,CAAC;AAmBF,eAAO,MAAM,WAAW,EAAE,WAsGzB,CAAC;AAoBF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,WAmXnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,WAsTtB,CAAC;AAIF,eAAO,MAAM,MAAM,EAAE,WAyHpB,CAAC;AASF,eAAO,MAAM,WAAW,EAAE,WA0MzB,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,WA0MzB,CAAC;AA4DF,eAAO,MAAM,WAAW,EAAE,WAoHzB,CAAC;AA2FF,eAAO,MAAM,QAAQ,EAAE,WAwLtB,CAAC;AAsCF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,WAsKnB,CAAC;AAMF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,WAgItB,CAAC;AAGF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,WAyIlB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,WAiLnB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,WA6FxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,WAsJnB,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,WAuJrB,CAAC;AAGF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,WAwDtB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,WA6DrB,CAAC;AAGF,uEAAuE;AACvE,eAAO,MAAM,GAAG,EAAE,WAgFjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,WAgEpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,WA6EvB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,KAAK,EAAE,WAsLnB,CAAC;AAWF,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,EAAE,WAmQtB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,IAAI,EAAE,WAuIlB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,WAsIrB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,cAAc,EAAE,WA+G5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,WAmElB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,WAyFpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,WAgIrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,WAoIzB,CAAC;AAmDF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,WA0HxB,CAAC;AAsCF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,WAqQnB,CAAC;AA0CF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,WAoMpB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,WAqRnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,WAqNxB,CAAC;AAeF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,WA4MtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,WA8ElB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,WAqDvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,WAwHlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAAW,EAahC,CAAC"}

package/dist/recipes.js

@@ -216,6 +216,97 @@ const disclosureExit = (scope) => ({
         },
     },
 });
+/**
+ * Collapsible's non-native mode (#453): a `<div>` root, a `<button>` trigger
+ * and a panel hidden with `hidden="until-found"`. Nothing lives on
+ * `::details-content` there, so the panel does that wrapper's work itself:
+ * collapsed while `hidden` (the UA's `content-visibility: hidden` keeps the
+ * box — padding and border included — on the page), clipped so its content
+ * never spills out of a box that is growing or shrinking, and grown
+ * from collapsed to `auto` on the open state (`interpolate-size` is the
+ * root's, and inherits); the close is `disclosureExit`'s, as in native mode.
+ * Inert in native mode: a native panel is never `hidden`, and its block size
+ * never moves.
+ *
+ * The trigger sheds the paint a UA `<button>` has and a `<summary>` never
+ * had — only where the recipe's own base leaves a property unset, since this
+ * rule (`:where(button)`, the base's specificity) is emitted after it.
+ * Web-only, like `hidden="until-found"` itself.
+ */
+const BUTTON_RESET = {
+    appearance: 'none',
+    margin: '0',
+    padding: '0',
+    border: '0',
+    background: 'none',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    fontStyle: 'inherit',
+    lineHeight: 'inherit',
+    letterSpacing: 'inherit',
+    textTransform: 'inherit',
+    textAlign: 'start',
+    inlineSize: '100%',
+    boxSizing: 'border-box',
+};
+/** The reset minus what `base` states itself (a `borderRadius` is no border). */
+const summaryLike = (base = {}) => {
+    const own = Object.keys(base).filter((key) => !key.endsWith('Radius'));
+    return Object.fromEntries(Object.entries(BUTTON_RESET)
+        .filter(([key]) => !own.some((k) => k === key || k.startsWith(key))));
+};
+const withNonNative = (recipe) => {
+    const web = recipe.targets?.web ?? {};
+    const trigger = web.parts?.trigger ?? {};
+    const panel = web.parts?.panel ?? {};
+    const reduced = panel.at?.['reduced-motion'] ?? {};
+    return {
+        ...recipe,
+        targets: {
+            ...recipe.targets,
+            web: {
+                ...web,
+                parts: {
+                    ...web.parts,
+                    trigger: {
+                        ...trigger,
+                        selectors: { ...trigger.selectors, '&:where(button)': summaryLike(recipe.parts.trigger?.base) },
+                    },
+                    panel: {
+                        ...panel,
+                        base: { ...panel.base, overflow: 'clip' },
+                        selectors: {
+                            ...panel.selectors,
+                            '&[data-state="closed"][hidden]': {
+                                blockSize: '0',
+                                paddingBlock: '0',
+                                borderBlockWidth: '0',
+                                animation: 'none',
+                            },
+                        },
+                        // The open half: from the collapsed box to `auto`.
+                        states: {
+                            ...panel.states,
+                            open: {
+                                ...panel.states?.open,
+                                transition: 'block-size var(--duration-normal) var(--ease-standard), padding-block var(--duration-normal) var(--ease-standard)',
+                            },
+                        },
+                        at: {
+                            ...panel.at,
+                            'reduced-motion': {
+                                ...reduced,
+                                states: { ...reduced.states, open: { transition: 'none' } },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    };
+};
 /**
  * Merge presence into a part's own styles per KEY, not per block: a recipe
  * that already writes `states: { open: {} }` — the "deliberately unstyled"
@@ -621,7 +712,7 @@ const disclosureSizes = {
     },
 };
 // daisy "collapse collapse-arrow" flavor.
-export const collapsible = {
+export const collapsible = withNonNative({
     component: 'collapsible',
     targets: disclosureExit('collapsible'),
     // Public to a design system derived from this one (#73).
@@ -700,7 +791,7 @@ export const collapsible = {
     // signalxjs/lynx#1070. No `color` default: the un-attributed accent is
     // base-content ink, outside the color vocabulary.
     defaultVariants: { size: 'md' },
-};
+});
 // daisy "toggle" flavor.
 export const switchRecipe = {
     component: 'switch',
@@ -5367,6 +5458,14 @@ const lynxTreeRowStates = {
     },
     ...lynxFocus({ inset: true }),
 };
+/**
+ * The tree rows' lynx base: the fill still eases, the ink snaps — a
+ * transitioned `color` never reaches the row's inheriting label on lynx
+ * (signalxjs/lynx#1292; see the tree-view recipe's `targets`).
+ */
+const lynxTreeRowBase = {
+    transition: 'background var(--duration-fast) var(--ease-standard)',
+};
 /** A held selected row keeps its accent fill (the web's `:not([data-selected])`). */
 const lynxTreeRowSelectors = {
     '&[data-selected][data-pressed]': { background: 'var(--tree-accent)' },
@@ -5525,11 +5624,23 @@ export const treeView = {
     // those carry is restated on the part the runtime stamps. The skin's
     // `:dir(rtl)` mirror and the `@media` stops have no lynx form (no RTL
     // flow, no conditions) and stay dropped.
+    //
+    // The rows transition `background` only (signalxjs/lynx#1292, zero#521).
+    // A row's label is the author's `<text>`, inked by inheritance from the
+    // row. Lynx's new animator (on by default) takes a transitioned `color`
+    // change away from the element's own style pass and ticks it into the
+    // row's paint alone, and the row's children inherit its computed colour
+    // only in that pass, so they kept the OLD ink: a row selected live
+    // painted base-content text on the accent fill, while a row selected at
+    // mount (no transition runs) was right. Read in Lynx's
+    // `fiber_element.cc` (`ConsumeStyleInternal`) and
+    // `css_transition_manager.cc` (`ConsumeCSSProperty`). Without a `color`
+    // transition the new ink is set in the style pass and reaches the label.
     targets: {
         lynx: {
             parts: {
-                item: { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
-                'branch-trigger': { states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                item: { base: lynxTreeRowBase, states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
+                'branch-trigger': { base: lynxTreeRowBase, states: lynxTreeRowStates, selectors: lynxTreeRowSelectors },
                 // `inline-block` is not a lynx display value. The glyph is a
                 // `<text>` part: a 1em box centred on it, so the quarter turn
                 // pivots on the chevron instead of swinging it sideways.
@@ -9229,6 +9340,13 @@ export const table = {
                     base: { flexDirection: 'row' },
                     states: { pressed: { color: 'var(--table-accent)' }, ...lynxFocus() },
                 },
+                // The mark never takes its width out of the header's word
+                // (signalxjs/lynx#1299): lynx's flex has no automatic
+                // minimum, so the ▲ (kept in layout while unsorted) squeezed
+                // "Name" into "Nam / e" at xl. lynx-zero holds the label's
+                // `<text>` at its content width; a header too narrow for
+                // both overflows whole, as the web's column grows.
+                'sort-indicator': { base: { flexShrink: '0' } },
             },
             variants: {
                 color: Object.fromEntries(ROLES.map((c) => {
@@ -9481,7 +9599,15 @@ export const fileUpload = {
                     base: { alignSelf: 'stretch', display: 'flex', flexDirection: 'column' },
                 },
                 item: { base: { flexDirection: 'row' } },
+                // Only the name gives way in a narrow row (signalxjs/lynx#1294).
+                // Lynx's flex has no automatic minimum, so every item
+                // shrank below its content: "1.5 kB" wrapped to two lines
+                // and the × squeezed into an oval. The size and the × keep
+                // their content width, as the web's do; the name
+                // (`flex: 1 1 auto; min-width: 0`) ellipsizes.
+                'item-size': { base: { flexShrink: '0' } },
                 'item-remove': {
+                    base: { flexShrink: '0' },
                     states: { pressed: { background: 'var(--color-base-200)' }, ...lynxFocus() },
                 },
                 'clear-trigger': {