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

package/docs/button.json

@@ -10,6 +10,8 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
+      "info",
       "success",
       "warning",
       "danger"
@@ -27,6 +29,10 @@
     "shape": [
       "square",
       "circle"
+    ],
+    "justify": [
+      "center",
+      "between"
     ]
   },
   "members": {
@@ -38,6 +44,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -73,6 +80,7 @@
         "variant": "solid",
         "size": "md",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false
       },
       "capabilities": [
@@ -138,6 +146,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -182,7 +191,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 +221,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | 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 +261,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 +342,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 +373,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | 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 +413,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 +473,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | 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 +585,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 +615,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | 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 +655,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 +792,16 @@
     "--slotted-tone-danger-solid-active",
     "--slotted-tone-danger-solid-hover",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-solid-active",
+    "--slotted-tone-info-solid-hover",
+    "--slotted-tone-info-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 \| info \| 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 \| info \| 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 \| info \| 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 \| info \| 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`, `info`, `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-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-solid-active`, `--slotted-tone-info-solid-hover`, `--slotted-tone-info-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/calendar.json

@@ -116,7 +116,7 @@
           "part": "previous",
           "element": "button",
           "required": true,
-          "purpose": "One page back, in whichever view is showing: a month in the day view, a year in the month view, twelve years in the year view. Its chevron is the next trigger’s artwork turned, so both follow the document direction from one token."
+          "purpose": "One page back, in whichever view is showing: a month in the day view, a year in the month view, twelve years in the year view, and it is named for that step. Its chevron is the next trigger’s artwork turned, so both follow the document direction from one token."
         },
         {
           "part": "next",
@@ -260,6 +260,13 @@
           "appliesTo": "SlCalendar",
           "description": "The view it opens on."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "SlCalendar",
+          "description": "What a choice is. month opens on the months of a year and never shows the day grid: a month cell is the value, written as the first day of that month, the arrow keys move one month or one row of four, Home and End reach January and December, Page Up and Page Down move a year, and Enter or Space chooses. A month the bounds leave no day of carries aria-disabled."
+        },
         {
           "name": "min",
           "type": "PlainDate",

package/docs/calendar.md

@@ -53,6 +53,7 @@ Excerpt — not a complete module
 | `months` | `number` | 1 | SlCalendar | How many months are drawn side by side. They wrap when they do not fit; nothing is withdrawn. |
 | `view` | `'day' \| 'month' \| 'year'` | day | SlCalendar | Which grid is showing. Present means the consumer owns it; defaultView sets the starting one. |
 | `defaultView` | `'day' \| 'month' \| 'year'` | day | SlCalendar | The view it opens on. |
+| `granularity` | `'day' \| 'month'` | day | SlCalendar | What a choice is. month opens on the months of a year and never shows the day grid: a month cell is the value, written as the first day of that month, the arrow keys move one month or one row of four, Home and End reach January and December, Page Up and Page Down move a year, and Enter or Space chooses. A month the bounds leave no day of carries aria-disabled. |
 | `min` | `PlainDate` | — | SlCalendar | The earliest date the reader may reach. An arrow that would leave the range stops at the edge. |
 | `max` | `PlainDate` | — | SlCalendar | The latest date the reader may reach. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | SlCalendar | Refuses particular dates. A refused date stays focusable and cannot be chosen. |
@@ -88,8 +89,8 @@ Excerpt — not a complete module
 | `selectionMode` | `single`, `range`, `multiple` | `single` |
 | `view` | `day`, `month`, `year` | `day` |
 | `calendar` | `gregory` | `gregory` |
-| `weekNumbers` | `off`, `on` | `false` |
-| `fixedWeeks` | `off`, `on` | `false` |
+| `weekNumbers` | `off`, `on` | false |
+| `fixedWeeks` | `off`, `on` | false |
 | `outsideDays` | `shown`, `selectable`, `hidden` | `shown` |
 
 ## Rules

package/docs/cascader.json

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

package/docs/cascader.md

@@ -152,7 +152,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--slotted-border-width-thin`, `--slotted-cascader-arrow-color`, `--slotted-cascader-background`, `--slotted-cascader-border-color`, `--slotted-cascader-border-subtle`, `--slotted-cascader-column-measure`, `--slotted-cascader-content-radius`, `--slotted-cascader-content-shadow`, `--slotted-cascader-highlight`, `--slotted-cascader-highlight-active`, `--slotted-cascader-highlight-ring`, `--slotted-cascader-hover-border-color`, `--slotted-cascader-icon-size-min`, `--slotted-cascader-indent`, `--slotted-cascader-invalid-border-color`, `--slotted-cascader-invalid-edge-width`, `--slotted-cascader-mark-inset`, `--slotted-cascader-open-border-color`, `--slotted-cascader-path`, `--slotted-cascader-placeholder-color`, `--slotted-cascader-radius`, `--slotted-cascader-selected-color`, `--slotted-cascader-separator-color`, `--slotted-cascader-surface`, `--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-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-selection-size-lg`, `--slotted-selection-size-md`, `--slotted-selection-size-sm`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-z-index-popover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--slotted-border-width-thin`, `--slotted-cascader-arrow-color`, `--slotted-cascader-background`, `--slotted-cascader-border-color`, `--slotted-cascader-border-subtle`, `--slotted-cascader-column-measure`, `--slotted-cascader-content-radius`, `--slotted-cascader-content-shadow`, `--slotted-cascader-highlight`, `--slotted-cascader-highlight-active`, `--slotted-cascader-highlight-ring`, `--slotted-cascader-hover-border-color`, `--slotted-cascader-icon-size-min`, `--slotted-cascader-indent`, `--slotted-cascader-invalid-border-color`, `--slotted-cascader-invalid-edge-width`, `--slotted-cascader-mark-inset`, `--slotted-cascader-open-border-color`, `--slotted-cascader-path`, `--slotted-cascader-placeholder-color`, `--slotted-cascader-radius`, `--slotted-cascader-selected-color`, `--slotted-cascader-separator-color`, `--slotted-cascader-surface`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-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-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-selection-size-lg`, `--slotted-selection-size-md`, `--slotted-selection-size-sm`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-z-index-popover`
 
 ## Examples
 

package/docs/chart.examples.md

@@ -153,7 +153,7 @@ Excerpt — not a complete module
 
 ### A donut with the total inside
 
-innerRadius opens the middle and the center holds the total; a slChartCenter template replaces it, here with the resolution rate.
+innerRadius opens the middle and the center holds the total; a slChartCenter template replaces it, here with the resolution rate. slotField and toneField give each slice the slot or tone its record names, so a category keeps the colour it has everywhere else; a slice that names none takes the next free slot.
 
 Excerpt — not a complete module
 

package/docs/chart.json

@@ -80,6 +80,7 @@
       "neutral",
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -202,6 +203,7 @@
         "tooltip-marker",
         "tooltip-label",
         "tooltip-value",
+        "tooltip-note",
         "tooltip-total",
         "skeleton",
         "empty",
@@ -418,6 +420,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",
@@ -1010,6 +1018,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-subtle-hover",
     "--slotted-tone-secondary-surface",
     "--slotted-tone-secondary-text",
@@ -1118,7 +1127,7 @@
     {
       "id": "donut",
       "title": "A donut with the total inside",
-      "note": "innerRadius opens the middle and the center holds the total; a slChartCenter template replaces it, here with the resolution rate.",
+      "note": "innerRadius opens the middle and the center holds the total; a slChartCenter template replaces it, here with the resolution rate. slotField and toneField give each slice the slot or tone its record names, so a category keeps the colour it has everywhere else; a slice that names none takes the next free slot.",
       "language": "html",
       "source": "<figure slChart title=\"Tickets por estado\" [data]=\"tickets\" [series]=\"donut\">\n  <ng-template slChartCenter let-model>\n    <span data-part=\"center-value\">{{ resolved(model) }}</span>\n    <span data-part=\"center-label\">resolvidos</span>\n  </ng-template>\n</figure>\n",
       "verdict": "excerpt"

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 |
@@ -162,7 +163,7 @@ Excerpt — not a complete module
 | `renderer` | `auto`, `svg`, `canvas` | `auto` |
 | `scale` | `linear`, `log` | — |
 | `xType` | `category`, `time`, `value` | — |
-| `tone` | `neutral`, `accent`, `secondary`, `success`, `warning`, `danger` | — |
+| `tone` | `neutral`, `accent`, `secondary`, `info`, `success`, `warning`, `danger` | — |
 | `slot` | `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8` | — |
 | `variant` | `plain`, `card` | `plain` |
 | `toolbar` | `visible`, `hover`, `none` | `visible` |
@@ -180,7 +181,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-chart-area-opacity`, `--slotted-chart-axis-color`, `--slotted-chart-band-color`, `--slotted-chart-bar-radius`, `--slotted-chart-card-padding-block`, `--slotted-chart-card-padding-inline`, `--slotted-chart-card-radius`, `--slotted-chart-color-1`, `--slotted-chart-color-2`, `--slotted-chart-color-3`, `--slotted-chart-color-4`, `--slotted-chart-color-5`, `--slotted-chart-color-6`, `--slotted-chart-color-7`, `--slotted-chart-color-8`, `--slotted-chart-crosshair-color`, `--slotted-chart-focus-color`, `--slotted-chart-gap`, `--slotted-chart-grid-color`, `--slotted-chart-inset`, `--slotted-chart-label-color`, `--slotted-chart-label-size`, `--slotted-chart-line-width`, `--slotted-chart-marker-size`, `--slotted-chart-plot-block-size`, `--slotted-chart-plot-block-size-lg`, `--slotted-chart-plot-block-size-sm`, `--slotted-chart-radius`, `--slotted-chart-reference-color`, `--slotted-chart-sequential-color`, `--slotted-chart-skeleton-hole`, `--slotted-chart-surface`, `--slotted-chart-tooltip-surface`, `--slotted-control-border-color`, `--slotted-control-font-size-sm`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-inner-size-sm`, `--slotted-control-radius`, `--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-instant`, `--slotted-duration-long`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-lg`, `--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-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`, `--slotted-z-index-popover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-chart-area-opacity`, `--slotted-chart-axis-color`, `--slotted-chart-band-color`, `--slotted-chart-bar-radius`, `--slotted-chart-card-padding-block`, `--slotted-chart-card-padding-inline`, `--slotted-chart-card-radius`, `--slotted-chart-color-1`, `--slotted-chart-color-2`, `--slotted-chart-color-3`, `--slotted-chart-color-4`, `--slotted-chart-color-5`, `--slotted-chart-color-6`, `--slotted-chart-color-7`, `--slotted-chart-color-8`, `--slotted-chart-crosshair-color`, `--slotted-chart-focus-color`, `--slotted-chart-gap`, `--slotted-chart-grid-color`, `--slotted-chart-inset`, `--slotted-chart-label-color`, `--slotted-chart-label-size`, `--slotted-chart-line-width`, `--slotted-chart-marker-size`, `--slotted-chart-plot-block-size`, `--slotted-chart-plot-block-size-lg`, `--slotted-chart-plot-block-size-sm`, `--slotted-chart-radius`, `--slotted-chart-reference-color`, `--slotted-chart-sequential-color`, `--slotted-chart-skeleton-hole`, `--slotted-chart-surface`, `--slotted-chart-tooltip-surface`, `--slotted-control-border-color`, `--slotted-control-font-size-sm`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-inner-size-sm`, `--slotted-control-radius`, `--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-instant`, `--slotted-duration-long`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-lg`, `--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-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`, `--slotted-z-index-popover`
 
 ## Examples
 

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. |