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

package/README.md

@@ -47,6 +47,10 @@ export const appConfig = {
 };
 ```
 
+## Agents
+
+`docs/AGENTS.snippet.md` is the section an application adds to the instructions its coding agent reads: `AGENTS.md`, or `CLAUDE.md` for Claude Code, directly or through `@AGENTS.md`. It points the agent at the family pages, the guidelines and the skills of the installed version.
+
 ## License
 
 MIT

package/docs/AGENTS.snippet.md

@@ -8,3 +8,13 @@ Before writing or changing UI, read `node_modules/@slotted/angular/docs/index.md
 - Change a family's appearance through its inputs (`size`, `variant`, `tone` where it has them), not with CSS that targets its parts.
 - Application CSS uses `var(--slotted-*)` tokens for color, spacing and radius, inside a layer declared after the library's: `@layer slotted, app;`.
 - In CSS and tests, select a family by `[data-ui="<family>"]` and its parts by `[data-part="<part>"]`.
+
+### Tasks
+
+Read the skill before the task:
+
+- Compose or change a screen — a list, a record, a form, an overview: `node_modules/@slotted/angular/docs/skills/compose-screen/SKILL.md`
+- Show what a screen draws while it waits, and its empty and error states: `node_modules/@slotted/angular/docs/skills/waiting-states/SKILL.md`
+- Review a screen against the guidelines, or fix what a review found: `node_modules/@slotted/angular/docs/skills/review-screen/SKILL.md`
+- Write a component or element that no family draws: `node_modules/@slotted/angular/docs/skills/build-own-element/SKILL.md`
+- Change the brand colour, the scheme, the density or a control's shape: `node_modules/@slotted/angular/docs/skills/theme-app/SKILL.md`

package/docs/app-shell.json

@@ -196,7 +196,7 @@
           "part": "nav",
           "element": "nav",
           "required": false,
-          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
+          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. Its inline axis clips and its block axis scrolls, so a single column taller than the region keeps its foot reachable. A footer that must stay visible goes in nav-footer, between nav-header and a nav-body that scrolls. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
         },
         {
           "part": "nav-rail",

package/docs/button-group.json

@@ -133,6 +133,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-solid-active",
     "--slotted-tone-danger-solid-active",
+    "--slotted-tone-neutral-solid-active",
     "--slotted-tone-secondary-solid-active",
     "--slotted-tone-success-solid-active",
     "--slotted-tone-warning-solid-active"

package/docs/button-group.md

@@ -50,7 +50,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-text-muted`, `--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-text-muted`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-neutral-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
 
 ## Examples
 

package/docs/button.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
       "success",
       "warning",
       "danger"
@@ -27,6 +28,10 @@
     "shape": [
       "square",
       "circle"
+    ],
+    "justify": [
+      "center",
+      "between"
     ]
   },
   "members": {
@@ -38,6 +43,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -73,6 +79,7 @@
         "variant": "solid",
         "size": "md",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false
       },
       "capabilities": [
@@ -138,6 +145,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -182,7 +190,7 @@
           "part": "root",
           "element": "the button element you write",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled and data-loading when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width, data-disabled and data-loading when they apply."
         },
         {
           "part": "start",
@@ -212,10 +220,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "SlButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -252,6 +260,13 @@
           "appliesTo": "SlButton",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "SlButton",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -326,7 +341,7 @@
           "part": "root",
           "element": "the anchor element you write",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width and data-disabled when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width and data-disabled when they apply."
         },
         {
           "part": "start",
@@ -357,10 +372,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "SlButtonLink",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -397,6 +412,13 @@
           "appliesTo": "SlButtonLink",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "SlButtonLink",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -450,10 +472,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "SlIconButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -562,7 +584,7 @@
           "part": "root",
           "element": "the button element you write",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled, data-loading and data-pressed when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width, data-disabled, data-loading and data-pressed when they apply."
         },
         {
           "part": "start",
@@ -592,10 +614,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "SlToggleButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -632,6 +654,13 @@
           "appliesTo": "SlToggleButton",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "SlToggleButton",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -762,6 +791,11 @@
     "--slotted-tone-danger-solid-active",
     "--slotted-tone-danger-solid-hover",
     "--slotted-tone-danger-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-active",
+    "--slotted-tone-neutral-solid-hover",
+    "--slotted-tone-neutral-text",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid",
     "--slotted-tone-secondary-solid-active",

package/docs/button.md

@@ -90,12 +90,13 @@ export class ButtonBasic {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | SlButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | accent | SlButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | solid | SlButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | SlButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `[slButtonStart]` | — | SlButton | Content projected before the label, such as an icon, on the element you mark with slButtonStart. It mirrors in a right-to-left document. |
 | `end` | `[slButtonEnd]` | — | SlButton | Content projected after the label, on the element you mark with slButtonEnd. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | SlButton | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | SlButton | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | SlButton | Refuses the action and marks the control unavailable. On its own, it sets the native disabled property, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | SlButton | Keeps a disabled control in the tab sequence: aria-disabled replaces the native property, and activation is still refused. |
 | `loading` | `boolean` | false | SlButton | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -109,12 +110,13 @@ export class ButtonBasic {
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `href` | `string` | — | SlButtonLink | The destination. A disabled SlButtonLink does not render it. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | SlButtonLink | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | accent | SlButtonLink | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | solid | SlButtonLink | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | SlButtonLink | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `[slButtonStart]` | — | SlButtonLink | Content projected before the label, such as an icon, on the element you mark with slButtonStart. It mirrors in a right-to-left document. |
 | `end` | `[slButtonEnd]` | — | SlButtonLink | Content projected after the label, on the element you mark with slButtonEnd. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | SlButtonLink | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | SlButtonLink | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | SlButtonLink | Removes the href and refuses activation. The link stays focusable with role="link" and aria-disabled. |
 
 ### iconButton
@@ -122,7 +124,7 @@ export class ButtonBasic {
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `aria-label \| aria-labelledby` | `string` | required | SlIconButton | The accessible name. Required, because an icon supplies no text. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | SlIconButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | secondary | SlIconButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | ghost | SlIconButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | SlIconButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `shape` | `square \| circle` | square | SlIconButton | The corners of the control: square keeps the radius of the control scale, circle rounds it fully. Both are as wide as they are tall. |
@@ -140,12 +142,13 @@ export class ButtonBasic {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | SlToggleButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| success \| warning \| danger` | secondary | SlToggleButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | outline | SlToggleButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | SlToggleButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `[slButtonStart]` | — | SlToggleButton | Content projected before the label, such as an icon, on the element you mark with slButtonStart. It mirrors in a right-to-left document. |
 | `end` | `[slButtonEnd]` | — | SlToggleButton | Content projected after the label, on the element you mark with slButtonEnd. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | SlToggleButton | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | SlToggleButton | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | SlToggleButton | Refuses the action and marks the control unavailable. On its own, it sets the native disabled property, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | SlToggleButton | Keeps a disabled control in the tab sequence: aria-disabled replaces the native property, and activation is still refused. |
 | `loading` | `boolean` | false | SlToggleButton | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -160,10 +163,11 @@ export class ButtonBasic {
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent`, `secondary` |
+| `tone` | `accent`, `secondary`, `neutral`, `success`, `warning`, `danger` | `accent`, `secondary` |
 | `variant` | `solid`, `outline`, `ghost` | `solid`, `ghost`, `outline` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `shape` | `square`, `circle` | `square` |
+| `justify` | `center`, `between` | `center` |
 
 ## Rules
 
@@ -193,7 +197,7 @@ export class ButtonBasic {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-sm`, `--slotted-radius-full`, `--slotted-space-2`, `--slotted-target-min`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-sm`, `--slotted-radius-full`, `--slotted-space-2`, `--slotted-target-min`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-active`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-neutral-text`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/docs/chart.json

@@ -202,6 +202,7 @@
         "tooltip-marker",
         "tooltip-label",
         "tooltip-value",
+        "tooltip-note",
         "tooltip-total",
         "skeleton",
         "empty",
@@ -418,6 +419,12 @@
           "required": false,
           "purpose": "The value in the series’ format, with the share of the whole on a pie."
         },
+        {
+          "part": "tooltip-note",
+          "element": "div",
+          "required": false,
+          "purpose": "The label of an upright line on this category, under the title. A label the plot had no room to draw is read here."
+        },
         {
           "part": "tooltip-total",
           "element": "div",

package/docs/chart.md

@@ -62,6 +62,7 @@ Excerpt — not a complete module
 | `tooltip-marker` | span | no |
 | `tooltip-label` | span | no |
 | `tooltip-value` | span | no |
+| `tooltip-note` | div | no |
 | `tooltip-total` | div | no |
 | `skeleton` | div | no |
 | `empty` | div | no |

package/docs/checkbox.json

@@ -172,6 +172,13 @@
           "appliesTo": "SlCheckbox",
           "description": "Unset rather than false. Writes aria-invalid on the input and data-invalid on the root, which draws a thicker border in the danger tone."
         },
+        {
+          "name": "tabIndex",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SlCheckbox",
+          "description": "Written to the input as tabindex. A composite widget that owns the tab sequence, such as a data grid, passes -1 until the box’s cell is current. Unset leaves the native order."
+        },
         {
           "name": "required",
           "type": "boolean",

package/docs/checkbox.md

@@ -62,6 +62,7 @@ export class CheckboxBasic {}
 | `disabled` | `boolean` | from the form control, group or field, or false | SlCheckbox | Unset rather than false, so the box follows a disabled form control, then its checkbox group or field. Written to the input as the native attribute, which removes the box from the tab order and from form submission. |
 | `readOnly` | `boolean` | from the group or field, or false | SlCheckbox | Unset rather than false. A native checkbox has no readonly, so SlCheckbox refuses every change and writes aria-readonly. The box keeps its tab stop, its focus ring and its contrast, and its value is still submitted. |
 | `invalid` | `boolean` | from the group or field, or false | SlCheckbox | Unset rather than false. Writes aria-invalid on the input and data-invalid on the root, which draws a thicker border in the danger tone. |
+| `tabIndex` | `number` | — | SlCheckbox | Written to the input as tabindex. A composite widget that owns the tab sequence, such as a data grid, passes -1 until the box’s cell is current. Unset leaves the native order. |
 | `required` | `boolean` | — | the host element | The native attribute, read once as a static attribute and passed to the input unchanged; SlCheckbox never writes it. A field marks necessity with aria-required instead, because the native attribute turns on browser constraint validation. |
 | `name / value` | `string` | — / on | SlCheckbox | The native submission pair: a checked box submits value under name. Inside a checkbox group, a box without a name takes the group’s, and value is the entry the group’s selection holds. |
 | `exportAs="slCheckbox"` | `SlCheckbox` | — | a template | Reaches the component instance. Its inputElement is the input, whose own focus() and click() methods move focus and toggle the box. |

package/docs/currency-field.json

@@ -45,6 +45,10 @@
     "formatOn": [
       "change",
       "commit"
+    ],
+    "appearance": [
+      "control",
+      "display"
     ]
   },
   "members": {
@@ -61,7 +65,8 @@
         "formatOn": "change",
         "currencyDisplay": "symbol",
         "wheel": false,
-        "allowEmpty": false
+        "allowEmpty": false,
+        "appearance": "control"
       },
       "capabilities": [
         "value",
@@ -85,6 +90,7 @@
       ],
       "parts": [
         "root",
+        "symbol",
         "input",
         "start",
         "end",
@@ -115,6 +121,12 @@
           "required": true,
           "purpose": "The control. Holds the formatted amount, the identifier, aria-valuenow in major units and aria-valuetext as the reader sees it. It is type=\"text\" because type=\"number\" empties itself whenever the text is not a valid floating-point number. exportAs=\"slCurrencyFieldInput\" reaches inputElement, increment() and decrement()."
         },
+        {
+          "part": "symbol",
+          "element": "span",
+          "required": false,
+          "purpose": "The currency mark at the display appearance, drawn apart from the digits on the side the locale writes it, muted at the xl step. The input then holds the amount alone and its aria-valuetext carries the mark. Absent under currencyDisplay none and at the control appearance."
+        },
         {
           "part": "start",
           "element": "the element carrying slCurrencyFieldStart",
@@ -195,6 +207,13 @@
           "appliesTo": "slCurrencyField, provideCurrencyFieldDefaults",
           "description": "When the text takes the locale’s shape under entry=\"natural\". change regroups on every keystroke; commit holds the reader’s own text until blur, Enter or a step. Cents-first entry generates the text after every edit, so it decides nothing there"
         },
+        {
+          "name": "appearance",
+          "type": "'control' | 'display'",
+          "defaultValue": "control",
+          "appliesTo": "slCurrencyField",
+          "description": "A field among fields, or the headline amount of an entry sheet: the 4xl step, the mark apart and muted, a rule under the amount instead of a box. size and variant do not apply to display"
+        },
         {
           "name": "align",
           "type": "'end' | 'start'",
@@ -446,6 +465,7 @@
   },
   "tokens": [
     "--slotted-border-subtle",
+    "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
     "--slotted-control-font-family",
@@ -482,6 +502,7 @@
     "--slotted-currency-field-disabled-background",
     "--slotted-currency-field-disabled-border-color",
     "--slotted-currency-field-disabled-color",
+    "--slotted-currency-field-display-font-size",
     "--slotted-currency-field-hover-border-color",
     "--slotted-currency-field-icon-size-min",
     "--slotted-currency-field-invalid-border-color",
@@ -503,6 +524,9 @@
     "--slotted-currency-field-subtle-background",
     "--slotted-currency-field-subtle-border-color",
     "--slotted-currency-field-subtle-hover-background",
+    "--slotted-currency-field-symbol-color",
+    "--slotted-currency-field-symbol-font-size",
+    "--slotted-currency-field-underline-color",
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
@@ -510,10 +534,17 @@
     "--slotted-focus-ring-color-invalid",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-size-4xl",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-letter-spacing-tighter",
+    "--slotted-line-height-4xl",
     "--slotted-radius-none",
     "--slotted-radius-xs",
     "--slotted-space-1",
     "--slotted-space-2",
+    "--slotted-space-3",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/docs/currency-field.md

@@ -38,6 +38,7 @@ Excerpt — not a complete module
 | --- | --- | --- |
 | `root` | the element carrying slCurrencyField | yes |
 | `input` | input[slCurrencyFieldInput], as text with role="spinbutton" | yes |
+| `symbol` | span | no |
 | `start` | the element carrying slCurrencyFieldStart | no |
 | `end` | the element carrying slCurrencyFieldEnd | no |
 | `scrub` | any element carrying slCurrencyFieldScrub, inside an adornment | no |
@@ -55,6 +56,7 @@ Excerpt — not a complete module
 | `defaultValue` | `number \| null` | — | slCurrencyFieldInput | What an uncontrolled control starts from, read once. A Reactive Form writes over it through ControlValueAccessor |
 | `entry` | `'cents' \| 'natural'` | cents | slCurrencyFieldInput, provideCurrencyFieldDefaults | How the reader types. cents is the cash register: digits enter at the minor unit and shift left, the separator is never typed and the caret has one legal position. natural is the spreadsheet, and the model number-field uses. The frame paints what the control resolved |
 | `formatOn` | `'change' \| 'commit'` | change | slCurrencyField, provideCurrencyFieldDefaults | When the text takes the locale’s shape under entry="natural". change regroups on every keystroke; commit holds the reader’s own text until blur, Enter or a step. Cents-first entry generates the text after every edit, so it decides nothing there |
+| `appearance` | `'control' \| 'display'` | control | slCurrencyField | A field among fields, or the headline amount of an entry sheet: the 4xl step, the mark apart and muted, a rule under the amount instead of a box. size and variant do not apply to display |
 | `align` | `'end' \| 'start'` | end | slCurrencyField, provideCurrencyFieldDefaults | Which edge the amount is set against. end by default: a column of amounts is compared on its last digit, and the cents-first caret already lives there |
 | `locale` | `string` | the language in force | slCurrencyFieldInput | BCP 47. It decides the separators, where the symbol goes and the numbering system — never the symbol itself, which is the currency’s |
 | `format` | `Intl.NumberFormatOptions` | — | slCurrencyFieldInput | Any other Intl option: currencySign for accounting parentheses, signDisplay, useGrouping, roundingMode. Every key here wins over the family’s own; style and currency are the family’s |
@@ -107,6 +109,7 @@ Excerpt — not a complete module
 | `clamp` | `blur`, `strict`, `none` | `blur` |
 | `currencyDisplay` | `symbol`, `narrowSymbol`, `code`, `name`, `none` | `symbol` |
 | `formatOn` | `change`, `commit` | `change` |
+| `appearance` | `control`, `display` | `control` |
 
 ## Rules
 
@@ -121,7 +124,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-currency-field-action-size`, `--slotted-currency-field-adornment-color`, `--slotted-currency-field-background`, `--slotted-currency-field-border-color`, `--slotted-currency-field-color`, `--slotted-currency-field-disabled-background`, `--slotted-currency-field-disabled-border-color`, `--slotted-currency-field-disabled-color`, `--slotted-currency-field-hover-border-color`, `--slotted-currency-field-icon-size-min`, `--slotted-currency-field-invalid-border-color`, `--slotted-currency-field-invalid-edge-width`, `--slotted-currency-field-invalid-focus-ring-color`, `--slotted-currency-field-placeholder-color`, `--slotted-currency-field-plain-hover-background`, `--slotted-currency-field-radius`, `--slotted-currency-field-readonly-background`, `--slotted-currency-field-readonly-border-color`, `--slotted-currency-field-scrub-active-color`, `--slotted-currency-field-shadow`, `--slotted-currency-field-stepper-active-background`, `--slotted-currency-field-stepper-color`, `--slotted-currency-field-stepper-disabled-background`, `--slotted-currency-field-stepper-disabled-color`, `--slotted-currency-field-stepper-hover-background`, `--slotted-currency-field-stepper-size`, `--slotted-currency-field-subtle-background`, `--slotted-currency-field-subtle-border-color`, `--slotted-currency-field-subtle-hover-background`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-currency-field-action-size`, `--slotted-currency-field-adornment-color`, `--slotted-currency-field-background`, `--slotted-currency-field-border-color`, `--slotted-currency-field-color`, `--slotted-currency-field-disabled-background`, `--slotted-currency-field-disabled-border-color`, `--slotted-currency-field-disabled-color`, `--slotted-currency-field-display-font-size`, `--slotted-currency-field-hover-border-color`, `--slotted-currency-field-icon-size-min`, `--slotted-currency-field-invalid-border-color`, `--slotted-currency-field-invalid-edge-width`, `--slotted-currency-field-invalid-focus-ring-color`, `--slotted-currency-field-placeholder-color`, `--slotted-currency-field-plain-hover-background`, `--slotted-currency-field-radius`, `--slotted-currency-field-readonly-background`, `--slotted-currency-field-readonly-border-color`, `--slotted-currency-field-scrub-active-color`, `--slotted-currency-field-shadow`, `--slotted-currency-field-stepper-active-background`, `--slotted-currency-field-stepper-color`, `--slotted-currency-field-stepper-disabled-background`, `--slotted-currency-field-stepper-disabled-color`, `--slotted-currency-field-stepper-hover-background`, `--slotted-currency-field-stepper-size`, `--slotted-currency-field-subtle-background`, `--slotted-currency-field-subtle-border-color`, `--slotted-currency-field-subtle-hover-background`, `--slotted-currency-field-symbol-color`, `--slotted-currency-field-symbol-font-size`, `--slotted-currency-field-underline-color`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-4xl`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-letter-spacing-tighter`, `--slotted-line-height-4xl`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/docs/dialog.examples.md

@@ -622,6 +622,26 @@ Excerpt — not a complete module
 <button slButton variant="outline" [slDialogTrigger]="d">Edit project</button>
 ```
 
+### A layout of its own
+
+The panel draws no padding: the header, the body and the footer carry the inset. A layout of its own — one field, a preview, a footer — reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, so it stands in the column the parts stand in.
+
+Excerpt — not a complete module
+
+```html
+<sl-dialog #d="slDialog">
+  <div class="rename">
+    <h2 slDialogTitle>Rename file</h2>
+    <input slTextField aria-label="Name" value="report-q3.pdf" />
+    <img alt="First page of report-q3.pdf" [src]="preview" />
+  </div>
+  <footer slDialogFooter><button slButton size="sm">Rename</button></footer>
+</sl-dialog>
+<!-- .rename { display: grid; gap: var(--slotted-space-5);
+     padding-block: var(--slotted-dialog-inset-block);
+     padding-inline: var(--slotted-dialog-inset-inline); } -->
+```
+
 ### Deciding once for the application
 
 Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.

package/docs/dialog.json

@@ -208,7 +208,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long. It draws no padding: slDialogHeader, slDialogBody and slDialogFooter carry the panel inset. A layout that skips them reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, which the panel states, and a theme sets the inset with --slotted-dialog-padding-inline and --slotted-dialog-padding-block."
         },
         {
           "part": "header",
@@ -497,7 +497,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long. It draws no padding: slDialogHeader, slDialogBody and slDialogFooter carry the panel inset. A layout that skips them reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, which the panel states, and a theme sets the inset with --slotted-dialog-padding-inline and --slotted-dialog-padding-block."
         },
         {
           "part": "header",
@@ -769,6 +769,10 @@
     "--slotted-dialog-description-color",
     "--slotted-dialog-footer-surface",
     "--slotted-dialog-measure",
+    "--slotted-dialog-padding-block",
+    "--slotted-dialog-padding-block-sm",
+    "--slotted-dialog-padding-inline",
+    "--slotted-dialog-padding-inline-sm",
     "--slotted-dialog-radius",
     "--slotted-dialog-rule-color",
     "--slotted-dialog-scrim",
@@ -921,6 +925,14 @@
       "source": "<button slButton variant=\"outline\" [slDialogTrigger]=\"d\">Edit project</button>\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "layout",
+      "title": "A layout of its own",
+      "note": "The panel draws no padding: the header, the body and the footer carry the inset. A layout of its own — one field, a preview, a footer — reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, so it stands in the column the parts stand in.",
+      "language": "html",
+      "source": "<sl-dialog #d=\"slDialog\">\n  <div class=\"rename\">\n    <h2 slDialogTitle>Rename file</h2>\n    <input slTextField aria-label=\"Name\" value=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" [src]=\"preview\" />\n  </div>\n  <footer slDialogFooter><button slButton size=\"sm\">Rename</button></footer>\n</sl-dialog>\n<!-- .rename { display: grid; gap: var(--slotted-space-5);\n     padding-block: var(--slotted-dialog-inset-block);\n     padding-inline: var(--slotted-dialog-inset-inline); } -->\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",

package/docs/dialog.md

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

package/docs/event-calendar.json

@@ -559,6 +559,13 @@
           "appliesTo": "slEventCalendar",
           "description": "Read once; pass it when rendering on a server"
         },
+        {
+          "name": "now",
+          "type": "PlainDateTime",
+          "defaultValue": "the clock in timeZone, ticked each minute",
+          "appliesTo": "slEventCalendar",
+          "description": "Present means the consumer owns it: the clock is no longer read, and today and the now line follow it. A page dated by its content passes it."
+        },
         {
           "name": "view",
           "type": "model<EventCalendarView | undefined>",

package/docs/event-calendar.md

@@ -112,6 +112,7 @@ Excerpt — not a complete module
 | `calendars` | `readonly EventCalendarCalendar[]` | [] | slEventCalendar | Key, label and an optional colour slot 1–8 |
 | `date` | `model<PlainDate \| undefined>` | — | slEventCalendar | The day the calendar is on; [(date)] two-way |
 | `defaultDate` | `PlainDate` | today in timeZone | slEventCalendar | Read once; pass it when rendering on a server |
+| `now` | `PlainDateTime` | the clock in timeZone, ticked each minute | slEventCalendar | Present means the consumer owns it: the clock is no longer read, and today and the now line follow it. A page dated by its content passes it. |
 | `view` | `model<EventCalendarView \| undefined>` | month | slEventCalendar | [(view)] two-way; unbound opens on the first of views |
 | `defaultView` | `EventCalendarView` | views[0] | slEventCalendar | Read once |
 | `views` | `readonly EventCalendarView[]` | month,week,day,list | slEventCalendar | The switcher, in order |