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

package/docs/radio-group.json

@@ -0,0 +1,541 @@
+{
+  "family": "radio-group",
+  "ui": "radio-group",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Set of radios for one choice."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "plain",
+      "tile"
+    ],
+    "orientation": [
+      "vertical",
+      "horizontal"
+    ],
+    "labelPlacement": [
+      "end",
+      "start"
+    ]
+  },
+  "members": {
+    "radioGroup": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "plain",
+        "orientation": "vertical",
+        "labelPlacement": "end"
+      },
+      "capabilities": [
+        "selection",
+        "orientation",
+        "size",
+        "appearance",
+        "placement",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "readonly",
+        "invalid",
+        "checked"
+      ],
+      "parts": [
+        "root",
+        "item",
+        "label",
+        "control",
+        "indicator",
+        "description"
+      ]
+    }
+  },
+  "docs": {
+    "radioGroup": {
+      "imports": {
+        "source": "import {\n  provideRadioGroupDefaults,\n  SlRadio,\n  SlRadioDescription,\n  SlRadioGroup,\n} from '@slotted/angular/radio-group';",
+        "selector": "[slRadioGroup]",
+        "exportAs": "slRadioGroup"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element carrying slRadioGroup",
+          "required": true,
+          "purpose": "The group. It arranges the items, holds the value, and carries data-ui=\"radio-group\", the four axes (data-size, data-variant, data-orientation, data-label-placement) and data-disabled, data-invalid and data-readonly. Its role is radiogroup; inside a field group the role is withdrawn, because the fieldset and its legend already name the set. formControl, formControlName and ngModel go on this element, which carries the value accessor and the validator."
+        },
+        {
+          "part": "item",
+          "element": "the element carrying slRadio",
+          "required": true,
+          "purpose": "One choice: a two-column grid holding the control, its mark, its label and its description, with data-checked and data-disabled mirrored onto it. SlRadio is a part of SlRadioGroup rather than an entry point of its own, because a radio outside a group has no exclusive set to belong to: it injects SlRadioGroup without optional, so an SlRadio outside a group fails at construction."
+        },
+        {
+          "part": "control",
+          "element": "input type=\"radio\", in the item’s template",
+          "required": true,
+          "purpose": "The native radio input. It holds the value, the name the group shares and the identifier. The shared name gives the set the platform’s keyboard behaviour. Reach the element through the item’s exportAs: item.inputElement has focus() and click()."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": true,
+          "purpose": "The dot, drawn as a mask from the glyph scale over the control. It is a sibling element rather than a pseudo-element, because Firefox renders neither ::before nor ::after on an input, and it takes no pointer events."
+        },
+        {
+          "part": "label",
+          "element": "label, in the item’s template",
+          "required": false,
+          "purpose": "Names the item’s control through for, and carries the target and the hover wash: a 24-pixel square around the circle, and a wash behind the circle and the text that stands half the control gap off the circle and half as far again past the text. It is as wide as its text, so the empty space beside it does not toggle the circle. Its content is the item’s default ng-content slot."
+        },
+        {
+          "part": "description",
+          "element": "the element carrying slRadioDescription",
+          "required": false,
+          "purpose": "Help text under one item’s label, projected into a named slot and wired with aria-describedby. It describes that item, not the set; text about the whole set belongs to the field group around it."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlRadioGroup",
+          "description": "The controlled value. When present, the consumer owns the choice. When absent, the radio group owns it and starts from defaultValue, or from the form control bound to the root."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlRadioGroup",
+          "description": "The value an uncontrolled group starts from, read once when the directive initialises. Left unset, nothing is chosen and Tab lands on the first item, as the WAI-ARIA Authoring Practices recommend for a set with no default."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "generated",
+          "appliesTo": "SlRadioGroup",
+          "description": "The submission name every item shares, which is what makes the platform treat the items as one set. Generated when unset, because the platform groups radios by name within a form."
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'tile'",
+          "defaultValue": "plain",
+          "appliesTo": "SlRadioGroup, provideRadioGroupDefaults",
+          "description": "How every item is drawn. tile frames each item and makes its whole surface the target; the inputs still share a name, so the arrow keys, the wrap and the single tab stop do not change. Arranging the tiles is left to Grid."
+        },
+        {
+          "name": "orientation",
+          "type": "'vertical' | 'horizontal'",
+          "defaultValue": "vertical",
+          "appliesTo": "SlRadioGroup, provideRadioGroupDefaults",
+          "description": "How the choices flow. A horizontal set wraps instead of scrolling, and aria-orientation is written only where the group carries the radiogroup role."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "SlRadioGroup, provideRadioGroupDefaults",
+          "description": "The type step, passed to every item. A field or field group around the radio group decides it first, then the provider. The circle follows the control glyph scale, which the theme restates per density."
+        },
+        {
+          "name": "labelPlacement",
+          "type": "'end' | 'start'",
+          "defaultValue": "end",
+          "appliesTo": "SlRadioGroup, provideRadioGroupDefaults",
+          "description": "Which side of its label each circle is on, set once for the set so the circles line up."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRadioGroup, SlRadio",
+          "description": "Unset rather than false. Reaches every item as the native attribute, which also makes the browser skip the item with the arrow keys. Set it on one SlRadio to disable that option alone. A disabled form control disables the group as well."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRadioGroup",
+          "description": "Unset rather than false. A radio has no native readonly, so the radio group refuses every activation and writes aria-readonly; every item keeps its tab stop, its focus ring and its contrast."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRadioGroup",
+          "description": "Unset rather than false. Writes aria-invalid on the group and data-invalid on the root, which draws every circle in the danger tone with a thicker edge."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "SlRadioGroup",
+          "description": "Unset rather than false. Writes aria-required on the group and makes its validator demand a value, never the native required, which would turn on browser constraint validation."
+        },
+        {
+          "name": "value, on SlRadio",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlRadio",
+          "description": "What this item selects, and the value the group holds when it is chosen. Required: an item with no value is a choice nobody can make."
+        },
+        {
+          "name": "slRadioDescription",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "a projected element",
+          "description": "Help text under the item’s label, wired with aria-describedby, so it describes that item and not the set."
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs=\"slRadioGroup\" / \"slRadio\"",
+          "type": "SlRadioGroup / SlRadio",
+          "defaultValue": "—",
+          "appliesTo": "a template",
+          "description": "Reaches either instance. inputElement on an item is its input, which already has focus() and click(), so there is no imperative handle."
+        },
+        {
+          "name": "ControlValueAccessor and Validator",
+          "type": "formControl, formControlName, ngModel",
+          "defaultValue": "—",
+          "appliesTo": "the host element",
+          "description": "Both are on the group’s root, so a form binding goes on the element that already carries slRadioGroup. required becomes a validator over the set; React has no equivalent."
+        },
+        {
+          "name": "provideRadioGroupDefaults()",
+          "type": "{ size, variant, orientation, labelPlacement }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The four decisions an application takes once for every radio group under the injector. A field or field group around a radio group decides size before the token."
+        },
+        {
+          "name": "the host element",
+          "type": "any element",
+          "defaultValue": "—",
+          "appliesTo": "SlRadioGroup, SlRadio",
+          "description": "Each root is the consumer’s own element, one more element than React renders: a set of choices can be a ul with each item written as an li."
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "defaultValue": "radiogroup, or none inside a field group",
+          "appliesTo": "the host element",
+          "description": "A role written as a static attribute wins over both, because it is read before the host binding computes."
+        }
+      ],
+      "events": [
+        {
+          "name": "(valueChange)",
+          "payload": "ChangeRequest<string | undefined>",
+          "when": "Before the value moves. request.value is the new value and request.previous the value it replaces, which is undefined while nothing is chosen, the state the WAI-ARIA Authoring Practices ask a group to start in. request.reason is pointer or keyboard, request.source is the originating event, and request.cancel() refuses the move before anything commits, including the platform’s own selection. There is no [(value)], because a two-way binding carries only the value and none of the rest of the request."
+        },
+        {
+          "name": "ControlValueAccessor and Validator",
+          "payload": "string",
+          "when": "Whenever the value moves under a formControl, formControlName or ngModel written on the root. The radio group also validates the set: when required, it fails with { required: true } while nothing is chosen, because “choose one” is a fact about the group and not about any one option."
+        }
+      ],
+      "accessibility": [
+        "The radio group follows the WAI-ARIA Authoring Practices Radio Group pattern (w3.org/WAI/ARIA/apg/patterns/radio/), and the platform implements its whole keyboard table: Tab lands on the checked item, or on the first when none is checked; Space checks the focused item; the arrow keys move focus and selection together on both axes; the set wraps at both ends; disabled items are skipped. Native radios that share a name within one form provide all of it, including the arrow directions of a right-to-left document.",
+        "This is why the items share a name, and why one is generated when none is written: the platform groups radios by name within a form, so radios without a shared name are not a set. The cost is that an unnamed radio group inside a form submits under a generated key.",
+        "Each item takes its accessible name from its own label, through for pointing at an identifier the component generates. The group takes its name from the field group’s legend or, outside a field group, from an aria-label the consumer writes. Inside a field group the radiogroup role is withdrawn, so the set is not announced twice.",
+        "The group writes aria-required, never the native required on an item, and its validator, not any one item, demands a value, because “choose one” is a fact about the set. disabled is native, because the native attribute is also what makes the browser skip the option with the arrow keys.",
+        "A radio has no native read-only state, so the radio group enforces one: it refuses the activation, aria-readonly announces it on the group, and every item keeps its tab stop, its focus ring and its full contrast. The chosen option keeps its accent, because the value is real.",
+        "Refusing the activation is not enough on its own. The HTML standard’s canceled activation behaviour restores the clicked radio but not the neighbour it unchecked, so the radio group writes every element from the value afterwards. Without that, a controlled group that refused a change would show no choice at all.",
+        "The invalid state does not rely on colour alone. In the high-contrast scheme the theme paints the danger border in the same colour as every other border, so the circle also thickens its edge. The sentence that says what is wrong is the field group’s error.",
+        "The target is larger than the circle. A 24-pixel square around the circle meets WCAG 2.2 SC 2.5.8 at every size and density, while the circle is 14 pixels at size=\"sm\"; the label extends the target to the end of the text, and the hover wash covers exactly that area. The row keeps its line height: the target is drawn around the circle, not laid out beside it."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-width-medium",
+    "--slotted-border-width-thick",
+    "--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-invalid-edge-width",
+    "--slotted-control-label-gap-lg",
+    "--slotted-control-label-gap-md",
+    "--slotted-control-label-gap-sm",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-shadow",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-xs",
+    "--slotted-line-height-md",
+    "--slotted-line-height-xs",
+    "--slotted-radio-group-active-background",
+    "--slotted-radio-group-background",
+    "--slotted-radio-group-border-color",
+    "--slotted-radio-group-border-width",
+    "--slotted-radio-group-checked-active-border-color",
+    "--slotted-radio-group-checked-border-color",
+    "--slotted-radio-group-checked-hover-border-color",
+    "--slotted-radio-group-color",
+    "--slotted-radio-group-description-color",
+    "--slotted-radio-group-description-font-size",
+    "--slotted-radio-group-disabled-background",
+    "--slotted-radio-group-disabled-border-color",
+    "--slotted-radio-group-disabled-color",
+    "--slotted-radio-group-disabled-mark-color",
+    "--slotted-radio-group-gap",
+    "--slotted-radio-group-halo-color",
+    "--slotted-radio-group-hover-border-color",
+    "--slotted-radio-group-invalid-border-color",
+    "--slotted-radio-group-invalid-checked-border-color",
+    "--slotted-radio-group-invalid-edge-width",
+    "--slotted-radio-group-invalid-focus-ring-color",
+    "--slotted-radio-group-invalid-mark-color",
+    "--slotted-radio-group-line-height",
+    "--slotted-radio-group-mark-color",
+    "--slotted-radio-group-readonly-background",
+    "--slotted-radio-group-size",
+    "--slotted-radio-group-tile-active-background",
+    "--slotted-radio-group-tile-background",
+    "--slotted-radio-group-tile-border-color",
+    "--slotted-radio-group-tile-checked-background",
+    "--slotted-radio-group-tile-checked-border-color",
+    "--slotted-radio-group-tile-checked-hover-border-color",
+    "--slotted-radio-group-tile-description-gap",
+    "--slotted-radio-group-tile-disabled-background",
+    "--slotted-radio-group-tile-disabled-border-color",
+    "--slotted-radio-group-tile-hover-background",
+    "--slotted-radio-group-tile-hover-border-color",
+    "--slotted-radio-group-tile-inset",
+    "--slotted-radio-group-tile-invalid-border-color",
+    "--slotted-radio-group-tile-invalid-checked-background",
+    "--slotted-radio-group-tile-invalid-checked-border-color",
+    "--slotted-radio-group-tile-radius",
+    "--slotted-radio-group-tile-readonly-background",
+    "--slotted-radio-group-tile-readonly-border-color",
+    "--slotted-radius-full",
+    "--slotted-radius-md",
+    "--slotted-selection-halo-opacity",
+    "--slotted-selection-size-lg",
+    "--slotted-selection-size-md",
+    "--slotted-selection-size-sm",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-surface",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-solid-active",
+    "--slotted-tone-accent-solid-hover",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One set with every axis on it, driven by the controls below the canvas. Tab into it once: the whole group is a single stop, and the arrows move the choice from there.",
+      "language": "html",
+      "source": "<div slRadioGroup name=\"shipping\" defaultValue=\"standard\">\n  <div slRadio value=\"standard\">Entrega padrão</div>\n  <div slRadio value=\"express\">Entrega expressa</div>\n  <div slRadio value=\"pickup\">Retirar na loja</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "orientation",
+      "title": "How the choices flow",
+      "note": "A horizontal set wraps rather than scrolling or clipping, and aria-orientation is written only where the group owns its role — on an element with no role the attribute describes nothing.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-orientation',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioGroup],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Report period</legend>\n      <div slRadioGroup orientation=\"horizontal\" defaultValue=\"month\">\n        <div slRadio value=\"day\">Day</div>\n        <div slRadio value=\"week\">Week</div>\n        <div slRadio value=\"month\">Month</div>\n        <div slRadio value=\"quarter\">Quarter</div>\n        <div slRadio value=\"year\">Year</div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupOrientation {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "tile",
+      "title": "The plan picker, which is what tiles are for",
+      "note": "An exclusive set of framed choices is the case Cloudscape built a whole Tiles family for and Carbon a selectable Tile. Here it is one axis on the group: each item becomes the surface, the arrow keys and the roving tab stop stay the platform’s, and Grid gives the row equal widths and equal heights.",
+      "language": "html",
+      "source": "<div slRadioGroup name=\"plan\" variant=\"tile\" defaultValue=\"team\">\n  <div slGrid minItemWidth=\"sm\">\n    <div slRadio value=\"starter\">\n      Starter\n      <p slRadioDescription>Até três projetos e um assento.</p>\n    </div>\n    <div slRadio value=\"team\">\n      Team\n      <p slRadioDescription>Projetos sem limite e dez assentos.</p>\n    </div>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the set sits at",
+      "note": "The circle is the control glyph scale, so the three steps shrink together with the type and the gap when the toolbar switches to dense — and every label keeps its 24-pixel target at every one of them.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-radio-group-sizes',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioGroup, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <fieldset slFieldGroup size=\"sm\">\n        <legend slFieldGroupLegend>Count by</legend>\n        <div slRadioGroup orientation=\"horizontal\" defaultValue=\"cases\">\n          <div slRadio value=\"cases\">Cases</div>\n          <div slRadio value=\"units\">Units</div>\n        </div>\n      </fieldset>\n      <fieldset slFieldGroup size=\"md\">\n        <legend slFieldGroupLegend>Payment terms</legend>\n        <div slRadioGroup orientation=\"horizontal\" defaultValue=\"net-30\">\n          <div slRadio value=\"net-30\">Net 30</div>\n          <div slRadio value=\"net-60\">Net 60</div>\n        </div>\n      </fieldset>\n      <fieldset slFieldGroup size=\"lg\">\n        <legend slFieldGroupLegend>Account type</legend>\n        <div slRadioGroup orientation=\"horizontal\" defaultValue=\"business\">\n          <div slRadio value=\"business\">Business</div>\n          <div slRadio value=\"personal\">Personal</div>\n        </div>\n      </fieldset>\n    </div>\n  `,\n})\nexport class RadioGroupSizes {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "Every state the set paints",
+      "note": "Read-only keeps every tab stop and the chosen item keeps its accent, because the value is real; disabled loses both. A single unavailable option dims from its own element’s state rather than from the group’s.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlFieldGroup,\n  SlFieldGroupDescription,\n  SlFieldGroupError,\n  SlFieldGroupLegend,\n} from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-radio-group-states',\n  imports: [\n    SlFieldGroup,\n    SlFieldGroupDescription,\n    SlFieldGroupError,\n    SlFieldGroupLegend,\n    SlRadio,\n    SlRadioGroup,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"6\">\n      <fieldset slFieldGroup required>\n        <legend slFieldGroupLegend>Payment terms</legend>\n        <span slFieldGroupError>Choose the payment terms for this customer.</span>\n        <div slRadioGroup invalid orientation=\"horizontal\">\n          <div slRadio value=\"net-30\">Net 30</div>\n          <div slRadio value=\"net-60\">Net 60</div>\n          <div slRadio value=\"prepaid\">Prepaid</div>\n        </div>\n      </fieldset>\n      <fieldset slFieldGroup readOnly>\n        <legend slFieldGroupLegend>Warehouse</legend>\n        <span slFieldGroupDescription>Stock is reserved once the order is picked.</span>\n        <div slRadioGroup orientation=\"horizontal\" defaultValue=\"seattle\">\n          <div slRadio value=\"seattle\">Seattle</div>\n          <div slRadio value=\"tacoma\">Tacoma</div>\n        </div>\n      </fieldset>\n      <fieldset slFieldGroup disabled>\n        <legend slFieldGroupLegend>Return method</legend>\n        <span slFieldGroupDescription>Returns open when the order is delivered.</span>\n        <div slRadioGroup orientation=\"horizontal\" defaultValue=\"drop-off\">\n          <div slRadio value=\"drop-off\">Drop-off</div>\n          <div slRadio value=\"pickup\">Pickup</div>\n        </div>\n      </fieldset>\n    </div>\n  `,\n})\nexport class RadioGroupStates {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Which side of its label the circle is on",
+      "note": "start pushes every circle to the end of the row, and the column is a fraction rather than each label’s own width because a column of controls has to line up with itself.",
+      "language": "html",
+      "source": "<div slRadioGroup labelPlacement=\"end\" defaultValue=\"card\">\n  <div slRadio value=\"card\">Cartão</div>\n</div>\n\n<div slRadioGroup labelPlacement=\"start\" defaultValue=\"card\">\n  <div slRadio value=\"card\">Cartão</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "description",
+      "title": "Saying more about one option",
+      "note": "The description belongs to the item and reaches only that item’s control, so a reader on the second option hears the second sentence rather than everything the set has to say.",
+      "language": "html",
+      "source": "<div slRadioGroup defaultValue=\"monthly\">\n  <div slRadio value=\"monthly\">\n    Mensal\n    <p slRadioDescription>Cobrado todo dia 5, sem multa de cancelamento.</p>\n  </div>\n  <div slRadio value=\"yearly\">\n    Anual\n    <p slRadioDescription>Dois meses de desconto, cobrados na contratação.</p>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "field",
+      "title": "Inside a group of fields, and in a reactive form",
+      "note": "The fieldset and its legend are what group and name the set, so the group withdraws its own radiogroup role — and the same element takes formControlName, because the accessor and the validator both live on the root.",
+      "language": "html",
+      "source": "<fieldset slFieldGroup required>\n  <legend slFieldGroupLegend>Forma de pagamento</legend>\n  <div slRadioGroup required formControlName=\"payment\">\n    <div slRadio value=\"card\">Cartão</div>\n    <div slRadio value=\"pix\">Pix</div>\n  </div>\n</fieldset>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "An option that wraps to three lines keeps its circle on the first of them, an unbroken token breaks instead of taking the page with it, and a right-to-left label mirrors the whole row.",
+      "language": "html",
+      "source": "<div slRadioGroup defaultValue=\"a\">\n  <div slRadio value=\"a\">\n    Autorizo o compartilhamento dos dados de entrega com a transportadora.\n    <p slRadioDescription>O círculo continua na primeira linha do rótulo.</p>\n  </div>\n  <div slRadio value=\"b\" dir=\"rtl\">أوافق على مشاركة بيانات التسليم.</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting it once, and reaching past it",
+      "note": "The token carries the three decisions an application takes once, exportAs reaches both instances, and the root is the consumer’s own element — so a set of choices can be a real list.",
+      "language": "html",
+      "source": "<ul slRadioGroup class=\"slotted-demo-list\" defaultValue=\"a\">\n  <li slRadio value=\"a\">Um item</li>\n  <li slRadio value=\"b\">E outro abaixo dele</li>\n</ul>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The APG table, implemented by the platform",
+      "note": "Tab lands on the chosen item or on the first, the arrows move focus and selection together in both axes, the set wraps at both ends, and disabled options are skipped — none of it written here.",
+      "language": "html",
+      "source": "<!-- Native radios in one form owner with one name already implement the\n     whole APG table, in a right-to-left document too. The group generates\n     a name when the consumer writes none, because an unnamed set is not a\n     set — the price is that such a group inside a form submits under a\n     generated key. -->\n<div slRadioGroup name=\"shipping\">\n  <div slRadio value=\"standard\">Padrão</div>\n  <div slRadio value=\"express\">Expressa</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-basic',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioGroup],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Delivery speed</legend>\n      <div slRadioGroup name=\"delivery\" defaultValue=\"standard\">\n        <div slRadio value=\"standard\">Standard, 3 to 5 business days</div>\n        <div slRadio value=\"express\">Express, next business day</div>\n        <div slRadio value=\"same-day\">Same day, Seattle only</div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupBasic {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlStack } from '@slotted/angular/stack';\n\nconst TOTALS: Record<string, string> = {\n  usd: '$1,240.00',\n  eur: '€1,147.00',\n  gbp: '£982.00',\n};\n\n@Component({\n  selector: 'app-radio-group-controlled',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioGroup, SlStack],\n  template: `\n    <div slStack [gap]=\"4\">\n      <fieldset slFieldGroup>\n        <legend slFieldGroupLegend>Invoice currency</legend>\n        <div\n          slRadioGroup\n          orientation=\"horizontal\"\n          [value]=\"currency()\"\n          (valueChange)=\"currency.set($event.value ?? 'usd')\"\n        >\n          <div slRadio value=\"usd\">USD</div>\n          <div slRadio value=\"eur\">EUR</div>\n          <div slRadio value=\"gbp\">GBP</div>\n        </div>\n      </fieldset>\n      <span>Invoice total: {{ total() }}</span>\n    </div>\n  `,\n})\nexport class RadioGroupControlled {\n  readonly currency = signal('usd');\n  readonly total = computed(() => TOTALS[this.currency()]);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { provideRadioGroupDefaults, SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-radio-group-defaults',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioGroup, SlStack],\n  providers: [provideRadioGroupDefaults({ orientation: 'horizontal' })],\n  template: `\n    <div slStack [gap]=\"5\">\n      <fieldset slFieldGroup>\n        <legend slFieldGroupLegend>Status</legend>\n        <div slRadioGroup defaultValue=\"all\">\n          <div slRadio value=\"all\">All</div>\n          <div slRadio value=\"open\">Open</div>\n          <div slRadio value=\"paid\">Paid</div>\n          <div slRadio value=\"overdue\">Overdue</div>\n        </div>\n      </fieldset>\n      <fieldset slFieldGroup>\n        <legend slFieldGroupLegend>Channel</legend>\n        <div slRadioGroup defaultValue=\"all\">\n          <div slRadio value=\"all\">All</div>\n          <div slRadio value=\"online\">Online</div>\n          <div slRadio value=\"retail\">Retail</div>\n          <div slRadio value=\"wholesale\">Wholesale</div>\n        </div>\n      </fieldset>\n    </div>\n  `,\n})\nexport class RadioGroupDefaults {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "descriptions",
+      "title": "descriptions.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioDescription, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-descriptions',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioDescription, SlRadioGroup],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Billing cycle</legend>\n      <div slRadioGroup defaultValue=\"monthly\">\n        <div slRadio value=\"monthly\">\n          Monthly\n          <p slRadioDescription>Billed on the 5th of each month. Cancel any time.</p>\n        </div>\n        <div slRadio value=\"yearly\">\n          Yearly\n          <p slRadioDescription>Two months free, billed once when you subscribe.</p>\n        </div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupDescriptions {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled-option",
+      "title": "disabled-option.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioDescription, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-disabled-option',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioDescription, SlRadioGroup],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Carrier</legend>\n      <div slRadioGroup defaultValue=\"ups\">\n        <div slRadio value=\"ups\">UPS Ground</div>\n        <div slRadio value=\"fedex\">FedEx 2Day</div>\n        <div slRadio value=\"dhl\" disabled>\n          DHL Express\n          <p slRadioDescription>Does not deliver to Anchorage, AK.</p>\n        </div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupDisabledOption {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "label-placement",
+      "title": "label-placement.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-label-placement',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlRadio, SlRadioGroup],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Send the stock report</legend>\n      <div slRadioGroup labelPlacement=\"start\" defaultValue=\"monday\">\n        <div slRadio value=\"daily\">Every morning</div>\n        <div slRadio value=\"monday\">Every Monday</div>\n        <div slRadio value=\"never\">Never</div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupLabelPlacement {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "refuse",
+      "title": "refuse.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { ChangeRequest } from '@slotted/core/state';\nimport {\n  SlFieldGroup,\n  SlFieldGroupDescription,\n  SlFieldGroupError,\n  SlFieldGroupLegend,\n} from '@slotted/angular/field-group';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\n\nconst SEATS_IN_USE = 8;\n\n@Component({\n  selector: 'app-radio-group-refuse',\n  imports: [\n    SlFieldGroup,\n    SlFieldGroupDescription,\n    SlFieldGroupError,\n    SlFieldGroupLegend,\n    SlRadio,\n    SlRadioGroup,\n  ],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Plan</legend>\n      <span slFieldGroupDescription>This workspace has {{ seatsInUse }} seats in use.</span>\n      <span slFieldGroupError tone=\"warning\" live=\"polite\" reserve>{{ notice() }}</span>\n      <div slRadioGroup defaultValue=\"team\" (valueChange)=\"request($event)\">\n        <div slRadio value=\"starter\">Starter, one seat</div>\n        <div slRadio value=\"team\">Team, ten seats</div>\n        <div slRadio value=\"business\">Business, unlimited seats</div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupRefuse {\n  readonly seatsInUse = SEATS_IN_USE;\n  readonly notice = signal('');\n\n  request(request: ChangeRequest<string | undefined>): void {\n    if (request.value === 'starter') {\n      request.cancel();\n      this.notice.set(`Starter includes one seat. Remove ${SEATS_IN_USE - 1} seats first.`);\n      return;\n    }\n    this.notice.set('');\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "standalone",
+      "title": "standalone.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-standalone',\n  imports: [SlRadio, SlRadioGroup],\n  template: `\n    <div slRadioGroup aria-label=\"Chart range\" orientation=\"horizontal\" size=\"sm\" defaultValue=\"30\">\n      <div slRadio value=\"7\">7 days</div>\n      <div slRadio value=\"30\">30 days</div>\n      <div slRadio value=\"90\">90 days</div>\n    </div>\n  `,\n})\nexport class RadioGroupStandalone {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "tiles",
+      "title": "tiles.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlFieldGroup, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlGrid } from '@slotted/angular/grid';\nimport { SlRadio, SlRadioDescription, SlRadioGroup } from '@slotted/angular/radio-group';\n\n@Component({\n  selector: 'app-radio-group-tiles',\n  imports: [SlFieldGroup, SlFieldGroupLegend, SlGrid, SlRadio, SlRadioDescription, SlRadioGroup],\n  template: `\n    <fieldset slFieldGroup>\n      <legend slFieldGroupLegend>Plan</legend>\n      <div slRadioGroup name=\"plan\" variant=\"tile\" defaultValue=\"team\">\n        <div slGrid minItemWidth=\"xs\">\n          <div slRadio value=\"starter\">\n            Starter\n            <p slRadioDescription>$0 per month. Three projects and one seat.</p>\n          </div>\n          <div slRadio value=\"team\">\n            Team\n            <p slRadioDescription>$49 per month. Unlimited projects and ten seats.</p>\n          </div>\n          <div slRadio value=\"business\">\n            Business\n            <p slRadioDescription>$199 per month. Single sign-on and audit logs.</p>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  `,\n})\nexport class RadioGroupTiles {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "validation",
+      "title": "validation.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlFieldGroup, SlFieldGroupError, SlFieldGroupLegend } from '@slotted/angular/field-group';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-radio-group-validation',\n  imports: [\n    ReactiveFormsModule,\n    SlButton,\n    SlFieldGroup,\n    SlFieldGroupError,\n    SlFieldGroupLegend,\n    SlInline,\n    SlRadio,\n    SlRadioGroup,\n    SlStack,\n  ],\n  template: `\n    <form novalidate (submit)=\"submit($event)\">\n      <div slStack [gap]=\"4\">\n        <fieldset slFieldGroup required>\n          <legend slFieldGroupLegend>Return reason</legend>\n          <span slFieldGroupError live=\"polite\" reserve>{{\n            missing ? 'Choose why the order is coming back.' : ''\n          }}</span>\n          <div slRadioGroup [formControl]=\"reason\" [invalid]=\"missing ? true : undefined\">\n            <div slRadio value=\"damaged\">Damaged in transit</div>\n            <div slRadio value=\"wrong-item\">Wrong item shipped</div>\n            <div slRadio value=\"not-needed\">No longer needed</div>\n          </div>\n        </fieldset>\n        <div slInline [gap]=\"3\" align=\"center\">\n          <button slButton type=\"submit\">Request return</button>\n          @if (submitted() && reason.valid) {\n            <span role=\"status\">Return requested.</span>\n          }\n        </div>\n      </div>\n    </form>\n  `,\n})\nexport class RadioGroupValidation {\n  /* The group is the form control and its validator: inside a required field\n     group, an empty value fails with { required: true }. */\n  readonly reason = new FormControl<string | null>(null);\n  readonly submitted = signal(false);\n\n  get missing(): boolean {\n    return this.submitted() && this.reason.invalid;\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}