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

package/dist/docs/split-button.md

@@ -45,7 +45,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | accent | SplitButton | The tone both halves are painted in. Resolved from the prop, then SplitButtonDefaultsProvider, then button’s own provider, then the contract |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | accent | SplitButton | The tone both halves are painted in. Resolved from the prop, then SplitButtonDefaultsProvider, then button’s own provider, then the contract |
 | `variant` | `'solid' \| 'outline' \| 'ghost'` | solid | SplitButton | How the tone is painted on both halves. Between two solid halves the family paints the seam; outline and ghost share the edge the join leaves |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SplitButton | The control step. The trigger is square from the same height |
 | `fullWidth` | `boolean` | false | SplitButton | Whether the action takes the whole line. The trigger stays square either way |
@@ -78,7 +78,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `neutral`, `info`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `solid`, `outline`, `ghost` | `solid` |
 | `size` | `sm`, `md`, `lg` | `md` |
 
@@ -92,7 +92,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-disabled-border`, `--slotted-split-button-radius`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-disabled-border`, `--slotted-split-button-radius`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-info-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
 
 ## Examples
 

package/dist/docs/stat-card.json

@@ -36,6 +36,7 @@
       "neutral",
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -236,7 +237,7 @@
         },
         {
           "name": "tone",
-          "type": "'neutral' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'neutral' | 'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "—",
           "appliesTo": "StatCard, StatCardDelta",
           "description": "An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline"
@@ -354,6 +355,7 @@
     "--slotted-font-size-xs",
     "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
+    "--slotted-letter-spacing-tighter",
     "--slotted-line-height-2xl",
     "--slotted-line-height-3xl",
     "--slotted-line-height-4xl",
@@ -426,10 +428,12 @@
     "--slotted-stat-card-value-line-height-sm",
     "--slotted-surface-raised",
     "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
     "--slotted-text",
     "--slotted-text-muted",
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-text",
     "--slotted-tone-success-text",
     "--slotted-tone-warning-text"

package/dist/docs/stat-card.md

@@ -77,7 +77,7 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | StatCard | The value is on its way: every part stands in with a placeholder and the root is aria-busy |
 | `goodWhen` | `'up' \| 'down' \| 'none'` | up | StatCard, StatCardDelta | Which way is good for this metric. The tone of a change is derived from it, never from the sign |
 | `delta` | `number` | — | StatCard | The change, as the first delta reads it: a fraction for a percentage. Stated on the root so the card knows its tone before its delta renders |
-| `tone` | `'neutral' \| 'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | — | StatCard, StatCardDelta | An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline |
+| `tone` | `'neutral' \| 'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | StatCard, StatCardDelta | An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline |
 | `locale` | `string` | — | StatCard | BCP 47, for every number the card formats; the language in force when absent |
 | `formatOptions` | `Intl.NumberFormatOptions` | — | StatCard, StatCardValue, StatCardDelta | How a number is written. On the root, the default for the value and the delta |
 | `messages` | `Partial<StatCardMessages>` | — | StatCard | Words laid over the language in force, key by key: up, down and flat, heard before the delta; empty, shown in place of a missing value |
@@ -100,7 +100,7 @@ Excerpt — not a complete module
 | `layout` | `inline`, `stacked` | `inline` |
 | `status` | `ready`, `empty`, `error` | `ready` |
 | `goodWhen` | `up`, `down`, `none` | `up` |
-| `tone` | `neutral`, `accent`, `secondary`, `success`, `warning`, `danger` | — |
+| `tone` | `neutral`, `accent`, `secondary`, `info`, `success`, `warning`, `danger` | — |
 | `trend` | `up`, `down`, `flat` | — |
 
 ## Rules
@@ -114,7 +114,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-letter-spacing-tighter`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/table.examples.md

@@ -688,7 +688,7 @@ export default function TableExpansion() {
 
 ### A header, a summary and a column that stay
 
-stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.
+stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. Under stickyTo="page" the head stops at --slotted-table-sticky-offset, which a page binds to its own chrome; a table inside a scrolling box of its own sets that token to 0 on the box. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.
 
 Example
 
@@ -1021,11 +1021,9 @@ Excerpt — not a complete module
     <TableLoader skeletonRows={5} />
   ) : rows.length === 0 ? (
     <TableBody>
-      <TableRow>
-        <TableEmpty>
-          <ResultState status="no-results" title="No invoices match this filter" />
-        </TableEmpty>
-      </TableRow>
+      <TableEmpty>
+        <ResultState status="no-results" title="No invoices match this filter" />
+      </TableEmpty>
     </TableBody>
   ) : (
     <TableBody>{rows}</TableBody>
@@ -1222,18 +1220,16 @@ export default function TableEmptyExample() {
           </TableRow>
         </TableHead>
         <TableBody>
-          <TableRow>
-            <TableEmpty>
-              <ResultState status="empty">
-                <ResultStateContent>
-                  <ResultStateTitle>No returns this week</ResultStateTitle>
-                  <ResultStateDescription>
-                    Returns appear here as soon as a customer opens one from their order page.
-                  </ResultStateDescription>
-                </ResultStateContent>
-              </ResultState>
-            </TableEmpty>
-          </TableRow>
+          <TableEmpty>
+            <ResultState status="empty">
+              <ResultStateContent>
+                <ResultStateTitle>No returns this week</ResultStateTitle>
+                <ResultStateDescription>
+                  Returns appear here as soon as a customer opens one from their order page.
+                </ResultStateDescription>
+              </ResultStateContent>
+            </ResultState>
+          </TableEmpty>
         </TableBody>
       </TableContent>
     </Table>

package/dist/docs/table.json

@@ -12,6 +12,10 @@
       "ruled",
       "framed"
     ],
+    "edges": [
+      "inset",
+      "flush"
+    ],
     "striped": [
       true,
       false
@@ -71,6 +75,7 @@
       "nativeElement": "div",
       "defaults": {
         "variant": "ruled",
+        "edges": "inset",
         "striped": false,
         "stickyHeader": false,
         "stickyTo": "scroll",
@@ -107,6 +112,7 @@
         "active",
         "focus-visible",
         "selected",
+        "current",
         "expanded",
         "disabled",
         "loading"
@@ -139,6 +145,11 @@
         "selection",
         "expander",
         "detail",
+        "group-row",
+        "group-header",
+        "group-content",
+        "group-start",
+        "group-end",
         "empty",
         "loader",
         "footer"
@@ -148,7 +159,7 @@
   "docs": {
     "table": {
       "imports": {
-        "source": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableDefaultsProvider,\n  TableDetail,\n  TableEmpty,\n  TableExpander,\n  TableFooter,\n  TableHead,\n  TableLoader,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n  TableSort,\n  TableSummary,\n} from '@slotted/react';"
+        "source": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableDefaultsProvider,\n  TableDetail,\n  TableEmpty,\n  TableExpander,\n  TableFooter,\n  TableGroupRow,\n  TableHead,\n  TableLoader,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n  TableSort,\n  TableSummary,\n} from '@slotted/react';"
       },
       "anatomy": [
         {
@@ -319,11 +330,41 @@
           "required": false,
           "purpose": "The open row detail, one cell spanning every column. It is not rendered while it is closed."
         },
+        {
+          "part": "group-row",
+          "element": "tr",
+          "required": false,
+          "purpose": "The band that opens a group of rows: a day of a ledger with its net at the end. One header cell spans every column, and sticky holds the band under the header while its rows scroll past."
+        },
+        {
+          "part": "group-header",
+          "element": "th",
+          "required": false,
+          "purpose": "The one cell of the band, scope=\"rowgroup\", spanning the columns of the table. It names the rows of its own tbody, so a grouped listing writes one body per group."
+        },
+        {
+          "part": "group-content",
+          "element": "div",
+          "required": false,
+          "purpose": "The line inside the band that sets the name at the start and the end content at the end."
+        },
+        {
+          "part": "group-start",
+          "element": "span",
+          "required": false,
+          "purpose": "The name of the group."
+        },
+        {
+          "part": "group-end",
+          "element": "span",
+          "required": false,
+          "purpose": "The end of the band, from the end prop: the total or net of the group, in tabular figures."
+        },
         {
           "part": "empty",
           "element": "td",
           "required": false,
-          "purpose": "What is shown when there is nothing, spanning every column. It takes a ResultState, which already separates an empty set from a set a filter emptied."
+          "purpose": "What is shown when there is nothing, spanning every column, in a row the part writes itself. It takes a ResultState, which already separates an empty set from a set a filter emptied."
         },
         {
           "part": "loader",
@@ -382,6 +423,13 @@
           "appliesTo": "Table",
           "description": "How much of a frame the set is given"
         },
+        {
+          "name": "edges",
+          "type": "'inset' | 'flush'",
+          "defaultValue": "inset",
+          "appliesTo": "Table",
+          "description": "Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets"
+        },
         {
           "name": "striped",
           "type": "boolean",
@@ -557,6 +605,34 @@
           "appliesTo": "TableRow",
           "description": "The record position in the whole set, written as aria-rowindex"
         },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TableRow",
+          "description": "The record open elsewhere on the page, a detail pane beside the table, written as aria-current"
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "defaultValue": "true with onAction",
+          "appliesTo": "TableRow",
+          "description": "Paints the row as a thing the pointer presses"
+        },
+        {
+          "name": "onAction",
+          "type": "(event) => void",
+          "defaultValue": "—",
+          "appliesTo": "TableRow",
+          "description": "A click anywhere in the row that lands on no control of its own; the first link or button in the row is the keyboard way in"
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TableGroupRow",
+          "description": "What stands at the end of the band: the total or net of the group"
+        },
         {
           "name": "column",
           "type": "string",
@@ -599,6 +675,13 @@
           "appliesTo": "the three cell parts and both selection cells",
           "description": "Which edge the column is pinned to while the table scrolls past it"
         },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TableGroupRow",
+          "description": "Holds the band under the header while its rows scroll past"
+        },
         {
           "name": "stickyOffset",
           "type": "string",
@@ -728,15 +811,20 @@
     "--slotted-table-color-muted",
     "--slotted-table-column-actions-size",
     "--slotted-table-control-radius",
+    "--slotted-table-edge-inset",
     "--slotted-table-font-family",
     "--slotted-table-font-size",
     "--slotted-table-gap",
+    "--slotted-table-group-color",
+    "--slotted-table-group-sticky-offset",
+    "--slotted-table-group-surface",
     "--slotted-table-header-surface",
     "--slotted-table-header-surface-hover",
     "--slotted-table-icon-size",
     "--slotted-table-radius",
     "--slotted-table-row-color-selected",
     "--slotted-table-row-min-block-size",
+    "--slotted-table-row-surface-current",
     "--slotted-table-row-surface-hover",
     "--slotted-table-row-surface-selected",
     "--slotted-table-row-surface-selected-hover",
@@ -754,6 +842,7 @@
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-surface",
     "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",
     "--slotted-z-index-sticky"
   ],
@@ -881,7 +970,7 @@
     {
       "id": "sticky",
       "title": "A header, a summary and a column that stay",
-      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
+      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. Under stickyTo=\"page\" the head stops at --slotted-table-sticky-offset, which a page binds to its own chrome; a table inside a scrolling box of its own sets that token to 0 on the box. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
       "language": "tsx",
       "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSummary,\n} from '@slotted/react/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\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 WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];\n\nconst ORDERS = Array.from({ length: 30 }, (_, index) => ({\n  id: `SO-${10400 + index}`,\n  customer: CUSTOMERS[index % CUSTOMERS.length],\n  warehouse: WAREHOUSES[index % WAREHOUSES.length],\n  total: 180 + ((index * 397) % 2400),\n}));\n\nconst TOTAL = ORDERS.reduce((sum, order) => sum + order.total, 0);\n\nexport default function TableSticky() {\n  return (\n    <Table columns={4} stickyFooter stickyHeader>\n      <TableContent\n        aria-label=\"September orders\"\n        scrollProps={{ style: { maxBlockSize: '20rem' } }}\n      >\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Warehouse</TableColumnHeader>\n            <TableColumnHeader numeric>Total</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {ORDERS.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>{order.warehouse}</TableCell>\n              <TableCell numeric>{USD.format(order.total)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableSummary>\n          <TableRow>\n            <TableCell colSpan={3}>{ORDERS.length} orders</TableCell>\n            <TableCell numeric>{USD.format(TOTAL)}</TableCell>\n          </TableRow>\n        </TableSummary>\n      </TableContent>\n    </Table>\n  );\n}\n",
       "verdict": "example"
@@ -923,7 +1012,7 @@
       "title": "Nothing yet, nothing at all, and something arriving",
       "note": "A first load draws skeleton rows, so the shape is visible before the content. A refresh over rows already read writes aria-busy and dims them without moving anything — a reader looking at row forty stays there.",
       "language": "tsx",
-      "source": "{\n  loading && rows.length === 0 ? (\n    <TableLoader skeletonRows={5} />\n  ) : rows.length === 0 ? (\n    <TableBody>\n      <TableRow>\n        <TableEmpty>\n          <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n        </TableEmpty>\n      </TableRow>\n    </TableBody>\n  ) : (\n    <TableBody>{rows}</TableBody>\n  );\n}\n",
+      "source": "{\n  loading && rows.length === 0 ? (\n    <TableLoader skeletonRows={5} />\n  ) : rows.length === 0 ? (\n    <TableBody>\n      <TableEmpty>\n        <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n      </TableEmpty>\n    </TableBody>\n  ) : (\n    <TableBody>{rows}</TableBody>\n  );\n}\n",
       "verdict": "excerpt"
     },
     {
@@ -987,7 +1076,7 @@
       "title": "empty.tsx",
       "note": null,
       "language": "tsx",
-      "source": "import {\n  ResultState,\n  ResultStateContent,\n  ResultStateDescription,\n  ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n  Table,\n  TableBody,\n  TableColumnHeader,\n  TableContent,\n  TableEmpty,\n  TableHead,\n  TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Returns this week\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Return</TableColumnHeader>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Refund</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          <TableRow>\n            <TableEmpty>\n              <ResultState status=\"empty\">\n                <ResultStateContent>\n                  <ResultStateTitle>No returns this week</ResultStateTitle>\n                  <ResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </ResultStateDescription>\n                </ResultStateContent>\n              </ResultState>\n            </TableEmpty>\n          </TableRow>\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "source": "import {\n  ResultState,\n  ResultStateContent,\n  ResultStateDescription,\n  ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n  Table,\n  TableBody,\n  TableColumnHeader,\n  TableContent,\n  TableEmpty,\n  TableHead,\n  TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Returns this week\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Return</TableColumnHeader>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Refund</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          <TableEmpty>\n            <ResultState status=\"empty\">\n              <ResultStateContent>\n                <ResultStateTitle>No returns this week</ResultStateTitle>\n                <ResultStateDescription>\n                  Returns appear here as soon as a customer opens one from their order page.\n                </ResultStateDescription>\n              </ResultStateContent>\n            </ResultState>\n          </TableEmpty>\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
       "verdict": "example"
     },
     {

package/dist/docs/table.md

@@ -19,6 +19,7 @@ import {
   TableEmpty,
   TableExpander,
   TableFooter,
+  TableGroupRow,
   TableHead,
   TableLoader,
   TableRow,
@@ -160,6 +161,11 @@ export default function TableBasic() {
 | `selection` | th or td | no |
 | `expander` | button | no |
 | `detail` | tr | no |
+| `group-row` | tr | no |
+| `group-header` | th | no |
+| `group-content` | div | no |
+| `group-start` | span | no |
+| `group-end` | span | no |
 | `empty` | td | no |
 | `loader` | tbody | no |
 
@@ -174,6 +180,7 @@ export default function TableBasic() {
 | `expanded` | `readonly string[]` | — | Table | The rows whose detail is open. Present means you own it. |
 | `defaultExpanded` | `readonly string[]` | [] | Table | The details an uncontrolled table starts with |
 | `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | Table | How much of a frame the set is given |
+| `edges` | `'inset' \| 'flush'` | inset | Table | Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets |
 | `striped` | `boolean` | false | Table | A tinted ground on every second record |
 | `stickyHeader` | `boolean` | false | Table | Whether the header stays while the body scrolls |
 | `stickyFooter` | `boolean` | false | Table | Whether the summary rows stay while the body scrolls. It pins the tfoot and not the footer bar, which never scrolls. |
@@ -199,12 +206,17 @@ export default function TableBasic() {
 | `value` | `string` | — | TableRow | The record key the selection and the expansion are held by |
 | `disabled` | `boolean` | false | TableRow | A record the reader may not choose; it leaves the set the header covers |
 | `rowIndex` | `number` | — | TableRow | The record position in the whole set, written as aria-rowindex |
+| `current` | `boolean` | false | TableRow | The record open elsewhere on the page, a detail pane beside the table, written as aria-current |
+| `interactive` | `boolean` | true with onAction | TableRow | Paints the row as a thing the pointer presses |
+| `onAction` | `(event) => void` | — | TableRow | A click anywhere in the row that lands on no control of its own; the first link or button in the row is the keyboard way in |
+| `end` | `ReactNode` | — | TableGroupRow | What stands at the end of the band: the total or net of the group |
 | `column` | `string` | — | TableColumnHeader, TableSort | The column key the sort descriptor names |
 | `align` | `'start' \| 'center' \| 'end'` | start | the three cell parts | Which edge the value stands on, resolved logically |
 | `numeric` | `boolean` | false | the three cell parts | Tabular figures, and the end edge unless align says otherwise |
 | `blockAlign` | `'start' \| 'center' \| 'end'` | center | the three cell parts and both selection cells | Where this cell content sits in its row, overriding the table own cellAlign |
 | `text` | `'wrap' \| 'truncate' \| 'nowrap'` | wrap | the three cell parts | What a value longer than its column does |
 | `sticky` | `'start' \| 'end'` | start | the three cell parts and both selection cells | Which edge the column is pinned to while the table scrolls past it |
+| `sticky` | `boolean` | false | TableGroupRow | Holds the band under the header while its rows scroll past |
 | `stickyOffset` | `string` | 0 | the three cell parts and both selection cells | Where the pinned column stops, as a CSS length. Two columns pinned to the same edge need the second to state how wide the first is — beside a selection column that is --slotted-table-selection-size, which is 3rem. |
 | `colSpan` | `number` | — | TableDetail, TableEmpty | How many columns the part spans, defaulting to the table own count |
 | `render` | `(props) => ReactNode` | — | Table, TableRow, TableSort | Substitutes the rendered element, keeping every data attribute |
@@ -227,6 +239,7 @@ export default function TableBasic() {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `plain`, `ruled`, `framed` | `ruled` |
+| `edges` | `inset`, `flush` | `inset` |
 | `striped` | `true`, `false` | `false` |
 | `stickyHeader` | `true`, `false` | `false` |
 | `stickyFooter` | `true`, `false` | `false` |
@@ -254,7 +267,7 @@ export default function TableBasic() {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--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-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-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-hover`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--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-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-edge-inset`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-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-z-index-sticky`
 
 ## Examples
 

package/dist/docs/tabs.examples.md

@@ -377,7 +377,7 @@ export default function TabsOverflow() {
 
 ### A view a router can deep-link to
 
-href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.
+href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab. usePressSelection paints the press before the route renders: the tab is selected at once, and the navigation runs after the frame that shows it.
 
 Example
 

package/dist/docs/tabs.json

@@ -78,6 +78,7 @@
         "label",
         "end",
         "dismiss",
+        "marker",
         "panel",
         "scroll",
         "actions"
@@ -106,7 +107,7 @@
           "part": "item",
           "element": "div[role=\"presentation\"], or the element the render of Tab returns",
           "required": true,
-          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and because the marker spans the tab and its close button together. className and style reach it."
+          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and it carries the hover bar under the tab. className and style reach it."
         },
         {
           "part": "tab",
@@ -138,6 +139,12 @@
           "required": false,
           "purpose": "The close button. It has tabindex=\"-1\", so the arrow keys move between tabs only, and it stays in the accessibility tree, so a screen reader can press it. From the keyboard, Delete closes the focused tab, which aria-keyshortcuts on the tab announces."
         },
+        {
+          "part": "marker",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The bar under the selected tab. The list draws one and slides it between tabs; it spans the tab’s content box, never the close button. --slotted-tabs-marker-size, --slotted-tabs-marker-radius, --slotted-tabs-marker-inset and --slotted-tabs-marker-offset (1px above the list’s edge) shape it, and the hover bar takes the same geometry at --slotted-tabs-hover-marker-opacity."
+        },
         {
           "part": "panel",
           "element": "div[role=\"tabpanel\"]",
@@ -221,6 +228,13 @@
           "appliesTo": "Tabs, TabsDefaultsProvider",
           "description": "When a panel’s content exists: only while its tab is selected (active), from its first selection on (lazy), or from the start (eager). A panel that is not selected carries the hidden attribute."
         },
+        {
+          "name": "deferPanels",
+          "type": "boolean",
+          "defaultValue": "true under mount=\"active\", false otherwise",
+          "appliesTo": "Tabs",
+          "description": "Whether the panels render from useDeferredValue(value). The selected tab paints in the click’s frame and its panel renders after it; until it is ready the panel on screen stays, with aria-busy and data-pending. A panel that suspends keeps the shown one when its Suspense boundary is outside Tabs; a boundary inside the new panel shows its own fallback."
+        },
         {
           "name": "loop",
           "type": "boolean",
@@ -319,7 +333,7 @@
           "type": "() => TabsContextValue",
           "defaultValue": "—",
           "appliesTo": "inside Tabs",
-          "description": "What a tab and a panel read: the value, the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. It throws outside Tabs instead of rendering a control that looks right and does nothing."
+          "description": "What a tab and a panel read: the value, shownValue (the value the panels render, deferred under deferPanels), the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. A region rendered outside the panels — a page header’s tab with controls= — renders from shownValue. It throws outside Tabs instead of rendering a control that looks right and does nothing."
         },
         {
           "name": "TabsDefaultsProvider",
@@ -354,13 +368,14 @@
         }
       ],
       "accessibility": [
+        "Selecting a tab never waits for its panel: keep value urgent and render the region from useDeferredValue(value), which deferPanels does for the panels and useTabs().shownValue hands a region outside them. Wrapping the setter in startTransition delays the marker too.",
         "Tabs implements the WAI-ARIA APG Tabs pattern (w3.org/WAI/ARIA/apg/patterns/tabs/) and its whole keyboard table: Tab enters the list on the selected tab and leaves to the panel, the arrow keys of the list’s direction move focus and wrap at both ends, Home and End reach the first and last enabled tab, Enter and Space select under manual activation, and Delete closes a dismissible tab. A horizontal list does not listen for Up and Down, so those keys keep scrolling the page while focus is in the list.",
         "After a dismissal, focus follows the pattern: the next tab, the previous one when the closed tab was last, or the list itself when no tab is left, which is why the list carries tabindex=\"-1\". The selection follows the same rule, with the reason remove.",
         "The close button is outside the arrow-key sequence and inside the accessibility tree. A screen reader reaches and presses it; from the keyboard, Delete closes the focused tab, and the tab announces the key with aria-keyshortcuts. In the arrow-key sequence, close buttons would double the presses it takes to cross the list.",
         "The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.",
         "A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.",
         "Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.",
-        "The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
+        "The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
         "A panel carries tabindex=\"0\", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable."
       ]
     }
@@ -398,14 +413,15 @@
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
     "--slotted-duration-short",
     "--slotted-easing-enter",
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-radius-full",
     "--slotted-radius-md",
     "--slotted-radius-sm",
-    "--slotted-radius-xs",
     "--slotted-shadow-xs",
     "--slotted-space-1",
     "--slotted-space-2",
@@ -429,21 +445,23 @@
     "--slotted-tabs-hover-background",
     "--slotted-tabs-hover-color",
     "--slotted-tabs-hover-marker-color",
+    "--slotted-tabs-hover-marker-opacity",
     "--slotted-tabs-list-gap",
     "--slotted-tabs-marker-color",
+    "--slotted-tabs-marker-easing",
+    "--slotted-tabs-marker-inset",
+    "--slotted-tabs-marker-offset",
+    "--slotted-tabs-marker-radius",
+    "--slotted-tabs-marker-size",
     "--slotted-tabs-scroll-color",
     "--slotted-tabs-selected-color",
     "--slotted-tabs-track-color",
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
-    "--slotted-text-inverse",
     "--slotted-text-muted",
     "--slotted-tone-accent-solid",
     "--slotted-tone-accent-text",
-    "--slotted-tone-danger-border",
-    "--slotted-tone-danger-surface",
-    "--slotted-tone-danger-text",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],
@@ -531,7 +549,7 @@
     {
       "id": "links",
       "title": "A view a router can deep-link to",
-      "note": "href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.",
+      "note": "href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab. usePressSelection paints the press before the route renders: the tab is selected at once, and the navigation runs after the frame that shows it.",
       "language": "tsx",
       "source": "import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst VIEWS = [\n  { value: 'summary', label: 'Summary', panel: 'Harbor & Pine, $1,240.00, Net 30.' },\n  { value: 'items', label: 'Items', panel: '3 lines: shelves, brackets and an assembly kit.' },\n  { value: 'shipments', label: 'Shipments', panel: 'Atlas Freight, expected September 12.' },\n];\n\nexport default function TabsLinks() {\n  return (\n    <Tabs defaultValue=\"summary\">\n      <TabList aria-label=\"Order SO-1187\">\n        {VIEWS.map((view) => (\n          <Tab key={view.value} href={`#order-${view.value}`} value={view.value}>\n            {view.label}\n          </Tab>\n        ))}\n      </TabList>\n      {VIEWS.map((view) => (\n        <TabPanel key={view.value} value={view.value}>\n          <Text size=\"sm\">{view.panel}</Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
       "verdict": "example"