@slotted/react 0.1.0-beta.10 → 0.1.0-beta.11

package/dist/docs/data-grid.json

@@ -52,6 +52,10 @@
       "popin",
       "scroll"
     ],
+    "resizeMode": [
+      "live",
+      "deferred"
+    ],
     "activatable": [
       true,
       false
@@ -99,6 +103,7 @@
         "filterDebounce": 300,
         "loadMoreThreshold": 20,
         "loadMoreTrigger": "scroll",
+        "resizeMode": "live",
         "pageSizes": [
           25,
           50,
@@ -151,6 +156,7 @@
         "column-menu",
         "column-menu-description",
         "resizer",
+        "resize-guide",
         "drop-indicator",
         "filter-row",
         "filter-cell",
@@ -272,6 +278,12 @@
           "required": false,
           "purpose": "The pointer’s handle on the trailing edge; a double press fits the column."
         },
+        {
+          "part": "resize-guide",
+          "element": "div[aria-hidden]",
+          "required": false,
+          "purpose": "Under resizeMode=\"deferred\", the line a drag moves by translate across the scroller’s height; the width is applied on release."
+        },
         {
           "part": "drop-indicator",
           "element": "div",
@@ -905,6 +917,13 @@
           "appliesTo": "DataGrid",
           "description": "Asked for the next page when hasMore is true."
         },
+        {
+          "name": "resizeMode",
+          "type": "'live' | 'deferred'",
+          "defaultValue": "live",
+          "appliesTo": "DataGrid",
+          "description": "How a pointer drag of a resizer applies the width: on every move, or once on release while a guide (the resize-guide part) follows the pointer and the rows stay still. Escape during a deferred drag leaves the width. The keyboard step and autofit apply at once in either mode."
+        },
         {
           "name": "loadMoreTrigger",
           "type": "'scroll' | 'button' | 'both'",
@@ -1101,7 +1120,7 @@
           "type": "component",
           "defaultValue": "—",
           "appliesTo": "Application",
-          "description": "Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold, loadMoreTrigger and skeletonRows once for a subtree. A grid that states one itself still wins. Its words and its locale come from the language in force (SlottedProvider)."
+          "description": "Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold, loadMoreTrigger, resizeMode and skeletonRows once for a subtree. A grid that states one itself still wins. Its words and its locale come from the language in force (SlottedProvider)."
         },
         {
           "name": "@slotted/core/grid",
@@ -1204,6 +1223,7 @@
         }
       ],
       "accessibility": [
+        "`columns`, `disabledKeys` and a function `rowKey` are compared by identity: a new array or function on a render of the parent re-renders every mounted row, so declare them at module scope or memoise them. The renderers — `cellRenderers`, `editorRenderers`, `renderCell`, `renderEditor`, `renderHeader`, `renderGroup`, `renderDetail` — `messages` and `tree` are read when a row renders and may be written inline. A row renders again for its own row object, selection, cursor, edit or expansion, and for a change of `columns` or the language; a renderer whose output reads state outside its row is refreshed by memoising `columns` on that state.",
         "The root is role=\"grid\": a composite widget with one tab stop. The current cell — or the single simple widget inside it, a link, a button or a checkbox — is the only element with tabindex=\"0\"; Tab enters there and leaves the grid to the next control of the page, which is what the APG requires of a grid and what a table cannot give.",
         "Every row carries aria-rowindex against aria-rowcount on the root, and every cell aria-colindex against aria-colcount, always: the grid windows its rows and columns, so the DOM is never the whole set, and the counts are what let a screen reader say “row 4,812 of 9,000”.",
         "aria-sort is written on the first sort key’s header only — the practice says more than one is ambiguous — and the whole order is announced through the live announcer: “Sorted by Carrier ascending, Weight descending”. A resize announces the column and its width; a filter announces its sentence through describeFilter; a copy announces the count.",
@@ -1260,6 +1280,8 @@
     "--slotted-data-grid-pin-shadow-size",
     "--slotted-data-grid-radius",
     "--slotted-data-grid-range-surface",
+    "--slotted-data-grid-resize-guide-color",
+    "--slotted-data-grid-resize-guide-width",
     "--slotted-data-grid-row-block-size",
     "--slotted-data-grid-row-color-selected",
     "--slotted-data-grid-row-max-block-size",
@@ -1385,7 +1407,7 @@
       "title": "Row selection",
       "note": "single chooses one row with a press; multiple draws the checkbox column, pinned to the start: Shift extends from the anchor, Shift+Space toggles the row from any cell, Ctrl+A and the header checkbox cover every row the query left and say so in their name.",
       "language": "tsx",
-      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\nexport default function DataGridSelection() {\n  const [value, setValue] = useState<string | readonly string[] | null>(['SH-3302', 'SH-3303']);\n  const count = Array.isArray(value) ? value.length : value === null ? 0 : 1;\n\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      disabledKeys={['SH-3305']}\n      footer={\n        <Text size=\"sm\" tone=\"muted\">\n          {count} selected\n        </Text>\n      }\n      height=\"24rem\"\n      onValueChange={setValue}\n      selectionMode=\"multiple\"\n      value={value}\n    />\n  );\n}\n",
+      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\nconst DISABLED = ['SH-3305'];\n\nexport default function DataGridSelection() {\n  const [value, setValue] = useState<string | readonly string[] | null>(['SH-3302', 'SH-3303']);\n  const count = Array.isArray(value) ? value.length : value === null ? 0 : 1;\n\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      disabledKeys={DISABLED}\n      footer={\n        <Text size=\"sm\" tone=\"muted\">\n          {count} selected\n        </Text>\n      }\n      height=\"24rem\"\n      onValueChange={setValue}\n      selectionMode=\"multiple\"\n      value={value}\n    />\n  );\n}\n",
       "verdict": "example"
     },
     {
@@ -1601,7 +1623,7 @@
       "title": "Pictures in cells",
       "note": "A renderer draws anything: an avatar beside the name, a thumbnail in a custom column. A stated rowHeight is the drawn row as well as the windowed one, so ten thousand rows of 56 pixels scroll to the right place. A cell with a picture and a name is one flex row of the renderer’s own; the grid lays out the renderer’s first element as the value.",
       "language": "tsx",
-      "source": "<DataGrid\n  cellRenderers={{\n    customer: ({ row }) => (\n      <span className=\"customer\">\n        <Avatar name={row.customer} size=\"sm\" />\n        <span>{row.customer}</span>\n      </span>\n    ),\n    photo: ({ row }) => <Image alt=\"\" radius=\"sm\" ratio=\"landscape\" src={row.photo} />,\n  }}\n  columns={[...columns, { id: 'photo', label: 'Cargo', kind: 'custom', sortable: false }]}\n  rowHeight={56}\n/>;\n",
+      "source": "const MEDIA_COLUMNS: DataGridColumn<Shipment>[] = [\n  ...columns,\n  { id: 'photo', label: 'Cargo', kind: 'custom', sortable: false },\n];\n\n<DataGrid\n  cellRenderers={{\n    customer: ({ row }) => (\n      <span className=\"customer\">\n        <Avatar name={row.customer} size=\"sm\" />\n        <span>{row.customer}</span>\n      </span>\n    ),\n    photo: ({ row }) => <Image alt=\"\" radius=\"sm\" ratio=\"landscape\" src={row.photo} />,\n  }}\n  columns={MEDIA_COLUMNS}\n  rowHeight={56}\n/>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/data-grid.md

@@ -122,6 +122,7 @@ export default function DataGridBasic() {
 | `column-menu` | button | no |
 | `column-menu-description` | div[aria-hidden] | no |
 | `resizer` | div[aria-hidden] | no |
+| `resize-guide` | div[aria-hidden] | no |
 | `drop-indicator` | div | no |
 | `filter-row` | div[role="row"] | no |
 | `filter-cell` | div[role="gridcell"] | no |
@@ -191,6 +192,7 @@ See [data-grid.props.md](./data-grid.props.md).
 | `filterRow` | `true`, `false` | `false` |
 | `virtualize` | `auto`, `true`, `false` | `auto` |
 | `columnOverflow` | `auto`, `popin`, `scroll` | `auto` |
+| `resizeMode` | `live`, `deferred` | `live` |
 | `activatable` | `true`, `false` | `false` |
 | `align` | `start`, `center`, `end` | `start` |
 | `numeric` | `true`, `false` | `false` |
@@ -199,6 +201,7 @@ See [data-grid.props.md](./data-grid.props.md).
 
 ## Rules
 
+- `columns`, `disabledKeys` and a function `rowKey` are compared by identity: a new array or function on a render of the parent re-renders every mounted row, so declare them at module scope or memoise them. The renderers — `cellRenderers`, `editorRenderers`, `renderCell`, `renderEditor`, `renderHeader`, `renderGroup`, `renderDetail` — `messages` and `tree` are read when a row renders and may be written inline. A row renders again for its own row object, selection, cursor, edit or expansion, and for a change of `columns` or the language; a renderer whose output reads state outside its row is refreshed by memoising `columns` on that state.
 - The root is role="grid": a composite widget with one tab stop. The current cell — or the single simple widget inside it, a link, a button or a checkbox — is the only element with tabindex="0"; Tab enters there and leaves the grid to the next control of the page, which is what the APG requires of a grid and what a table cannot give.
 - Every row carries aria-rowindex against aria-rowcount on the root, and every cell aria-colindex against aria-colcount, always: the grid windows its rows and columns, so the DOM is never the whole set, and the counts are what let a screen reader say “row 4,812 of 9,000”.
 - aria-sort is written on the first sort key’s header only — the practice says more than one is ambiguous — and the whole order is announced through the live announcer: “Sorted by Carrier ascending, Weight descending”. A resize announces the column and its width; a filter announces its sentence through describeFilter; a copy announces the count.
@@ -208,7 +211,7 @@ See [data-grid.props.md](./data-grid.props.md).
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-md`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-data-grid-band-surface`, `--slotted-data-grid-block-size`, `--slotted-data-grid-border-color`, `--slotted-data-grid-border-color-strong`, `--slotted-data-grid-border-width`, `--slotted-data-grid-cell-padding-block`, `--slotted-data-grid-cell-padding-inline`, `--slotted-data-grid-changed-surface`, `--slotted-data-grid-color`, `--slotted-data-grid-color-muted`, `--slotted-data-grid-control-radius`, `--slotted-data-grid-cursor-color`, `--slotted-data-grid-filter-operator-size`, `--slotted-data-grid-filter-panel-size`, `--slotted-data-grid-filter-panel-size-date`, `--slotted-data-grid-filter-panel-size-datetime`, `--slotted-data-grid-font-family`, `--slotted-data-grid-font-size`, `--slotted-data-grid-gap`, `--slotted-data-grid-head-block-size`, `--slotted-data-grid-header-surface`, `--slotted-data-grid-header-surface-hover`, `--slotted-data-grid-icon-size`, `--slotted-data-grid-indent`, `--slotted-data-grid-pin-shadow-color`, `--slotted-data-grid-pin-shadow-size`, `--slotted-data-grid-radius`, `--slotted-data-grid-range-surface`, `--slotted-data-grid-row-block-size`, `--slotted-data-grid-row-color-selected`, `--slotted-data-grid-row-max-block-size`, `--slotted-data-grid-row-surface-hover`, `--slotted-data-grid-row-surface-selected`, `--slotted-data-grid-row-surface-selected-hover`, `--slotted-data-grid-row-surface-stripe`, `--slotted-data-grid-shadow`, `--slotted-data-grid-sticky-offset`, `--slotted-data-grid-sticky-offset-end`, `--slotted-data-grid-surface`, `--slotted-disabled-foreground`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-popover-gap`, `--slotted-popover-padding-block-sm`, `--slotted-popover-padding-inline-sm`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-md`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-data-grid-band-surface`, `--slotted-data-grid-block-size`, `--slotted-data-grid-border-color`, `--slotted-data-grid-border-color-strong`, `--slotted-data-grid-border-width`, `--slotted-data-grid-cell-padding-block`, `--slotted-data-grid-cell-padding-inline`, `--slotted-data-grid-changed-surface`, `--slotted-data-grid-color`, `--slotted-data-grid-color-muted`, `--slotted-data-grid-control-radius`, `--slotted-data-grid-cursor-color`, `--slotted-data-grid-filter-operator-size`, `--slotted-data-grid-filter-panel-size`, `--slotted-data-grid-filter-panel-size-date`, `--slotted-data-grid-filter-panel-size-datetime`, `--slotted-data-grid-font-family`, `--slotted-data-grid-font-size`, `--slotted-data-grid-gap`, `--slotted-data-grid-head-block-size`, `--slotted-data-grid-header-surface`, `--slotted-data-grid-header-surface-hover`, `--slotted-data-grid-icon-size`, `--slotted-data-grid-indent`, `--slotted-data-grid-pin-shadow-color`, `--slotted-data-grid-pin-shadow-size`, `--slotted-data-grid-radius`, `--slotted-data-grid-range-surface`, `--slotted-data-grid-resize-guide-color`, `--slotted-data-grid-resize-guide-width`, `--slotted-data-grid-row-block-size`, `--slotted-data-grid-row-color-selected`, `--slotted-data-grid-row-max-block-size`, `--slotted-data-grid-row-surface-hover`, `--slotted-data-grid-row-surface-selected`, `--slotted-data-grid-row-surface-selected-hover`, `--slotted-data-grid-row-surface-stripe`, `--slotted-data-grid-shadow`, `--slotted-data-grid-sticky-offset`, `--slotted-data-grid-sticky-offset-end`, `--slotted-data-grid-surface`, `--slotted-disabled-foreground`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-popover-gap`, `--slotted-popover-padding-block-sm`, `--slotted-popover-padding-inline-sm`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/dist/docs/data-grid.props.md

@@ -68,6 +68,7 @@
 | `highlightChanges` | `boolean \| number` | false | DataGrid | Marks a mounted cell whose value changed between two rows, for the stated milliseconds (true is 1200). |
 | `loadMoreThreshold` | `number` | 20 | DataGrid | Rows left below the window before onLoadMore is called. |
 | `onLoadMore` | `() => void` | — | DataGrid | Asked for the next page when hasMore is true. |
+| `resizeMode` | `'live' \| 'deferred'` | live | DataGrid | How a pointer drag of a resizer applies the width: on every move, or once on release while a guide (the resize-guide part) follows the pointer and the rows stay still. Escape during a deferred drag leaves the width. The keyboard step and autofit apply at once in either mode. |
 | `loadMoreTrigger` | `'scroll' \| 'button' \| 'both'` | scroll | DataGrid | What asks for the next page: nearing the end, with a loading status in the footer; a Load more control; or both. |
 | `loadMoreFailed` | `boolean` | false | DataGrid | The last page asked for failed: the automatic request stops and the footer offers Try again. |
 | `onRetry` | `() => void` | — | DataGrid | The error state’s Try again. |
@@ -95,7 +96,7 @@
 | `align` | `'start' \| 'center' \| 'end'` | start | GridColumn | Where the value sits; a number column sits at the end unless told otherwise. |
 | `numeric` | `boolean` | false | GridColumn | Tabular figures and end alignment; true for kind number. |
 | `text` | `'wrap' \| 'truncate' \| 'nowrap'` | truncate | GridColumn | What a long value does. |
-| `DataGridDefaultsProvider` | `component` | — | Application | Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold, loadMoreTrigger and skeletonRows once for a subtree. A grid that states one itself still wins. Its words and its locale come from the language in force (SlottedProvider). |
+| `DataGridDefaultsProvider` | `component` | — | Application | Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold, loadMoreTrigger, resizeMode and skeletonRows once for a subtree. A grid that states one itself still wins. Its words and its locale come from the language in force (SlottedProvider). |
 | `@slotted/core/grid` | `module` | — | Application | applyQuery, emptyQuery, withSortPress, withColumnFilter, withSearch, withPageIndex, withGroup, toGridParams, fromGridParams, normalizeColumnState, serializeColumnState, parseColumnState: the engine the grid runs on, for a server mock, a URL and a saved view. |
 | `renderCell, renderEditor, renderHeader, renderDetail, renderGroup, renderEmpty, renderFilterOperand` | `render props` | — | DataGrid | Every surface a consumer replaces, per grid or per column through cellRenderers and editorRenderers. row, cell, head and body are fixed: the layout and the roles are theirs. |
 | `footer` | `ReactNode` | — | DataGrid | Pagination, a page-size select, a count: the consumer’s own controls in the bar the grid draws. |

package/dist/docs/detail-panel.json

@@ -392,6 +392,8 @@
     "--slotted-detail-panel-aside-size-md",
     "--slotted-detail-panel-aside-size-sm",
     "--slotted-detail-panel-border",
+    "--slotted-detail-panel-footer-backdrop-filter",
+    "--slotted-detail-panel-footer-background",
     "--slotted-detail-panel-gap-lg",
     "--slotted-detail-panel-gap-md",
     "--slotted-detail-panel-gap-sm",
@@ -453,9 +455,9 @@
     {
       "id": "hosts",
       "title": "Three hosts, one anatomy",
-      "note": "The same panel as a page’s content at level 1, as a drawer’s body with the drawer’s own close in the header actions, and as a split’s pane scrolling itself. Nothing in the panel names its host: scroll=\"self\" is the one difference a pane makes.",
+      "note": "The same panel as a page’s content at level 1, as a drawer’s body with the drawer’s own close in the header actions, and as a split’s pane scrolling itself. Nothing in the panel names its host: scroll=\"self\" is the one difference a pane makes. A pane that paints a ground of its own declares --slotted-page-ground with that ground, so a sticky section header inside the panel matches the pane and not the page.",
       "language": "tsx",
-      "source": "<Drawer open={open} onOpenChange={setOpen}>\n  <DrawerPanel>\n    <DrawerBody>\n      <DetailPanel recordKey={order.id} footer={<OrderFooter />}>\n        …\n      </DetailPanel>\n    </DrawerBody>\n  </DrawerPanel>\n</Drawer>;\n\n<DetailPanel recordKey={order.id} scroll=\"self\">\n  …\n</DetailPanel>;\n",
+      "source": "<Drawer open={open} onOpenChange={setOpen}>\n  <DrawerPanel>\n    <DrawerBody>\n      <DetailPanel recordKey={order.id} footer={<OrderFooter />}>\n        …\n      </DetailPanel>\n    </DrawerBody>\n  </DrawerPanel>\n</Drawer>;\n\n<div\n  className=\"pane\"\n  style={\n    {\n      background: 'var(--slotted-surface)',\n      '--slotted-page-ground': 'var(--slotted-surface)',\n    } as CSSProperties\n  }\n>\n  <DetailPanel recordKey={order.id} scroll=\"self\">\n    …\n  </DetailPanel>\n</div>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/detail-panel.md

@@ -106,7 +106,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-detail-panel-aside-size-lg`, `--slotted-detail-panel-aside-size-md`, `--slotted-detail-panel-aside-size-sm`, `--slotted-detail-panel-border`, `--slotted-detail-panel-gap-lg`, `--slotted-detail-panel-gap-md`, `--slotted-detail-panel-gap-sm`, `--slotted-detail-panel-inset-block-lg`, `--slotted-detail-panel-inset-block-md`, `--slotted-detail-panel-inset-block-sm`, `--slotted-detail-panel-rhythm`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-page-ground`, `--slotted-space-12`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-detail-panel-aside-size-lg`, `--slotted-detail-panel-aside-size-md`, `--slotted-detail-panel-aside-size-sm`, `--slotted-detail-panel-border`, `--slotted-detail-panel-footer-backdrop-filter`, `--slotted-detail-panel-footer-background`, `--slotted-detail-panel-gap-lg`, `--slotted-detail-panel-gap-md`, `--slotted-detail-panel-gap-sm`, `--slotted-detail-panel-inset-block-lg`, `--slotted-detail-panel-inset-block-md`, `--slotted-detail-panel-inset-block-sm`, `--slotted-detail-panel-rhythm`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-page-ground`, `--slotted-space-12`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -157,7 +157,7 @@ Excerpt — not a complete module
 
 ### Three hosts, one anatomy
 
-The same panel as a page’s content at level 1, as a drawer’s body with the drawer’s own close in the header actions, and as a split’s pane scrolling itself. Nothing in the panel names its host: scroll="self" is the one difference a pane makes.
+The same panel as a page’s content at level 1, as a drawer’s body with the drawer’s own close in the header actions, and as a split’s pane scrolling itself. Nothing in the panel names its host: scroll="self" is the one difference a pane makes. A pane that paints a ground of its own declares --slotted-page-ground with that ground, so a sticky section header inside the panel matches the pane and not the page.
 
 Excerpt — not a complete module
 
@@ -172,9 +172,19 @@ Excerpt — not a complete module
   </DrawerPanel>
 </Drawer>;
 
-<DetailPanel recordKey={order.id} scroll="self">
-  …
-</DetailPanel>;
+<div
+  className="pane"
+  style={
+    {
+      background: 'var(--slotted-surface)',
+      '--slotted-page-ground': 'var(--slotted-surface)',
+    } as CSSProperties
+  }
+>
+  <DetailPanel recordKey={order.id} scroll="self">
+    …
+  </DetailPanel>
+</div>;
 ```
 
 ### Previous and next: focus follows the record

package/dist/docs/dialog.json

@@ -768,6 +768,7 @@
     "--slotted-control-radius",
     "--slotted-control-transition-duration",
     "--slotted-control-transition-easing",
+    "--slotted-dialog-backdrop-filter",
     "--slotted-dialog-body-color",
     "--slotted-dialog-border-color",
     "--slotted-dialog-close-active-background",

package/dist/docs/dialog.md

@@ -247,7 +247,7 @@ export default function DialogBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-lg`, `--slotted-control-inner-size-lg`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-dialog-body-color`, `--slotted-dialog-border-color`, `--slotted-dialog-close-active-background`, `--slotted-dialog-close-color`, `--slotted-dialog-close-hover-background`, `--slotted-dialog-color`, `--slotted-dialog-description-color`, `--slotted-dialog-footer-surface`, `--slotted-dialog-measure`, `--slotted-dialog-padding-block`, `--slotted-dialog-padding-block-sm`, `--slotted-dialog-padding-inline`, `--slotted-dialog-padding-inline-sm`, `--slotted-dialog-radius`, `--slotted-dialog-rule-color`, `--slotted-dialog-scrim`, `--slotted-dialog-surface`, `--slotted-dialog-title-color`, `--slotted-dialog-title-font-family`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-lg`, `--slotted-control-inner-size-lg`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-dialog-backdrop-filter`, `--slotted-dialog-body-color`, `--slotted-dialog-border-color`, `--slotted-dialog-close-active-background`, `--slotted-dialog-close-color`, `--slotted-dialog-close-hover-background`, `--slotted-dialog-color`, `--slotted-dialog-description-color`, `--slotted-dialog-footer-surface`, `--slotted-dialog-measure`, `--slotted-dialog-padding-block`, `--slotted-dialog-padding-block-sm`, `--slotted-dialog-padding-inline`, `--slotted-dialog-padding-inline-sm`, `--slotted-dialog-radius`, `--slotted-dialog-rule-color`, `--slotted-dialog-scrim`, `--slotted-dialog-surface`, `--slotted-dialog-title-color`, `--slotted-dialog-title-font-family`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`
 
 ## Examples
 

package/dist/docs/drawer.json

@@ -58,7 +58,7 @@
       "defaults": {
         "mode": "overlay",
         "side": "end",
-        "size": "md",
+        "size": "content on top and bottom, md on start and end",
         "mount": "active",
         "modal": true,
         "escape": "close",
@@ -89,7 +89,8 @@
         "focus-visible",
         "open",
         "loading",
-        "dragging"
+        "dragging",
+        "expanded"
       ],
       "parts": [
         "root",
@@ -260,9 +261,9 @@
         {
           "name": "size",
           "type": "'sm' | 'md' | 'lg' | 'xl' | 'full' | 'content'",
-          "defaultValue": "md",
+          "defaultValue": "content on top and bottom, md on start and end",
           "appliesTo": "Drawer, DrawerDefaultsProvider",
-          "description": "The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. When unset, content on top and bottom and md on start and end. A step wider than the screen is held to it."
+          "description": "The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. A step wider than the screen is held to it."
         },
         {
           "name": "mount",
@@ -466,6 +467,7 @@
     "--slotted-drawer-extent-xl",
     "--slotted-drawer-footer-surface",
     "--slotted-drawer-radius",
+    "--slotted-drawer-radius-expanded",
     "--slotted-drawer-resizer-line-active-color",
     "--slotted-drawer-resizer-line-color",
     "--slotted-drawer-rule-color",

package/dist/docs/drawer.md

@@ -122,7 +122,7 @@ export default function DrawerBasic() {
 | `snapPoints` | `readonly number[]` | — | Drawer | The stops the measure moves between, as fractions. With them an arrow key moves to the next stop, Home and End go to the first and the last, and a drag is released onto the nearest. |
 | `mode` | `'overlay' \| 'inline'` | overlay | Drawer, DrawerDefaultsProvider | overlay puts the drawer over the page, in a portal; inline puts it in your own layout. The value can change while the drawer is open, and the panel’s content and the state of its fields are kept across the change. |
 | `side` | `'start' \| 'end' \| 'top' \| 'bottom'` | end | Drawer, DrawerDefaultsProvider | The edge the panel comes from. start and end follow the writing direction, so the drawer changes sides in a right-to-left document. |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'content'` | md | Drawer, DrawerDefaultsProvider | The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. When unset, content on top and bottom and md on start and end. A step wider than the screen is held to it. |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'content'` | content on top and bottom, md on start and end | Drawer, DrawerDefaultsProvider | The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. A step wider than the screen is held to it. |
 | `mount` | `'active' \| 'lazy' \| 'eager'` | active | Drawer, DrawerDefaultsProvider | When an overlay layer is in the document: active only while it is open or closing, lazy from the first open on, and eager from the start, inert while closed. An inline drawer is always in the document. |
 | `modal` | `boolean` | true | Drawer, DrawerDefaultsProvider | Whether the page behind is inert, its scroll is locked and focus is contained in the panel, and whether the panel carries aria-modal. The scrim is painted either way. Always false under mode="inline". |
 | `escape` | `'close' \| 'none'` | close | Drawer, DrawerDefaultsProvider | Whether Escape asks to close the drawer. Escape reaches only the topmost layer, and a layer that refuses it does not pass it to the one below. |
@@ -159,7 +159,7 @@ export default function DrawerBasic() {
 | --- | --- | --- |
 | `mode` | `overlay`, `inline` | `overlay` |
 | `side` | `start`, `end`, `top`, `bottom` | `end` |
-| `size` | `sm`, `md`, `lg`, `xl`, `full`, `content` | `md` |
+| `size` | `sm`, `md`, `lg`, `xl`, `full`, `content` | content on top and bottom, md on start and end |
 | `mount` | `active`, `lazy`, `eager` | `active` |
 | `modal` | `true`, `false` | `true` |
 | `escape` | `close`, `none` | `close` |
@@ -180,7 +180,7 @@ export default function DrawerBasic() {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-drawer-body-color`, `--slotted-drawer-border-color`, `--slotted-drawer-close-active-background`, `--slotted-drawer-close-color`, `--slotted-drawer-close-hover-background`, `--slotted-drawer-color`, `--slotted-drawer-description-color`, `--slotted-drawer-extent`, `--slotted-drawer-extent-lg`, `--slotted-drawer-extent-md`, `--slotted-drawer-extent-sm`, `--slotted-drawer-extent-xl`, `--slotted-drawer-footer-surface`, `--slotted-drawer-radius`, `--slotted-drawer-resizer-line-active-color`, `--slotted-drawer-resizer-line-color`, `--slotted-drawer-rule-color`, `--slotted-drawer-scrim`, `--slotted-drawer-sheet-inline-size`, `--slotted-drawer-surface`, `--slotted-drawer-title-color`, `--slotted-drawer-title-font-family`, `--slotted-duration-instant`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-overlay`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-drawer-body-color`, `--slotted-drawer-border-color`, `--slotted-drawer-close-active-background`, `--slotted-drawer-close-color`, `--slotted-drawer-close-hover-background`, `--slotted-drawer-color`, `--slotted-drawer-description-color`, `--slotted-drawer-extent`, `--slotted-drawer-extent-lg`, `--slotted-drawer-extent-md`, `--slotted-drawer-extent-sm`, `--slotted-drawer-extent-xl`, `--slotted-drawer-footer-surface`, `--slotted-drawer-radius`, `--slotted-drawer-radius-expanded`, `--slotted-drawer-resizer-line-active-color`, `--slotted-drawer-resizer-line-color`, `--slotted-drawer-rule-color`, `--slotted-drawer-scrim`, `--slotted-drawer-sheet-inline-size`, `--slotted-drawer-surface`, `--slotted-drawer-title-color`, `--slotted-drawer-title-font-family`, `--slotted-duration-instant`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-overlay`
 
 ## Examples
 

package/dist/docs/event-calendar.md

@@ -165,8 +165,8 @@ Excerpt — not a complete module
 | `listRange` | `week`, `month` | `week` |
 | `compact` | `list`, `keep` | `list` |
 | `selectionMode` | `none`, `range` | `none` |
-| `weekNumbers` | `off`, `on` | `false` |
-| `fixedWeeks` | `off`, `on` | `false` |
+| `weekNumbers` | `off`, `on` | false |
+| `fixedWeeks` | `off`, `on` | false |
 | `status` | `confirmed`, `tentative`, `cancelled` | — |
 | `color` | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8` | — |
 

package/dist/docs/guidelines/index.md

@@ -57,10 +57,11 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | FM-17 | SHOULD | The fields of a form are written as its direct children, in a `field-group` or in a `grid` for fields that stand side by side; the form spaces consecutive fields by `--slotted-form-field-gap`, and no field carries a margin of its own. | `forms.md` |
 | LA-01 | SHOULD | A pager under a paged region is aligned to the end of the line. | `layout-alignment.md` |
 | LA-02 | MUST | A consumer's row in the navigation column's pinned parts is inset by `--slotted-app-shell-row-inset` and starts with a mark column `--slotted-app-shell-row-mark` wide, the avatar centred in it. | `layout-alignment.md` |
-| LA-03 | SHOULD | Below the header's narrow step the actions beside a plain title fit on the title's line: a labelled action becomes its icon-only form, and two or more actions stand in a `toolbar` that folds into its menu. | `layout-alignment.md` |
+| LA-03 | SHOULD | Below the header's narrow step the header's actions occupy one row: one action beside a plain title becomes its icon-only form, and two or more stand in a `toolbar` that folds into its menu, each item with its counterpart and the primary one without, so it stays. Beside a plain title that row is the title's line; under a rich title (visual, marks, subheading) `page-header` gives the toolbar a full row of its own. | `layout-alignment.md` |
 | LA-04 | SHOULD | Tabs that change the page's content stand in `page-header`'s `tabs` slot, not in the body. | `layout-alignment.md` |
 | LA-05 | MUST | Fields on one line are aligned to the start of the block axis, so every control of the line starts at the same height and has the same height whatever stands under it. A button on the line stands on the controls' row, not on the labels' or the help's. | `layout-alignment.md` |
 | LA-06 | MUST | The element's offset starts at the page's published `--slotted-page-sticky-top`, the measured height of the chrome that stays (the stuck page-header's title area, a sticky section's header), and an element that may be taller than what stays visible caps its height by the same property and scrolls inside. | `layout-alignment.md` |
+| LA-07 | MUST | The bar holds one row below its narrow step: the action that confirms declares no counterpart and stays, every other action declares a counterpart, and the bar's overflow control ends the run. | `layout-alignment.md` |
 | LG-01 | SHOULD | The row states the signed change at the unit's own precision, what caused it as words that lead to that record, where and when it happened and who did it; a cause without a screen leads to the ledger narrowed to what that cause moved, and no identifier is shown raw. | `ledgers.md` |
 | LG-02 | SHOULD | The balance after each movement is drawn only where the ledger is narrowed to one item in one place, and it is walked back from that position's current quantity. | `ledgers.md` |
 | LP-01 | SHOULD | The grid shows the selection column, the row header and the columns of highest priority that fit; the others move into the row's pop-in as labelled values, by `priority`, outside the column state, and no row is wider than the frame. | `list-pages.md` |
@@ -73,9 +74,9 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | LP-09 | SHOULD | The queue is the list of the records the work is written against, narrowed by the states in which the work can be done and by the reader's scope, stated as the page's place; opening a row opens the form that does the work for a reader who can do it. | `list-pages.md` |
 | LP-10 | SHOULD | The chart stands in the header's second tab, beside the list's own, and never as a block above the list. | `list-pages.md` |
 | LP-11 | SHOULD | Where the primary input is a touch screen, the list tools leave out the row density: the theme raises every density's rows to the touch target, and the tools keep the sort, the views and the columns on one line. | `list-pages.md` |
-| LP-12 | MUST | From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls. | `list-pages.md` |
+| LP-12 | MUST | From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls. Below 600 the grid therefore windows nothing, and a store that can pass a hundred rows is served in pages: the grid asks for the next one when its last `loadMoreThreshold` rows come into view of the page's scroller, not of its own box. | `list-pages.md` |
 | LP-13 | SHOULD | The mark takes the `sm` `size`; the default `md` belongs to a record's header and to a region with room around it. | `list-pages.md` |
-| LP-14 | MUST | A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows. | `list-pages.md` |
+| LP-14 | MUST | A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto` wherever it has a height of its own; below 600 pixels, where it is as tall as its rows (LP-12), the store is served in pages instead. `table` is for sets the page bounds, such as a statement's lines or a record's related rows. | `list-pages.md` |
 | LP-15 | SHOULD | A grid that stands on the page's surface beside other blocks takes the `framed` `variant`; a grid that is the page's only body under a `bleed` page may stay `ruled`; `plain` is for a grid inside a `card` or a panel that already draws the frame. | `list-pages.md` |
 | LP-16 | SHOULD | A list page's header holds a subheading that says what the list covers, the control of the period when the list reads one, the page's figures for that period in the header area as label-over-figure pairs, and the primary action as the last, solid control; a refresh control is an icon button and never the only action. | `list-pages.md` |
 | LP-17 | SHOULD | The column of kind `actions` stays pinned to the end, which is the grid's default, and the row header is pinned to the start with `pinned: 'start'` when it is the first column; no other column is pinned without a reason the page states. | `list-pages.md` |

package/dist/docs/guidelines/layout-alignment.md

@@ -54,15 +54,15 @@ Do: Read the two published measures on the row. In the rail the words are hidden
 Don't: Write a bare avatar and text into the header, or pad the header by a number.
 Check: The header's avatar and the first destination's icon share a left edge, in the column, in the rail and in the overlay.
 
-### LA-03 · A phone's header keeps its actions on the title's line
+### LA-03 · A phone's header keeps its actions on one row
 
 Level: SHOULD
-Applies to: what a consumer places in `page-header`'s `actions`, beside a plain title — one heading, no visual, no subheading
-Rule: Below the header's narrow step the actions beside a plain title fit on the title's line: a labelled action becomes its icon-only form, and two or more actions stand in a `toolbar` that folds into its menu.
-Why: The row wraps when the actions cannot share the line with the title, and a wrapped row under a one-line heading puts the title at the start of one line and the actions at the end of the next, aligned with nothing.
-Do: Write the action twice — the labelled control and its icon-only twin with the same accessible name, the same states and the same handler — and show one per side of the header's own container query. Under a rich title (visual, marks, subheading), the actions row below the title reads as a toolbar row of its own and may stay.
-Don't: Leave a labelled button that wraps, or shrink the control under the touch target to make it fit.
-Check: At the narrowest phone width with a coarse pointer, the title and its action share one line; the icon-only control has the labelled control's name.
+Applies to: what a consumer places in `page-header`'s `actions`, under any title
+Rule: Below the header's narrow step the header's actions occupy one row: one action beside a plain title becomes its icon-only form, and two or more stand in a `toolbar` that folds into its menu, each item with its counterpart and the primary one without, so it stays. Beside a plain title that row is the title's line; under a rich title (visual, marks, subheading) `page-header` gives the toolbar a full row of its own.
+Why: Loose actions wrap, and a wrapped row under a heading puts the title at the start of one line and the actions at the end of the next, aligned with nothing; four labelled buttons in an inline row took three rows of a phone's header.
+Do: Write the action twice — the labelled control and its icon-only twin with the same accessible name, the same states and the same handler — and show one per side of the header's own container query; write two or more as `toolbar` items with counterparts.
+Don't: Leave labelled buttons in an inline row that wraps, or shrink a control under the touch target to make it fit.
+Check: At 360 pixels with a coarse pointer, the header's actions occupy one row, and every action is reachable in it or in its menu.
 
 ### LA-04 · A page's views are the header's tabs
 
@@ -93,3 +93,13 @@ Why: An offset from the scroller's edge alone — `inset-block-start: var(--slot
 Do: Write `inset-block-start: calc(var(--slotted-page-sticky-top, 0px) + <gap>)` and, when the element can outgrow the view, `max-block-size: calc(100dvh - var(--slotted-page-sticky-top, 0px) - <room for the app's own bars>)` with `overflow: auto`.
 Don't: Measure the header in the screen's own code, or hard-code its height: the header collapses, wraps and changes with the density, and the page already measures it.
 Check: Scroll the page until the header sticks, at two scroll positions: the sticky element's top stands at or below the bottom of the stuck header's title area each time.
+
+### LA-07 · A page footer's action-bar holds one row on a phone
+
+Level: MUST
+Applies to: an `action-bar` in a page's footer or a detail panel's footer
+Rule: The bar holds one row below its narrow step: the action that confirms declares no counterpart and stays, every other action declares a counterpart, and the bar's overflow control ends the run.
+Why: A bar without an overflow control stacks its actions into a column below 24rem: three actions stood in a footer 164 pixels tall on a 358 pixel phone, a quarter of the screen that the content scrolls under.
+Do: Give each action that is not the confirming one its counterpart, and close the run with the bar's overflow control.
+Don't: Leave the secondary actions without counterparts, or drop the overflow control from a bar of three or more actions.
+Check: At 360 pixels with a coarse pointer, the footer's actions occupy one row and the overflow control holds the actions that folded.

package/dist/docs/guidelines/list-pages.md

@@ -149,11 +149,11 @@ Check: With touch emulation at 390 pixels the filter bar's `end` slot is one lin
 
 Level: MUST
 Applies to: a page whose body is a `data-grid` or a `table` over a store, with a bar or a message above it
-Rule: From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls.
+Rule: From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls. Below 600 the grid therefore windows nothing, and a store that can pass a hundred rows is served in pages: the grid asks for the next one when its last `loadMoreThreshold` rows come into view of the page's scroller, not of its own box.
 Why: Two scrollers on one screen let the wheel answer whichever is under the pointer; and on a phone a filled page left the rows 155 pixels of a 667-pixel screen under a header, a banner and the tools.
 Do: Write the page with `fill`; make the region a flex column that takes its parent's full height with a zero minimum, and give the listing `flex: 1 1 0` with `min-block-size: 0`, and below 600 pixels a flex basis of auto, so the listing fills a column that has a height and takes its rows' height in one that has none. The page's footer bar (LP-03) stays outside it.
 Don't: Keep the zero basis below 600 pixels, which collapses the listing to nothing once the column loses its height, or give it an `auto` basis above 600, where its rows' height climbs the column and the page scrolls again.
-Check: At 1280 with a full page of rows, the document's scroll height equals its client height and the wheel over a row moves the rows; at 375×667 the document scrolls and the grid is as tall as its rows.
+Check: At 1280 with a full page of rows, the document's scroll height equals its client height and the wheel over a row moves the rows; at 375×667 the document scrolls, the grid is as tall as its rows, opening the page over a store served 30 rows at a time requests pages only until the grid's last `loadMoreThreshold` rows are below the screen's edge, and scrolling to the end requests the next one.
 
 ### LP-13 · A mark in a cell is the small step
 
@@ -169,7 +169,7 @@ Check: On every list, every `badge` and `tag` inside a cell of a `data-grid` or
 
 Level: MUST
 Applies to: a list of records whose count the reader does not bound — transactions, postings, imports
-Rule: A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows.
+Rule: A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto` wherever it has a height of its own; below 600 pixels, where it is as tall as its rows (LP-12), the store is served in pages instead. `table` is for sets the page bounds, such as a statement's lines or a record's related rows.
 Why: `table` mounts every cell: a hundred rows of twenty columns measured 93 ms in one task with a production build of React in Chrome and 160 ms with a development build, and the count of rows the store returns sets that cost.
 Do: Give the store's list a `data-grid` with its query, and keep `table` for the bounded sets inside a record or a document.
 Don't: Render an unbounded store into a `table`, or page a `table` to keep it under a hundred rows where the grid's window would have kept the whole set reachable.

package/dist/docs/page-header.json

@@ -12,6 +12,10 @@
       "plain",
       "floating"
     ],
+    "material": [
+      false,
+      true
+    ],
     "size": [
       "sm",
       "md",
@@ -35,6 +39,7 @@
         "level": "1",
         "collapse": "scroll",
         "variant": "band",
+        "material": false,
         "expanded": true,
         "pinned": false,
         "loading": false
@@ -256,7 +261,14 @@
           "type": "'band' | 'plain' | 'floating'",
           "defaultValue": "band",
           "appliesTo": "PageHeader, PageHeaderDefaultsProvider",
-          "description": "band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding"
+          "description": "band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding. The ground changes over --slotted-page-header-ground-duration (the medium duration) with --slotted-page-header-ground-easing (the standard easing); a duration of 0s makes the change instant"
+        },
+        {
+          "name": "material",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "PageHeader, PageHeaderDefaultsProvider",
+          "description": "Once content passes under the chrome (data-stuck), its ground is the theme’s --slotted-surface-material and its backdrop filter --slotted-material-backdrop, in every variant; at rest each variant keeps its ground. --slotted-page-header-background and --slotted-page-header-backdrop-filter still win. The theme makes both opaque under prefers-reduced-transparency and forced colours"
         },
         {
           "name": "size",
@@ -412,12 +424,15 @@
     "--slotted-line-height-md",
     "--slotted-line-height-sm",
     "--slotted-line-height-xl",
+    "--slotted-material-backdrop",
     "--slotted-page-header-backdrop-filter",
     "--slotted-page-header-background",
     "--slotted-page-header-border",
     "--slotted-page-header-control-size",
     "--slotted-page-header-description-measure",
     "--slotted-page-header-gap",
+    "--slotted-page-header-ground-duration",
+    "--slotted-page-header-ground-easing",
     "--slotted-page-header-heading-size-lg",
     "--slotted-page-header-heading-size-md",
     "--slotted-page-header-heading-size-sm",
@@ -439,6 +454,7 @@
     "--slotted-space-5",
     "--slotted-space-6",
     "--slotted-surface",
+    "--slotted-surface-material",
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
@@ -551,7 +567,7 @@
     {
       "id": "narrow",
       "title": "Below 600 pixels",
-      "note": "The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow=\"menu\", each item with its counterpart, stay on the title row and fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.",
+      "note": "The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow=\"menu\", each item with its counterpart, stay on the title row beside a plain title, and take a full row of their own under a rich one (a visual, marks or a subheading); either way they fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.",
       "language": "tsx",
       "source": "<PageHeader>…</PageHeader>;\n",
       "verdict": "excerpt"

package/dist/docs/page-header.md

@@ -62,7 +62,8 @@ Excerpt — not a complete module
 | `defaultExpanded` | `boolean` | — | PageHeader | The value an uncontrolled header area starts from, read once |
 | `pinned` | `boolean` | false | PageHeader | Present means the consumer owns the pin’s state. Pinned, the whole header stays while the page scrolls |
 | `defaultPinned` | `boolean` | — | PageHeader | The value an uncontrolled pin starts from, read once |
-| `variant` | `'band' \| 'plain' \| 'floating'` | band | PageHeader, PageHeaderDefaultsProvider | band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding |
+| `variant` | `'band' \| 'plain' \| 'floating'` | band | PageHeader, PageHeaderDefaultsProvider | band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding. The ground changes over --slotted-page-header-ground-duration (the medium duration) with --slotted-page-header-ground-easing (the standard easing); a duration of 0s makes the change instant |
+| `material` | `boolean` | false | PageHeader, PageHeaderDefaultsProvider | Once content passes under the chrome (data-stuck), its ground is the theme’s --slotted-surface-material and its backdrop filter --slotted-material-backdrop, in every variant; at rest each variant keeps its ground. --slotted-page-header-background and --slotted-page-header-backdrop-filter still win. The theme makes both opaque under prefers-reduced-transparency and forced colours |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | PageHeader, PageHeaderDefaultsProvider | The step the title sits at, on the type scale. The snapped title takes the step below |
 | `level` | `'1' \| '2' \| '3'` | 1 | PageHeader, PageHeaderDefaultsProvider | The rank of the heading, which decides its element. A page’s own header is 1 |
 | `collapse` | `'scroll' \| 'manual'` | scroll | PageHeader, PageHeaderDefaultsProvider | scroll collapses the area when it leaves the scrollport and re-opens it when it returns; manual leaves it to the toggle, the pin and the application, and the whole header stays while the page scrolls |
@@ -90,6 +91,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `band`, `plain`, `floating` | `band` |
+| `material` | `false`, `true` | `false` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `level` | `1`, `2`, `3` | `1` |
 | `collapse` | `scroll`, `manual` | `scroll` |
@@ -105,7 +107,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-page-header-backdrop-filter`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-material-backdrop`, `--slotted-page-header-backdrop-filter`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-ground-duration`, `--slotted-page-header-ground-easing`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-material`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -315,7 +317,7 @@ Excerpt — not a complete module
 
 ### Below 600 pixels
 
-The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow="menu", each item with its counterpart, stay on the title row and fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.
+The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow="menu", each item with its counterpart, stay on the title row beside a plain title, and take a full row of their own under a rich one (a visual, marks or a subheading); either way they fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.
 
 Excerpt — not a complete module
 

package/dist/docs/page.json

@@ -235,6 +235,7 @@
     "--slotted-font-family-sans",
     "--slotted-page-background-sunken",
     "--slotted-page-background-surface",
+    "--slotted-page-footer-backdrop-filter",
     "--slotted-page-footer-background",
     "--slotted-page-footer-border",
     "--slotted-page-footer-padding-block",