@slotted/react 0.1.0-beta.2 → 0.1.0-beta.3

package/dist/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,
@@ -180,7 +188,7 @@
           "part": "root",
           "element": "button, or the element render returns",
           "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",
@@ -210,10 +218,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "Button",
-          "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",
@@ -250,6 +258,13 @@
           "appliesTo": "Button",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "Button",
+          "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",
@@ -329,7 +344,7 @@
           "part": "root",
           "element": "a, or the element render returns",
           "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",
@@ -367,10 +382,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "ButtonLink",
-          "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",
@@ -407,6 +422,13 @@
           "appliesTo": "ButtonLink",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "ButtonLink",
+          "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",
@@ -459,10 +481,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "IconButton",
-          "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",
@@ -576,7 +598,7 @@
           "part": "root",
           "element": "button, or the element render returns",
           "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",
@@ -606,10 +628,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "ToggleButton",
-          "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",
@@ -646,6 +668,13 @@
           "appliesTo": "ToggleButton",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "ToggleButton",
+          "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",
@@ -783,6 +812,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/dist/docs/button.md

@@ -72,12 +72,13 @@ export default function ButtonBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | Button | 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 | Button | 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 | Button | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | Button | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | Button | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | Button | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | Button | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | Button | 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 | Button | Refuses the action and marks the control unavailable. On its own, it sets the native disabled attribute, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | Button | Keeps a disabled control in the tab sequence: aria-disabled replaces the native attribute, and activation is still refused. |
 | `loading` | `boolean` | false | Button | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -93,12 +94,13 @@ export default function ButtonBasic() {
 | --- | --- | --- | --- | --- |
 | `href` | `string` | required without render | ButtonLink | The destination. A disabled ButtonLink does not render it. |
 | `render` | `(rootProps) => ReactElement` | — | ButtonLink | Renders the root through a router’s link component. The function receives every root prop and must pass all of them on. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | ButtonLink | 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 | ButtonLink | 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 | ButtonLink | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | ButtonLink | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | ButtonLink | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | ButtonLink | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | ButtonLink | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | ButtonLink | 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 | ButtonLink | Removes the href and refuses activation. The link stays focusable with role="link" and aria-disabled. |
 
 ### iconButton
@@ -106,7 +108,7 @@ export default function ButtonBasic() {
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `aria-label \| aria-labelledby` | `string` | required | IconButton | The accessible name. Required, because an icon supplies no text. When both are present, aria-labelledby names the button. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | IconButton | 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 | IconButton | 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 | IconButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | IconButton | 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 | IconButton | 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. |
@@ -125,12 +127,13 @@ export default function ButtonBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | ToggleButton | 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 | ToggleButton | 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 | ToggleButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | ToggleButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | ToggleButton | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | ToggleButton | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | ToggleButton | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | ToggleButton | 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 | ToggleButton | Refuses the action and marks the control unavailable. On its own, it sets the native disabled attribute, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | ToggleButton | Keeps a disabled control in the tab sequence: aria-disabled replaces the native attribute, and activation is still refused. |
 | `loading` | `boolean` | false | ToggleButton | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -146,10 +149,11 @@ export default function 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
 
@@ -180,7 +184,7 @@ export default function 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/dist/docs/chart.json

@@ -202,6 +202,7 @@
         "tooltip-marker",
         "tooltip-label",
         "tooltip-value",
+        "tooltip-note",
         "tooltip-total",
         "skeleton",
         "empty",
@@ -416,6 +417,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/dist/docs/chart.md

@@ -59,6 +59,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/dist/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",
@@ -113,6 +119,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, so no grouping separator and no currency symbol survives it. ref reaches it."
         },
+        {
+          "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": "span",
@@ -193,6 +205,13 @@
           "appliesTo": "CurrencyField, CurrencyFieldDefaultsProvider",
           "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": "CurrencyField",
+          "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/dist/docs/currency-field.md

@@ -27,6 +27,7 @@ Excerpt — not a complete module
 | --- | --- | --- |
 | `root` | div, or the element render returns | yes |
 | `input` | input[type=text][role=spinbutton] | yes |
+| `symbol` | span | no |
 | `start` | span | no |
 | `end` | span | no |
 | `scrub` | span (CurrencyFieldScrub) | no |
@@ -44,6 +45,7 @@ Excerpt — not a complete module
 | `defaultValue` | `number \| null` | — | CurrencyField | What an uncontrolled control starts from, read once. A native form reset returns to it |
 | `entry` | `'cents' \| 'natural'` | cents | CurrencyField, CurrencyFieldDefaultsProvider | 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 |
 | `formatOn` | `'change' \| 'commit'` | change | CurrencyField, CurrencyFieldDefaultsProvider | 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 | CurrencyField | 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 | CurrencyField, CurrencyFieldDefaultsProvider | 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 | CurrencyField | 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` | — | CurrencyField | 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 |
@@ -96,6 +98,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
 
@@ -110,7 +113,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/dist/docs/dialog.examples.md

@@ -624,6 +624,32 @@ Excerpt — not a complete module
 <DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;
 ```
 
+### A layout of its own
+
+DialogContent 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
+
+```tsx
+<DialogContent>
+  <div
+    style={{
+      display: 'grid',
+      gap: 'var(--slotted-space-5)',
+      paddingBlock: 'var(--slotted-dialog-inset-block)',
+      paddingInline: 'var(--slotted-dialog-inset-inline)',
+    }}
+  >
+    <DialogTitle>Rename file</DialogTitle>
+    <TextField aria-label="Name" defaultValue="report-q3.pdf" />
+    <img alt="First page of report-q3.pdf" src={preview} />
+  </div>
+  <DialogFooter>
+    <Button size="sm">Rename</Button>
+  </DialogFooter>
+</DialogContent>;
+```
+
 ### 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/dist/docs/dialog.json

@@ -206,7 +206,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: DialogHeader, DialogBody and DialogFooter 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: DialogHeader, DialogBody and DialogFooter 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",
@@ -766,6 +766,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",
@@ -918,6 +922,14 @@
       "source": "<DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "layout",
+      "title": "A layout of its own",
+      "note": "DialogContent 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": "tsx",
+      "source": "<DialogContent>\n  <div\n    style={{\n      display: 'grid',\n      gap: 'var(--slotted-space-5)',\n      paddingBlock: 'var(--slotted-dialog-inset-block)',\n      paddingInline: 'var(--slotted-dialog-inset-inline)',\n    }}\n  >\n    <DialogTitle>Rename file</DialogTitle>\n    <TextField aria-label=\"Name\" defaultValue=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" src={preview} />\n  </div>\n  <DialogFooter>\n    <Button size=\"sm\">Rename</Button>\n  </DialogFooter>\n</DialogContent>;\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",

package/dist/docs/dialog.md

@@ -245,7 +245,7 @@ export default function DialogBasic() {
 
 ## 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/dist/docs/list.json

@@ -51,6 +51,7 @@
         "root",
         "section",
         "section-label",
+        "section-end",
         "section-list",
         "empty"
       ]
@@ -78,7 +79,13 @@
           "part": "section-label",
           "element": "h1 to h6, or a div",
           "required": false,
-          "purpose": "The group name. It carries the id the nested list names itself by, and data-sticky when it has to hold still while its own rows scroll past."
+          "purpose": "The group name. It carries the id the nested list names itself by, data-sticky when it has to hold still while its own rows scroll past, and data-variant: caption, the small muted name, or ruled, the name in the text colour over a rule with no ground behind it."
+        },
+        {
+          "part": "section-end",
+          "element": "span",
+          "required": false,
+          "purpose": "What stands at the end of the heading, on the line of the name: a day balance, a count. Set in tabular figures. It is rendered from the end prop."
         },
         {
           "part": "section-list",
@@ -150,6 +157,20 @@
           "appliesTo": "ListSection",
           "description": "Keeps a group name in place while its own rows scroll past it"
         },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ListSection",
+          "description": "What stands at the end of the group heading, on the line of the name, in tabular figures"
+        },
+        {
+          "name": "labelVariant",
+          "type": "'caption' | 'ruled'",
+          "defaultValue": "caption",
+          "appliesTo": "ListSection",
+          "description": "How the group heading is drawn: the small muted name, or the name over a rule with no ground"
+        },
         {
           "name": "label",
           "type": "ReactNode",
@@ -213,6 +234,7 @@
     "--slotted-control-padding-inline-md",
     "--slotted-control-padding-inline-sm",
     "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
     "--slotted-line-height-sm",
     "--slotted-list-background",
@@ -236,6 +258,8 @@
     "--slotted-list-section-padding-block",
     "--slotted-list-section-padding-block-lg",
     "--slotted-list-section-padding-block-sm",
+    "--slotted-list-section-rule-color",
+    "--slotted-list-section-ruled-color",
     "--slotted-radius-md",
     "--slotted-space-2",
     "--slotted-space-3",
@@ -245,6 +269,7 @@
     "--slotted-space-8",
     "--slotted-space-9",
     "--slotted-surface",
+    "--slotted-text",
     "--slotted-text-muted",
     "--slotted-z-index-sticky"
   ],

package/dist/docs/list.md

@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `root` | ul or ol, or the element render returns | yes |
 | `section` | li | no |
 | `section-label` | h1 to h6, or a div | no |
+| `section-end` | span | no |
 | `section-list` | ul or ol | no |
 | `empty` | li | no |
 
@@ -48,6 +49,8 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | List | Writes aria-busy on the set. What stands in for the rows is Skeleton, composed by the page |
 | `level` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | ListSection | The heading a group name is set as. none renders a div and announces no heading |
 | `sticky` | `boolean` | false | ListSection | Keeps a group name in place while its own rows scroll past it |
+| `end` | `ReactNode` | — | ListSection | What stands at the end of the group heading, on the line of the name, in tabular figures |
+| `labelVariant` | `'caption' \| 'ruled'` | caption | ListSection | How the group heading is drawn: the small muted name, or the name over a rule with no ground |
 | `label` | `ReactNode` | — | ListSection | The group name, which the nested list is named by |
 | `labelProps / listProps` | `HTMLAttributes` | — | ListSection | Reach the heading and the nested list, for an id or a class the page owns |
 | `render` | `(props) => ReactNode` | — | List, ListSection, ListEmpty | Renders the wiring into another element — a nav, a router own list |
@@ -75,7 +78,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-list-section-rule-color`, `--slotted-list-section-ruled-color`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/dist/docs/popover.json

@@ -144,7 +144,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal."
+          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal. It draws no padding: PopoverHeader, PopoverBody and PopoverFooter carry the panel inset, set by --slotted-popover-padding-inline and --slotted-popover-padding-block."
         },
         {
           "part": "header",