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

package/docs/skills/waiting-states/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: waiting-states
+description: Use when building or reviewing anything a person waits in front of in an application built with @slotted/angular — placeholders, a control's own loading state, a loading overlay, a progress indicator, or the empty and error states beside them. Decides which indicator answers which wait and how placeholders are built from the anatomy they stand in for.
+---
+
+# Waiting states
+
+A waiting state is a screen the reader sees, not a gap in one. It is built from
+the anatomy it stands in for, and it is finished when the loaded screen and the
+pending screen occupy the same boxes.
+
+The failure this skill prevents: three grey bars of equal length where a table,
+a card and a list should have been.
+
+Rules cited here are in `../../guidelines/async-feedback.md`. Each family
+named here has its page: `../../<family>.md`.
+
+## 1. Which indicator answers which wait
+
+Answer in order and stop at the first row that decides.
+
+| The wait                                                                                                         | The indicator                                                                                                         |
+| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| Structure is known before the data arrives — a list, a table, a card, a form                                     | `skeleton` placeholders                                                                                               |
+| Data already on screen is read again for the whole page — a Refresh, a refetch after a write, a refetch on focus | the `page-header` progress part in the page header; the region keeps its items and no control draws its own indicator |
+| A control started the request and stays on screen — a button, a field, a menu item                               | that family's own `loading` state                                                                                     |
+| A region already painted is being replaced and must not be touched meanwhile                                     | `loading-overlay`                                                                                                     |
+| The work reports how much is done                                                                                | `progress-indicator` with a value                                                                                     |
+| Nothing above: duration unknown, structure unknown, area small                                                   | `progress-indicator` in its `indeterminate` state                                                                     |
+
+Two indicators never answer the same wait in the same region. Placeholders
+under an overlay, an indeterminate indicator inside placeholders, and a
+progress indicator over a control that already waits are each one indicator
+too many.
+
+A region that already shows items is busy, not pending: it keeps its items,
+carries `aria-busy`, and swaps them when the newer answer arrives (AF-02,
+AF-07). Replacing read content with placeholders on every refresh is how a
+screen flickers. A change of view or page is different: the rows on screen are
+removed and placeholders stand in their place (AF-04).
+
+A control that starts a request waits on it: it is in its `loading` state from
+activation until the answer, refuses a second activation and shows the
+family's indicator (AF-03).
+
+## 2. Placeholders are the anatomy, not rectangles
+
+Placeholders are the same layout as the content, drawn in one colour. Build
+them from the loaded markup:
+
+1. Keep the container, the parts, the grid, the inset and the gap tokens the
+   loaded content uses. Copy the structure; replace only what carries data.
+2. Text becomes `skeleton` text lines at the same type size, so the reserved
+   height is the height the text will take.
+3. Media — avatar, thumbnail, chart — becomes a shape of its own measured box.
+4. Repetition takes the real count: a list reserves the rows its first page
+   returns, a table reserves its columns at their real widths, a card reserves
+   the avatar and the two lines that card holds.
+5. Stop where the reader stops. A row's badge, a trailing icon and a caption
+   belong to the loaded row, not to its placeholder.
+
+Line lengths vary the way text varies: the last line of a paragraph is short,
+a name is shorter than a description. A stack of bars of equal length is the
+defect this section names.
+
+### What never gets placeholders
+
+Chrome that is already painted renders with its real content: the application
+bar, the navigation column, the page header's title, a toolbar, a tab strip, a
+section heading. Only what is being fetched is reserved. An action nobody can
+press yet is absent, not drawn as a placeholder.
+
+## 3. The test: nothing moves
+
+The pending state and the loaded state occupy the same boxes. Capture both at
+the same width, in the same scheme, and compare their bounding boxes: any box
+that moves between them is a defect.
+
+Where the two cannot match exactly — an unknown number of rows, a description
+of unknown length — reserve the smaller of the two and let the content grow
+downward, never a box that shrinks.
+
+## 4. Timing
+
+- A region's placeholders appear at once; they are never delayed (AF-05).
+- A control's indicator may wait for the family's `loadingDelay`, so a request
+  that answers first shows no indicator; the control still refuses a second
+  activation (AF-05).
+- Once painted, placeholders stay for one minimum duration the application
+  states once for the whole product — the `minDuration` of `skeleton` and
+  `loading-overlay` — even when the answer has already arrived (AF-06).
+
+## 5. Announcement and focus
+
+- Placeholders are out of the accessibility tree. They describe nothing; the
+  region says what is happening.
+- One announcement per region, `polite`, once — not one per placeholder.
+  `skeleton` and `loading-overlay` announce through their `live` axis, `polite`
+  by default: keep it on the one that stands for the region and set it to `off`
+  on every other placeholder in that region.
+- The region carries `aria-busy` while it waits and drops it when the answer
+  arrives.
+- Focus does not move, on entry or on arrival. Content that lands under the
+  reader's focus does not take it, and a placeholder never holds a tab stop.
+
+## 6. Motion
+
+One shimmer per region, from the family's own animation, not one per bar.
+Under `prefers-reduced-motion: reduce` the animation stops and the reserved
+shape stays.
+
+## 7. Pending, empty and error are three states
+
+| State      | What it says                              | What it offers                            |
+| ---------- | ----------------------------------------- | ----------------------------------------- |
+| Pending    | the answer is coming                      | nothing to press                          |
+| Empty      | an answer arrived and it holds zero items | the action that creates the first one     |
+| No results | the filter excluded everything            | clearing the filter                       |
+| Error      | the answer did not arrive                 | retry; the data that is still valid stays |
+
+The empty state appears only after an answer holding zero items, never while
+the first answer is pending (AF-01). Empty, no results and error are drawn by
+`result-state`. An error replaces the indicator; it never leaves placeholders
+animating behind a message.
+
+## 8. Before calling a wait done
+
+- [ ] The indicator matches the wait, by the table in section 1, and there is
+      only one.
+- [ ] Placeholders mirror the anatomy: same parts, same grid, same tokens, real
+      counts.
+- [ ] Loaded and pending captured at the same width: no box moves.
+- [ ] Line lengths vary; no stack of equal bars.
+- [ ] Chrome that already exists is painted with its real content.
+- [ ] Placeholders are not delayed; the minimum duration is stated once.
+- [ ] One polite announcement per region, `aria-busy` on the region, focus
+      untouched.
+- [ ] Reduced motion stops the animation and keeps the shape.
+- [ ] Empty, no results and error are distinct states, each with its next step.
+- [ ] For each control that writes, the regions on any screen whose figures
+      the write changes are listed, and each is shown read again after the
+      write (AF-08).
+- [ ] Each `Check` of AF-01 to AF-08 passes.

package/docs/sparkline.json

@@ -24,6 +24,7 @@
       "neutral",
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -193,7 +194,7 @@
         },
         {
           "name": "tone",
-          "type": "'neutral' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'neutral' | 'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "—",
           "appliesTo": "Sparkline",
           "description": "How the series is doing. Wins over series; unset, a container may decide"
@@ -329,6 +330,7 @@
     "--slotted-sparkline-marker-size",
     "--slotted-sparkline-marker-size-lg",
     "--slotted-sparkline-marker-size-sm",
+    "--slotted-sparkline-min-inline-size",
     "--slotted-sparkline-reference-color",
     "--slotted-sparkline-ring-color",
     "--slotted-sparkline-ring-width",
@@ -337,6 +339,7 @@
     "--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"
@@ -369,7 +372,7 @@
     {
       "id": "tone",
       "title": "How the series is doing",
-      "note": "A tone paints the line in the tone’s text colour: success for an error rate that fell, danger for a lead time that grew, neutral for the comparison series behind a current one. Without a tone the line is the first slot of the data scale, the theme’s own blue.",
+      "note": "A tone paints the line in the tone’s text colour: success for an error rate that fell, danger for a lead time that grew, neutral for the comparison series behind a current one. Without a tone the line is the first slot of the data scale, the accent’s own hue.",
       "language": "html",
       "source": "<span slSparkline [data]=\"errorRate\" label=\"Error rate\" tone=\"success\"></span>\n<span slSparkline [data]=\"leadTime\" label=\"Lead time\" tone=\"danger\"></span>\n<span slSparkline [data]=\"lastQuarter\" label=\"Last quarter\" tone=\"neutral\"></span>\n",
       "verdict": "excerpt"

package/docs/sparkline.md

@@ -45,7 +45,7 @@ Excerpt — not a complete module
 | `reference` | `number` | — | Sparkline | A dashed hairline at this value. Widens the extent to hold it |
 | `min` | `number` | — | Sparkline | The lowest value the extent must hold. The data widens the extent, never narrows it |
 | `max` | `number` | — | Sparkline | The highest value the extent must hold |
-| `tone` | `'neutral' \| 'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | — | Sparkline | How the series is doing. Wins over series; unset, a container may decide |
+| `tone` | `'neutral' \| 'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | Sparkline | How the series is doing. Wins over series; unset, a container may decide |
 | `series` | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8` | — | Sparkline | Which series this is, as a slot of the data scale. Unset, a container decides, then slot 1 |
 | `label` | `string` | — | Sparkline | What the series is, said first in the description |
 | `description` | `string` | — | Sparkline | The whole accessible name, in place of the generated one |
@@ -66,7 +66,7 @@ Excerpt — not a complete module
 | `type` | `line`, `bar` | `line` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `curve` | `linear`, `monotone` | `linear` |
-| `tone` | `neutral`, `accent`, `secondary`, `success`, `warning`, `danger` | — |
+| `tone` | `neutral`, `accent`, `secondary`, `info`, `success`, `warning`, `danger` | — |
 | `series` | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8` | — |
 
 ## Rules
@@ -80,7 +80,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-width-medium`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-data-1`, `--slotted-data-2`, `--slotted-data-3`, `--slotted-data-4`, `--slotted-data-5`, `--slotted-data-6`, `--slotted-data-7`, `--slotted-data-8`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-space-11`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-7`, `--slotted-space-9`, `--slotted-sparkline-area-opacity`, `--slotted-sparkline-bar-share`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-sparkline-color`, `--slotted-sparkline-line-width`, `--slotted-sparkline-line-width-sm`, `--slotted-sparkline-marker-size`, `--slotted-sparkline-marker-size-lg`, `--slotted-sparkline-marker-size-sm`, `--slotted-sparkline-reference-color`, `--slotted-sparkline-ring-color`, `--slotted-sparkline-ring-width`, `--slotted-sparkline-ring-width-sm`, `--slotted-surface-raised`, `--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-strong`, `--slotted-border-width-medium`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-data-1`, `--slotted-data-2`, `--slotted-data-3`, `--slotted-data-4`, `--slotted-data-5`, `--slotted-data-6`, `--slotted-data-7`, `--slotted-data-8`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-space-11`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-7`, `--slotted-space-9`, `--slotted-sparkline-area-opacity`, `--slotted-sparkline-bar-share`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-sparkline-color`, `--slotted-sparkline-line-width`, `--slotted-sparkline-line-width-sm`, `--slotted-sparkline-marker-size`, `--slotted-sparkline-marker-size-lg`, `--slotted-sparkline-marker-size-sm`, `--slotted-sparkline-min-inline-size`, `--slotted-sparkline-reference-color`, `--slotted-sparkline-ring-color`, `--slotted-sparkline-ring-width`, `--slotted-sparkline-ring-width-sm`, `--slotted-surface-raised`, `--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
 
@@ -111,7 +111,7 @@ Excerpt — not a complete module
 
 ### How the series is doing
 
-A tone paints the line in the tone’s text colour: success for an error rate that fell, danger for a lead time that grew, neutral for the comparison series behind a current one. Without a tone the line is the first slot of the data scale, the theme’s own blue.
+A tone paints the line in the tone’s text colour: success for an error rate that fell, danger for a lead time that grew, neutral for the comparison series behind a current one. Without a tone the line is the first slot of the data scale, the accent’s own hue.
 
 Excerpt — not a complete module
 

package/docs/split-button.json

@@ -10,6 +10,8 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
+      "info",
       "success",
       "warning",
       "danger"
@@ -90,7 +92,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "accent",
           "appliesTo": "slSplitButton",
           "description": "The tone both halves are painted in. Resolved from the prop, then SplitButtonDefaultsProvider, then button’s own provider, then the contract"
@@ -272,6 +274,7 @@
     "--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"

package/docs/split-button.md

@@ -49,7 +49,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | accent | slSplitButton | 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 | slSplitButton | 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 | slSplitButton | 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 | slSplitButton | The control step. The trigger is square from the same height |
 | `fullWidth` | `boolean` | false | slSplitButton | Whether the action takes the whole line. The trigger stays square either way |
@@ -83,7 +83,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` |
 
@@ -97,7 +97,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/docs/stat-card.json

@@ -36,6 +36,7 @@
       "neutral",
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -238,7 +239,7 @@
         },
         {
           "name": "tone",
-          "type": "'neutral' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'neutral' | 'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "—",
           "appliesTo": "slStatCard, slStatCardDelta",
           "description": "An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline"
@@ -356,6 +357,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",
@@ -428,10 +430,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/docs/stat-card.md

@@ -73,7 +73,7 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | slStatCard | The value is on its way: every part stands in with a placeholder and the root is aria-busy |
 | `goodWhen` | `'up' \| 'down' \| 'none'` | up | slStatCard, slStatCardDelta | Which way is good for this metric. The tone of a change is derived from it, never from the sign |
 | `delta` | `number` | — | slStatCard | 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'` | — | slStatCard, slStatCardDelta | 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'` | — | slStatCard, slStatCardDelta | An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline |
 | `locale` | `string` | — | slStatCard | BCP 47, for every number the card formats; the language in force when absent |
 | `formatOptions` | `Intl.NumberFormatOptions` | — | slStatCard, slStatCardValue, slStatCardDelta | How a number is written. On the root, the default for the value and the delta |
 | `messages` | `Partial<StatCardMessages>` | — | slStatCard | 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 |
@@ -96,7 +96,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
@@ -110,7 +110,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/docs/table.examples.md

@@ -742,7 +742,7 @@ export class 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
 
@@ -1128,7 +1128,7 @@ Excerpt — not a complete module
   <tbody slTableLoader [skeletonRows]="5"></tbody>
 } @else if (rows().length === 0) {
   <tbody slTableBody>
-    <tr slTableRow>
+    <tr>
       <td slTableEmpty>
         <section slResultState status="no-results"></section>
       </td>
@@ -1376,7 +1376,7 @@ import {
           </tr>
         </thead>
         <tbody slTableBody>
-          <tr slTableRow>
+          <tr>
             <td slTableEmpty>
               <section slResultState status="empty">
                 <div slResultStateContent>

package/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"
@@ -321,6 +332,36 @@
           "required": false,
           "purpose": "The open row detail, one cell spanning every column. Control flow in the template keeps a closed one out of the DOM, which a host element cannot do for itself."
         },
+        {
+          "part": "group-row",
+          "element": "tr[slTableGroupRow]",
+          "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, the element marked slTableGroupRowEnd: the total or net of the group, in tabular figures."
+        },
         {
           "part": "empty",
           "element": "td[slTableEmpty]",
@@ -384,6 +425,13 @@
           "appliesTo": "slTable",
           "description": "How much of a frame the set is given"
         },
+        {
+          "name": "edges",
+          "type": "'inset' | 'flush'",
+          "defaultValue": "inset",
+          "appliesTo": "slTable",
+          "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",
@@ -566,6 +614,27 @@
           "appliesTo": "slTableRow",
           "description": "The record position in the whole set, written as aria-rowindex"
         },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTableRow",
+          "description": "The record open elsewhere on the page, a detail pane beside the table, written as aria-current"
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTableRow",
+          "description": "Paints the row as a thing the pointer presses; stated beside (action)"
+        },
+        {
+          "name": "(action)",
+          "type": "MouseEvent",
+          "defaultValue": "—",
+          "appliesTo": "slTableRow",
+          "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": "column",
           "type": "string",
@@ -608,6 +677,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": "slTableGroupRow",
+          "description": "Holds the band under the header while its rows scroll past; the end of the band is the element marked slTableGroupRowEnd"
+        },
         {
           "name": "stickyOffset",
           "type": "string",
@@ -745,15 +821,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",
@@ -771,6 +852,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"
   ],
@@ -898,7 +980,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": "ts",
       "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSummary,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-table-sticky',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSummary,\n  ],\n  template: `\n    <div slTable [columns]=\"4\" stickyFooter stickyHeader>\n      <div slTableContent aria-label=\"September orders\" style=\"max-block-size: 20rem\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Warehouse</th>\n            <th slTableColumnHeader numeric>Total</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders; track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>{{ order.warehouse }}</td>\n              <td slTableCell numeric>{{ usd.format(order.total) }}</td>\n            </tr>\n          }\n        </tbody>\n        <tfoot slTableSummary>\n          <tr slTableRow>\n            <td slTableCell [attr.colspan]=\"3\">{{ orders.length }} orders</td>\n            <td slTableCell numeric>{{ usd.format(total) }}</td>\n          </tr>\n        </tfoot>\n      </div>\n    </div>\n  `,\n})\nexport class TableSticky {\n  readonly orders = ORDERS;\n  readonly total = ORDERS.reduce((sum, order) => sum + order.total, 0);\n  readonly usd = USD;\n}\n",
       "verdict": "example"
@@ -940,7 +1022,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": "html",
-      "source": "@if (loading() && rows().length === 0) {\n  <tbody slTableLoader [skeletonRows]=\"5\"></tbody>\n} @else if (rows().length === 0) {\n  <tbody slTableBody>\n    <tr slTableRow>\n      <td slTableEmpty>\n        <section slResultState status=\"no-results\"></section>\n      </td>\n    </tr>\n  </tbody>\n} @else {\n  <tbody slTableBody></tbody>\n}\n",
+      "source": "@if (loading() && rows().length === 0) {\n  <tbody slTableLoader [skeletonRows]=\"5\"></tbody>\n} @else if (rows().length === 0) {\n  <tbody slTableBody>\n    <tr>\n      <td slTableEmpty>\n        <section slResultState status=\"no-results\"></section>\n      </td>\n    </tr>\n  </tbody>\n} @else {\n  <tbody slTableBody></tbody>\n}\n",
       "verdict": "excerpt"
     },
     {
@@ -1004,7 +1086,7 @@
       "title": "empty.ts",
       "note": null,
       "language": "ts",
-      "source": "import { Component } from '@angular/core';\nimport {\n  SlResultState,\n  SlResultStateContent,\n  SlResultStateDescription,\n  SlResultStateTitle,\n} from '@slotted/angular/result-state';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableEmpty,\n  SlTableHead,\n  SlTableRow,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-table-empty',\n  imports: [\n    SlResultState,\n    SlResultStateContent,\n    SlResultStateDescription,\n    SlResultStateTitle,\n    SlTable,\n    SlTableBody,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableEmpty,\n    SlTableHead,\n    SlTableRow,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Returns this week\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Return</th>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Refund</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          <tr slTableRow>\n            <td slTableEmpty>\n              <section slResultState status=\"empty\">\n                <div slResultStateContent>\n                  <h3 slResultStateTitle>No returns this week</h3>\n                  <p slResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </p>\n                </div>\n              </section>\n            </td>\n          </tr>\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableEmptyExample {}\n",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlResultState,\n  SlResultStateContent,\n  SlResultStateDescription,\n  SlResultStateTitle,\n} from '@slotted/angular/result-state';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableEmpty,\n  SlTableHead,\n  SlTableRow,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-table-empty',\n  imports: [\n    SlResultState,\n    SlResultStateContent,\n    SlResultStateDescription,\n    SlResultStateTitle,\n    SlTable,\n    SlTableBody,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableEmpty,\n    SlTableHead,\n    SlTableRow,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Returns this week\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Return</th>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Refund</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          <tr>\n            <td slTableEmpty>\n              <section slResultState status=\"empty\">\n                <div slResultStateContent>\n                  <h3 slResultStateTitle>No returns this week</h3>\n                  <p slResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </p>\n                </div>\n              </section>\n            </td>\n          </tr>\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableEmptyExample {}\n",
       "verdict": "example"
     },
     {