@sigx/zero-daisyui 0.10.0 → 0.11.0

package/dist/report.json

@@ -3,7 +3,7 @@
   "reportVersion": 2,
   "name": "daisyui",
   "score": {
-    "total": 82.8,
+    "total": 82.7,
     "grade": "B",
     "criteria": {
       "components": {
@@ -24,14 +24,14 @@
         }
       },
       "states": {
-        "score": 76,
+        "score": 75.7,
         "weight": 20,
         "detail": {
-          "covered": 443,
+          "covered": 445,
           "coveredIndirectly": 0,
           "skipped": 15,
-          "uncovered": 135,
-          "total": 593
+          "uncovered": 138,
+          "total": 598
         }
       },
       "contrast": {
@@ -2831,7 +2831,9 @@
             "covered": [],
             "coveredIndirectly": [],
             "skipped": [],
-            "uncovered": []
+            "uncovered": [
+              "swiping"
+            ]
           }
         },
         "backdrop": {
@@ -5711,6 +5713,7 @@
             "coveredIndirectly": [],
             "skipped": [],
             "uncovered": [
+              "clearable",
               "press-animating",
               "pressed"
             ]
@@ -5730,7 +5733,9 @@
             ],
             "coveredIndirectly": [],
             "skipped": [],
-            "uncovered": []
+            "uncovered": [
+              "clearable"
+            ]
           }
         },
         "indicator": {
@@ -5745,7 +5750,9 @@
             "uncovered": []
           },
           "flags": {
-            "covered": [],
+            "covered": [
+              "clearable"
+            ],
             "coveredIndirectly": [],
             "skipped": [],
             "uncovered": []
@@ -7718,7 +7725,9 @@
             "uncovered": []
           },
           "flags": {
-            "covered": [],
+            "covered": [
+              "swiping"
+            ],
             "coveredIndirectly": [],
             "skipped": [],
             "uncovered": []
@@ -9829,8 +9838,8 @@
   "contrast": [
     {
       "name": "light",
-      "cells": 3311,
-      "measured": 2901,
+      "cells": 3318,
+      "measured": 2908,
       "failing": 0,
       "warnings": 324,
       "disabledFailing": 0,
@@ -9905,8 +9914,8 @@
     },
     {
       "name": "dark",
-      "cells": 3311,
-      "measured": 2901,
+      "cells": 3318,
+      "measured": 2908,
       "failing": 0,
       "warnings": 168,
       "disabledFailing": 0,
@@ -9981,10 +9990,10 @@
     },
     {
       "name": "dim",
-      "cells": 3311,
-      "measured": 2901,
+      "cells": 3318,
+      "measured": 2908,
       "failing": 0,
-      "warnings": 269,
+      "warnings": 272,
       "disabledFailing": 0,
       "unrendered": 7,
       "unpainted": 5,
@@ -10057,10 +10066,10 @@
     },
     {
       "name": "nord",
-      "cells": 3311,
-      "measured": 2901,
+      "cells": 3318,
+      "measured": 2908,
       "failing": 0,
-      "warnings": 1231,
+      "warnings": 1234,
       "disabledFailing": 0,
       "unrendered": 7,
       "unpainted": 5,
@@ -10133,10 +10142,10 @@
     },
     {
       "name": "sunset",
-      "cells": 3311,
-      "measured": 2901,
+      "cells": 3318,
+      "measured": 2908,
       "failing": 0,
-      "warnings": 268,
+      "warnings": 271,
       "disabledFailing": 0,
       "unrendered": 7,
       "unpainted": 5,
@@ -10479,7 +10488,7 @@
       },
       {
         "where": "lynx recipe for \"select\"",
-        "what": "rem lengths (14)",
+        "what": "rem lengths (15)",
         "detail": "rewritten to px at 16px/rem — lynx resolves rem against its 14px default page font size (measured, signalxjs/lynx#1183), which would draw every rem-based size 12.5% small",
         "scope": "select"
       },
@@ -11692,8 +11701,8 @@
       },
       {
         "where": "lynx recipe for \"select\".\"indicator\"",
-        "what": "selectors[\"[data-scope=\"select\"][data-part=\"root\"]:has(> [data-scope=\"select\"][data-part=\"clear-trigger\"]) &\"]",
-        "detail": "not expressible in the class grammar — dropped; supply a lynx replacement in the recipe target section",
+        "what": "marginInlineStart: calc(var(--space-2xl) + var(--space-sm))",
+        "detail": "margin-inline-start resolves on iOS but not on Android (measured, signalxjs/lynx#1084) — cross-platform-asymmetric, treated as unsupported; dropped, restate the geometry with a physical spelling (top/right/bottom/left, margin-*/padding-*) in the recipe's lynx target section",
         "scope": "select"
       },
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/zero-daisyui",
-  "version": "0.10.0",
+  "version": "0.11.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.10.0"
+    "@sigx/zero": "^0.11.0"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
-    "@sigx/zero": "^0.10.0",
-    "@sigx/zero-kit": "^0.10.0"
+    "@sigx/zero": "^0.11.0",
+    "@sigx/zero-kit": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

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.
  *
@@ -2933,12 +2941,6 @@ const fieldControl: NonNullable<PartStyles['base']> = {
     boxShadow: 'var(--shadow-xs)',
 };
 
-/**
- * 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.
- */
-const SELECT_CLEARABLE = '[data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) &';
-
 /**
  * The select trigger's lynx steps — `[inline padding in --size-field units,
  * font-size step]` — as the size variants set them (`lynxBtnPad` and the
@@ -3029,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
@@ -3189,7 +3195,25 @@ export const select: RecipeInput = {
                 // 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' } },
+                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: { ...lynxSelectClear('md'), width: '1.5rem', height: '1.5rem', minWidth: '1.5rem', boxSizing: 'border-box' },
                     states: lynxFocus({ inset: true }),
@@ -3210,7 +3234,6 @@ export const select: RecipeInput = {
     },
 };
 
-
 /**
  * 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`
@@ -3829,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' } } },
@@ -3954,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
@@ -7401,7 +7442,8 @@ 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% 0' },
@@ -7539,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) },