@sigx/zero-daisyui 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/zero-daisyui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "DaisyUI-flavored design system for SignalX Zero — daisy's token values and component look as a pure tokens+recipes skin over @sigx/zero primitives. No Tailwind, no daisyUI plugin required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,12 +62,12 @@
     "url": "https://github.com/signalxjs/zero/issues"
   },
   "peerDependencies": {
-    "@sigx/zero": "^0.16.0"
+    "@sigx/zero": "^0.17.0"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
-    "@sigx/zero-kit": "^0.16.0",
-    "@sigx/zero": "^0.16.0"
+    "@sigx/zero": "^0.17.0",
+    "@sigx/zero-kit": "^0.17.0"
   },
   "publishConfig": {
     "access": "public"

package/src/recipes.ts

@@ -240,6 +240,98 @@ const disclosureExit = (scope: 'collapsible' | 'accordion'): RecipeInput['target
     },
 });
 
+/**
+ * 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: CssProps = {
+    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: CssProps = {}): CssProps => {
+    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: RecipeInput): RecipeInput => {
+    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"
@@ -660,7 +752,7 @@ const disclosureSizes: Record<string, Record<string, PartStyles>> = {
 };
 
 // daisy "collapse collapse-arrow" flavor.
-export const collapsible: RecipeInput = {
+export const collapsible: RecipeInput = withNonNative({
     component: 'collapsible',
     targets: disclosureExit('collapsible'),
     // Public to a design system derived from this one (#73).
@@ -739,7 +831,7 @@ export const collapsible: RecipeInput = {
     // 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: RecipeInput = {
@@ -5489,6 +5581,15 @@ const lynxTreeRowStates: Record<string, CssProps> = {
     ...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: CssProps = {
+    transition: 'background var(--duration-fast) var(--ease-standard)',
+};
+
 /** A held selected row keeps its accent fill (the web's `:not([data-selected])`). */
 const lynxTreeRowSelectors: Record<string, CssProps> = {
     '&[data-selected][data-pressed]': { background: 'var(--tree-accent)' },
@@ -5649,11 +5750,23 @@ export const treeView: RecipeInput = {
     // 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.
@@ -9395,6 +9508,13 @@ export const table: RecipeInput = {
                     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) => {
@@ -9648,7 +9768,15 @@ export const fileUpload: RecipeInput = {
                     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': {