@kerfjs/ui 5.0.0-beta.100 → 5.0.0-beta.102

package/README.md

@@ -50,7 +50,7 @@ geometry inspection, and metadata ownership. AI tools can discover that
 contract and its public imports through the shipped
 [`catalog-authoring.json`](./ai/catalog-authoring.json) artifact.
 
-For connective application patterns, use the ten [production composition
+For connective application patterns, use the eleven [production composition
 recipes](./docs/recipes.md). Each has a stable catalog route, runnable state,
 public-subpath source, semantic layout ownership, and explicit application
 customization boundaries. The composer recipe demonstrates one coherent form
@@ -252,9 +252,11 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
 | `wireTabBars`, `reorderTabs`                                        | `@kerfjs/ui/wire-tab-bars`              | —                                        |
 | `wireScrollDividers`                                                | `@kerfjs/ui/wire-scroll-dividers`       | —                                        |
 | `wireToolbarVisibility`                                             | `@kerfjs/ui/wire-toolbar-visibility`    | —                                        |
+| `wireOverlaySheets`                                                 | `@kerfjs/ui/wire-overlay-sheets`        | `@kerfjs/ui/overlay-sheet.css`           |
 | `LoadingSpinner`                                                    | `@kerfjs/ui/loading-spinner`            | `@kerfjs/ui/loading-spinner.css`         |
 | `Skeleton`                                                          | `@kerfjs/ui/skeleton`                   | `@kerfjs/ui/skeleton.css`                |
 | `SunkenPanel`                                                       | `@kerfjs/ui/sunken-panel`               | `@kerfjs/ui/sunken-panel.css`            |
+| `BackdropImage`                                                     | `@kerfjs/ui/backdrop-image`             | `@kerfjs/ui/backdrop-image.css`          |
 | `Select`                                                            | `@kerfjs/ui/select`                     | `@kerfjs/ui/select.css`                  |
 | `SegmentedControl`                                                  | `@kerfjs/ui/segmented-control`          | `@kerfjs/ui/segmented-control.css`       |
 | `ChoiceChips`                                                       | `@kerfjs/ui/choice-chips`               | `@kerfjs/ui/choice-chips.css`            |

package/ai/component-catalog.json

@@ -648,7 +648,10 @@
         "A child table or other component needs edge-to-edge decoration with text aligned to other pane content.",
         "An opaque edge-to-edge child needs a reserved vertical scrollbar gutter.",
         "Scrolling content must pass beneath chrome laid over the pane edge (a DialogSurface floating footer) while its first and last items still rest clear of it (scrollClearance).",
-        "The header should float over the scrolling content on a translucent material so content scrolls visibly beneath it, with the first item still resting below the header (headerPresentation: overlay, measured by wireScrollDividers)."
+        "The header should float over the scrolling content on a translucent material so content scrolls visibly beneath it, with the first item still resting below the header (headerPresentation: overlay, measured by wireScrollDividers).",
+        "A pane needs an app-chosen surface color, such as a media detail page painted in its artwork's color (background, a typed CssColor; also in PaneConfig).",
+        "A region should take on an app color (a media page in its artwork's color) with its text, quiet text, links, fills, and chrome material re-derived to keep AA (tint: { color, scheme }; also in PaneConfig).",
+        "The header lies over imagery and must be fully transparent, with glass control groups for legibility and the material fading back in once content scrolls beneath (headerPresentation: clear, scrollEdge: material)."
       ],
       "avoidWhen": [
         "Do not use Pane as a padded card or add a competing scroll owner around its content slot.",
@@ -674,7 +677,10 @@
         "whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter)",
         "optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined)",
         "whether the scrolling content clears overlaying chrome on its block edges (scrollClearance, also in PaneConfig, so a Workbench mainPane or panel pane, a CollapsiblePanel pane, or a NavStack view pane forwards it)",
-        "whether the header is docked in its own row or laid over the scrolling content on the translucent chrome material (headerPresentation, also in PaneConfig)"
+        "whether the header is docked in its own row or laid over the scrolling content on the translucent chrome material (headerPresentation, also in PaneConfig)",
+        "an optional app-chosen surface color that replaces the appearance's fill (background, a typed CssColor from @kerfjs/ui/css-values, also in PaneConfig, so a Workbench panel or mainPane, a CollapsiblePanel pane, or a NavStack view pane forwards it)",
+        "an optional scoped tint (tint: { color, scheme }, also in PaneConfig): the color and the declared light or dark scheme it belongs to; Kerf does no color detection",
+        "an optional tint accent (tint.accent) that re-derives the brand ramp, links, and focus ring inside the tinted scope at AA"
       ],
       "variants": [
         "content only",
@@ -687,12 +693,18 @@
         "chrome dividers only while scrolled (default, wired by wireScrollDividers)",
         "always or no chrome dividers",
         "scrollClearance block-start, block-end, or both on the scrolling content",
-        "overlay header on the translucent chrome material (headerPresentation: overlay)"
+        "overlay header on the translucent chrome material (headerPresentation: overlay)",
+        "app-chosen background color (background), replacing the default or sunken fill",
+        "scoped tint re-deriving surface and text tokens from an app color (tint)",
+        "clear (transparent) overlay header, optionally with the scroll-edge material (headerPresentation: clear, scrollEdge: material)"
       ],
       "accessibility": [
         "Choose semantic root and content elements that match the region and provide labels for landmark elements.",
         "Keep fixed header/footer chrome outside the single scrolling content slot so reading and focus order remain coherent.",
-        "An overlay header's text uses the normal text color, which keeps WCAG AA over the 80% chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter."
+        "An overlay header's text uses the normal text color, which keeps WCAG AA over the 80% chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter.",
+        "A background color is app-chosen: Keep text at WCAG AA over the color: a dark background needs dark-tone content or a scoped tint; forced colors paint Canvas instead.",
+        "A tint clamps the re-derived surface and text lightness so normal, quiet, link, and neutral-on-quiet text keep 4.5:1 over the tinted surface, raised surface, and quiet fills for any color; under prefers-contrast: more or without relative color syntax the scope keeps the plain palette in its declared scheme.",
+        "A clear header has no material of its own: keep its controls in glass ToolbarControlGroups and a title over imagery on a scrim; it turns opaque under reduced transparency or increased contrast and paints Canvas in forced colors."
       ],
       "geometry": {
         "margin": "child",
@@ -705,7 +717,8 @@
           "deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.",
           "For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto.",
           "scrollClearance adds the inherited --kui-scroll-clearance-block-start/end context, published by overlaying chrome, to the scrolling content block padding and scroll padding alongside safe areas and deepInset.",
-          "headerPresentation overlay: once wireScrollDividers measures the header, the header shares the content cell above the scroller, its border-box height is published as --kui-scroll-clearance-block-start on the Pane root, and the content clears it automatically; unwired or with chromePlacement auto, the header stays docked."
+          "headerPresentation overlay: once wireScrollDividers measures the header, the header shares the content cell above the scroller, its border-box height is published as --kui-scroll-clearance-block-start on the Pane root, and the content clears it automatically; unwired or with chromePlacement auto, the header stays docked.",
+          "The scrolling content also publishes its resolved block-start padding (safe area, deepInset, and overlay or clear header clearance) as --kui-pane-content-inset-block-start, so a first child such as an underChrome BackdropImage can run up beneath it."
         ]
       },
       "delivery": {
@@ -825,7 +838,9 @@
         "top-toolbar defaults, title size, and heading level",
         "whether the chrome and bottom-toolbar dividers follow the scroll, always show, or never show (chromeDividers)",
         "whether the top chrome docks above the active view or lies over it on the translucent chrome material (chromePresentation)",
-        "whether the bottom toolbar docks below the active view or lies over it on the translucent chrome material (bottomToolbarPresentation)"
+        "whether the bottom toolbar docks below the active view or lies over it on the translucent chrome material (bottomToolbarPresentation)",
+        "an optional app-chosen color for the stack, its docked chrome and bottom toolbar, and every view (background, a typed CssColor); one view's own color goes in its pane: { background }",
+        "an optional scoped tint for the stack, its chrome, and views: tint: { color, scheme } re-derives surface and text tokens from an app color with text kept at AA"
       ],
       "variants": [
         "single root view",
@@ -839,7 +854,10 @@
         "chrome and bottom-toolbar dividers only while the active view scrolls beneath them (wired by wireScrollDividers)",
         "permanent or no chrome dividers (chromeDividers always or none)",
         "translucent top chrome laid over the active view (chromePresentation overlay, measured by wireNavStack)",
-        "translucent bottom toolbar laid over the active view (bottomToolbarPresentation overlay, measured by wireNavStack)"
+        "translucent bottom toolbar laid over the active view (bottomToolbarPresentation overlay, measured by wireNavStack)",
+        "app-chosen stack background color (background); overlay chrome keeps the chrome material",
+        "scoped tint (tint)",
+        "clear (transparent) bars with an optional scroll-edge material (chromePresentation / bottomToolbarPresentation: clear, scrollEdge: material)"
       ],
       "accessibility": [
         "Give the stack region an accessible label and every back control a stable action label; visible backText names the control itself.",
@@ -847,7 +865,9 @@
         "Use wireNavStack so each controlled push moves focus into the new top view and each pop restores the revealed view's remembered descendant.",
         "Mark a preferred initial heading or control with data-nav-focus when the first enabled focusable descendant is not the right target.",
         "Overlay chrome (chromePresentation overlay) keeps WCAG AA over content passing beneath the translucent material: an untoned ToolbarText there takes the normal text color for its title and lifts its description halfway toward it; keep other quiet copy in the view. The material turns opaque under reduced transparency, increased contrast, forced colors, or without backdrop-filter.",
-        "An overlay bottom toolbar (bottomToolbarPresentation overlay) keeps the same AA rule: an untoned ToolbarText there lifts its title and description, and a default-tone ToolbarControlGroup in either overlaid bar takes the normal text color for its controls. Its 1px top edge stays visible in forced colors."
+        "An overlay bottom toolbar (bottomToolbarPresentation overlay) keeps the same AA rule: an untoned ToolbarText there lifts its title and description, and a default-tone ToolbarControlGroup in either overlaid bar takes the normal text color for its controls. Its 1px top edge stays visible in forced colors.",
+        "A background color is app-chosen: Keep text at WCAG AA over the color: a dark background needs dark-tone content or a scoped tint; forced colors paint Canvas instead.",
+        "Clear bars have no material of their own: keep their controls in glass ToolbarControlGroups; they turn opaque under reduced transparency or increased contrast and paint Canvas in forced colors."
       ],
       "geometry": {
         "margin": "none",
@@ -1142,7 +1162,9 @@
         "responsive replacement on larger device classes",
         "whether the bar divider follows the scroll, always shows, or never shows (chromeDividers)",
         "whether the bar's top separator follows a sunken active surface or stays hidden (separator)",
-        "optional active-scene focus (tabIndex) and persistent outline (outlined)"
+        "optional active-scene focus (tabIndex) and persistent outline (outlined)",
+        "an optional app-chosen color for the navigator and its docked bar (background) and per scene (tab.background), each a typed CssColor that replaces the default or sunken fill",
+        "an optional scoped tint for the navigator (tint) or one scene (tab.tint): tint: { color, scheme } re-derives surface and text tokens from an app color with text kept at AA"
       ],
       "variants": [
         "text-only tabs",
@@ -1152,14 +1174,19 @@
         "bar divider only while the active scene continues below it (wired by wireScrollDividers)",
         "permanent or no bar divider (chromeDividers always or none)",
         "sunken active-scene separator (separator auto or hidden)",
-        "translucent tab bar laid over the active scene (barPresentation overlay, measured by wireTabNavigator)"
+        "translucent tab bar laid over the active scene (barPresentation overlay, measured by wireTabNavigator)",
+        "app-chosen navigator or per-scene background color (background, tab.background); the overlay bar keeps the chrome material",
+        "scoped tint (tint)",
+        "clear (transparent) bars with an optional scroll-edge material (barPresentation: clear, scrollEdge: material)"
       ],
       "accessibility": [
         "Give the tablist an accessible label and keep exactly the active tab in the sequential focus order.",
         "Wire selection through the controlled active id while leaving inactive scenes mounted and hidden.",
         "A focusable scene is a tabpanel named by its tab label; optional scene tabIndex applies only while active.",
         "A tab badge is aria-hidden; supply badgeLabel so the tab's accessible name becomes \"<label>, <badgeLabel>\" (it defaults to the badge text). The dot form, badge: true, has no text, so its badgeLabel is required.",
-        "Over the overlay bar's translucent material, unselected labels lift halfway toward --kui-color-text and the selected label mixes 40% of it into the brand color, so both keep 4.5:1 over worst-case content; the material turns opaque under reduced transparency or increased contrast and paints Canvas with a CanvasText edge in forced colors."
+        "Over the overlay bar's translucent material, unselected labels lift halfway toward --kui-color-text and the selected label mixes 40% of it into the brand color, so both keep 4.5:1 over worst-case content; the material turns opaque under reduced transparency or increased contrast and paints Canvas with a CanvasText edge in forced colors.",
+        "A background color is app-chosen: Keep text at WCAG AA over the color: a dark background needs dark-tone content or a scoped tint; forced colors paint Canvas instead.",
+        "Clear bars have no material of their own: keep their controls in glass ToolbarControlGroups; they turn opaque under reduced transparency or increased contrast and paint Canvas in forced colors."
       ],
       "geometry": {
         "margin": "none",
@@ -1632,6 +1659,86 @@
         "recipe": "docs/sunken-panel.md#ownership"
       }
     },
+    {
+      "id": "backdrop-image",
+      "name": "BackdropImage",
+      "category": "Structure",
+      "kind": "component",
+      "source": "kerf",
+      "description": "An image block at the top of a scrolling view that can lag the scroll, fade into an app color, and keep painting that color under the content below.",
+      "uses": [],
+      "purpose": "Open a scrolling Pane or NavStack view with a hero or tiled backdrop image (an artist, album, or place page) that lags the scroll and progressively blurs on a compositor-only scroll timeline, dissolves through a mask into an app-chosen color, and continues that color under the following content, with Kerf-owned static fallbacks.",
+      "publicExports": [
+        "BackdropImage"
+      ],
+      "useWhen": [
+        "A scrolling view opens with a large mood or identity image (an artist, album, place, or collection header) whose page should read as one surface with it.",
+        "The image should lag the scroll (parallax), blur progressively as it scrolls away, or dissolve into a color without app scroll listeners, animated filters, or background-attachment: fixed."
+      ],
+      "avoidWhen": [
+        "Do not use for inline content images, thumbnails, avatars, or media a person inspects; render an img or the matching media component.",
+        "Do not hand-roll scroll listeners, background-attachment: fixed, animated blur filters, or mask gradients around an image in app CSS.",
+        "Do not put it in a region that does not scroll vertically; parallax needs a scroll container ancestor."
+      ],
+      "alternatives": [
+        {
+          "id": "pane",
+          "relationship": "composes-with",
+          "when": "Place BackdropImage first in a Pane's scrolling content (or a NavStack view) so its scroller drives the parallax."
+        },
+        {
+          "id": "sunken-panel",
+          "relationship": "nearest",
+          "when": "Use SunkenPanel for a lowered work surface without imagery."
+        }
+      ],
+      "appOwns": [
+        "the image, its alt text (empty for a decorative image), and responsive candidates",
+        "the fade color, whether the image lags the scroll, and whether it blurs (and any pre-blurred asset)",
+        "overlay content and its contrast against the image and scrim",
+        "the content below the image",
+        "whether the image runs up beneath overlay or clear chrome and the top safe area (underChrome); it must then be the first child of the Pane's content"
+      ],
+      "variants": [
+        "fitted image (cover, contain, fill) with a focal position",
+        "tiled background (repeat, repeat-x, repeat-y)",
+        "parallax none, subtle, or a 0 to 1 lag factor",
+        "progressive blur from a once-filtered copy or an app-supplied blurred asset, with an optional dim",
+        "fade into a color that also paints below",
+        "bottom or full scrim under overlay content",
+        "image running beneath clear or overlay chrome (underChrome)"
+      ],
+      "accessibility": [
+        "alt describes a meaningful image; pass an empty alt for a decorative one. A tiled image with alt text is exposed as role=\"img\". Parallax and the progressive blur run only with prefers-reduced-motion: no-preference and scroll-driven animation support, and are off under data-kui-effects=\"static\" and on slow-update displays, leaving a static, sharp image; the blurred copy is decorative and aria-hidden. Reduced transparency or increased contrast replaces the fade with a hard edge on solid fadeTo and puts overlay content on a solid fadeTo band. Overlay text needs a scrim or fade color that keeps it at AA."
+      ],
+      "geometry": {
+        "margin": "none",
+        "border": "none",
+        "padding": "none",
+        "notes": [
+          "The root bleeds to the Pane's resolved inline insets (the safe area) and hands them back to its overlay and content, so their items keep the ordinary text axis.",
+          "The image block is height tall (default 320px) and grows with taller overlay content."
+        ]
+      },
+      "delivery": {
+        "browserImport": "@kerfjs/ui/backdrop-image",
+        "manualCssImport": "@kerfjs/ui/backdrop-image.css",
+        "sideEffects": [
+          "browser-condition-css"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [
+        "kui-backdrop-image"
+      ],
+      "publicTokens": [],
+      "rootElement": "div",
+      "links": {
+        "catalogRoute": "?component=backdrop-image",
+        "documentation": "docs/backdrop-image.md",
+        "recipe": "docs/backdrop-image.md#fallbacks"
+      }
+    },
     {
       "id": "toolbar",
       "name": "Toolbar",
@@ -1801,6 +1908,7 @@
         "For an avatar control, set content=avatar and avatarImage instead of inserting an img; one button paints the group and multiple buttons paint only the pressed highlight.",
         "In a Workbench or CollapsiblePanel toolbar, mark a group relocateOnCollapse to keep it available in the work-area toolbar when the panel closes; place it directly or in an array in any toolbar zone.",
         "Use tileTone for a contained single group containing only a direct decorative SVG icon; interactive or mixed groups retain their existing control chrome.",
+        "Set material=glass on a group floating over imagery or a clear (transparent) toolbar: it paints the translucent, blurred chrome material with a specular edge, controls keep AA in the normal text color, and the fill turns opaque under reduced transparency, increased contrast, or static effects. Keep the solid default on an opaque toolbar.",
         "Set expandedOverflow=visible on an expanded search to anchor application suggestions, date pickers, or help below the group without overriding its geometry.",
         "Use typed hideBelow/showBelow lengths with wireToolbarVisibility(root) for per-item toolbar priority; keep primary actions available and provide a showBelow overflow alternative."
       ],
@@ -2013,7 +2121,8 @@
       "publicExports": [
         "DialogSurface",
         "PopoverDialogSurface",
-        "PopupSurface"
+        "PopupSurface",
+        "wireOverlaySheets"
       ],
       "useWhen": [
         "A Web Awesome dialog or dropdown needs a standard size, presentation, body/footer inset, or list-compatible menu inset.",
@@ -2021,6 +2130,7 @@
         "A modal needs a typed preferred width, viewport gutter, or dynamic viewport-bounded height cap while retaining native body scrolling and footer actions.",
         "A dialog that must leave the page interactive and close on Escape or an outside press uses PopoverDialogSurface; one that fills its body with a SplitView or Pane uses height and bodyLayout=\"fill\".",
         "A chat-style dialog floats its composer over the transcript with footerPresentation=\"floating\" and keeps a heading or notice above one scrolling transcript with bodyLayout=\"fill-last\".",
+        "A phone-first task (compose, quick edit, a picker) should rise from the bottom edge as a sheet the person can resize: presentation=\"bottom-sheet\" with height, and resizable with minHeight / maxHeight bounds.",
         "A dialog's title bar should float over the body on the translucent chrome material so a transcript scrolls visibly beneath both the title bar and a floating composer (headerPresentation=\"floating\" with bodyLayout=\"fill\" and a List or Pane that opts into scrollClearance=\"both\")."
       ],
       "avoidWhen": [
@@ -2034,12 +2144,14 @@
         "focus lifecycle",
         "dismissal policy",
         "content",
-        "outer placement"
+        "outer placement",
+        "whether core kerfjs/overlay dialogs presented as bottom sheets take this package's geometry and slide (import @kerfjs/ui/overlay-sheet.css; exitClass 'kui-overlay-sheet-exit' for the slide out; the kui-overlay-sheet-resizable class plus wireOverlaySheets for a resize grabber)"
       ],
       "variants": [
         "small, medium, or large dialog",
         "data-* rootAttributes (a data-key) so sibling dialogs morph by identity",
-        "modal, side-sheet, or fullscreen dialog",
+        "modal, side-sheet, fullscreen, or bottom-sheet dialog",
+        "bottom sheet attached to the bottom edge: square bottom corners, safe-area and virtual-keyboard clearance behind the panel, slide (or standard) enter and exit motion, and an optional resizable top grabber bounded by minHeight and maxHeight",
         "typed modal preferred width, viewport gutter, and maximum height, including viewport cap",
         "definite viewport-bounded modal height and a fill body layout for one child",
         "fill-last body layout: fixed rows above one filling, scrolling last child",
@@ -2050,12 +2162,15 @@
         "floating header divider as scroll state: a hairline under the title bar only while the body or a filling child beneath it is scrolled away from its top",
         "non-modal light-dismiss PopoverDialogSurface, overlay or embedded in flow, named by label or labelledBy and described by describedBy",
         "none, compact, or comfortable body and footer inset",
-        "standard, compact, or zero-inset popup menu"
+        "standard, compact, or zero-inset popup menu",
+        "core kerfjs/overlay confirm/prompt/form/choice as a bottom sheet styled by @kerfjs/ui/overlay-sheet.css",
+        "resizable core kerfjs/overlay bottom sheet: the kui-overlay-sheet-resizable class plus wireOverlaySheets adds the resizable DialogSurface sheet grabber"
       ],
       "accessibility": [
         "Supply the wrapped wa-dialog label and retain Web Awesome's native modal and focus behavior.",
         "Name a PopoverDialogSurface with label or labelledBy, and describe it with describedBy (rendered as aria-describedby), usually a title ToolbarText descriptionId.",
         "A floating header's title uses the normal text color, which keeps WCAG AA over the 80% raised chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter.",
+        "A resizable bottom sheet's grabber is a focusable horizontal separator (\"Resize sheet\") with aria-valuemin, aria-valuenow, and aria-valuemax in visible px; the arrow keys, Page Up/Down, Home, and End resize it, and its slide motion falls back to Web Awesome's under prefers-reduced-motion.",
         "Use popup surfaces only for real dropdown menus with named triggers."
       ],
       "geometry": {
@@ -2072,20 +2187,29 @@
           "custom-element-registration"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireOverlaySheets",
+          "import": "@kerfjs/ui/wire-overlay-sheets",
+          "required": false,
+          "stateAttributes": []
+        }
+      ],
       "publicClasses": [
         "kui-dialog-surface",
         "kui-popover-dialog-surface",
         "kui-popup-surface"
       ],
       "publicTokens": [
-        "--kui-radius-l",
+        "--kui-layout-pill-radius",
         "--kui-wa-container-inset",
         "--kui-wa-surface-inset",
         "--kui-chrome-material-raised",
         "--kui-chrome-material-filter",
         "--kui-scroll-clearance-block-start",
-        "--kui-scroll-clearance-block-end"
+        "--kui-scroll-clearance-block-end",
+        "--kui-safe-area-block-start",
+        "--kui-safe-area-block-end"
       ],
       "links": {
         "catalogRoute": "?component=surface-scaffold",
@@ -2165,6 +2289,30 @@
             "footerOffset={remify(8)}"
           ]
         },
+        {
+          "path": "minHeight",
+          "grammar": "length",
+          "helpers": [
+            "px",
+            "rem",
+            "remify",
+            "em",
+            "pct",
+            "space",
+            "lengthVar",
+            "calc"
+          ],
+          "nonStandaloneHelpers": [
+            "plus"
+          ],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": [
+            "minHeight={remify(200)}"
+          ]
+        },
         {
           "path": "maxHeight",
           "grammar": "length",
@@ -10231,6 +10379,54 @@
         "documentation": "docs/recipes.md#collapsible-sidebar",
         "recipe": "docs/recipes.md#collapsible-sidebar"
       }
+    },
+    {
+      "id": "recipe-media-detail",
+      "name": "Media Detail",
+      "category": "Recipes",
+      "kind": "recipe",
+      "source": "kerf",
+      "purpose": "An Apple-Music-style album page: clear NavStack chrome with the scroll-edge material, a scoped tint from the artwork's color, an underChrome BackdropImage with parallax and progressive blur, and glass control groups.",
+      "uses": [
+        "nav-stack",
+        "pane",
+        "backdrop-image",
+        "toolbar",
+        "toolbar-text",
+        "toolbar-control-group",
+        "list",
+        "list-header",
+        "list-item",
+        "text",
+        "lucide-icon",
+        "layout"
+      ],
+      "useWhen": [
+        "A detail page for media (an album, artist, film, or place) should take on its artwork's color with the artwork running beneath transparent chrome."
+      ],
+      "avoidWhen": [
+        "Use the Navigation Stack recipe for a plain drill-down; imagery, tint, and clear chrome are for pages whose artwork is the identity."
+      ],
+      "appOwns": [
+        "the artwork and its accessible description",
+        "the artwork's bottom color and the scheme it belongs to (the tint)",
+        "the stack (a signal of views)",
+        "playback",
+        "data"
+      ],
+      "accessibility": [
+        "Glass control groups keep every chrome control at AA over the artwork; the tint clamps text to AA over the tinted surface; parallax, blur, and the scroll-edge fade go static under reduced motion or the static-effects switch, and the chrome and fade go opaque under reduced transparency and increased contrast."
+      ],
+      "delivery": {
+        "sideEffects": [
+          "lazy-recipe-css"
+        ]
+      },
+      "links": {
+        "catalogRoute": "?component=recipe-media-detail",
+        "documentation": "docs/recipes.md#media-detail",
+        "recipe": "docs/recipes.md#media-detail"
+      }
     }
   ]
 }