@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.11

package/docs/data-grid.json

@@ -52,6 +52,10 @@
       "popin",
       "scroll"
     ],
+    "resizeMode": [
+      "live",
+      "deferred"
+    ],
     "activatable": [
       true,
       false
@@ -98,6 +102,8 @@
         "skeletonRows": 8,
         "filterDebounce": 300,
         "loadMoreThreshold": 20,
+        "loadMoreTrigger": "scroll",
+        "resizeMode": "live",
         "pageSizes": [
           25,
           50,
@@ -150,6 +156,7 @@
         "column-menu",
         "column-menu-description",
         "resizer",
+        "resize-guide",
         "drop-indicator",
         "filter-row",
         "filter-cell",
@@ -273,6 +280,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",
@@ -498,7 +511,7 @@
           "type": "GridColumn<Row>[]",
           "defaultValue": "—",
           "appliesTo": "sl-data-grid",
-          "description": "The column model: id, label, description, kind, accessor, format, compare, width, minWidth, maxWidth, flex, priority, sortable, filterable, searchable, editable, resizable, reorderable, hideable, rowHeader, options, aggregate, validate, parse."
+          "description": "The column model: id, label, description, kind, accessor, format, compare, width, minWidth, maxWidth, flex, priority, sortable, filterable, searchable, editable, resizable, reorderable, hideable, rowHeader, pinned (end by default for kind actions), options, aggregate, validate, parse."
         },
         {
           "name": "description",
@@ -561,14 +574,14 @@
           "type": "boolean",
           "defaultValue": "—",
           "appliesTo": "sl-data-grid",
-          "description": "Whether a page past this one exists when the total is unknown; the footer offers Load more."
+          "description": "Whether a page past this one exists when the total is unknown; loadMoreTrigger decides what asks for it."
         },
         {
           "name": "loading",
-          "type": "boolean",
+          "type": "boolean | 'initial' | 'refresh'",
           "defaultValue": "false",
           "appliesTo": "sl-data-grid",
-          "description": "Skeleton rows with no rows to keep; aria-busy and a dimmed body over rows already shown."
+          "description": "Skeleton rows with no answer to keep; aria-busy over an answer already drawn — rows, which dim, or the empty state, which stays. true is initial until the grid has drawn an answer, and refresh after; rows emptied while a load starts wait in the skeleton."
         },
         {
           "name": "error",
@@ -766,6 +779,27 @@
           "appliesTo": "sl-data-grid",
           "description": "Rows left below the window before loadMore is emitted."
         },
+        {
+          "name": "resizeMode",
+          "type": "'live' | 'deferred'",
+          "defaultValue": "live",
+          "appliesTo": "sl-data-grid",
+          "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'",
+          "defaultValue": "scroll",
+          "appliesTo": "sl-data-grid",
+          "description": "What asks for the next page: nearing the end, with a loading status in the footer; a Load more control; or both."
+        },
+        {
+          "name": "loadMoreFailed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-grid",
+          "description": "The last page asked for failed: the automatic request stops and the footer offers Try again."
+        },
         {
           "name": "skeletonRows",
           "type": "number",
@@ -934,7 +968,7 @@
           "type": "provider",
           "defaultValue": "—",
           "appliesTo": "Application",
-          "description": "Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold and skeletonRows once for an injector. A grid that states one itself still wins. Its words and its locale come from the language in force (provideSlotted)."
+          "description": "Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold, loadMoreTrigger, resizeMode and skeletonRows once for an injector. A grid that states one itself still wins. Its words and its locale come from the language in force (provideSlotted)."
         },
         {
           "name": "@slotted/core/grid",
@@ -1097,7 +1131,9 @@
     "--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",
@@ -1133,6 +1169,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",
@@ -1416,7 +1454,7 @@
     {
       "id": "load-more",
       "title": "Load more",
-      "note": "With an unknown total the footer states the range without one and offers Load more; when the grid windows its rows, loadMore is emitted on its own as the window nears the end.",
+      "note": "With an unknown total the footer states the range without one. loadMore is emitted on its own as the reader nears the end, and the footer says a page is loading; it offers a control only to retry a page that failed (loadMoreFailed). loadMoreTrigger=\"button\" asks only from a Load more control, \"both\" does the two.",
       "language": "html",
       "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"rows()\"\n  [columns]=\"columns\"\n  [hasMore]=\"hasMore()\"\n  [query]=\"{ ...emptyQuery(), page: { cursor: cursor(), size: 50 } }\"\n  (loadMore)=\"fetchMore()\"\n/>\n",
       "verdict": "excerpt"
@@ -1424,7 +1462,7 @@
     {
       "id": "empty-and-loading",
       "title": "Empty, no results, error, loading",
-      "note": "Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing.",
+      "note": "Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing. Zero rows is an answer too: once the grid has drawn the empty state, loading keeps it and draws no skeleton, and loading=\"initial\" asks for the skeleton anyway.",
       "language": "html",
       "source": "<sl-data-grid\n  rowKey=\"id\"\n  [rows]=\"rows()\"\n  [columns]=\"columns\"\n  [loading]=\"loading()\"\n  [error]=\"error()\"\n  (retry)=\"reload()\"\n/>\n",
       "verdict": "excerpt"

package/docs/data-grid.md

@@ -137,6 +137,7 @@ export class DataGridBasic {
 | `column-menu` | button[slMenuTriggerFor] | yes |
 | `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 |
@@ -213,6 +214,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` |
@@ -230,7 +232,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-md`, `--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/docs/data-grid.props.md

@@ -9,7 +9,7 @@
 | --- | --- | --- | --- | --- |
 | `rows` | `readonly Row[]` | — | sl-data-grid | The records; the grid never mutates them. Left out when a dataSource answers for them. |
 | `rowKey` | `keyof Row \| (row) => string` | — | sl-data-grid | A field name or a function: the key every state model names a row by. |
-| `columns` | `GridColumn<Row>[]` | — | sl-data-grid | The column model: id, label, description, kind, accessor, format, compare, width, minWidth, maxWidth, flex, priority, sortable, filterable, searchable, editable, resizable, reorderable, hideable, rowHeader, options, aggregate, validate, parse. |
+| `columns` | `GridColumn<Row>[]` | — | sl-data-grid | The column model: id, label, description, kind, accessor, format, compare, width, minWidth, maxWidth, flex, priority, sortable, filterable, searchable, editable, resizable, reorderable, hideable, rowHeader, pinned (end by default for kind actions), options, aggregate, validate, parse. |
 | `description` | `string` | — | GridColumn | What the column is: the header’s accessible description, the caption atop its menu and the first line of its help popover. |
 | `priority` | `number` | — | GridColumn | The lower, the longer the column stays when the frame is too narrow. A column without one leaves before every numbered one; the identity column and an actions column never leave. |
 | `popin` | `boolean` | true | GridColumn | Whether a column with no room moves into the row’s pop-in; false hides it instead. |
@@ -18,8 +18,8 @@
 | `columnGroups` | `GridColumnGroup[]` | — | sl-data-grid | Headings spanning columns, drawn as a row above the names. |
 | `mode` | `'client' \| 'server'` | inferred | sl-data-grid | client applies the query to rows; server draws rows as given. server when totalCount or hasMore is present. |
 | `totalCount` | `number` | — | sl-data-grid | The whole set’s size in server mode; aria-rowcount and the range read it. |
-| `hasMore` | `boolean` | — | sl-data-grid | Whether a page past this one exists when the total is unknown; the footer offers Load more. |
-| `loading` | `boolean` | false | sl-data-grid | Skeleton rows with no rows to keep; aria-busy and a dimmed body over rows already shown. |
+| `hasMore` | `boolean` | — | sl-data-grid | Whether a page past this one exists when the total is unknown; loadMoreTrigger decides what asks for it. |
+| `loading` | `boolean \| 'initial' \| 'refresh'` | false | sl-data-grid | Skeleton rows with no answer to keep; aria-busy over an answer already drawn — rows, which dim, or the empty state, which stays. true is initial until the grid has drawn an answer, and refresh after; rows emptied while a load starts wait in the skeleton. |
 | `error` | `string \| null` | — | sl-data-grid | The message of a failed load; draws the error state with Try again, which emits retry. |
 | `disabledKeys` | `string[]` | — | sl-data-grid | Rows that are neither selectable nor editable, drawn with data-disabled. |
 | `query` | `model<GridQuery>` | emptyQuery() | sl-data-grid | sort, filter, search, page and group in one object, two-way. An unbound grid starts from the model’s own initial value. |
@@ -48,6 +48,9 @@
 | `rowsReorder` | `{ key, from, to, reason, event }` | — | sl-data-grid | Where a row goes in rows: from, and the index it takes once moved. The consumer moves it. |
 | `highlightChanges` | `boolean \| number` | false | sl-data-grid | Marks a mounted cell whose value changed between two rows, for the stated milliseconds (true is 1200). |
 | `loadMoreThreshold` | `number` | 20 | sl-data-grid | Rows left below the window before loadMore is emitted. |
+| `resizeMode` | `'live' \| 'deferred'` | live | sl-data-grid | 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 | sl-data-grid | 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 | sl-data-grid | The last page asked for failed: the automatic request stops and the footer offers Try again. |
 | `skeletonRows` | `number` | 8 | sl-data-grid | Rows the first load draws. |
 | `pageSizes` | `number[]` | 25,50,100 | sl-data-grid | The sizes a page-size control in the footer offers, read through injectDataGridDefaults. |
 | `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | sl-data-grid | No rules, rules between rows, or the border and the radius. |
@@ -71,7 +74,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. |
-| `provideDataGridDefaults` | `provider` | — | Application | Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold and skeletonRows once for an injector. A grid that states one itself still wins. Its words and its locale come from the language in force (provideSlotted). |
+| `provideDataGridDefaults` | `provider` | — | Application | Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold, loadMoreTrigger, resizeMode and skeletonRows once for an injector. A grid that states one itself still wins. Its words and its locale come from the language in force (provideSlotted). |
 | `@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. |
 | `slDataGridCell, slDataGridEditor, slDataGridHeader, slDataGridFilter, slDataGridColumnHelp, slDataGridDetail, slDataGridGroup, slDataGridEmpty` | `ng-template directives` | — | sl-data-grid | Every surface a consumer replaces, projected as content; the four column-scoped ones name a column or serve every column, and slDataGridColumnHelp names one column and draws its help button. row, cell, head and body are fixed: the layout and the roles are theirs. |
 | `slDataGridFooter` | `attribute` | — | sl-data-grid | Pagination, a page-size select, a count: the consumer’s own controls projected into the bar the grid draws. |

package/docs/data-list.json

@@ -542,7 +542,8 @@
     "--slotted-target-min",
     "--slotted-text",
     "--slotted-text-muted",
-    "--slotted-tone-accent-text"
+    "--slotted-tone-accent-text",
+    "--slotted-z-index-sticky"
   ],
   "examples": [
     {

package/docs/data-list.md

@@ -131,7 +131,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-8`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-8`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/docs/date-field.json

@@ -127,7 +127,7 @@
           "type": "PlainDate | null",
           "defaultValue": "—",
           "appliesTo": "SlDateField",
-          "description": "The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it."
+          "description": "The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, and toISODate(date) returns 'YYYY-MM-DD'."
         },
         {
           "name": "defaultValue",
@@ -136,6 +136,13 @@
           "appliesTo": "SlDateField",
           "description": "The date the control starts from when nobody else writes one. Read once, in ngOnInit, because Angular binds inputs after it constructs a component."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "SlDateField",
+          "description": "What the control holds. month shows the month and the year segments in the locale’s order, takes the first day of the month as its value, and submits YYYY-MM through name."
+        },
         {
           "name": "min",
           "type": "PlainDate",
@@ -313,6 +320,7 @@
     "--slotted-border-subtle",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/docs/date-field.md

@@ -40,8 +40,9 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `value` | `PlainDate \| null` | — | SlDateField | The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. |
+| `value` | `PlainDate \| null` | — | SlDateField | The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, and toISODate(date) returns 'YYYY-MM-DD'. |
 | `defaultValue` | `PlainDate \| null` | — | SlDateField | The date the control starts from when nobody else writes one. Read once, in ngOnInit, because Angular binds inputs after it constructs a component. |
+| `granularity` | `'day' \| 'month'` | day | SlDateField | What the control holds. month shows the month and the year segments in the locale’s order, takes the first day of the month as its value, and submits YYYY-MM through name. |
 | `min` | `PlainDate` | — | SlDateField | The earliest date the control accepts. Reported through each segment’s aria-valuemin, and as the slottedDateRange form error. |
 | `max` | `PlainDate` | — | SlDateField | The latest date the control accepts, on the same terms as min. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | SlDateField | Refuses particular dates — a weekend, a holiday, a day already booked. Reported as the slottedDateUnavailable form error. |
@@ -89,7 +90,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-date-field-action-active-background`, `--slotted-date-field-action-color`, `--slotted-date-field-action-hover-background`, `--slotted-date-field-action-size`, `--slotted-date-field-adornment-color`, `--slotted-date-field-background`, `--slotted-date-field-border-color`, `--slotted-date-field-color`, `--slotted-date-field-disabled-background`, `--slotted-date-field-disabled-border-color`, `--slotted-date-field-disabled-color`, `--slotted-date-field-hover-border-color`, `--slotted-date-field-icon-size-min`, `--slotted-date-field-invalid-border-color`, `--slotted-date-field-invalid-edge-width`, `--slotted-date-field-invalid-focus-ring-color`, `--slotted-date-field-literal-color`, `--slotted-date-field-placeholder-color`, `--slotted-date-field-plain-hover-background`, `--slotted-date-field-radius`, `--slotted-date-field-readonly-background`, `--slotted-date-field-segment-focus-background`, `--slotted-date-field-segment-focus-color`, `--slotted-date-field-segment-min-inline-size`, `--slotted-date-field-segment-padding-inline`, `--slotted-date-field-segment-radius`, `--slotted-date-field-shadow`, `--slotted-date-field-subtle-background`, `--slotted-date-field-subtle-border-color`, `--slotted-date-field-subtle-hover-background`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-date-field-action-active-background`, `--slotted-date-field-action-color`, `--slotted-date-field-action-hover-background`, `--slotted-date-field-action-size`, `--slotted-date-field-adornment-color`, `--slotted-date-field-background`, `--slotted-date-field-border-color`, `--slotted-date-field-color`, `--slotted-date-field-disabled-background`, `--slotted-date-field-disabled-border-color`, `--slotted-date-field-disabled-color`, `--slotted-date-field-hover-border-color`, `--slotted-date-field-icon-size-min`, `--slotted-date-field-invalid-border-color`, `--slotted-date-field-invalid-edge-width`, `--slotted-date-field-invalid-focus-ring-color`, `--slotted-date-field-literal-color`, `--slotted-date-field-placeholder-color`, `--slotted-date-field-plain-hover-background`, `--slotted-date-field-radius`, `--slotted-date-field-readonly-background`, `--slotted-date-field-segment-focus-background`, `--slotted-date-field-segment-focus-color`, `--slotted-date-field-segment-min-inline-size`, `--slotted-date-field-segment-padding-inline`, `--slotted-date-field-segment-radius`, `--slotted-date-field-shadow`, `--slotted-date-field-subtle-background`, `--slotted-date-field-subtle-border-color`, `--slotted-date-field-subtle-hover-background`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/docs/date-picker.examples.md

@@ -877,6 +877,42 @@ export class DatePickerInvoiceDue {
 }
 ```
 
+### iso-date.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import type { CalendarValue } from '@slotted/angular/calendar';
+import { SlDatePicker } from '@slotted/angular/date-picker';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { isPlainDate, parseISODate, toISODate } from '@slotted/core/date';
+
+@Component({
+  selector: 'app-date-picker-iso-date',
+  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Statement date</label>
+      <div slDatePicker [value]="date()" (valueChange)="set($event.value)"></div>
+      <span slFieldDescription>{{ summary() }}</span>
+    </div>
+  `,
+})
+export class DatePickerIsoDate {
+  /* The API carries the date as text; the picker holds a PlainDate. */
+  protected readonly iso = signal('2026-10-19');
+  protected readonly date = computed(() => parseISODate(this.iso()));
+  protected readonly summary = computed(() =>
+    this.iso() === '' ? 'No date sent.' : `The API receives ${this.iso()}.`,
+  );
+
+  protected set(value: CalendarValue): void {
+    this.iso.set(isPlainDate(value) ? toISODate(value) : '');
+  }
+}
+```
+
 ### locale.ts
 
 Example

package/docs/date-picker.json

@@ -134,14 +134,14 @@
       "api": [
         {
           "name": "value",
-          "type": "PlainDate | DateRange | PlainDate[] | null",
+          "type": "PlainDate | DateRange | PlainDate[] | PlainYearMonth | null",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
-          "description": "The selected value, whose shape follows selectionMode. Binding it makes the value controlled."
+          "description": "The selected value, whose shape follows selectionMode. Binding it makes the value controlled. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, toISODate(date) returns 'YYYY-MM-DD', and isPlainDate(value) narrows the CalendarValue (valueChange) reports."
         },
         {
           "name": "defaultValue",
-          "type": "PlainDate | DateRange | PlainDate[] | null",
+          "type": "PlainDate | DateRange | PlainDate[] | PlainYearMonth | null",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
           "description": "The starting value of an uncontrolled date picker. Read once, when the date picker initializes."
@@ -162,14 +162,14 @@
         },
         {
           "name": "min",
-          "type": "PlainDate",
+          "type": "PlainDate | PlainYearMonth",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
           "description": "The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange."
         },
         {
           "name": "max",
-          "type": "PlainDate",
+          "type": "PlainDate | PlainYearMonth",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
           "description": "The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange."
@@ -181,6 +181,13 @@
           "appliesTo": "SlDatePicker",
           "description": "Returns true for a date the reader cannot choose. The calendar disables it, a typed unavailable date marks the date picker invalid, and a form reports slottedDateUnavailable."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "SlDatePicker",
+          "description": "What a choice is. month opens the calendar on the months of a year and chooses a month cell; the field shows the month and the year segments; value, defaultValue, min and max are PlainYearMonth from @slotted/core/date ({ year, month }), (valueChange) reports one, and name submits YYYY-MM. parseISOYearMonth and toISOYearMonth convert to and from that text. selectionMode, months, isDateUnavailable and the week inputs do not apply."
+        },
         {
           "name": "selectionMode",
           "type": "'single' | 'range' | 'multiple'",
@@ -636,6 +643,14 @@
       "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  addDays,\n  createDateFormat,\n  isPlainDate,\n  plainDate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst TERMS = [\n  { value: 'receipt', label: 'Due on receipt', days: 0 },\n  { value: 'net-15', label: 'Net 15', days: 15 },\n  { value: 'net-30', label: 'Net 30', days: 30 },\n  { value: 'net-60', label: 'Net 60', days: 60 },\n];\nconst words = createDateFormat({ locale: 'en-US' });\n\n@Component({\n  selector: 'app-date-picker-invoice-due',\n  imports: [\n    SlDatePicker,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlSelect,\n    SlSelectItem,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField required>\n        <label slFieldLabel>Invoice date</label>\n        <div slDatePicker [value]=\"issued()\" (valueChange)=\"setIssued($event.value)\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Payment terms</label>\n        <sl-select [items]=\"terms\" [(value)]=\"term\">\n          @for (option of terms; track option.value) {\n            <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n          }\n        </sl-select>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Due date</label>\n        <div slDatePicker [value]=\"due()\"></div>\n        <span slFieldDescription>{{ summary() }}</span>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerInvoiceDue {\n  protected readonly terms = TERMS;\n  protected readonly issued = signal<PlainDate | null>(plainDate(2026, 9, 30));\n  protected readonly term = signal<SelectSelection>('net-30');\n  protected readonly due = computed(() => {\n    const issued = this.issued();\n    const days = TERMS.find((option) => option.value === this.term())?.days ?? 0;\n    return issued === null ? null : addDays(issued, days);\n  });\n  protected readonly summary = computed(() => {\n    const due = this.due();\n    return due === null ? 'Set the invoice date first.' : `Payment is due ${words.describe(due)}.`;\n  });\n\n  protected setIssued(value: CalendarValue): void {\n    this.issued.set(isPlainDate(value) ? value : null);\n  }\n}\n",
       "verdict": "example"
     },
+    {
+      "id": "iso-date",
+      "title": "iso-date.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { isPlainDate, parseISODate, toISODate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-iso-date',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Statement date</label>\n      <div slDatePicker [value]=\"date()\" (valueChange)=\"set($event.value)\"></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerIsoDate {\n  /* The API carries the date as text; the picker holds a PlainDate. */\n  protected readonly iso = signal('2026-10-19');\n  protected readonly date = computed(() => parseISODate(this.iso()));\n  protected readonly summary = computed(() =>\n    this.iso() === '' ? 'No date sent.' : `The API receives ${this.iso()}.`,\n  );\n\n  protected set(value: CalendarValue): void {\n    this.iso.set(isPlainDate(value) ? toISODate(value) : '');\n  }\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "locale",
       "title": "locale.ts",

package/docs/date-picker.md

@@ -50,13 +50,14 @@ export class DatePickerBasic {}
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `value` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | SlDatePicker | The selected value, whose shape follows selectionMode. Binding it makes the value controlled. |
-| `defaultValue` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | SlDatePicker | The starting value of an uncontrolled date picker. Read once, when the date picker initializes. |
+| `value` | `PlainDate \| DateRange \| PlainDate[] \| PlainYearMonth \| null` | — | SlDatePicker | The selected value, whose shape follows selectionMode. Binding it makes the value controlled. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, toISODate(date) returns 'YYYY-MM-DD', and isPlainDate(value) narrows the CalendarValue (valueChange) reports. |
+| `defaultValue` | `PlainDate \| DateRange \| PlainDate[] \| PlainYearMonth \| null` | — | SlDatePicker | The starting value of an uncontrolled date picker. Read once, when the date picker initializes. |
 | `open` | `boolean` | — | SlDatePicker | Whether the calendar is showing. Binding it makes the open state controlled. |
 | `defaultOpen` | `boolean` | false | SlDatePicker | Whether the calendar shows when the date picker initializes. Focus does not move into it. |
-| `min` | `PlainDate` | — | SlDatePicker | The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange. |
-| `max` | `PlainDate` | — | SlDatePicker | The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange. |
+| `min` | `PlainDate \| PlainYearMonth` | — | SlDatePicker | The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange. |
+| `max` | `PlainDate \| PlainYearMonth` | — | SlDatePicker | The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | SlDatePicker | Returns true for a date the reader cannot choose. The calendar disables it, a typed unavailable date marks the date picker invalid, and a form reports slottedDateUnavailable. |
+| `granularity` | `'day' \| 'month'` | day | SlDatePicker | What a choice is. month opens the calendar on the months of a year and chooses a month cell; the field shows the month and the year segments; value, defaultValue, min and max are PlainYearMonth from @slotted/core/date ({ year, month }), (valueChange) reports one, and name submits YYYY-MM. parseISOYearMonth and toISOYearMonth convert to and from that text. selectionMode, months, isDateUnavailable and the week inputs do not apply. |
 | `selectionMode` | `'single' \| 'range' \| 'multiple'` | single | SlDatePicker | How many dates the calendar selects, and so the shape of the value. The field shows a single date only; for a start and an end, use slDateRangePicker. |
 | `months` | `number` | 1 | SlDatePicker | How many months the calendar draws side by side. |
 | `defaultView` | `'day' \| 'month' \| 'year'` | day | SlDatePicker | The grid the calendar opens on. |

package/docs/datetime-field.json

@@ -421,6 +421,7 @@
     "--slotted-border-subtle",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/docs/datetime-field.md

@@ -105,7 +105,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-datetime-field-action-active-background`, `--slotted-datetime-field-action-color`, `--slotted-datetime-field-action-hover-background`, `--slotted-datetime-field-action-size`, `--slotted-datetime-field-adornment-color`, `--slotted-datetime-field-background`, `--slotted-datetime-field-border-color`, `--slotted-datetime-field-color`, `--slotted-datetime-field-disabled-background`, `--slotted-datetime-field-disabled-border-color`, `--slotted-datetime-field-disabled-color`, `--slotted-datetime-field-half-gap`, `--slotted-datetime-field-hover-border-color`, `--slotted-datetime-field-icon-size-min`, `--slotted-datetime-field-incomplete-border-color`, `--slotted-datetime-field-invalid-border-color`, `--slotted-datetime-field-invalid-edge-width`, `--slotted-datetime-field-invalid-focus-ring-color`, `--slotted-datetime-field-literal-color`, `--slotted-datetime-field-padding-block`, `--slotted-datetime-field-period-min-inline-size`, `--slotted-datetime-field-placeholder-color`, `--slotted-datetime-field-plain-hover-background`, `--slotted-datetime-field-preview-color`, `--slotted-datetime-field-preview-day-color`, `--slotted-datetime-field-radius`, `--slotted-datetime-field-readonly-background`, `--slotted-datetime-field-relative-border-color`, `--slotted-datetime-field-segment-focus-background`, `--slotted-datetime-field-segment-focus-color`, `--slotted-datetime-field-segment-min-inline-size`, `--slotted-datetime-field-segment-padding-inline`, `--slotted-datetime-field-segment-radius`, `--slotted-datetime-field-shadow`, `--slotted-datetime-field-subtle-background`, `--slotted-datetime-field-subtle-border-color`, `--slotted-datetime-field-subtle-hover-background`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-semibold`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-warning-border`
+`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-datetime-field-action-active-background`, `--slotted-datetime-field-action-color`, `--slotted-datetime-field-action-hover-background`, `--slotted-datetime-field-action-size`, `--slotted-datetime-field-adornment-color`, `--slotted-datetime-field-background`, `--slotted-datetime-field-border-color`, `--slotted-datetime-field-color`, `--slotted-datetime-field-disabled-background`, `--slotted-datetime-field-disabled-border-color`, `--slotted-datetime-field-disabled-color`, `--slotted-datetime-field-half-gap`, `--slotted-datetime-field-hover-border-color`, `--slotted-datetime-field-icon-size-min`, `--slotted-datetime-field-incomplete-border-color`, `--slotted-datetime-field-invalid-border-color`, `--slotted-datetime-field-invalid-edge-width`, `--slotted-datetime-field-invalid-focus-ring-color`, `--slotted-datetime-field-literal-color`, `--slotted-datetime-field-padding-block`, `--slotted-datetime-field-period-min-inline-size`, `--slotted-datetime-field-placeholder-color`, `--slotted-datetime-field-plain-hover-background`, `--slotted-datetime-field-preview-color`, `--slotted-datetime-field-preview-day-color`, `--slotted-datetime-field-radius`, `--slotted-datetime-field-readonly-background`, `--slotted-datetime-field-relative-border-color`, `--slotted-datetime-field-segment-focus-background`, `--slotted-datetime-field-segment-focus-color`, `--slotted-datetime-field-segment-min-inline-size`, `--slotted-datetime-field-segment-padding-inline`, `--slotted-datetime-field-segment-radius`, `--slotted-datetime-field-shadow`, `--slotted-datetime-field-subtle-background`, `--slotted-datetime-field-subtle-border-color`, `--slotted-datetime-field-subtle-hover-background`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-semibold`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-warning-border`
 
 ## Examples
 

package/docs/detail-panel.json

@@ -364,6 +364,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",
@@ -425,9 +427,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": "html",
-      "source": "<div slDrawer [(open)]=\"open\">\n  <div slDrawerPanel>\n    <div slDrawerBody>\n      <article slDetailPanel [recordKey]=\"order.id\">…</article>\n    </div>\n  </div>\n</div>\n\n<article slDetailPanel scroll=\"self\" [recordKey]=\"order.id\">…</article>\n",
+      "source": "<div slDrawer [(open)]=\"open\">\n  <div slDrawerPanel>\n    <div slDrawerBody>\n      <article slDetailPanel [recordKey]=\"order.id\">…</article>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"pane\"\n  style=\"background: var(--slotted-surface); --slotted-page-ground: var(--slotted-surface)\"\n>\n  <article slDetailPanel scroll=\"self\" [recordKey]=\"order.id\">…</article>\n</div>\n",
       "verdict": "excerpt"
     },
     {

package/docs/detail-panel.md

@@ -105,7 +105,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
 
@@ -155,7 +155,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
 
@@ -168,7 +168,12 @@ Excerpt — not a complete module
   </div>
 </div>
 
-<article slDetailPanel scroll="self" [recordKey]="order.id">…</article>
+<div
+  class="pane"
+  style="background: var(--slotted-surface); --slotted-page-ground: var(--slotted-surface)"
+>
+  <article slDetailPanel scroll="self" [recordKey]="order.id">…</article>
+</div>
 ```
 
 ### Previous and next: focus follows the record