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

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",
@@ -155,7 +162,7 @@
           "type": "boolean",
           "defaultValue": "false",
           "appliesTo": "slSection, provideSectionDefaults",
-          "description": "The header stays under the page chrome while the body scrolls, painted in the page’s ground. Without a page it sticks to the top of whatever scrolls"
+          "description": "The header stays under the page chrome while the body scrolls, painted in the page’s ground. Without a page it sticks to the top of whatever scrolls. A region inside a page that paints a ground of its own declares --slotted-page-ground with that ground, so a sticky header under it matches the region."
         },
         {
           "name": "id",
@@ -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,11 +42,11 @@ 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 |
-| `sticky` | `boolean` | false | slSection, provideSectionDefaults | The header stays under the page chrome while the body scrolls, painted in the page’s ground. Without a page it sticks to the top of whatever scrolls |
+| `sticky` | `boolean` | false | slSection, provideSectionDefaults | The header stays under the page chrome while the body scrolls, painted in the page’s ground. Without a page it sticks to the top of whatever scrolls. A region inside a page that paints a ground of its own declares --slotted-page-ground with that ground, so a sticky header under it matches the region. |
 | `id` | `attribute` | generated | slSection | The identifier a hash link reaches, read with HostAttributeToken. The heading’s own id is derived from it |
 | `slSectionHeading on any element` | `directive` | — | the consumer’s own element | A native heading gets nothing added; a div or a link gets role="heading" and aria-level, so a linked or editable title keeps its rank |
 | `exportAs slSection` | `SlSection` | — | a template reference | The resolved rank, size, ground and the identifiers, as signals |
@@ -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
 

package/docs/segmented-control.json

@@ -19,6 +19,10 @@
     "condense": [
       "none",
       "icons"
+    ],
+    "variant": [
+      "track",
+      "underline"
     ]
   },
   "members": {
@@ -29,7 +33,8 @@
         "orientation": "horizontal",
         "condense": "none",
         "fullWidth": false,
-        "disabled": false
+        "disabled": false,
+        "variant": "track"
       },
       "capabilities": [
         "selection",
@@ -145,6 +150,13 @@
           "appliesTo": "slSegmentedControl",
           "description": "How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical"
         },
+        {
+          "name": "variant",
+          "type": "'track' | 'underline'",
+          "defaultValue": "track",
+          "appliesTo": "slSegmentedControl",
+          "description": "How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined"
+        },
         {
           "name": "condense",
           "type": "'none' | 'icons'",
@@ -262,14 +274,12 @@
     }
   },
   "tokens": [
-    "--slotted-border-subtle",
-    "--slotted-control-border-color",
+    "--slotted-border-width-thick",
     "--slotted-control-border-width",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",
     "--slotted-control-font-size-sm",
-    "--slotted-control-font-weight",
     "--slotted-control-gap-lg",
     "--slotted-control-gap-md",
     "--slotted-control-gap-sm",
@@ -286,8 +296,6 @@
     "--slotted-control-padding-inline-md",
     "--slotted-control-padding-inline-sm",
     "--slotted-control-radius",
-    "--slotted-control-shadow",
-    "--slotted-control-surface",
     "--slotted-control-transition-duration",
     "--slotted-control-transition-easing",
     "--slotted-disabled-background",
@@ -298,7 +306,10 @@
     "--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-radius-full",
     "--slotted-radius-xs",
     "--slotted-segmented-control-active-background",
     "--slotted-segmented-control-background",
@@ -309,24 +320,29 @@
     "--slotted-segmented-control-disabled-color",
     "--slotted-segmented-control-disabled-indicator-background",
     "--slotted-segmented-control-divider-color",
+    "--slotted-segmented-control-font-weight",
+    "--slotted-segmented-control-gap",
     "--slotted-segmented-control-hover-background",
     "--slotted-segmented-control-indicator-background",
     "--slotted-segmented-control-indicator-border-color",
+    "--slotted-segmented-control-indicator-shadow",
     "--slotted-segmented-control-inset",
     "--slotted-segmented-control-invalid-border-color",
     "--slotted-segmented-control-invalid-edge-width",
     "--slotted-segmented-control-invalid-focus-ring-color",
     "--slotted-segmented-control-radius",
     "--slotted-segmented-control-shadow",
+    "--slotted-segmented-control-underline-checked-color",
+    "--slotted-segmented-control-underline-color",
+    "--slotted-segmented-control-underline-gap",
+    "--slotted-shadow-xs",
     "--slotted-space-1",
+    "--slotted-space-6",
+    "--slotted-surface-raised",
     "--slotted-target-min",
     "--slotted-text",
-    "--slotted-tone-accent-border",
-    "--slotted-tone-accent-subtle-active",
-    "--slotted-tone-accent-text",
-    "--slotted-tone-danger-border",
-    "--slotted-tone-secondary-subtle-active",
-    "--slotted-tone-secondary-subtle-hover"
+    "--slotted-text-muted",
+    "--slotted-tone-danger-border"
   ],
   "examples": [
     {
@@ -369,6 +385,14 @@
       "source": "<div slSegmentedControl aria-label=\"Alinhamento\" defaultValue=\"center\">\n  <label slSegment value=\"start\" aria-label=\"Início\">\n    <ng-icon slSegmentIcon name=\"lucideAlignLeft\" />\n  </label>\n</div>\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "variants",
+      "title": "A track, or the words alone",
+      "note": "underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Período\" defaultValue=\"month\" variant=\"underline\">\n  <label slSegment value=\"day\">Dia</label>\n  <label slSegment value=\"week\">Semana</label>\n  <label slSegment value=\"month\">Mês</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "condense",
       "title": "Narrower than its words",

package/docs/segmented-control.md

@@ -48,6 +48,7 @@ Excerpt — not a complete module
 | `name` | `string` | — | slSegmentedControl | The submission name the segments share, and the reason the platform treats them as one radio group. Generated when none is written, from an application-scoped factory so the server and the client agree |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slSegmentedControl | The control step. The track measures its segments back from it, so the whole control is exactly as tall as the field beside it |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | slSegmentedControl | How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical |
+| `variant` | `'track' \| 'underline'` | track | slSegmentedControl | How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined |
 | `condense` | `'none' \| 'icons'` | none | slSegmentedControl | What the control does when it is narrower than its labels need. icons keeps the marks and hides the words, and makes the control take its parent’s width so there is a width to ask a question about |
 | `fullWidth` | `boolean` | false | slSegmentedControl | Whether the equal columns spread across the whole line. Left alone every column is the widest label’s |
 | `disabled` | `boolean` | false | slSegmentedControl | Unstated rather than false, so the control defers to the field around it and to a form that disables it. Stated, it reaches every radio as the native attribute |
@@ -76,6 +77,7 @@ Excerpt — not a complete module
 | `size` | `sm`, `md`, `lg` | `md` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 | `condense` | `none`, `icons` | `none` |
+| `variant` | `track`, `underline` | `track` |
 
 ## Rules
 
@@ -88,7 +90,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-width`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-space-1`, `--slotted-target-min`, `--slotted-text`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-width-thick`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--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-radius-full`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-font-weight`, `--slotted-segmented-control-gap`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-indicator-shadow`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-segmented-control-underline-checked-color`, `--slotted-segmented-control-underline-color`, `--slotted-segmented-control-underline-gap`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-surface-raised`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-danger-border`
 
 ## Examples
 
@@ -145,6 +147,20 @@ Excerpt — not a complete module
 </div>
 ```
 
+### A track, or the words alone
+
+underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.
+
+Excerpt — not a complete module
+
+```html
+<div slSegmentedControl aria-label="Período" defaultValue="month" variant="underline">
+  <label slSegment value="day">Dia</label>
+  <label slSegment value="week">Semana</label>
+  <label slSegment value="month">Mês</label>
+</div>
+```
+
 ### Narrower than its words
 
 Below the width its labels need, a control told to condense keeps its marks and hides its words — hidden, never removed, so every segment is announced the same at every width.

package/docs/select.json

@@ -829,6 +829,7 @@
     "--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",

package/docs/select.md

@@ -192,7 +192,7 @@ export class SelectBasic {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-select-action-active-background`, `--slotted-select-action-color`, `--slotted-select-action-hover-background`, `--slotted-select-action-size`, `--slotted-select-arrow-color`, `--slotted-select-background`, `--slotted-select-border-color`, `--slotted-select-color`, `--slotted-select-content-border-color`, `--slotted-select-content-padding-block`, `--slotted-select-content-padding-inline`, `--slotted-select-content-radius`, `--slotted-select-content-shadow`, `--slotted-select-content-text`, `--slotted-select-content-text-muted`, `--slotted-select-disabled-background`, `--slotted-select-disabled-border-color`, `--slotted-select-disabled-color`, `--slotted-select-highlight`, `--slotted-select-highlight-active`, `--slotted-select-highlight-ring`, `--slotted-select-hover-border-color`, `--slotted-select-icon-size-min`, `--slotted-select-invalid-border-color`, `--slotted-select-invalid-edge-width`, `--slotted-select-invalid-focus-ring-color`, `--slotted-select-item-radius`, `--slotted-select-measure`, `--slotted-select-open-border-color`, `--slotted-select-placeholder-color`, `--slotted-select-plain-hover-background`, `--slotted-select-radius`, `--slotted-select-readonly-background`, `--slotted-select-search-icon-color`, `--slotted-select-selected-color`, `--slotted-select-separator-color`, `--slotted-select-shadow`, `--slotted-select-subtle-background`, `--slotted-select-subtle-border-color`, `--slotted-select-subtle-hover-background`, `--slotted-select-surface`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-border-subtle`, `--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-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-select-action-active-background`, `--slotted-select-action-color`, `--slotted-select-action-hover-background`, `--slotted-select-action-size`, `--slotted-select-arrow-color`, `--slotted-select-background`, `--slotted-select-border-color`, `--slotted-select-color`, `--slotted-select-content-border-color`, `--slotted-select-content-padding-block`, `--slotted-select-content-padding-inline`, `--slotted-select-content-radius`, `--slotted-select-content-shadow`, `--slotted-select-content-text`, `--slotted-select-content-text-muted`, `--slotted-select-disabled-background`, `--slotted-select-disabled-border-color`, `--slotted-select-disabled-color`, `--slotted-select-highlight`, `--slotted-select-highlight-active`, `--slotted-select-highlight-ring`, `--slotted-select-hover-border-color`, `--slotted-select-icon-size-min`, `--slotted-select-invalid-border-color`, `--slotted-select-invalid-edge-width`, `--slotted-select-invalid-focus-ring-color`, `--slotted-select-item-radius`, `--slotted-select-measure`, `--slotted-select-open-border-color`, `--slotted-select-placeholder-color`, `--slotted-select-plain-hover-background`, `--slotted-select-radius`, `--slotted-select-readonly-background`, `--slotted-select-search-icon-color`, `--slotted-select-selected-color`, `--slotted-select-separator-color`, `--slotted-select-shadow`, `--slotted-select-subtle-background`, `--slotted-select-subtle-border-color`, `--slotted-select-subtle-hover-background`, `--slotted-select-surface`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 

package/docs/side-navigation.json

@@ -403,6 +403,7 @@
     "--slotted-app-shell-row-inset",
     "--slotted-app-shell-row-line-height",
     "--slotted-app-shell-row-mark",
+    "--slotted-app-shell-row-ring-inset",
     "--slotted-border-subtle",
     "--slotted-border-width-thin",
     "--slotted-control-font-family",

package/docs/side-navigation.md

@@ -139,7 +139,7 @@ export class SideNavigationBasic {
 
 ## Tokens
 
-`--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-app-shell-row-ring-inset`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 

package/docs/skills/build-own-element/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: build-own-element
+description: Use when writing a component, widget or visual element that no family of @slotted/angular draws — a timeline strip, a seat map, a heat grid, a bespoke control. Proves first that no family answers, then builds the element from the theme's tokens with the states, focus, target size, forced colours and motion the families keep.
+---
+
+# Build an element of the application's own
+
+An element of the application's own is a node the application writes and
+styles itself, outside any family (CP-04). It is the last resort, and it is
+built from the same theme as the families beside it.
+
+## 1. Prove that no family answers
+
+1. Read `../../index.md` and list the families whose line is near the
+   element.
+2. Read `../../<family>.md` for each: its anatomy, its slots, its axes.
+   When a family draws the element, or names a slot that holds it, the family
+   is used (CP-01).
+3. When a family draws a part of the element — a toggle, a popup, a list, a
+   tooltip — that part is the family, and only the rest is written.
+4. Write, in a comment above the element, the families read and what each
+   lacks.
+
+## 2. What is free and what is fixed
+
+Free, decided by the problem:
+
+- the element's shape, its arrangement and how it encodes the data — a strip,
+  a grid, a ring, a map;
+- which states it has, and what each state shows;
+- its layout inside the box it is given.
+
+Fixed, read from the theme:
+
+- every value it paints comes from a token of the group
+  `../../tokens.md` lists for that decision (OE-01, CP-05);
+- a tone carries the meaning the `tone` group gives it, and a data series takes
+  the `data` slots in order;
+- how its states yield, how focus is drawn, how large a target is, what forced
+  colours keep and how it moves (OE-02 to OE-07).
+
+A new appearance is a new combination of tokens, never a new value.
+
+## 3. Map each decision to a group
+
+| Decision                                       | Group in `../../tokens.md`                    |
+| ---------------------------------------------- | --------------------------------------------------- |
+| Distance between parts, inner padding          | `space`                                             |
+| Corners                                        | `radius`                                            |
+| Ground of the element and its parts            | `surface`; `tone` when the ground carries an intent |
+| Text                                           | `text`, `font-size`, `font-weight`, `line-height`   |
+| Edges                                          | `border`, `border-width`                            |
+| Series and categories of data                  | `data`                                              |
+| The place the reader is on, a matched span     | `current`, `highlight`                              |
+| Focus                                          | `focus-ring`                                        |
+| Hit area                                       | `target`                                            |
+| A part that stands beside controls             | `control`, `control-size`                           |
+| Movement                                       | `duration`, `easing`                                |
+| A surface above another, a layer over the page | `shadow`, `z-index`                                 |
+| A disabled part                                | `disabled`                                          |
+
+A decision no group names is written as a literal beside a comment that says
+why no token covers it (CP-05).
+
+## 4. Write it
+
+1. Give each interactive part the native element that carries its role: a
+   button for an action, a link for a destination, an input for a value. Add
+   ARIA only where no element carries the role.
+2. List the element's states, and paint each pair that can hold at once in the
+   order of OE-02.
+3. Draw focus on `:focus-visible` as an outline of `--slotted-focus-ring-width`
+   in `--slotted-focus-ring-color`, offset by `--slotted-focus-ring-offset`
+   (OE-03). Size every target to `--slotted-target-min` (OE-04), and take the
+   control step of the controls beside it (OE-05).
+4. Under `forced-colors: active`, tell each state from rest by a border,
+   an outline or text (OE-06). Move with the motion tokens, and stop a
+   repeating animation under `prefers-reduced-motion: reduce` (OE-07).
+5. Write the CSS in a layer of the application after the library's, on class
+   names of the element's own (OE-08). Reflow by a container query on a
+   container of its own (OE-09). Float with a raised surface and one shadow
+   step (OE-10).
+6. Text that stands alone takes its size from the `typography` family (CP-02).
+
+## 5. Done
+
+1. Each `Check` of `../../guidelines/own-elements.md` passes.
+2. The element's CSS holds no colour or length literal without its comment.
+3. Every custom property the element reads is listed in
+   `../../tokens.md` above "Read by their family only".