@sigx/zero-daisyui 0.9.0 → 0.10.0

package/dist/report.json

@@ -10286,6 +10286,17 @@
         "what": "@property registrations, @layer, light-dark()/prefers-color-scheme",
         "detail": "omitted: colors are baked per theme block and switching is a class swap, so there is nothing left for them to do"
       },
+      {
+        "where": "lynx tokens",
+        "what": "rem lengths (114)",
+        "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"
+      },
+      {
+        "where": "lynx recipe for \"grid\"",
+        "what": "rem lengths (1)",
+        "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": "grid"
+      },
       {
         "where": "lynx recipe for \"tabs\".\"list\"",
         "what": "display: inline-flex",
@@ -10298,6 +10309,12 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 0 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "tabs"
       },
+      {
+        "where": "lynx recipe for \"tabs\"",
+        "what": "rem lengths (1)",
+        "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": "tabs"
+      },
       {
         "where": "lynx recipe for \"switch\"",
         "what": "--switch-p",
@@ -10328,6 +10345,12 @@
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "dialog"
       },
+      {
+        "where": "lynx recipe for \"dialog\"",
+        "what": "rem lengths (2)",
+        "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": "dialog"
+      },
       {
         "where": "lynx recipe for \"popover\".\"trigger\"",
         "what": "display: inline-flex",
@@ -10340,18 +10363,42 @@
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "popover"
       },
+      {
+        "where": "lynx recipe for \"popover\"",
+        "what": "rem lengths (1)",
+        "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": "popover"
+      },
       {
         "where": "lynx recipe for \"tooltip\".\"trigger\"",
         "what": "display: inline-flex",
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "tooltip"
       },
+      {
+        "where": "lynx recipe for \"tooltip\"",
+        "what": "rem lengths (1)",
+        "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": "tooltip"
+      },
+      {
+        "where": "lynx recipe for \"hover-card\"",
+        "what": "rem lengths (1)",
+        "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": "hover-card"
+      },
       {
         "where": "lynx recipe for \"menu\".\"trigger\"",
         "what": "display: inline-flex",
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "menu"
       },
+      {
+        "where": "lynx recipe for \"menu\"",
+        "what": "rem lengths (2)",
+        "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": "menu"
+      },
       {
         "where": "lynx recipe for \"checkbox\".\"root\"",
         "what": "display: inline-flex",
@@ -10364,6 +10411,12 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 6 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "checkbox"
       },
+      {
+        "where": "lynx recipe for \"checkbox\"",
+        "what": "rem lengths (7)",
+        "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": "checkbox"
+      },
       {
         "where": "lynx recipe for \"radio-group\".\"item\"",
         "what": "display: inline-flex",
@@ -10376,6 +10429,12 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 6 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "radio-group"
       },
+      {
+        "where": "lynx recipe for \"radio-group\"",
+        "what": "rem lengths (6)",
+        "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": "radio-group"
+      },
       {
         "where": "lynx recipe for \"progress\"",
         "what": "--progress-track-size",
@@ -10394,6 +10453,12 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 6 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "slider"
       },
+      {
+        "where": "lynx recipe for \"slider\"",
+        "what": "rem lengths (2)",
+        "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": "slider"
+      },
       {
         "where": "lynx recipe for \"select\".\"root\"",
         "what": "display: inline-flex",
@@ -10412,12 +10477,24 @@
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "select"
       },
+      {
+        "where": "lynx recipe for \"select\"",
+        "what": "rem lengths (14)",
+        "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"
+      },
       {
         "where": "lynx recipe for \"button\".\"root\"",
         "what": "display: inline-flex",
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "button"
       },
+      {
+        "where": "lynx recipe for \"button\"",
+        "what": "rem lengths (2)",
+        "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": "button"
+      },
       {
         "where": "lynx recipe for \"avatar\"",
         "what": "--avatar-size",
@@ -10436,6 +10513,12 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "avatar-group"
       },
+      {
+        "where": "lynx recipe for \"toast\"",
+        "what": "rem lengths (2)",
+        "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": "toast"
+      },
       {
         "where": "lynx recipe for \"combobox\".\"root\"",
         "what": "display: inline-flex",
@@ -10460,6 +10543,12 @@
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "combobox"
       },
+      {
+        "where": "lynx recipe for \"combobox\"",
+        "what": "rem lengths (2)",
+        "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": "combobox"
+      },
       {
         "where": "lynx recipe for \"toggle\".\"root\"",
         "what": "display: inline-flex",
@@ -10490,6 +10579,12 @@
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "number-input"
       },
+      {
+        "where": "lynx recipe for \"number-input\"",
+        "what": "rem lengths (1)",
+        "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": "number-input"
+      },
       {
         "where": "lynx recipe for \"rating-group\".\"root\"",
         "what": "display: inline-flex",
@@ -10616,6 +10711,12 @@
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "join"
       },
+      {
+        "where": "lynx recipe for \"navbar\"",
+        "what": "rem lengths (5)",
+        "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": "navbar"
+      },
       {
         "where": "lynx recipe for \"nav-list\".\"icon\"",
         "what": "display: inline-flex",
@@ -10730,11 +10831,23 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 1 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "file-upload"
       },
+      {
+        "where": "lynx recipe for \"carousel\"",
+        "what": "rem lengths (10)",
+        "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": "carousel"
+      },
       {
         "where": "lynx recipe for \"countdown\".\"root\"",
         "what": "display: inline-flex",
         "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
         "scope": "countdown"
+      },
+      {
+        "where": "lynx recipe for \"diff\"",
+        "what": "rem lengths (10)",
+        "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": "diff"
       }
     ],
     "dropped": [
@@ -12965,7 +13078,7 @@
       },
       {
         "where": "lynx recipe for \"drawer\".\"panel\"",
-        "what": "translate: var(--drawer-travel) 0",
+        "what": "translate: var(--drawer-travel)",
         "detail": "the standalone translate property resolves on iOS but not on Android (measured, signalxjs/lynx#1084) — cross-platform-asymmetric, treated as unsupported; dropped, spell the motion as a transform function (transform: translateX(...) translateY(...)) in the recipe's lynx target section",
         "scope": "drawer"
       },
@@ -13011,6 +13124,72 @@
         "detail": "inset-inline-end 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": "drawer"
       },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "selectors[\"&:where([data-placement=\"top\"], [data-placement=\"bottom\"])\"]",
+        "detail": "not expressible in the class grammar — dropped; supply a lynx replacement in the recipe target section",
+        "scope": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetBlockStart: 0",
+        "detail": "inset-block-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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetBlockEnd: auto",
+        "detail": "inset-block-end 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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetInlineStart: 0",
+        "detail": "inset-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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetInlineEnd: 0",
+        "detail": "inset-inline-end 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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "marginInline: auto",
+        "detail": "margin-inline 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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetBlockStart: auto",
+        "detail": "inset-block-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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetBlockEnd: 0",
+        "detail": "inset-block-end 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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetInlineStart: 0",
+        "detail": "inset-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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "insetInlineEnd: 0",
+        "detail": "inset-inline-end 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": "drawer"
+      },
+      {
+        "where": "lynx recipe for \"drawer\".\"panel\"",
+        "what": "marginInline: auto",
+        "detail": "margin-inline 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": "drawer"
+      },
       {
         "where": "lynx recipe for \"drawer\".\"panel\"",
         "what": "at[\"starting-style\"]",

package/package.json

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

package/src/recipes.ts

@@ -2939,6 +2939,38 @@ const fieldControl: NonNullable<PartStyles['base']> = {
  */
 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
+ * 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 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',
     // Accent as text/border ink only — daisy's highlighted item is a neutral
@@ -3144,9 +3176,23 @@ 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' } },
                 '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,7 +3201,10 @@ 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) },
+                }])),
             },
         },
     },
@@ -7337,9 +7386,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
@@ -7353,16 +7404,19 @@ const sheetSlide = (enter: string, exit: string): PartStyles => {
         return `translate ${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 +7486,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: {