@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/section.md

@@ -0,0 +1,208 @@
+<!-- index: ./index.md -->
+# section
+
+`data-ui="section"` · Titled block of content within a page.
+
+## Import
+
+```ts
+import { SlSection, SlSectionHeader, SlSectionTitle, SlSectionEyebrow, SlSectionHeading, SlSectionDescription, SlSectionActions, SlSectionBody, provideSectionDefaults } from '@slotted/angular/section';
+```
+
+Selector: `[slSection], [slSectionHeader], [slSectionTitle], [slSectionEyebrow], [slSectionHeading], [slSectionDescription], [slSectionActions], [slSectionBody]` · exportAs: `slSection, slSectionHeading`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<section slSection>
+  <div slSectionHeader>
+    <div slSectionTitle><h2 slSectionHeading>Itens do pedido</h2></div>
+  </div>
+  <div slSectionBody>…</div>
+</section>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the section carrying slSection | yes |
+| `header` | the element carrying slSectionHeader | no |
+| `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 |
+| `description` | the p carrying slSectionDescription | no |
+| `actions` | the element carrying slSectionActions | no |
+| `body` | the element carrying slSectionBody | yes |
+
+## Props
+
+| 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 |
+| `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 |
+| `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 |
+| `provideSectionDefaults()` | `{ size, divider, ground, sticky }` | — | an injector | The four decisions an application takes once. A section that states any of them itself still wins |
+| `slHeadingLevel` | `from @slotted/angular/typography` | — | around a subtree | The outline context the section reads. The body already carries it as a host directive; put it on an element yourself to step the outline elsewhere |
+| `native attributes` | `on every part` | — | every part | Every directive sits on the consumer’s own element, so id, class, routerLink and every listener stay where they were written |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `level` | `auto`, `1`, `2`, `3`, `4`, `5`, `6` | `auto` |
+| `divider` | `false`, `true` | `false` |
+| `ground` | `none`, `surface` | `none` |
+| `sticky` | `false`, `true` | `false` |
+
+## Rules
+
+- The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): a section element with an accessible name is a region landmark. The root is aria-labelledby its heading once one is rendered, so a section with a heading appears in the landmark list under the heading’s words, and one without a heading is a plain section that clutters nothing.
+- The rank is real and the element is the consumer’s. Write h2 and the directive adds nothing; write a div or a link and it gets role="heading" and aria-level from the outline typography keeps — 2 directly in a page body, one deeper inside another section’s body — or from level.
+- The body carries slHeadingLevel as a host directive, which is what keeps a nested section, a collapsible or a table caption at the right rank without either family reading the other. The HTML Standard requires each heading to be at most one deeper than the one before, and stepping by exactly one is the only way to hold that in a tree assembled from components.
+- The root carries a scroll margin the height of the page chrome, so a hash link to the section lands under the header rather than behind it. The id is the consumer’s or a generated one, and the heading’s id is derived from it, so an anchor-nav family later has both to reach.
+- Nothing here is interactive. The actions slot holds the consumer’s own controls, in the page tab sequence like any other; the sticky header is CSS and takes no focus.
+
+## 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`
+
+## 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.
+
+Excerpt — not a complete module
+
+```html
+<section slSection divider id="itens">
+  <div slSectionHeader>
+    <div slSectionTitle>
+      <span slSectionEyebrow>36 itens</span>
+      <h2 slSectionHeading>Itens do pedido</h2>
+      <p slSectionDescription>Quantidades conforme a cotação aceite.</p>
+    </div>
+    <div slSectionActions><button slButton size="sm" variant="outline">Exportar</button></div>
+  </div>
+  <div slSectionBody><div slTable>…</div></div>
+</section>
+```
+
+### The rank is the outline’s
+
+Three sections nested with div headings: role="heading" at level 2 directly in the page, 3 inside it, 4 inside that — none of them told. level="5" on the last one overrides the outline.
+
+Excerpt — not a complete module
+
+```html
+<section slSection>
+  <div slSectionHeading>Frota</div>
+  <div slSectionBody>
+    <section slSection><div slSectionHeading>Veículos pesados</div></section>
+  </div>
+</section>
+```
+
+### The step the heading 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.
+
+Excerpt — not a complete module
+
+```html
+<section slSection level="3" size="lg">…</section>
+```
+
+### 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.
+
+Excerpt — not a complete module
+
+```html
+<section slSection ground="surface">…</section>
+```
+
+### A header that stays
+
+Scroll the screen: each section’s header stops under the page chrome and the next one pushes it away. Pin the page header and they all stop lower, because the page publishes where its chrome ends. A sticky section republishes it for its body as page plus header, so layers add up: a section in a section, a table in that.
+
+Excerpt — not a complete module
+
+```html
+<section slSection sticky>…</section>
+```
+
+### 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.
+
+Excerpt — not a complete module
+
+```html
+<section slSection size="lg">
+  <div slSectionHeading>Frota</div>
+  <div slSectionBody>
+    <section slSection>
+      <div slSectionHeading>Veículos pesados</div>
+      <div slSectionBody>
+        <section slSection size="sm"><div slSectionHeading>Cavalos mecânicos</div></section>
+      </div>
+    </section>
+  </div>
+</section>
+```
+
+### Content the family did not choose
+
+A nine-word heading wraps, a long eyebrow wraps in small capitals, a translated description keeps its measure, and a header with no actions leaves no vacancy at the end of the row.
+
+Excerpt — not a complete module
+
+```html
+<h2 slSectionHeading>
+  Requisitos de homologação, garantia, recapagem e descarte ambientalmente adequado dos pneus
+  fornecidos
+</h2>
+```
+
+### A section with a table, a collapsible and a description list in it
+
+The body holds other families and steps the outline for them: the collapsible’s header sits one rank under the section. Scroll and the sticky header stays over all of it.
+
+Excerpt — not a complete module
+
+```html
+<div slSectionBody><div slTable stickyHeader stickyTo="page">…</div></div>
+```
+
+### Setting it once, and reaching past it
+
+provideSectionDefaults carries size, divider, ground and sticky for every section under it; the heading directive sits on the consumer’s own link while the family keeps the rank; a hash link reaches the root by its id.
+
+Excerpt — not a complete module
+
+```ts
+bootstrapApplication(App, {
+  providers: [provideSectionDefaults({ divider: true, size: 'sm' })],
+});
+```
+
+### What a reader hears
+
+A section with a heading is a region in the landmark list, named by the heading; one without a heading is a plain section, absent from it. Jump to a section by hash and it lands under the page chrome, not behind it.
+
+Excerpt — not a complete module
+
+```html
+<a slLink href="#historico">Ir ao histórico</a>
+```

package/docs/segmented-control.json

@@ -0,0 +1,429 @@
+{
+  "family": "segmented-control",
+  "ui": "segmented-control",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Row of exclusive options, one selected."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "orientation": [
+      "horizontal",
+      "vertical"
+    ],
+    "condense": [
+      "none",
+      "icons"
+    ]
+  },
+  "members": {
+    "segmentedControl": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "orientation": "horizontal",
+        "condense": "none",
+        "fullWidth": false,
+        "disabled": false
+      },
+      "capabilities": [
+        "selection",
+        "orientation",
+        "size",
+        "appearance",
+        "content",
+        "fullWidth",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "checked",
+        "disabled",
+        "invalid",
+        "readonly"
+      ],
+      "parts": [
+        "root",
+        "indicator",
+        "item",
+        "control",
+        "icon",
+        "label"
+      ]
+    }
+  },
+  "docs": {
+    "segmentedControl": {
+      "imports": {
+        "source": "import {\n  provideSegmentedControlDefaults,\n  SlSegment,\n  SlSegmentedControl,\n  SlSegmentIcon,\n} from '@slotted/angular/segmented-control';",
+        "selector": "[slSegmentedControl]",
+        "exportAs": "slSegmentedControl"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the consumer’s own element, with slSegmentedControl on it",
+          "required": true,
+          "purpose": "The track. It carries role=\"radiogroup\", data-ui=\"segmented-control\", the axes, and the two numbers the thumb is made of — the count of segments and the index of the checked one. It is exactly one control tall, so it lines up beside a field in a form."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "The thumb. One column wide, moved by its own width times the checked index, so nothing is read from layout. It is absent while nothing is checked, so the first selection fades it in rather than sliding it from an edge the reader never saw."
+        },
+        {
+          "part": "item",
+          "element": "label, with slSegment on it",
+          "required": true,
+          "purpose": "One segment, and the whole hit area of its radio. It carries data-checked and data-disabled, and a rule on its leading edge that gives way around the thumb."
+        },
+        {
+          "part": "control",
+          "element": "input type=\"radio\"",
+          "required": true,
+          "purpose": "The radio the segment renders. Visually hidden and left where it is, covering the segment and reaching the track’s own edge so the target is the control’s height. Sharing one name is what buys the platform’s whole keyboard model."
+        },
+        {
+          "part": "icon",
+          "element": "the consumer’s own element, with slSegmentIcon on it",
+          "required": false,
+          "purpose": "The mark a segment was given, projected into it and hidden from the reading order. It is what stays when the control condenses."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The words the segment projects. Present at every width — under data-condense=\"icons\" they are hidden visually and kept in the DOM, so the accessible name does not change with the width of the container."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "Present means the consumer owns the choice, for the life of the component. Absent, the control owns it and starts from defaultValue"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "What an uncontrolled control starts from, read once in ngOnInit. A later change to it does not silently become new state"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "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"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slSegmentedControl",
+          "description": "The control step. The track measures its segments back from it, so the whole control is exactly as tall as the field beside it"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "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": "condense",
+          "type": "'none' | 'icons'",
+          "defaultValue": "none",
+          "appliesTo": "slSegmentedControl",
+          "description": "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"
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slSegmentedControl",
+          "description": "Whether the equal columns spread across the whole line. Left alone every column is the widest label’s"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slSegmentedControl",
+          "description": "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"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "Enforced by the family, because a radio ignores readonly: the change is refused on the click a pointer and Space share, and the control keeps its colours and its tab stops"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "Writes aria-invalid and data-invalid, and points the focus ring at the danger step so the outline and its shadow move together"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "Writes aria-required on the control, and is what validate() answers for the set: “choose one” is a fact about the group and not about any one segment"
+        },
+        {
+          "name": "value, on slSegment",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slSegment",
+          "description": "What this segment selects, and what the control’s value holds. It is required: a segment with no value is a choice a reader cannot make"
+        },
+        {
+          "name": "disabled, on slSegment",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slSegment",
+          "description": "One segment out of action while the rest of the control stays live"
+        }
+      ],
+      "composition": [
+        {
+          "name": "slSegment",
+          "type": "directive on a label",
+          "defaultValue": "—",
+          "appliesTo": "the consumer’s element",
+          "description": "The segment is a directive, so the label is the consumer’s own: every attribute, every listener and every structural directive around it stay exactly as they were written. The radio inside it is the family’s and is not substitutable"
+        },
+        {
+          "name": "slSegmentIcon",
+          "type": "directive on any element",
+          "defaultValue": "—",
+          "appliesTo": "inside a segment",
+          "description": "The mark, projected into the segment and hidden from the reading order. An ng-icon, an inline svg or a span all work and none of them loses its own semantics"
+        },
+        {
+          "name": "exportAs",
+          "type": "'slSegmentedControl' | 'slSegment'",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "Reaches the instance, so a template can read selection(), checkedIndex() or a segment’s checked() without the component owning a second copy of the state"
+        },
+        {
+          "name": "provideSegmentedControlDefaults()",
+          "type": "(defaults: Partial<SegmentedControlDefaults>) => Provider",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The four decisions an application takes once, at the root or on one route. size is outranked by the field around the control"
+        },
+        {
+          "name": "formControl, ngModel",
+          "type": "ControlValueAccessor, Validator",
+          "defaultValue": "—",
+          "appliesTo": "slSegmentedControl",
+          "description": "The control belongs in a reactive form and in a template form: it writes the value, reports touched on blur, answers setDisabledState, and validates required over the set"
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "ChangeRequest<string | undefined>",
+          "when": "Before the value moves. The request carries the new value, the value it replaces — undefined while nothing has been chosen — the reason, the originating event, and cancel(), which refuses the move before anything commits and puts every element back."
+        },
+        {
+          "name": "click, focus, blur, on each segment",
+          "payload": "the element’s own events",
+          "when": "Whenever that segment’s label fires them. The segment is a directive on the consumer’s own element, so every listener the consumer bound is on the element itself; blur also marks the form control touched."
+        }
+      ],
+      "accessibility": [
+        "The pattern is the WAI-ARIA APG’s Radio Group (w3.org/WAI/ARIA/apg/patterns/radio/), and its entire keyboard table is the platform’s: Tab lands on the checked segment or on the first when none is checked, Space checks the focused one, both pairs of arrows move focus and the choice together, the set wraps, and disabled segments are skipped — including the arrow directions of a right-to-left document.",
+        "A segment is a real input type=\"radio\" and not a button. Primer builds the row of buttons and pays one tab stop per segment where the pattern gives one for the set; Angular Material writes radiogroup around children carrying aria-pressed, which is a group whose role and children disagree. The family whose items are buttons is toggle-group, and the difference a reader feels is the arrows.",
+        "The role is withdrawn inside a field group, whose fieldset and legend already name the set, and a role the consumer wrote on the host survives both — it is read with HostAttributeToken before the host bindings write.",
+        "The ring is drawn on the segment and put out on the radio that holds the focus, so the family never paints two rings in two colours. It sits on the segment’s own edge, because the segments are flush inside the track and an offset ring would be drawn across the neighbour beside it.",
+        "Read-only has no platform answer for a radio, so it is enforced: the change is refused on the click a pointer and Space share, aria-readonly announces it, and the control keeps its tab stops and its full contrast. A refused change also puts the neighbour back, because the platform restores only the element that was clicked.",
+        "The thumb is shorter than the control it lives in, so the radio reaches the track’s own edge and the target is the control’s height rather than the thumb’s. With the segment never narrower than 24 CSS pixels, WCAG 2.2 SC 2.5.8 holds at the smallest step and the tightest density."
+      ]
+    }
+  },
+  "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"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One control with every axis on it, driven by the controls below the canvas. Tab into it once, then use the arrows: they move focus and the choice together, because the segments are radios.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Período do gráfico\" defaultValue=\"week\">\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": "sizes",
+      "title": "The three control steps",
+      "note": "Each step reads the control scale and the track measures its segments back from it, so the whole control is as tall as the text field and the button beside it at every size.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Visualização\" size=\"sm\" defaultValue=\"grid\">\n  <label slSegment value=\"grid\">Grade</label>\n  <label slSegment value=\"list\">Lista</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "orientation",
+      "title": "Along the line, or down the page",
+      "note": "The thumb travels on whichever axis the segments do, and the platform moves the choice with both pairs of arrows because the set is radios sharing one name.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Pagamento\" orientation=\"vertical\" defaultValue=\"invoice\">\n  <label slSegment value=\"card\">Cartão</label>\n  <label slSegment value=\"invoice\">Boleto</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "Every state the contract declares",
+      "note": "Hover, focus, one segment unavailable, the whole control unavailable, read-only and invalid. Read-only keeps its colours and refuses the change; only disabled loses them.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Plano\" defaultValue=\"starter\">\n  <label slSegment value=\"starter\">Inicial</label>\n  <label slSegment value=\"enterprise\" disabled>Corporativo</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "iconOnly",
+      "title": "Marks without words",
+      "note": "A segment with only a mark draws square and takes its accessible name from an aria-label, which the family reads from the host and writes onto the radio that holds the focus.",
+      "language": "html",
+      "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": "condense",
+      "title": "Narrower than its words",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Relatório\" condense=\"icons\" defaultValue=\"table\">\n  <label slSegment value=\"table\">\n    <ng-icon slSegmentIcon name=\"lucideTable\" />\n    Tabela\n  </label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "width",
+      "title": "Content width, or the whole line",
+      "note": "Left alone every column is the widest label’s, which is the rule Carbon states; fullWidth spreads the same equal columns across the line it is given.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Entrega\" fullWidth defaultValue=\"afternoon\">\n  <label slSegment value=\"morning\">Manhã</label>\n  <label slSegment value=\"afternoon\">Tarde</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "field",
+      "title": "Inside a field",
+      "note": "The control takes its step, its unavailable state and its description from the field around it, and gives the field back a control to name — the label points at the set, not at one segment.",
+      "language": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Moeda da fatura</label>\n  <div slSegmentedControl name=\"currency\" defaultValue=\"brl\">\n    <label slSegment value=\"brl\">BRL</label>\n    <label slSegment value=\"usd\">USD</label>\n  </div>\n  <p slFieldDescription>A conversão usa a cotação do dia da emissão.</p>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "form",
+      "title": "In a reactive form, and validated",
+      "note": "The control is a ControlValueAccessor and a Validator: the form holds the value, and “choose one” is answered by the set rather than by any single segment that cannot see it.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Moeda\" required [formControl]=\"currency\">\n  <label slSegment value=\"brl\">BRL</label>\n  <label slSegment value=\"usd\">USD</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A label longer than its column, a five-segment set in a narrow frame, and a right-to-left string inside a left-to-right page. Each clips at the ellipsis and keeps its whole text.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Frequência\" fullWidth defaultValue=\"now\">\n  <label slSegment value=\"now\">Imediatamente</label>\n  <label slSegment value=\"digest\">Uma vez por dia, no resumo da noite</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "The directive on the consumer’s own element, and the defaults once",
+      "note": "Every part is a directive, so the element is always the consumer’s; provideSegmentedControlDefaults states the axes once for a whole application or one route.",
+      "language": "ts",
+      "source": "providers: [provideSegmentedControlDefaults({ size: 'sm', fullWidth: true })];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard, key by key",
+      "note": "Tab lands on the checked segment; both pairs of arrows move focus and the choice together and wrap at the ends; Space checks the focused one. Every row of it is the platform’s.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Envio\">\n  <label slSegment value=\"standard\">Padrão</label>\n  <label slSegment value=\"express\">Expresso</label>\n</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}