@sigx/zero-daisyui 0.9.0 → 0.11.0

package/src/recipes.ts

@@ -148,6 +148,14 @@ const roleInk = (role: string): string =>
     + `${ROLE_INK_KEEP[role as keyof typeof roles] ?? 55}%, var(--color-base-content))`;
 
 // daisy "tabs-box" flavor: a rounded container, lifted active tab.
+/**
+ * The swipe-to-dismiss offset (#293): `createSwipe` publishes the drag as
+ * `--swipe-x` / `--swipe-y` on a toast root or a drawer sheet, and this is
+ * the one place it is read — composed first into the part's `transform`, so
+ * an enter/exit offset or a slide rides on top of it. Unset, it is nothing.
+ */
+const SWIPE = 'translate(var(--swipe-x, 0px), var(--swipe-y, 0px))';
+
 /**
  * Enter/exit presence for a top-layer popup.
  *
@@ -2934,10 +2942,36 @@ const fieldControl: NonNullable<PartStyles['base']> = {
 };
 
 /**
- * A select whose clear-trigger is rendered (#280) — anchored on the root, so
- * a part inside the trigger can make room for the button laid over it.
+ * The select trigger's lynx steps — `[inline padding in --size-field units,
+ * font-size step]` — as the size variants set them (`lynxBtnPad` and the
+ * web ramp's `fontSize`). One table, so the clear-trigger's offset below
+ * cannot drift from the trigger it sits in.
+ */
+const SELECT_LYNX_STEPS = {
+    xs: [2, 'xs'],
+    sm: [3, 'sm'],
+    md: [4, 'sm'],
+    lg: [5, 'md'],
+    xl: [6, 'lg'],
+} as const satisfies Record<keyof typeof FIELD_STEPS, readonly [number, string]>;
+
+/**
+ * Where the lynx clear-trigger's 1.5rem chip sits at one size step
+ * (signalxjs/lynx#1184): centred in the field — the root is exactly the
+ * trigger's height, so half the field less half the chip, from the top —
+ * and one `--space-xs` short of the chevron's 1em box, which sits inside the
+ * trigger's border and end padding at that step's font size. Physical
+ * `top`/`right` and direct `calc(var())` only: lynx resolves no logical
+ * insets on Android and no `min()`, and drops a `var()` that holds a
+ * `calc()`.
  */
-const SELECT_CLEARABLE = '[data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) &';
+const lynxSelectClear = (step: keyof typeof SELECT_LYNX_STEPS): NonNullable<PartStyles['base']> => {
+    const [pad, text] = SELECT_LYNX_STEPS[step];
+    return {
+        top: `calc(var(--size-field) * ${FIELD_STEPS[step] / 2} - 0.75rem)`,
+        right: `calc(var(--border) + var(--size-field) * ${pad} + var(--text-${text}) + var(--space-xs))`,
+    };
+};
 
 export const select: RecipeInput = {
     component: 'select',
@@ -2997,9 +3031,13 @@ export const select: RecipeInput = {
         },
         indicator: {
             base: { opacity: '0.6', transition: 'transform var(--duration-normal) var(--ease-standard)' },
-            states: { open: { transform: 'rotate(180deg)' }, closed: {} },
-            // Room for the clear-trigger laid over the field (#280).
-            selectors: { [SELECT_CLEARABLE]: { marginInlineStart: 'calc(var(--space-2xl) + var(--space-sm))' } },
+            states: {
+                open: { transform: 'rotate(180deg)' },
+                closed: {},
+                // Room for the clear-trigger laid over the field (#280) — the
+                // `clearable` flag the runtime stamps while it renders (#387).
+                clearable: { marginInlineStart: 'calc(var(--space-2xl) + var(--space-sm))' },
+            },
         },
         // Clears the selection (#280): daisy's ghost-btn over the field's
         // inline end, just before the chevron — muted like it, the base-200
@@ -3144,9 +3182,41 @@ export const select: RecipeInput = {
                 // A touch list has no highlight: the pressed item takes the
                 // highlighted item's wash.
                 item: { states: { pressed: { background: 'var(--color-base-200)' } } },
+                // The × and the ▾ get a spacing contract (signalxjs/lynx#1184).
+                // The web offsets the clear-trigger by "the md padding + 1em",
+                // and the 1em is the clear-trigger's own text-sm: at lg/xl the
+                // trigger's padding and chevron both grow, so the × slid onto
+                // the ▾. Here the chevron is a 1em box (right-aligned, so an
+                // unclearable select looks as before) and the clear-trigger a
+                // 1.5rem square (WCAG 2.5.8's target) placed per size beside
+                // it — see `lynxSelectClear`. The web's `min()` height and
+                // `margin-block: auto` centring are dropped on lynx, which
+                // left the box stretched to the field's full height: its
+                // focus ring was a tall pill. The ring is inset, so it hugs
+                // the chip and can never reach the chevron, and no gap shadow
+                // paints past the chip's rounded corners.
+                indicator: {
+                    base: { width: '1em', textAlign: 'right' },
+                    // The web's room for the chip (`margin-inline-start`) is a
+                    // logical spelling Android never resolves, and it is
+                    // sized off the web's own offset. Here the chip is a
+                    // 1.5rem square one `--space-xs` short of the chevron
+                    // at every size, so the room is exactly that — and the
+                    // trigger's `gap` stays between the value and the chip.
+                    // Before the `clearable` flag the web reached this with
+                    // `:has()`, which lynx cannot express: at lg/xl the value
+                    // ran under the chip and its focus ring
+                    // (signalxjs/lynx#1191).
+                    states: { clearable: { marginLeft: 'calc(1.5rem + var(--space-xs))' } },
+                },
+                // The value gives way to the chip instead of running under
+                // it: one line, clipped with an ellipsis — the web's
+                // `nowrap` button text, with a flex item's `min-width: auto`
+                // lifted so it can shrink below its content at all.
+                value: { base: { flexShrink: '1', minWidth: '0', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' } },
                 'clear-trigger': {
-                    base: { top: 'var(--space-xs)', bottom: 'var(--space-xs)', right: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))', minWidth: '1.5rem' },
-                    states: lynxFocus(),
+                    base: { ...lynxSelectClear('md'), width: '1.5rem', height: '1.5rem', minWidth: '1.5rem', boxSizing: 'border-box' },
+                    states: lynxFocus({ inset: true }),
                 },
             },
             variants: {
@@ -3155,13 +3225,15 @@ export const select: RecipeInput = {
                 color: Object.fromEntries(ROLES.map((c) => [c, { popup: { base: {
                     '--select-accent': `var(--color-${c})`,
                 } } }])),
-                size: { ...lynxBtnSizes('trigger'), md: { trigger: { base: lynxBtnPad(4) } } },
+                size: Object.fromEntries((Object.keys(SELECT_LYNX_STEPS) as (keyof typeof SELECT_LYNX_STEPS)[]).map((step) => [step, {
+                    trigger: { base: lynxBtnPad(SELECT_LYNX_STEPS[step][0]) },
+                    'clear-trigger': { base: lynxSelectClear(step) },
+                }])),
             },
         },
     },
 };
 
-
 /**
  * daisy's BUTTON ramp — `.btn`'s fixed height per size step, in `--size-field`
  * units, exactly as daisyUI 5 ships it (`components/button.css`: `.btn-xs`
@@ -3780,6 +3852,8 @@ export const toast: RecipeInput = {
             states: {
                 open: { opacity: '1', transform: 'none' },
                 closed: {},
+                // Styled in `targets.web` — the swipe is web-only (#293).
+                swiping: {},
             },
             at: {
                 'reduced-motion': { base: { transition: 'none' }, states: { open: { transform: 'none' } } },
@@ -3905,6 +3979,22 @@ export const toast: RecipeInput = {
     defaultVariants: { size: 'md' },
     keyframes: { 'zero-daisyui-toast-spin': 'to { transform: rotate(360deg); }' },
     targets: {
+        // The swipe (#293) — web only, since the runtime's `--swipe-*` offset
+        // is: composed ahead of the enter/exit offset, and no pan or pinch
+        // starts on a toast, so a touch drag is the swipe's.
+        web: {
+            parts: {
+                root: {
+                    base: { transform: `${SWIPE} translateY(var(--toast-from))`, touchAction: 'none' },
+                    states: { open: { transform: SWIPE } },
+                    selectors: {
+                        // Mid-swipe the toast tracks the pointer, not a transition.
+                        '&[data-swiping]': { transition: 'none', userSelect: 'none' },
+                    },
+                    at: { 'reduced-motion': { states: { open: { transform: SWIPE } } } },
+                },
+            },
+        },
         lynx: {
             parts: {
                 // The viewport is a full-width strip on lynx (the runtime pins
@@ -7337,9 +7427,11 @@ export const steps: RecipeInput = {
 /**
  * The modal sheet's slide (#83): in from its edge, back out to it.
  *
- * `translate` is physical, so the travel is a custom property that flips with
- * the placement AND the direction — off the reading start is leftward in LTR
- * and rightward in RTL (the `rtl` hedge, as everywhere here). Keyed on
+ * `translate` is physical, so the travel is a custom property — the whole
+ * `x y` pair — that flips with the placement AND the direction: off the
+ * reading start is leftward in LTR and rightward in RTL (the `rtl` hedge, as
+ * everywhere here), while a `top` / `bottom` sheet travels on Y and mirrors
+ * in neither (#291). Keyed on
  * `data-l-dock="sheet"`, the regime, which holds through the exit where
  * `:modal` does not, so the slide-out leaves from the sheet's own box.
  * Opacity stays at 1: the travel is the transition. Each direction rides the
@@ -7350,19 +7442,23 @@ const sheetSlide = (enter: string, exit: string): PartStyles => {
     const open = `${sheet}[data-state="open"]`;
     const travel = (tempo: string): string => {
         const duration = tempo.split(' ')[0];
-        return `translate ${tempo}, display ${duration} allow-discrete, overlay ${duration} allow-discrete`;
+        // `transform` rides along for the swipe's spring back (#293).
+        return `translate ${tempo}, transform ${tempo}, display ${duration} allow-discrete, overlay ${duration} allow-discrete`;
     };
     return {
-        base: { '--drawer-travel': '-100%' },
+        base: { '--drawer-travel': '-100% 0' },
         selectors: {
-            '&[data-placement="end"]': { '--drawer-travel': '100%' },
-            [`&[data-placement="start"]${rtl}`]: { '--drawer-travel': '100%' },
-            [`&[data-placement="end"]${rtl}`]: { '--drawer-travel': '-100%' },
-            [sheet]: { opacity: '1', translate: 'var(--drawer-travel) 0', transition: travel(exit) },
+            '&[data-placement="end"]': { '--drawer-travel': '100% 0' },
+            [`&[data-placement="start"]${rtl}`]: { '--drawer-travel': '100% 0' },
+            [`&[data-placement="end"]${rtl}`]: { '--drawer-travel': '-100% 0' },
+            // The block edges travel on Y, and no direction mirrors them (#291).
+            '&[data-placement="top"]': { '--drawer-travel': '0 -100%' },
+            '&[data-placement="bottom"]': { '--drawer-travel': '0 100%' },
+            [sheet]: { opacity: '1', translate: 'var(--drawer-travel)', transition: travel(exit) },
             [open]: { translate: 'none', transition: travel(enter) },
         },
         at: {
-            'starting-style': { selectors: { [open]: { opacity: '1', translate: 'var(--drawer-travel) 0' } } },
+            'starting-style': { selectors: { [open]: { opacity: '1', translate: 'var(--drawer-travel)' } } },
             'reduced-motion': { selectors: { [sheet]: { transition: 'none' }, [open]: { transition: 'none' } } },
         },
     };
@@ -7432,6 +7528,38 @@ export const drawer: RecipeInput = {
                 },
                 '&[data-placement="start"][data-l-dock="sheet"]': { insetInlineStart: '0', insetInlineEnd: 'auto' },
                 '&[data-placement="end"][data-l-dock="sheet"]': { insetInlineStart: 'auto', insetInlineEnd: '0' },
+                /**
+                 * The block edges (#291): a sheet across the viewport's width,
+                 * pinned with `inset-block-*` — nothing here mirrors in RTL. Its
+                 * height is this recipe's: content-sized up to most of the
+                 * viewport, so the scrim stays in reach. Full width by default —
+                 * `measure` still caps the INLINE size (centred by the auto
+                 * margins), which the `:where()` keeps below the layout step
+                 * table's specificity whatever order the files load in.
+                 */
+                '&:where([data-placement="top"], [data-placement="bottom"])': { '--l-measure': 'none' },
+                '&[data-placement="top"][data-l-dock="sheet"]': {
+                    insetBlockStart: '0',
+                    insetBlockEnd: 'auto',
+                    insetInlineStart: '0',
+                    insetInlineEnd: '0',
+                    marginInline: 'auto',
+                    blockSize: 'auto',
+                    maxBlockSize: '85dvh',
+                    borderEndStartRadius: 'var(--radius-box)',
+                    borderEndEndRadius: 'var(--radius-box)',
+                },
+                '&[data-placement="bottom"][data-l-dock="sheet"]': {
+                    insetBlockStart: 'auto',
+                    insetBlockEnd: '0',
+                    insetInlineStart: '0',
+                    insetInlineEnd: '0',
+                    marginInline: 'auto',
+                    blockSize: 'auto',
+                    maxBlockSize: '85dvh',
+                    borderStartStartRadius: 'var(--radius-box)',
+                    borderStartEndRadius: 'var(--radius-box)',
+                },
             },
         }),
         backdrop: {
@@ -7453,8 +7581,27 @@ export const drawer: RecipeInput = {
     // Trigger-carried axes — see `btnColors` for why the panel is out of
     // reach and the trigger is the whole story here.
     variants: { color: btnColors(), size: btnSizes },
-    // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
     targets: {
+        // Swipe to dismiss (#293) — web only, since the runtime's `--swipe-*`
+        // offset is: the sheet wears the drag offset (`SWIPE`) in every
+        // state — so a swiped sheet leaves from where it was let go — at a
+        // weight above the presence's own open `transform`. Mid-swipe no
+        // transition runs. A touch pan across the dismiss axis stays the
+        // page's; along it is the gesture's, so content taller than a
+        // block-edge sheet scrolls in a box of its own inside the panel.
+        web: {
+            parts: {
+                panel: {
+                    selectors: {
+                        '&[data-l-dock="sheet"][data-state]': { transform: SWIPE },
+                        '&[data-l-dock="sheet"][data-state="open"][data-swiping]': { transition: 'none', userSelect: 'none' },
+                        '&[data-l-dock="sheet"]:where([data-placement="start"], [data-placement="end"])': { touchAction: 'pan-y' },
+                        '&[data-l-dock="sheet"]:where([data-placement="top"], [data-placement="bottom"])': { touchAction: 'pan-x' },
+                    },
+                },
+            },
+        },
+        // The btn paddings, restated physically — see `lynxBtnPad` (#1084).
         lynx: {
             parts: {
                 trigger: { base: lynxBtnPad(4) },