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

package/docs/page.json

@@ -221,6 +221,7 @@
       "accessibility": [
         "The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. Write it on a main element and the directive adds nothing; on any other element it writes role=\"main\", unless landmark=\"none\" says the document already has one.",
         "The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise — read with HostAttributeToken, so the consumer’s word is never written over.",
+        "Content outside slPageBody receives no inset: the inset lives on the body, so content written straight into slPage is drawn against the viewport edges. In development, slPage warns once when it holds content and no slPageBody.",
         "The outline is typography’s. slHeadingLevel is a host directive of the body, so a section written directly in it takes h2 under the header’s h1 and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.",
         "The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.",
         "Scrolling is the platform’s. The page never writes a scroll position, and under scroll=\"self\" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus."

package/docs/page.md

@@ -67,6 +67,7 @@ Excerpt — not a complete module
 
 - The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. Write it on a main element and the directive adds nothing; on any other element it writes role="main", unless landmark="none" says the document already has one.
 - The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise — read with HostAttributeToken, so the consumer’s word is never written over.
+- Content outside slPageBody receives no inset: the inset lives on the body, so content written straight into slPage is drawn against the viewport edges. In development, slPage warns once when it holds content and no slPageBody.
 - The outline is typography’s. slHeadingLevel is a host directive of the body, so a section written directly in it takes h2 under the header’s h1 and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.
 - The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.
 - Scrolling is the platform’s. The page never writes a scroll position, and under scroll="self" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus.

package/docs/popover.json

@@ -146,7 +146,7 @@
           "part": "content",
           "element": "the element carrying slPopoverContent",
           "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: slPopoverHeader, slPopoverBody and slPopoverFooter carry the panel inset, set by --slotted-popover-padding-inline and --slotted-popover-padding-block."
         },
         {
           "part": "header",

package/docs/progress-indicator.json

@@ -15,6 +15,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -143,7 +144,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"
@@ -339,7 +340,6 @@
     "--slotted-progress-indicator-wave-phase",
     "--slotted-radius-full",
     "--slotted-radius-none",
-    "--slotted-space-1",
     "--slotted-space-2",
     "--slotted-space-3",
     "--slotted-space-4",
@@ -348,6 +348,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"
@@ -428,7 +429,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": "html",
       "source": "<div slProgressBar label=\"Small\" size=\"sm\" wave [value]=\"55\"></div>\n<div slProgressBar label=\"Large\" size=\"lg\" wave [value]=\"55\"></div>\n<div slProgressCircle label=\"Saving\" size=\"lg\" wave [value]=\"55\"></div>\n",
       "verdict": "excerpt"

package/docs/progress-indicator.md

@@ -38,7 +38,7 @@ Excerpt — not a complete module
 | `max` | `number` | 100 | slProgressBar, slProgressCircle | The top of the range, and what aria-valuemax reports. Reaching it writes data-complete |
 | `buffer` | `number \| null` | — | slProgressBar | 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 an aria-label on your own element, 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 | slProgressBar, slProgressCircle | Whether the formatted number is rendered beside the name. A wait needs no number to be understood |
@@ -70,7 +70,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
@@ -85,7 +85,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
 
@@ -195,7 +195,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/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"
       ]
     }
   },
@@ -124,6 +130,18 @@
           "element": "button[slPromptComposerSubmit]",
           "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": [
@@ -169,6 +187,13 @@
           "appliesTo": "slPromptComposer, providePromptComposerDefaults",
           "description": "raised is the chat surface; outline and subtle sit inside a form"
         },
+        {
+          "name": "emphasis",
+          "type": "'none' | 'ring'",
+          "defaultValue": "none",
+          "appliesTo": "sl-prompt-composer",
+          "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",
@@ -318,9 +343,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",
@@ -340,9 +367,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",
@@ -378,6 +410,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",
@@ -398,6 +437,7 @@
     "--slotted-space-3",
     "--slotted-space-4",
     "--slotted-space-5",
+    "--slotted-space-8",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/docs/prompt-composer.md

@@ -49,6 +49,8 @@ Excerpt — not a complete module
 | `action` | button[slPromptComposerAction] | no |
 | `attach` | button[slPromptComposerAttach] | no |
 | `submit` | button[slPromptComposerSubmit] | no |
+| `ring` | span, aria-hidden | no |
+| `glow` | span, aria-hidden | no |
 
 ## Props
 
@@ -60,6 +62,7 @@ Excerpt — not a complete module
 | `submitOn` | `'enter' \| 'mod-enter'` | enter | slPromptComposer, providePromptComposerDefaults | Which key sends. Shift+Enter always breaks a line; Mod+Enter always sends |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slPromptComposer, providePromptComposerDefaults | The control step, read from the field first |
 | `variant` | `'raised' \| 'outline' \| 'subtle'` | raised | slPromptComposer, providePromptComposerDefaults | raised is the chat surface; outline and subtle sit inside a form |
+| `emphasis` | `'none' \| 'ring'` | none | sl-prompt-composer | 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 | slPromptComposer | Whether the send is available; an application with attachments ready says true |
 | `accept / maxSize / maxFiles / multiple` | `string / number / number / boolean` | — / — / — / true | slPromptComposer | The selection rules upload applies, for the paperclip, a paste and a drop |
 | `disabled` | `boolean` | from the field, or false | slPromptComposer | 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 |
@@ -94,6 +97,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
 
@@ -106,7 +110,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/docs/rating.json

@@ -14,6 +14,7 @@
     ],
     "tone": [
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -241,7 +242,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "SlRating, provideRating",
           "description": "The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit"
@@ -457,7 +458,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "SlRatingDisplay, provideRating",
           "description": "The colour of the lit share"
@@ -757,7 +758,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "SlRatingSummary, provideRating",
           "description": "The colour of the stars and the bars"
@@ -883,6 +884,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/docs/rating.md

@@ -105,7 +105,7 @@ Excerpt — not a complete module
 | `step` | `1 \| 0.5` | 1 | SlRating | The smallest move. A half adds a second radio per symbol; smaller fractions are refused because a third of a star is below the minimum target |
 | `clearable` | `boolean` | true | SlRating, provideRating | Whether a press on the checked radio, Backspace or Delete empty the value, with the reason clear |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SlRating, provideRating | The step of the symbols and the caption. Read from the field or field group first |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | SlRating, provideRating | The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | SlRating, provideRating | The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit |
 | `name` | `string` | generated | SlRating | The submission name every radio shares. Generated when none is written, because an unnamed set of radios is not a group |
 | `form` | `string` | — | SlRating | The form the radios belong to when the rating sits outside it |
 | `disabled` | `boolean` | from the field, or false | SlRating | Native on every radio: the row leaves the tab order. A disabled form control sets it too |
@@ -128,7 +128,7 @@ Excerpt — not a complete module
 | `value` | `number` | — | SlRatingDisplay | The number drawn. Any fraction; clamped to the scale, NaN drawn as nought |
 | `max` | `number` | 5 | SlRatingDisplay, provideRating | How many symbols the scale has |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SlRatingDisplay, provideRating | The step of the symbols and the text |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingDisplay, provideRating | The colour of the lit share |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingDisplay, provideRating | The colour of the lit share |
 | `variant` | `'full' \| 'compact' \| 'histogram'` | full | SlRatingDisplay | Every symbol; one lit star with the number; or one star, the number and the distribution |
 | `count` | `number` | — | SlRatingDisplay | How many readings. Written beside the stars and in the accessible name |
 | `distribution` | `readonly number[]` | — | SlRatingDisplay | Counts per level, lowest first, drawn by the histogram variant |
@@ -150,7 +150,7 @@ Excerpt — not a complete module
 | `insightThresholds` | `Partial<RatingInsightThresholds>` | { divided: 0.25, few: 30, margin: 0.5, consensus: 0.8 } | SlRatingSummary, provideRating | Where each conclusion is drawn, merged key by key. margin also decides when the spectrum says its mean is uncertain |
 | `showInsight` | `boolean` | true | SlRatingSummary | Whether the spectrum draws its conclusion. The bars variant draws none |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SlRatingSummary, provideRating | The step of the text and the rows |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingSummary, provideRating | The colour of the stars and the bars |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingSummary, provideRating | The colour of the stars and the bars |
 | `messages` | `Partial<RatingMessages>` | — | SlRatingSummary | Words laid over the language in force, key by key — every sentence of the summary: summaryCount, summaryEmpty, spectrumCount, spectrumUncertain, levelLabel, distributionLabel, the buckets and the four conclusions |
 | `locale` | `string` | the language in force | SlRatingSummary | The locale every number is written in |
 | `exportAs="slRatingSummary"` | `SlRatingSummary` | — | a template | Reaches the instance: summary() is the whole summariseRatings result, for a caption of one’s own |
@@ -177,7 +177,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` | — |
 
@@ -197,7 +197,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/docs/section.json

@@ -58,6 +58,7 @@
         "title",
         "eyebrow",
         "heading",
+        "tags",
         "description",
         "actions",
         "body"
@@ -67,8 +68,8 @@
   "docs": {
     "section": {
       "imports": {
-        "source": "import { SlSection, SlSectionHeader, SlSectionTitle, SlSectionEyebrow, SlSectionHeading, SlSectionDescription, SlSectionActions, SlSectionBody, provideSectionDefaults } from '@slotted/angular/section';",
-        "selector": "[slSection], [slSectionHeader], [slSectionTitle], [slSectionEyebrow], [slSectionHeading], [slSectionDescription], [slSectionActions], [slSectionBody]",
+        "source": "import { SlSection, SlSectionHeader, SlSectionTitle, SlSectionEyebrow, SlSectionHeading, SlSectionTags, SlSectionDescription, SlSectionActions, SlSectionBody, provideSectionDefaults } from '@slotted/angular/section';",
+        "selector": "[slSection], [slSectionHeader], [slSectionTitle], [slSectionEyebrow], [slSectionHeading], [slSectionTags], [slSectionDescription], [slSectionActions], [slSectionBody]",
         "exportAs": "slSection, slSectionHeading"
       },
       "anatomy": [
@@ -82,19 +83,19 @@
           "part": "header",
           "element": "the element carrying slSectionHeader",
           "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": "the element carrying slSectionTitle",
           "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": "the element carrying slSectionEyebrow",
           "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",
@@ -102,6 +103,12 @@
           "required": false,
           "purpose": "The heading. Rendering it is what names the region. A native heading written by the consumer is left alone; a div or a link gets role=\"heading\" and aria-level from the rank the section resolved."
         },
+        {
+          "part": "tags",
+          "element": "the element carrying slSectionTags",
+          "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": "the p carrying slSectionDescription",
@@ -112,7 +119,7 @@
           "part": "actions",
           "element": "the element carrying slSectionActions",
           "required": false,
-          "purpose": "The end of the header row: an slButton, an slToolbar, an slLink. It wraps under the title when the width runs out."
+          "purpose": "The end of the heading’s row, on its baseline: an slButton, an slToolbar, an slLink. On a header narrower than 20rem it takes a row of its own at the end."
         },
         {
           "part": "body",
@@ -127,7 +134,7 @@
           "type": "'sm' | 'md' | 'lg'",
           "defaultValue": "md",
           "appliesTo": "slSection, provideSectionDefaults",
-          "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",
@@ -221,13 +228,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",
@@ -239,12 +244,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",
@@ -263,9 +275,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": "html",
-      "source": "<section slSection divider id=\"itens\">\n  <div slSectionHeader>\n    <div slSectionTitle>\n      <span slSectionEyebrow>36 itens</span>\n      <h2 slSectionHeading>Itens do pedido</h2>\n      <p slSectionDescription>Quantidades conforme a cotação aceite.</p>\n    </div>\n    <div slSectionActions><button slButton size=\"sm\" variant=\"outline\">Exportar</button></div>\n  </div>\n  <div slSectionBody><div slTable>…</div></div>\n</section>\n",
+      "source": "<section slSection divider id=\"itens\">\n  <div slSectionHeader>\n    <div slSectionTitle>\n      <span slSectionEyebrow>36 itens</span>\n      <h2 slSectionHeading>Itens do pedido</h2>\n      <div slSectionTags><span slBadge size=\"sm\" tone=\"warning\">Pendente</span></div>\n      <p slSectionDescription>Quantidades conforme a cotação aceite.</p>\n    </div>\n    <div slSectionActions><button slButton size=\"sm\" variant=\"outline\">Exportar</button></div>\n  </div>\n  <div slSectionBody><div slTable>…</div></div>\n</section>\n",
       "verdict": "excerpt"
     },
     {
@@ -278,8 +290,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": "html",
       "source": "<section slSection level=\"3\" size=\"lg\">…</section>\n",
       "verdict": "excerpt"
@@ -287,7 +299,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": "html",
       "source": "<section slSection ground=\"surface\">…</section>\n",
       "verdict": "excerpt"
@@ -303,7 +315,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": "html",
       "source": "<section slSection size=\"lg\">\n  <div slSectionHeading>Frota</div>\n  <div slSectionBody>\n    <section slSection>\n      <div slSectionHeading>Veículos pesados</div>\n      <div slSectionBody>\n        <section slSection size=\"sm\"><div slSectionHeading>Cavalos mecânicos</div></section>\n      </div>\n    </section>\n  </div>\n</section>\n",
       "verdict": "excerpt"

package/docs/section.md

@@ -6,10 +6,10 @@
 ## Import
 
 ```ts
-import { SlSection, SlSectionHeader, SlSectionTitle, SlSectionEyebrow, SlSectionHeading, SlSectionDescription, SlSectionActions, SlSectionBody, provideSectionDefaults } from '@slotted/angular/section';
+import { SlSection, SlSectionHeader, SlSectionTitle, SlSectionEyebrow, SlSectionHeading, SlSectionTags, SlSectionDescription, SlSectionActions, SlSectionBody, provideSectionDefaults } from '@slotted/angular/section';
 ```
 
-Selector: `[slSection], [slSectionHeader], [slSectionTitle], [slSectionEyebrow], [slSectionHeading], [slSectionDescription], [slSectionActions], [slSectionBody]` · exportAs: `slSection, slSectionHeading`
+Selector: `[slSection], [slSectionHeader], [slSectionTitle], [slSectionEyebrow], [slSectionHeading], [slSectionTags], [slSectionDescription], [slSectionActions], [slSectionBody]` · exportAs: `slSection, slSectionHeading`
 
 ## Minimal example
 
@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `title` | the element carrying slSectionTitle | no |
 | `eyebrow` | the element carrying slSectionEyebrow | no |
 | `heading` | the h1 to h6 carrying slSectionHeading, or any element, which then gets role="heading" | no |
+| `tags` | the element carrying slSectionTags | no |
 | `description` | the p carrying slSectionDescription | no |
 | `actions` | the element carrying slSectionActions | no |
 | `body` | the element carrying slSectionBody | yes |
@@ -41,7 +42,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `size` | `'sm' \| 'md' \| 'lg'` | md | slSection, provideSectionDefaults | The step the heading sits at, on the type scale, independent of its rank |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | slSection, provideSectionDefaults | 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 | slSection | The rank of the heading. auto takes the one typography’s outline gives: 2 directly in a page body, one deeper inside another section. A native heading element keeps its own tag; any other element gets aria-level from this |
 | `divider` | `boolean` | false | slSection, provideSectionDefaults | A rule under the header, for a page where space alone does not separate |
 | `ground` | `'none' \| 'surface'` | none | slSection, provideSectionDefaults | 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,7 @@ Excerpt — not a complete module
     <div slSectionTitle>
       <span slSectionEyebrow>36 itens</span>
       <h2 slSectionHeading>Itens do pedido</h2>
+      <div slSectionTags><span slBadge size="sm" tone="warning">Pendente</span></div>
       <p slSectionDescription>Quantidades conforme a cotação aceite.</p>
     </div>
     <div slSectionActions><button slButton size="sm" variant="outline">Exportar</button></div>
@@ -112,9 +114,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
 
@@ -124,7 +126,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
 
@@ -144,7 +146,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