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

package/dist/docs/section.json

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

package/dist/docs/section.md

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

package/dist/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",
@@ -143,6 +148,13 @@
           "appliesTo": "SegmentedControl",
           "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": "SegmentedControl",
+          "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'",
@@ -268,14 +280,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",
@@ -292,8 +302,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",
@@ -304,7 +312,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",
@@ -315,24 +326,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": [
     {
@@ -375,6 +391,14 @@
       "source": "<SegmentedControl aria-label=\"Alinhamento\" defaultValue=\"center\">\n  <Segment aria-label=\"Início\" icon={<AlignStartIcon />} value=\"start\" />\n  <Segment aria-label=\"Centro\" icon={<AlignCenterIcon />} value=\"center\" />\n</SegmentedControl>;\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": "tsx",
+      "source": "<SegmentedControl aria-label=\"Período\" defaultValue=\"month\" variant=\"underline\">\n  <Segment value=\"day\">Dia</Segment>\n  <Segment value=\"week\">Semana</Segment>\n  <Segment value=\"month\">Mês</Segment>\n</SegmentedControl>;\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "condense",
       "title": "Narrower than its words",

package/dist/docs/segmented-control.md

@@ -41,6 +41,7 @@ Excerpt — not a complete module
 | `name` | `string` | — | SegmentedControl | The submission name the segments share, and the reason the platform treats them as one radio group. Generated when none is written, and the cost is that such a control submits under a generated key |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SegmentedControl | 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 | SegmentedControl | 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 | SegmentedControl | How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined |
 | `condense` | `'none' \| 'icons'` | none | SegmentedControl | 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 | SegmentedControl | Whether the equal columns spread across the whole line. Left alone every column is the widest label’s |
 | `disabled` | `boolean` | false | SegmentedControl | Unstated rather than false, so the control defers to the field around it. Stated, it reaches every radio as the native attribute, which is also what makes the browser skip it with the arrows |
@@ -70,6 +71,7 @@ Excerpt — not a complete module
 | `size` | `sm`, `md`, `lg` | `md` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 | `condense` | `none`, `icons` | `none` |
+| `variant` | `track`, `underline` | `track` |
 
 ## Rules
 
@@ -83,7 +85,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
 
@@ -143,6 +145,20 @@ Excerpt — not a complete module
 </SegmentedControl>;
 ```
 
+### 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
+
+```tsx
+<SegmentedControl aria-label="Período" defaultValue="month" variant="underline">
+  <Segment value="day">Dia</Segment>
+  <Segment value="week">Semana</Segment>
+  <Segment value="month">Mês</Segment>
+</SegmentedControl>;
+```
+
 ### 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/dist/docs/select.json

@@ -483,7 +483,7 @@
           "type": "SelectItems",
           "defaultValue": "—",
           "appliesTo": "Select",
-          "description": "Values with their labels, so the closed control can show the label of a value whose option has not been rendered. Options are rendered only while the list is open."
+          "description": "Values with their labels, read before any option renders. Without it, a held value takes its label from its SelectItem: while the list is closed and a held value has no label, the options render once outside the document and register theirs. Pass items when the options are not rendered until the list opens, such as options fetched on open."
         },
         {
           "name": "name",
@@ -861,6 +861,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/dist/docs/select.md

@@ -100,7 +100,7 @@ export default function SelectBasic() {
 | `defaultOpen` | `boolean` | false | Select | Whether an uncontrolled select starts open. |
 | `highlightedValue` | `string \| null` | — | Select | The highlighted option. Passing it makes the highlight controlled. The highlight is where the keyboard is, not what is chosen. |
 | `defaultHighlightedValue` | `string \| null` | — | Select | The option an uncontrolled highlight starts on. |
-| `items` | `SelectItems` | — | Select | Values with their labels, so the closed control can show the label of a value whose option has not been rendered. Options are rendered only while the list is open. |
+| `items` | `SelectItems` | — | Select | Values with their labels, read before any option renders. Without it, a held value takes its label from its SelectItem: while the list is closed and a held value has no label, the options render once outside the document and register theirs. Pass items when the options are not rendered until the list opens, such as options fetched on open. |
 | `name` | `string` | — | Select | The name the value is submitted under. It renders a hidden native select, which FormData reads and a form reset restores. |
 | `form` | `string` | — | Select | The id of the form the control belongs to, when it is not the enclosing form. |
 | `total` | `number` | — | Select | The size of the whole collection when only part of it is rendered. Options with position then carry aria-setsize and aria-posinset. |
@@ -201,7 +201,7 @@ export default function 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/dist/docs/side-navigation.json

@@ -429,6 +429,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",
@@ -553,9 +554,9 @@
     {
       "id": "current",
       "title": "Where the reader is",
-      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.",
+      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.",
       "language": "tsx",
-      "source": "const [value, setValue] = useState<string | null>('orders');\n\n<SideNavigation value={value} onValueChange={(next) => setValue(next)}>\n  …\n</SideNavigation>;\n",
+      "source": "const { pathname } = useLocation();\nconst navigate = useNavigate();\nconst { selected, select } = usePressSelection(pathname);\n\nconst press = (to: string) => (event: MouseEvent) => {\n  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n    return;\n  }\n  event.preventDefault();\n  select(to, () => navigate(to));\n};\n\n<SideNavigation value={selected ?? null}>\n  …\n  <SideNavigationItem value=\"/orders\">\n    <SideNavigationLink href=\"/orders\" onClick={press('/orders')}>\n      Orders\n    </SideNavigationLink>\n  </SideNavigationItem>\n</SideNavigation>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/side-navigation.md

@@ -130,7 +130,7 @@ export default function 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
 
@@ -272,15 +272,30 @@ Excerpt — not a complete module
 
 ### Where the reader is
 
-value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.
+value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.
 
 Excerpt — not a complete module
 
 ```tsx
-const [value, setValue] = useState<string | null>('orders');
-
-<SideNavigation value={value} onValueChange={(next) => setValue(next)}>
+const { pathname } = useLocation();
+const navigate = useNavigate();
+const { selected, select } = usePressSelection(pathname);
+
+const press = (to: string) => (event: MouseEvent) => {
+  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  select(to, () => navigate(to));
+};
+
+<SideNavigation value={selected ?? null}>
   …
+  <SideNavigationItem value="/orders">
+    <SideNavigationLink href="/orders" onClick={press('/orders')}>
+      Orders
+    </SideNavigationLink>
+  </SideNavigationItem>
 </SideNavigation>;
 ```