@slotted/react 0.1.0-beta.0 → 0.1.0-beta.10

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",

package/dist/docs/progress-indicator.json

@@ -15,6 +15,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -141,7 +142,7 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | info | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "all three",
           "description": "The five the theme owns. The indicator is the tone’s text role and the track is a computed tint of it"
@@ -330,7 +331,6 @@
     "--slotted-progress-indicator-wave-phase",
     "--slotted-radius-full",
     "--slotted-radius-none",
-    "--slotted-space-1",
     "--slotted-space-2",
     "--slotted-space-3",
     "--slotted-space-4",
@@ -339,6 +339,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-text",
     "--slotted-tone-success-text",
     "--slotted-tone-warning-text",
     "--slotted-z-index-sticky"
@@ -419,7 +420,7 @@
     {
       "id": "waveSizes",
       "title": "The wave is measured in thicknesses",
-      "note": "One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is twenty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.",
+      "note": "One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is forty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.",
       "language": "tsx",
       "source": "<ProgressBar label=\"Small\" size=\"sm\" value={55} wave />;\n<ProgressBar label=\"Large\" size=\"lg\" value={55} wave />;\n<ProgressCircle label=\"Saving\" size=\"lg\" value={55} wave />;\n",
       "verdict": "excerpt"

package/dist/docs/progress-indicator.md

@@ -36,7 +36,7 @@ Excerpt — not a complete module
 | `max` | `number` | 100 | ProgressBar, ProgressCircle | The top of the range, and what aria-valuemax reports. Reaching it writes data-complete |
 | `buffer` | `number \| null` | — | ProgressBar | A second, further quantity: received but not yet processed. Never painted behind the value |
 | `size` | `sm \| md \| lg` | md | all three | The bar’s thickness, the ring’s diameter, the loader’s box. Rings and loaders read the control height scale, so they match a control of the same step |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | all three | The five the theme owns. The indicator is the tone’s text role and the track is a computed tint of it |
+| `tone` | `accent \| secondary \| info \| success \| warning \| danger` | accent | all three | The five the theme owns. The indicator is the tone’s text role and the track is a computed tint of it |
 | `label` | `string` | — | all three | The rendered accessible name. Without it, or aria-label, or decorative, a development warning names the component |
 | `hideLabel` | `boolean` | false | all three | Clips the label with visually-hidden and keeps it as the name. A page-level bar sets it by itself |
 | `showValue` | `boolean` | false | ProgressBar, ProgressCircle | Whether the formatted number is rendered beside the name. A wait needs no number to be understood |
@@ -67,7 +67,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `accent` |
 | `placement` | `inline`, `page`, `edge-start`, `edge-end` | `inline` |
 
 ## Rules
@@ -82,7 +82,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-line-height-md`, `--slotted-progress-indicator-buffer-color`, `--slotted-progress-indicator-buffer-percent`, `--slotted-progress-indicator-gap`, `--slotted-progress-indicator-indicator-color`, `--slotted-progress-indicator-percent`, `--slotted-progress-indicator-position`, `--slotted-progress-indicator-radius`, `--slotted-progress-indicator-size`, `--slotted-progress-indicator-stroke`, `--slotted-progress-indicator-thickness`, `--slotted-progress-indicator-track-color`, `--slotted-progress-indicator-travel-size`, `--slotted-progress-indicator-travel-start`, `--slotted-progress-indicator-wave-amplitude`, `--slotted-progress-indicator-wave-phase`, `--slotted-radius-full`, `--slotted-radius-none`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-line-height-md`, `--slotted-progress-indicator-buffer-color`, `--slotted-progress-indicator-buffer-percent`, `--slotted-progress-indicator-gap`, `--slotted-progress-indicator-indicator-color`, `--slotted-progress-indicator-percent`, `--slotted-progress-indicator-position`, `--slotted-progress-indicator-radius`, `--slotted-progress-indicator-size`, `--slotted-progress-indicator-stroke`, `--slotted-progress-indicator-thickness`, `--slotted-progress-indicator-track-color`, `--slotted-progress-indicator-travel-size`, `--slotted-progress-indicator-travel-start`, `--slotted-progress-indicator-wave-amplitude`, `--slotted-progress-indicator-wave-phase`, `--slotted-radius-full`, `--slotted-radius-none`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -191,7 +191,7 @@ Excerpt — not a complete module
 
 ### The wave is measured in thicknesses
 
-One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is twenty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.
+One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is forty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.
 
 Excerpt — not a complete module
 

package/dist/docs/prompt-composer.json

@@ -26,6 +26,10 @@
       "submitted",
       "streaming",
       "error"
+    ],
+    "emphasis": [
+      "none",
+      "ring"
     ]
   },
   "members": {
@@ -71,7 +75,9 @@
         "footer",
         "action",
         "attach",
-        "submit"
+        "submit",
+        "ring",
+        "glow"
       ]
     }
   },
@@ -122,6 +128,18 @@
           "element": "button (PromptComposerSubmit)",
           "required": false,
           "purpose": "The send: a round accent disc named by the label for its status — Send, Sending, Stop, Retry — or a pill named by the words given to it. A busy ring while submitted, a stop square inside the ring while streaming, a retry turn after an error."
+        },
+        {
+          "part": "ring",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "With emphasis=\"ring\": the frame's edge, a band cut from a turning conic gradient of --slotted-prompt-composer-ring-colors. It replaces the border, the focus outline and the raised shadow; the buttons keep their own focus rings."
+        },
+        {
+          "part": "glow",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "With emphasis=\"ring\": the same gradient blurred outside the frame, at --slotted-prompt-composer-ring-glow-opacity at rest, -focus while the input holds focus, -busy while loading, submitted or streaming."
         }
       ],
       "api": [
@@ -167,6 +185,13 @@
           "appliesTo": "PromptComposer, PromptComposerDefaultsProvider",
           "description": "raised is the chat surface; outline and subtle sit inside a form"
         },
+        {
+          "name": "emphasis",
+          "type": "'none' | 'ring'",
+          "defaultValue": "none",
+          "appliesTo": "PromptComposer",
+          "description": "A ring of turning hues and a soft glow in place of the border, the focus outline and the raised shadow. Reduced motion stops the turn; forced colours bring the border back"
+        },
         {
           "name": "canSubmit",
           "type": "boolean",
@@ -316,9 +341,11 @@
     "--slotted-border-strong",
     "--slotted-border-subtle",
     "--slotted-border-width-medium",
+    "--slotted-border-width-thick",
     "--slotted-border-width-thin",
     "--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",
@@ -338,9 +365,14 @@
     "--slotted-control-surface",
     "--slotted-control-transition-duration",
     "--slotted-control-transition-easing",
+    "--slotted-data-1",
+    "--slotted-data-2",
+    "--slotted-data-3",
+    "--slotted-data-5",
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
+    "--slotted-duration-loop-slow",
     "--slotted-duration-medium",
     "--slotted-duration-short",
     "--slotted-easing-enter",
@@ -376,6 +408,13 @@
     "--slotted-prompt-composer-raised-focus-shadow",
     "--slotted-prompt-composer-raised-shadow",
     "--slotted-prompt-composer-readonly-background",
+    "--slotted-prompt-composer-ring-colors",
+    "--slotted-prompt-composer-ring-duration",
+    "--slotted-prompt-composer-ring-glow-opacity",
+    "--slotted-prompt-composer-ring-glow-opacity-busy",
+    "--slotted-prompt-composer-ring-glow-opacity-focus",
+    "--slotted-prompt-composer-ring-glow-reach",
+    "--slotted-prompt-composer-ring-width",
     "--slotted-prompt-composer-rows",
     "--slotted-prompt-composer-selection-background",
     "--slotted-prompt-composer-shadow",
@@ -396,6 +435,7 @@
     "--slotted-space-3",
     "--slotted-space-4",
     "--slotted-space-5",
+    "--slotted-space-8",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/dist/docs/prompt-composer.md

@@ -42,6 +42,8 @@ Excerpt — not a complete module
 | `action` | button (PromptComposerAction) | no |
 | `attach` | button (PromptComposerAttach), with a hidden file input beside it | no |
 | `submit` | button (PromptComposerSubmit) | no |
+| `ring` | span, aria-hidden | no |
+| `glow` | span, aria-hidden | no |
 
 ## Props
 
@@ -53,6 +55,7 @@ Excerpt — not a complete module
 | `submitOn` | `'enter' \| 'mod-enter'` | enter | PromptComposer, PromptComposerDefaultsProvider | Which key sends. Shift+Enter always breaks a line; Mod+Enter always sends |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | PromptComposer, PromptComposerDefaultsProvider | The control step, read from the field first |
 | `variant` | `'raised' \| 'outline' \| 'subtle'` | raised | PromptComposer, PromptComposerDefaultsProvider | raised is the chat surface; outline and subtle sit inside a form |
+| `emphasis` | `'none' \| 'ring'` | none | PromptComposer | A ring of turning hues and a soft glow in place of the border, the focus outline and the raised shadow. Reduced motion stops the turn; forced colours bring the border back |
 | `canSubmit` | `boolean` | the value is not blank | PromptComposer | Whether the send is available; an application with attachments ready says true |
 | `accept / maxSize / maxFiles / multiple` | `string / number / number / boolean` | — / — / — / true | PromptComposer | The selection rules upload applies, for the paperclip, a paste and a drop |
 | `disabled` | `boolean` | from the field, or false | PromptComposer | Unstated rather than false, so the composer defers to its field. The native attribute on the textarea; the paperclip and the send leave the tab order with it |
@@ -87,6 +90,7 @@ Excerpt — not a complete module
 | `variant` | `raised`, `outline`, `subtle` | `raised` |
 | `submitOn` | `enter`, `mod-enter` | `enter` |
 | `status` | `ready`, `submitted`, `streaming`, `error` | `ready` |
+| `emphasis` | `none`, `ring` | — |
 
 ## Rules
 
@@ -99,7 +103,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--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-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-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-weight-medium`, `--slotted-line-height-md`, `--slotted-prompt-composer-action-active-background`, `--slotted-prompt-composer-action-color`, `--slotted-prompt-composer-action-hover-background`, `--slotted-prompt-composer-action-label-color`, `--slotted-prompt-composer-background`, `--slotted-prompt-composer-border-color`, `--slotted-prompt-composer-caret-color`, `--slotted-prompt-composer-color`, `--slotted-prompt-composer-disabled-background`, `--slotted-prompt-composer-disabled-border-color`, `--slotted-prompt-composer-disabled-color`, `--slotted-prompt-composer-drop-background`, `--slotted-prompt-composer-drop-border-color`, `--slotted-prompt-composer-hover-border-color`, `--slotted-prompt-composer-invalid-border-color`, `--slotted-prompt-composer-invalid-edge-width`, `--slotted-prompt-composer-invalid-focus-ring-color`, `--slotted-prompt-composer-line-height`, `--slotted-prompt-composer-max-rows`, `--slotted-prompt-composer-placeholder-color`, `--slotted-prompt-composer-radius`, `--slotted-prompt-composer-raised-focus-shadow`, `--slotted-prompt-composer-raised-shadow`, `--slotted-prompt-composer-readonly-background`, `--slotted-prompt-composer-rows`, `--slotted-prompt-composer-selection-background`, `--slotted-prompt-composer-shadow`, `--slotted-prompt-composer-submit-active-background`, `--slotted-prompt-composer-submit-background`, `--slotted-prompt-composer-submit-color`, `--slotted-prompt-composer-submit-disabled-background`, `--slotted-prompt-composer-submit-hover-background`, `--slotted-prompt-composer-subtle-background`, `--slotted-prompt-composer-subtle-border-color`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-xs`, `--slotted-shadow-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--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-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--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-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-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-data-1`, `--slotted-data-2`, `--slotted-data-3`, `--slotted-data-5`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-loop-slow`, `--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-weight-medium`, `--slotted-line-height-md`, `--slotted-prompt-composer-action-active-background`, `--slotted-prompt-composer-action-color`, `--slotted-prompt-composer-action-hover-background`, `--slotted-prompt-composer-action-label-color`, `--slotted-prompt-composer-background`, `--slotted-prompt-composer-border-color`, `--slotted-prompt-composer-caret-color`, `--slotted-prompt-composer-color`, `--slotted-prompt-composer-disabled-background`, `--slotted-prompt-composer-disabled-border-color`, `--slotted-prompt-composer-disabled-color`, `--slotted-prompt-composer-drop-background`, `--slotted-prompt-composer-drop-border-color`, `--slotted-prompt-composer-hover-border-color`, `--slotted-prompt-composer-invalid-border-color`, `--slotted-prompt-composer-invalid-edge-width`, `--slotted-prompt-composer-invalid-focus-ring-color`, `--slotted-prompt-composer-line-height`, `--slotted-prompt-composer-max-rows`, `--slotted-prompt-composer-placeholder-color`, `--slotted-prompt-composer-radius`, `--slotted-prompt-composer-raised-focus-shadow`, `--slotted-prompt-composer-raised-shadow`, `--slotted-prompt-composer-readonly-background`, `--slotted-prompt-composer-ring-colors`, `--slotted-prompt-composer-ring-duration`, `--slotted-prompt-composer-ring-glow-opacity`, `--slotted-prompt-composer-ring-glow-opacity-busy`, `--slotted-prompt-composer-ring-glow-opacity-focus`, `--slotted-prompt-composer-ring-glow-reach`, `--slotted-prompt-composer-ring-width`, `--slotted-prompt-composer-rows`, `--slotted-prompt-composer-selection-background`, `--slotted-prompt-composer-shadow`, `--slotted-prompt-composer-submit-active-background`, `--slotted-prompt-composer-submit-background`, `--slotted-prompt-composer-submit-color`, `--slotted-prompt-composer-submit-disabled-background`, `--slotted-prompt-composer-submit-hover-background`, `--slotted-prompt-composer-subtle-background`, `--slotted-prompt-composer-subtle-border-color`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-xs`, `--slotted-shadow-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-8`, `--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-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/rating.json

@@ -14,6 +14,7 @@
     ],
     "tone": [
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -246,7 +247,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "all members, RatingProvider",
           "description": "The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit"
@@ -461,7 +462,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "all members, RatingProvider",
           "description": "The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit"
@@ -780,7 +781,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "all members, RatingProvider",
           "description": "The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit"
@@ -912,6 +913,7 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-solid",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",

package/dist/docs/rating.md

@@ -89,7 +89,7 @@ Excerpt — not a complete module
 | `step` | `1 \| 0.5` | 1 | Rating | A whole symbol or half of one. Finer fractions are declined: a third of a 20-pixel star is below the minimum target |
 | `clearable` | `boolean` | true | Rating, RatingProvider | Whether a press on the checked star, Backspace and Delete empty the value |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | all members, RatingProvider | The step the symbols and the text sit at. The symbol does not follow density; the text does |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
 | `disabled` | `boolean` | from the field, or false | Rating | Unstated rather than false. Every radio is disabled natively; the value stays readable |
 | `readOnly` | `boolean` | from the field, or false | Rating | Unstated rather than false. Every change is refused, every radio keeps its tab stop, and aria-readonly is written |
 | `required` | `boolean` | from the field, or false | Rating | Unstated rather than false. Writes aria-required on the group, never the native attribute |
@@ -112,7 +112,7 @@ Excerpt — not a complete module
 | `value` | `number` | — | RatingDisplay | The value reported, any fraction, clamped to the scale |
 | `max` | `number` | 5 | all members, RatingProvider | How many symbols, or how many levels a summary reads from counts |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | all members, RatingProvider | The step the symbols and the text sit at. The symbol does not follow density; the text does |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
 | `variant` | `'full' \| 'compact' \| 'histogram'` | full | RatingDisplay | Every symbol, or one star beside the number, or one star and a bar per level |
 | `count` | `number` | — | RatingDisplay | How many ratings. Written beside the number and added to the accessible name |
 | `distribution` | `readonly number[]` | — | RatingDisplay | Counts per level, lowest first, drawn by the histogram variant |
@@ -137,7 +137,7 @@ Excerpt — not a complete module
 | `showInsight` | `boolean` | true | RatingSummary | Whether the spectrum writes its conclusion |
 | `insightThresholds` | `Partial<RatingInsightThresholds>` | { divided: 0.25, few: 30, margin: 0.5, consensus: 0.8 } | RatingSummary, RatingProvider | Where the conclusions are drawn, merged over the provider’s |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | all members, RatingProvider | The step the symbols and the text sit at. The symbol does not follow density; the text does |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
 | `locale` | `string` | the language in force | all members | The locale every number is written in: 4,6 and 1.284 in pt-BR |
 | `messages` | `Partial<RatingMessages>` | — | all members | Words laid over the language in force, key by key: every string the family writes |
 | `render` | `(props: RatingRootProps) => ReactNode` | — | RatingSummary | Substitutes the section root and hands it every attribute and handler |
@@ -165,7 +165,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `tone` | `accent`, `success`, `warning`, `danger` | `warning` |
+| `tone` | `accent`, `info`, `success`, `warning`, `danger` | `warning` |
 | `variant` | `full`, `compact`, `histogram` | `full`, `bars` |
 | `summaryVariant` | `bars`, `spectrum` | — |
 
@@ -185,7 +185,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--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-sm`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-long`, `--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-size-4xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-highlight-tint-opacity`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-rating-active-background`, `--slotted-rating-bar-color`, `--slotted-rating-bar-size`, `--slotted-rating-edge`, `--slotted-rating-empty-color`, `--slotted-rating-gap`, `--slotted-rating-hover-background`, `--slotted-rating-invalid-color`, `--slotted-rating-invalid-edge-width`, `--slotted-rating-lit-color`, `--slotted-rating-symbol-size`, `--slotted-space-1`, `--slotted-space-10`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-inverse`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-danger-border`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-success-border`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--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-sm`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-long`, `--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-size-4xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-highlight-tint-opacity`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-rating-active-background`, `--slotted-rating-bar-color`, `--slotted-rating-bar-size`, `--slotted-rating-edge`, `--slotted-rating-empty-color`, `--slotted-rating-gap`, `--slotted-rating-hover-background`, `--slotted-rating-invalid-color`, `--slotted-rating-invalid-edge-width`, `--slotted-rating-lit-color`, `--slotted-rating-symbol-size`, `--slotted-space-1`, `--slotted-space-10`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-inverse`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-danger-border`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-solid`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-success-border`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/section.json

@@ -58,6 +58,7 @@
         "title",
         "eyebrow",
         "heading",
+        "tags",
         "description",
         "actions",
         "body"
@@ -67,7 +68,7 @@
   "docs": {
     "section": {
       "imports": {
-        "source": "import { Section, SectionHeader, SectionTitle, SectionEyebrow, SectionHeading, SectionDescription, SectionActions, SectionBody, SectionDefaultsProvider } from '@slotted/react';"
+        "source": "import { Section, SectionHeader, SectionTitle, SectionEyebrow, SectionHeading, SectionTags, SectionDescription, SectionActions, SectionBody, SectionDefaultsProvider } from '@slotted/react';"
       },
       "anatomy": [
         {
@@ -80,19 +81,19 @@
           "part": "header",
           "element": "div",
           "required": false,
-          "purpose": "The row above the body: the title column and the actions. Sticky under the page chrome when sticky is set, painted in the page’s ground so what scrolls under it is covered; its height is measured and added to the sticky top the body publishes, so a table’s column header or a nested section inside stops under it, not under the page."
+          "purpose": "The row above the body: the heading, its tags and the actions on one baseline, the eyebrow above and the description below on rows of their own. Sticky under the page chrome when sticky is set, painted in the page’s ground so what scrolls under it is covered; its height is measured and added to the sticky top the body publishes, so a table’s column header or a nested section inside stops under it, not under the page."
         },
         {
           "part": "title",
           "element": "div",
           "required": false,
-          "purpose": "Eyebrow, heading and description, in that order, as one column."
+          "purpose": "Eyebrow, heading, tags and description, in that order, laid out on the header’s rows, so the actions align with the heading and not with the top of an eyebrow."
         },
         {
           "part": "eyebrow",
           "element": "span",
           "required": false,
-          "purpose": "A short overline above the heading in small capitals — a count, a category. Structural rather than status: status is a mark beside the heading."
+          "purpose": "A short overline above the heading in small capitals — a count, a category. Structural rather than status: status is a tag."
         },
         {
           "part": "heading",
@@ -100,6 +101,12 @@
           "required": false,
           "purpose": "The heading at the rank the section resolved. Rendering it is what names the region; render keeps the rank through aria-level when the element is not a heading."
         },
+        {
+          "part": "tags",
+          "element": "div",
+          "required": false,
+          "purpose": "Badges or tags beside the heading — a count, a status — aligned on the heading’s baseline. Outside the heading, so they are not read into the region’s name. They never leave the heading’s row: a long heading wraps its words and the badges stack beside it."
+        },
         {
           "part": "description",
           "element": "p",
@@ -110,7 +117,7 @@
           "part": "actions",
           "element": "div",
           "required": false,
-          "purpose": "The end of the header row: a Button, a Toolbar, a Link. It wraps under the title when the width runs out."
+          "purpose": "The end of the heading’s row, on its baseline: a Button, a Toolbar, a Link. On a header narrower than 20rem it takes a row of its own at the end."
         },
         {
           "part": "body",
@@ -125,7 +132,7 @@
           "type": "'sm' | 'md' | 'lg'",
           "defaultValue": "md",
           "appliesTo": "Section, SectionDefaultsProvider",
-          "description": "The step the heading sits at, on the type scale, independent of its rank"
+          "description": "The step of the heading: the label’s, xs for sm and md and sm for lg; a nested section’s mixed-case heading, sm, md or lg. Independent of its rank"
         },
         {
           "name": "level",
@@ -219,13 +226,11 @@
     "--slotted-font-size-lg",
     "--slotted-font-size-md",
     "--slotted-font-size-sm",
-    "--slotted-font-size-xl",
     "--slotted-font-size-xs",
     "--slotted-font-weight-semibold",
     "--slotted-line-height-lg",
     "--slotted-line-height-md",
     "--slotted-line-height-sm",
-    "--slotted-line-height-xl",
     "--slotted-line-height-xs",
     "--slotted-page-ground",
     "--slotted-radius-lg",
@@ -237,12 +242,19 @@
     "--slotted-section-heading-size-sm",
     "--slotted-section-inset",
     "--slotted-section-radius",
+    "--slotted-section-spacing",
+    "--slotted-section-subheading-size-lg",
+    "--slotted-section-subheading-size-md",
+    "--slotted-section-subheading-size-sm",
+    "--slotted-section-subsection-spacing",
     "--slotted-section-surface",
     "--slotted-space-1",
     "--slotted-space-3",
     "--slotted-space-4",
     "--slotted-space-5",
     "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-9",
     "--slotted-surface",
     "--slotted-surface-raised",
     "--slotted-text",
@@ -261,9 +273,9 @@
     {
       "id": "anatomy",
       "title": "Every part, written out",
-      "note": "The eyebrow with the count, the heading, the description under it, two actions at the end of the row, and the body with the table. The section is a region named by its heading.",
+      "note": "The eyebrow with the count, the heading with a status tag beside it, the description under it, an action at the end of the heading’s row, and the body with the table. The section is a region named by its heading.",
       "language": "tsx",
-      "source": "<Section divider id=\"itens\">\n  <SectionHeader>\n    <SectionTitle>\n      <SectionEyebrow>36 itens</SectionEyebrow>\n      <SectionHeading>Itens do pedido</SectionHeading>\n      <SectionDescription>Quantidades conforme a cotação aceite.</SectionDescription>\n    </SectionTitle>\n    <SectionActions>\n      <Button size=\"sm\" variant=\"outline\">\n        Exportar\n      </Button>\n    </SectionActions>\n  </SectionHeader>\n  <SectionBody>\n    <Table>…</Table>\n  </SectionBody>\n</Section>;\n",
+      "source": "<Section divider id=\"itens\">\n  <SectionHeader>\n    <SectionTitle>\n      <SectionEyebrow>36 itens</SectionEyebrow>\n      <SectionHeading>Itens do pedido</SectionHeading>\n      <SectionTags>\n        <Badge size=\"sm\" tone=\"warning\">\n          Pendente\n        </Badge>\n      </SectionTags>\n      <SectionDescription>Quantidades conforme a cotação aceite.</SectionDescription>\n    </SectionTitle>\n    <SectionActions>\n      <Button size=\"sm\" variant=\"outline\">\n        Exportar\n      </Button>\n    </SectionActions>\n  </SectionHeader>\n  <SectionBody>\n    <Table>…</Table>\n  </SectionBody>\n</Section>;\n",
       "verdict": "excerpt"
     },
     {
@@ -276,8 +288,8 @@
     },
     {
       "id": "size",
-      "title": "The step the heading sits at",
-      "note": "sm for a group inside a form, md for a section of a page, lg for the one section a screen is about. The step is a size on the type scale and says nothing about the rank.",
+      "title": "The step the label sits at",
+      "note": "The heading is a label in tracked small capitals: xs for sm and md, sm for lg. A section nested in another sets its heading in mixed case and the muted tone, on sm, md or lg for its own size. The step says nothing about the rank.",
       "language": "tsx",
       "source": "<Section level=\"3\" size=\"lg\">\n  …\n</Section>;\n",
       "verdict": "excerpt"
@@ -285,7 +297,7 @@
     {
       "id": "separation",
       "title": "Space, a rule, or a surface",
-      "note": "Three sections on the page’s sunken canvas: separated by the stack’s gap alone, by a divider under the header, and by a surface with an edge and a radius — no shadow, no hover, because a section is not a card.",
+      "note": "Three sections on the page’s sunken canvas: separated by the family’s own spacing and the label alone, by a divider under the header, and by a surface with an edge and a radius — no shadow, no hover, because a section is not a card.",
       "language": "tsx",
       "source": "<Section ground=\"surface\">…</Section>;\n",
       "verdict": "excerpt"
@@ -301,7 +313,7 @@
     {
       "id": "nested",
       "title": "A section inside a section",
-      "note": "The fleet, its heavy vehicles, the tractors: three depths, three ranks, and every rule the family owns reaches its parts with a child combinator, so the outer header styles nothing of the inner one.",
+      "note": "The fleet, its heavy vehicles, the tractors: three depths, three ranks. The outer heading is a label in small capitals; the inner ones are mixed case in the muted tone, the level read in case, size and tone. Every other rule reaches its part with a child combinator, so the outer header styles nothing else of the inner one.",
       "language": "tsx",
       "source": "<Section size=\"lg\">\n  <SectionHeading>Frota</SectionHeading>\n  <SectionBody>\n    <Section>\n      <SectionHeading>Veículos pesados</SectionHeading>\n      <SectionBody>\n        <Section size=\"sm\">\n          <SectionHeading>Cavalos mecânicos</SectionHeading>\n        </Section>\n      </SectionBody>\n    </Section>\n  </SectionBody>\n</Section>;\n",
       "verdict": "excerpt"

package/dist/docs/section.md

@@ -6,7 +6,7 @@
 ## Import
 
 ```tsx
-import { Section, SectionHeader, SectionTitle, SectionEyebrow, SectionHeading, SectionDescription, SectionActions, SectionBody, SectionDefaultsProvider } from '@slotted/react';
+import { Section, SectionHeader, SectionTitle, SectionEyebrow, SectionHeading, SectionTags, SectionDescription, SectionActions, SectionBody, SectionDefaultsProvider } from '@slotted/react';
 ```
 
 ## Minimal example
@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `title` | div | no |
 | `eyebrow` | span | no |
 | `heading` | h1 to h6, from the outline or level, or the element render returns | no |
+| `tags` | div | no |
 | `description` | p | no |
 | `actions` | div | no |
 | `body` | div | yes |
@@ -41,7 +42,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `size` | `'sm' \| 'md' \| 'lg'` | md | Section, SectionDefaultsProvider | The step the heading sits at, on the type scale, independent of its rank |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | Section, SectionDefaultsProvider | The step of the heading: the label’s, xs for sm and md and sm for lg; a nested section’s mixed-case heading, sm, md or lg. Independent of its rank |
 | `level` | `'auto' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | auto | Section | The rank of the heading. auto takes the one typography’s outline gives: h2 directly in a page, one deeper inside another section |
 | `divider` | `boolean` | false | Section, SectionDefaultsProvider | A rule under the header, for a page where space alone does not separate |
 | `ground` | `'none' \| 'surface'` | none | Section, SectionDefaultsProvider | none is transparent; surface paints the raised surface with a subtle edge and the large radius — no shadow, no hover, no action, because a section is not a card |
@@ -73,13 +74,13 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-page-ground`, `--slotted-radius-lg`, `--slotted-section-border`, `--slotted-section-description-measure`, `--slotted-section-gap`, `--slotted-section-heading-size-lg`, `--slotted-section-heading-size-md`, `--slotted-section-heading-size-sm`, `--slotted-section-inset`, `--slotted-section-radius`, `--slotted-section-surface`, `--slotted-space-1`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-page-ground`, `--slotted-radius-lg`, `--slotted-section-border`, `--slotted-section-description-measure`, `--slotted-section-gap`, `--slotted-section-heading-size-lg`, `--slotted-section-heading-size-md`, `--slotted-section-heading-size-sm`, `--slotted-section-inset`, `--slotted-section-radius`, `--slotted-section-spacing`, `--slotted-section-subheading-size-lg`, `--slotted-section-subheading-size-md`, `--slotted-section-subheading-size-sm`, `--slotted-section-subsection-spacing`, `--slotted-section-surface`, `--slotted-space-1`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-9`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples
 
 ### Every part, written out
 
-The eyebrow with the count, the heading, the description under it, two actions at the end of the row, and the body with the table. The section is a region named by its heading.
+The eyebrow with the count, the heading with a status tag beside it, the description under it, an action at the end of the heading’s row, and the body with the table. The section is a region named by its heading.
 
 Excerpt — not a complete module
 
@@ -89,6 +90,11 @@ Excerpt — not a complete module
     <SectionTitle>
       <SectionEyebrow>36 itens</SectionEyebrow>
       <SectionHeading>Itens do pedido</SectionHeading>
+      <SectionTags>
+        <Badge size="sm" tone="warning">
+          Pendente
+        </Badge>
+      </SectionTags>
       <SectionDescription>Quantidades conforme a cotação aceite.</SectionDescription>
     </SectionTitle>
     <SectionActions>
@@ -120,9 +126,9 @@ Excerpt — not a complete module
 </Section>;
 ```
 
-### The step the heading sits at
+### The step the label sits at
 
-sm for a group inside a form, md for a section of a page, lg for the one section a screen is about. The step is a size on the type scale and says nothing about the rank.
+The heading is a label in tracked small capitals: xs for sm and md, sm for lg. A section nested in another sets its heading in mixed case and the muted tone, on sm, md or lg for its own size. The step says nothing about the rank.
 
 Excerpt — not a complete module
 
@@ -134,7 +140,7 @@ Excerpt — not a complete module
 
 ### Space, a rule, or a surface
 
-Three sections on the page’s sunken canvas: separated by the stack’s gap alone, by a divider under the header, and by a surface with an edge and a radius — no shadow, no hover, because a section is not a card.
+Three sections on the page’s sunken canvas: separated by the family’s own spacing and the label alone, by a divider under the header, and by a surface with an edge and a radius — no shadow, no hover, because a section is not a card.
 
 Excerpt — not a complete module
 
@@ -154,7 +160,7 @@ Excerpt — not a complete module
 
 ### A section inside a section
 
-The fleet, its heavy vehicles, the tractors: three depths, three ranks, and every rule the family owns reaches its parts with a child combinator, so the outer header styles nothing of the inner one.
+The fleet, its heavy vehicles, the tractors: three depths, three ranks. The outer heading is a label in small capitals; the inner ones are mixed case in the muted tone, the level read in case, size and tone. Every other rule reaches its part with a child combinator, so the outer header styles nothing else of the inner one.
 
 Excerpt — not a complete module