@ds-mo/ui 15.2.0 → 15.4.0

package/dist/mcp-data/registry/radio-tile.json

@@ -0,0 +1,399 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-tile",
+  "title": "RadioTile",
+  "description": "A form-associated group of fully clickable radio tiles with labels and optional descriptions.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/radio-tile",
+    "source": "src/wc/components/RadioTile/RadioTile.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "A form-associated group of fully clickable radio tiles with labels and optional descriptions.",
+      "useWhen": [
+        "A small set of mutually exclusive choices benefits from descriptive cards and large click targets."
+      ],
+      "avoidWhen": [
+        "The choices are brief and compact; use Radio.",
+        "More than one value may be chosen."
+      ],
+      "alternatives": [
+        {
+          "when": "A user may select zero or multiple independent choices.",
+          "component": "component:ds-checkbox",
+          "reason": "Checkbox communicates independent selection rather than one-of-many choice."
+        },
+        {
+          "when": "A binary setting applies immediately.",
+          "component": "component:ds-switch",
+          "reason": "Switch communicates an immediately applied on/off setting."
+        },
+        {
+          "when": "The option list is long or the available space is constrained.",
+          "component": "component:ds-select",
+          "reason": "Select keeps a larger one-of-many choice set compact."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-field",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Native radio inputs own keyboard selection, focus, and checked semantics; the complete tile activates its input.",
+        "Label the group with Field or an accessible name. Descriptions name each option separately."
+      ],
+      "states": [
+        "Selection is shown by the 16px radio indicator centered in a 20px placement box while the tile keeps its neutral border. The placement box and copy have a 12px gap inside the tile's 16px padding, and the tile uses the 2px compact radius. Error retains the negative border, and keyboard focus keeps the focus-token outline. Inactive options cannot be selected.",
+        "Options with descriptions use primary body-medium emphasis for the title and secondary body-medium supporting text with a 4px gap. Text-only options use secondary body-medium text without emphasis.",
+        "The component owns form values, required validation, reset, and disabled-fieldset behavior."
+      ],
+      "responsiveBehavior": [
+        "Horizontal tiles wrap to available space; use a vertical group when descriptions need more room."
+      ],
+      "frameworkCaveats": {
+        "angular": [
+          "Use the generated radio value accessor with the standalone adapter."
+        ],
+        "vue": [
+          "Bind value with v-model."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook review",
+          "path": "src/wc/components/RadioTile/RadioTile.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "Tile anatomy and radio treatment belong to the component; the owner controls group width.",
+        "protected": [
+          {
+            "properties": [
+              "padding",
+              "gap",
+              "border-radius",
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "Use the supported group direction and state instead of replacing tile internals.",
+            "props": [
+              "direction"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "ariaDescribedby": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "aria-describedby",
+          "required": false,
+          "mutable": false
+        },
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false
+        },
+        "ariaLabelledby": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "aria-labelledby",
+          "required": false,
+          "mutable": false
+        },
+        "direction": {
+          "type": "'horizontal' | 'vertical'",
+          "resolvedType": "\"horizontal\" | \"vertical\"",
+          "attribute": "direction",
+          "default": "'vertical'",
+          "required": false,
+          "mutable": false
+        },
+        "disabled": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "disabled",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "error": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "error",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "form": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "form",
+          "required": false,
+          "mutable": false
+        },
+        "inputId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "input-id",
+          "required": false,
+          "mutable": false
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "name": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "name",
+          "required": false,
+          "mutable": false
+        },
+        "options": {
+          "type": "RadioTileOption[]",
+          "resolvedType": "RadioTileOption[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "One-of-many choices displayed as fully clickable tiles."
+        },
+        "required": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "required",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "requiredMessage": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "required-message",
+          "default": "'This field is required.'",
+          "required": false,
+          "mutable": false
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": true
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "ariaDescribedby": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "aria-describedby",
+        "required": false,
+        "mutable": false
+      },
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false
+      },
+      "ariaLabelledby": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "aria-labelledby",
+        "required": false,
+        "mutable": false
+      },
+      "direction": {
+        "type": "'horizontal' | 'vertical'",
+        "resolvedType": "\"horizontal\" | \"vertical\"",
+        "attribute": "direction",
+        "default": "'vertical'",
+        "required": false,
+        "mutable": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "disabled",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "error": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "error",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "form": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "form",
+        "required": false,
+        "mutable": false
+      },
+      "inputId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "input-id",
+        "required": false,
+        "mutable": false
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "name": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "name",
+        "required": false,
+        "mutable": false
+      },
+      "options": {
+        "type": "RadioTileOption[]",
+        "resolvedType": "RadioTileOption[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "One-of-many choices displayed as fully clickable tiles."
+      },
+      "required": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "required",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "requiredMessage": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "required-message",
+        "default": "'This field is required.'",
+        "required": false,
+        "mutable": false
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": true
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-radio-tile",
+      "react": "DsRadioTile",
+      "vue": "DsRadioTile",
+      "angular": "DsRadioTile"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-radio-tile.js';",
+        "example": "<ds-radio-tile></ds-radio-tile>"
+      },
+      "react": {
+        "import": "import { DsRadioTile } from '@ds-mo/ui/react';",
+        "example": "<DsRadioTile />"
+      },
+      "vue": {
+        "import": "import { DsRadioTile } from '@ds-mo/ui/vue';",
+        "example": "<DsRadioTile />"
+      },
+      "angular": {
+        "import": "import { DsRadioTile } from '@ds-mo/ui/angular/ds-radio-tile';",
+        "example": "<ds-radio-tile></ds-radio-tile>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/RadioTile/RadioTile.css",
+      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.css';\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n}\n:host(.radio-tiles--horizontal) {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n:host(.radio-tiles--horizontal) .radio-tile {\n  flex-basis: var(--dimension-menu-width-xs);\n}\n.radio-tile {\n  display: flex;\n  position: relative;\n  align-items: flex-start;\n  flex: 1;\n  box-sizing: border-box;\n  gap: var(--dimension-space-150);\n  padding: var(--dimension-space-200);\n  min-width: 0;\n  border-radius: var(--dimension-radius-025);\n  background: var(--color-background-primary);\n  cursor: pointer;\n  user-select: none;\n}\n.radio-tile__outline {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  pointer-events: none;\n}\n:host([aria-invalid='true']) .radio-tile__outline {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n.radio-tile__input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: inherit;\n  z-index: 3;\n}\n.radio-tile__input:disabled {\n  cursor: not-allowed;\n}\n.radio-tile__input:focus-visible + .radio-tile__outline {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n.radio-tile__placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.radio-tile__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-iconography-sm);\n  height: var(--dimension-iconography-sm);\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary);\n}\n.radio-tile--selected .radio-tile__indicator {\n  background: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n.radio-tile__indicator > span {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-on-bold-background-primary);\n}\n.radio-tile__copy {\n  display: grid;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .radio-tile__outline,\n  .radio-tile__indicator {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n  .radio-tile--selected .radio-tile__indicator {\n    background: var(--ds-forced-color-selected);\n  }\n  .radio-tile__indicator > span {\n    background: var(--ds-forced-color-on-selected);\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/RadioTile/RadioTile.tsx",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport interface RadioTileOption {\n  value: string;\n  label: string;\n  description?: string;\n  isInactive?: boolean;\n}\nlet tileId = 0;\n\n@Component({ tag: 'ds-radio-tile', styleUrl: 'RadioTile.css', scoped: true, formAssociated: true })\nexport class RadioTile {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n  /** One-of-many choices displayed as fully clickable tiles. */\n  @Prop() options: RadioTileOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() isInactive: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() inputId: string | undefined;\n  @Prop() error: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  @Event() dsChange!: EventEmitter<string>;\n  @State() private formDisabled = false;\n  private readonly generatedId = `ds-radio-tile-${++tileId}`;\n  private initialValue = '';\n  private get inactive() {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n  @Watch('value')\n  @Watch('options')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('requiredMessage')\n  syncFormValue() {\n    const selected = this.options.some(option => option.value === this.value && !option.isInactive);\n    setFormControlValue(this.internals, selected ? this.value : '', { inactive: this.inactive });\n    setRequiredValidity(\n      this.internals,\n      this.required && !this.inactive && !selected,\n      this.requiredMessage\n    );\n  }\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n  @Method()\n  async setFocus() {\n    (\n      this.el.querySelector<HTMLInputElement>('input:checked:not(:disabled)') ??\n      this.el.querySelector<HTMLInputElement>('input:not(:disabled)')\n    )?.focus();\n  }\n  private select(value: string) {\n    if (this.inactive || value === this.value) return;\n    this.value = value;\n    this.dsChange.emit(value);\n  }\n  render() {\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-describedby={this.ariaDescribedby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={this.error ? 'true' : undefined}\n        class={{ 'radio-tiles': true, 'radio-tiles--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((option, index) => {\n          const selected = option.value === this.value;\n          const inactive = this.inactive || Boolean(option.isInactive);\n          return (\n            <label\n              class={{\n                'radio-tile': true,\n                'radio-tile--selected': selected,\n                'ds-interaction-fill': !inactive,\n                'ds-control-inactive': inactive,\n              }}\n              key={option.value}\n            >\n              <input\n                type=\"radio\"\n                class=\"radio-tile__input\"\n                id={index === 0 ? this.inputId : undefined}\n                name={this.generatedId}\n                form=\"\"\n                value={option.value}\n                checked={selected}\n                disabled={inactive}\n                aria-labelledby={`${this.generatedId}-label-${index}`}\n                aria-describedby={\n                  option.description ? `${this.generatedId}-description-${index}` : undefined\n                }\n                onChange={() => this.select(option.value)}\n              />\n              <span class=\"radio-tile__outline\" aria-hidden=\"true\" />\n              <span class=\"radio-tile__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n                <span class=\"radio-tile__indicator\">{selected && <span />}</span>\n              </span>\n              <span class=\"radio-tile__copy ds-interaction-fill__content\">\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color={option.description ? 'primary' : 'secondary'}\n                  emphasis={Boolean(option.description)}\n                  textId={`${this.generatedId}-label-${index}`}\n                >\n                  {option.label}\n                </ds-text>\n                {option.description && (\n                  <ds-text\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    textId={`${this.generatedId}-description-${index}`}\n                  >\n                    {option.description}\n                  </ds-text>\n                )}\n              </span>\n            </label>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/radio.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "radio",
   "title": "Radio",
-  "description": "Form-associated one-of-many radio selection set with vertical or horizontal layout, optional per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
+  "description": "Form-associated one-of-many radio selection set with an optional visible group label, vertical or horizontal layout, per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Form-associated one-of-many radio selection set with vertical or horizontal layout, optional per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
+      "summary": "Form-associated one-of-many radio selection set with an optional visible group label, vertical or horizontal layout, per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
       "useWhen": [
         "A user must select exactly one visible option from a small set.",
         "All available choices should remain visible for comparison.",
@@ -46,7 +46,9 @@
         "component:ds-text"
       ],
       "accessibility": [
-        "The host exposes radiogroup semantics and requires an accessible group name from aria-label or aria-labelledby.",
+        "The host exposes radiogroup semantics and requires an accessible group name from the visible label, aria-label, or aria-labelledby.",
+        "When groupLabel is provided, Radio renders it above the options and uses the same text as the radiogroup's accessible name.",
+        "Inside ds-setting-row-radio the visible form groupLabel is omitted on first paint; the row heading is the accessible name via aria-labelledby. Independent multi-select settings use ds-setting-row-checkbox with ds-checkbox-group instead.",
         "Each visible option exposes radio semantics, its checked state, its label text, optional supporting description, and any inactive state.",
         "Arrow keys move and select through active options; Home and End select the first and last active options; Space and Enter select the focused option.",
         "Roving tabindex keeps one active option in the tab order, preferring the selected option; setFocus uses that same public focus target."
@@ -56,7 +58,10 @@
         "Selected circles remove the border, use a brand fill, and draw a centered on-bold foreground dot sized 10px at lg, 8px at md, 6px at sm, and 4px at xs.",
         "Sizes are lg with a 20px circle in a 24px placement, md with a 16px circle in a 20px placement, sm with a 12px circle in a 16px placement, and xs with an 8px circle in a 12px placement.",
         "The initial value is restored by native form reset; the selected value submits under name and a required set is invalid until one active option is selected.",
-        "Description-rich options grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy."
+        "Description-rich options grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy.",
+        "A visible group label uses the same density height and horizontal text origin as a menu section heading above the option list without adding a second interaction target. Copy uses text-body-small emphasis.",
+        "Vertical form options use a 4px gap; a medium single-line option and its group label each use the shared 32px control height.",
+        "Form and settings usage omits a row hover or pressed wash by default; set hasInteractionFill only when each radio option is presented as a choice-list row."
       ],
       "responsiveBehavior": [
         "Choose size from the density of the containing form or settings row.",
@@ -115,7 +120,8 @@
             ],
             "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
             "props": [
-              "size"
+              "size",
+              "hasInteractionFill"
             ]
           }
         ],
@@ -167,6 +173,24 @@
           "mutable": false,
           "description": "Associates the radio set with a form by id when rendered outside that form."
         },
+        "groupLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "group-label",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Optional visible group label rendered above the options."
+        },
+        "hasInteractionFill": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-interaction-fill",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Show full-row hover and pressed feedback for choice-list presentations."
+        },
         "isInactive": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -292,6 +316,24 @@
         "mutable": false,
         "description": "Associates the radio set with a form by id when rendered outside that form."
       },
+      "groupLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "group-label",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Optional visible group label rendered above the options."
+      },
+      "hasInteractionFill": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-interaction-fill",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Show full-row hover and pressed feedback for choice-list presentations."
+      },
       "isInactive": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -400,8 +442,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -417,12 +459,12 @@
   "files": [
     {
       "path": "src/wc/components/Radio/Radio.css",
-      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n:host(.radio--horizontal) {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--lg) {\n  --_radio-circle: var(--dimension-iconography-md);\n  --_radio-dot: calc(var(--dimension-size-base) * 5 / 4);\n  --_radio-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.radio--md) {\n  --_radio-circle: var(--dimension-iconography-sm);\n  --_radio-dot: var(--dimension-size-100);\n  --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n  --_radio-circle: var(--dimension-iconography-xs);\n  --_radio-dot: var(--dimension-size-075);\n  --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n  --_radio-circle: var(--dimension-size-100);\n  --_radio-dot: var(--dimension-size-050);\n  --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n.radio__item--described {\n  height: auto;\n  min-height: var(--ds-control-height);\n  padding-block: var(--dimension-space-075);\n}\n\n.radio__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.radio__circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_radio-circle);\n  height: var(--_radio-circle);\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.radio__dot {\n  width: var(--_radio-dot);\n  height: var(--_radio-dot);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n\n.radio__copy {\n  display: grid;\n  flex: 1;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .radio__circle {\n    border: var(--_radio-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .radio__circle--checked {\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n\n  .radio__dot {\n    background-color: var(--ds-forced-color-on-selected);\n  }\n}\n",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\n:host(.radio--labeled) {\n  gap: var(--dimension-space-050);\n}\n\n.radio__options {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n:host(.radio--horizontal) {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--horizontal) .radio__options {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--labeled.radio--horizontal) {\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\n:host(.radio--labeled.radio--horizontal) .radio__options {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--lg) {\n  --_radio-circle-inset: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  --_radio-circle: var(--dimension-iconography-md);\n  --_radio-dot: calc(var(--dimension-size-base) * 5 / 4);\n  --_radio-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.radio--md) {\n  --_radio-circle-inset: var(--dimension-space-100);\n  --_radio-circle: var(--dimension-iconography-sm);\n  --_radio-dot: var(--dimension-size-100);\n  --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n  --_radio-circle-inset: var(--dimension-space-075);\n  --_radio-circle: var(--dimension-iconography-xs);\n  --_radio-dot: var(--dimension-size-075);\n  --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n  --_radio-circle-inset: var(--dimension-space-050);\n  --_radio-circle: var(--dimension-size-100);\n  --_radio-dot: var(--dimension-size-050);\n  --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-settings-row-control-padding-inline, var(--ds-control-padding-inline));\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n.radio__item--described {\n  align-items: flex-start;\n  height: auto;\n  min-height: var(--ds-control-height);\n  padding-block: var(--dimension-space-075);\n}\n\n.radio__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.radio__circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_radio-circle);\n  height: var(--_radio-circle);\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.radio__dot {\n  width: var(--_radio-dot);\n  height: var(--_radio-dot);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n\nds-text.radio__group-label {\n  padding-inline: var(\n    --ds-settings-row-control-padding-inline,\n    calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset))\n  );\n}\n\n.radio__copy {\n  display: grid;\n  flex: 1;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .radio__circle {\n    border: var(--_radio-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .radio__circle--checked {\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n\n  .radio__dot {\n    background-color: var(--ds-forced-color-on-selected);\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Radio/Radio.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n  Method,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n}\n\nexport type RadioSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet radioIdCounter = 0;\n\n@Component({\n  tag: 'ds-radio',\n  styleUrl: 'Radio.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Radio {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private readonly instanceId = ++radioIdCounter;\n\n  /** Visible choices in this one-of-many set. */\n  @Prop() options: RadioOption[] = [];\n  /** Selected option value. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Visual and placement density for every option. */\n  @Prop() size: RadioSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Associates the radio set with a form by id when rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n  /** Native disabled state for the complete set. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one option to be selected for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required set has no selection. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Layout direction for the option set. */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  /** Design-system inactive state for the complete set. */\n  @Prop() isInactive: boolean = false;\n  /** Accessible name when visible group labeling is unavailable. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id reference for a visible group label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emitted after user selection with the selected option value. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  /** Focus the selected option, or the first active option when nothing is selected. */\n  @Method()\n  async setFocus() {\n    this.activeItems.find(item => item.tabIndex === 0)?.focus();\n  }\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])')\n    );\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && this.value.length === 0;\n    const selectedIdx = this.options.findIndex(option => option.value === this.value);\n    const firstActiveIdx = this.options.findIndex(option => !inactive && !option.isInactive);\n    const focusableIdx =\n      selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n        ? selectedIdx\n        : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={invalid ? 'true' : undefined}\n        class={{\n          radio: true,\n          'radio--horizontal': this.direction === 'horizontal',\n          [`radio--${this.size}`]: true,\n        }}\n      >\n        {this.options.map((option, index) => {\n          const isItemInactive = inactive || !!option.isInactive;\n          const isChecked = option.value === this.value;\n          const tabIdx = isItemInactive ? -1 : index === focusableIdx ? 0 : -1;\n          const labelId = `ds-radio-${this.instanceId}-label-${index}`;\n          const descriptionId = `ds-radio-${this.instanceId}-description-${index}`;\n\n          return (\n            <div\n              key={option.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive ? 'true' : undefined}\n              aria-labelledby={labelId}\n              aria-describedby={option.description ? descriptionId : undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={option.value}\n              data-inactive={isItemInactive || undefined}\n              class={{\n                radio__item: true,\n                'radio__item--described': Boolean(option.description),\n                [`ds-control--${this.size}`]: true,\n                'ds-control-inactive': isItemInactive,\n                'ds-focus-ring-inset': !isItemInactive,\n                'ds-interaction-fill': !isItemInactive,\n              }}\n              onClick={() => !isItemInactive && this.selectItem(option.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(option.value);\n                }\n              }}\n            >\n              <span class=\"radio__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n                <span class={{ radio__circle: true, 'radio__circle--checked': isChecked }}>\n                  {isChecked && <span class=\"radio__dot\" />}\n                </span>\n              </span>\n              <span class=\"radio__copy ds-interaction-fill__content\">\n                <ds-text\n                  class=\"radio__label\"\n                  as=\"span\"\n                  variant={CONTROL_TEXT_VARIANT[this.size]}\n                  textId={labelId}\n                >\n                  {option.label}\n                </ds-text>\n                {option.description ? (\n                  <ds-text\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"secondary\"\n                    textId={descriptionId}\n                  >\n                    {option.description}\n                  </ds-text>\n                ) : null}\n              </span>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n  Method,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n}\n\nexport type RadioSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet radioIdCounter = 0;\n\n@Component({\n  tag: 'ds-radio',\n  styleUrl: 'Radio.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Radio {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private readonly instanceId = ++radioIdCounter;\n\n  /** Visible choices in this one-of-many set. */\n  @Prop() options: RadioOption[] = [];\n  /** Optional visible group label rendered above the options. */\n  @Prop() groupLabel: string = '';\n  /** Selected option value. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Visual and placement density for every option. */\n  @Prop() size: RadioSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Associates the radio set with a form by id when rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n  /** Native disabled state for the complete set. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one option to be selected for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required set has no selection. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Layout direction for the option set. */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  /** Design-system inactive state for the complete set. */\n  @Prop() isInactive: boolean = false;\n  /** Show full-row hover and pressed feedback for choice-list presentations. */\n  @Prop() hasInteractionFill: boolean = false;\n  /** Accessible name when visible group labeling is unavailable. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id reference for a visible group label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emitted after user selection with the selected option value. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  private get hasGroupLabel(): boolean {\n    return Boolean(this.groupLabel.trim());\n  }\n\n  /** Settings rows own a separate heading; never mount the form group label there. */\n  private get showGroupLabel(): boolean {\n    return this.hasGroupLabel && !this.el.closest('ds-setting-row-radio');\n  }\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  /** Focus the selected option, or the first active option when nothing is selected. */\n  @Method()\n  async setFocus() {\n    this.activeItems.find(item => item.tabIndex === 0)?.focus();\n  }\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])')\n    );\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  private renderOptions(inactive: boolean, focusableIdx: number) {\n    return this.options.map((option, index) => {\n      const isItemInactive = inactive || !!option.isInactive;\n      const isChecked = option.value === this.value;\n      const tabIdx = isItemInactive ? -1 : index === focusableIdx ? 0 : -1;\n      const labelId = `ds-radio-${this.instanceId}-label-${index}`;\n      const descriptionId = `ds-radio-${this.instanceId}-description-${index}`;\n\n      return (\n        <div\n          key={option.value}\n          role=\"radio\"\n          aria-checked={String(isChecked)}\n          aria-disabled={isItemInactive ? 'true' : undefined}\n          aria-labelledby={labelId}\n          aria-describedby={option.description ? descriptionId : undefined}\n          tabIndex={tabIdx}\n          data-radio-item\n          data-value={option.value}\n          data-inactive={isItemInactive || undefined}\n          class={{\n            radio__item: true,\n            'radio__item--described': Boolean(option.description),\n            [`ds-control--${this.size}`]: true,\n            'ds-control-inactive': isItemInactive,\n            'ds-focus-ring-inset': !isItemInactive,\n            'ds-interaction-fill': !isItemInactive && this.hasInteractionFill,\n          }}\n          onClick={() => !isItemInactive && this.selectItem(option.value)}\n          onKeyDown={(e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n              e.preventDefault();\n              this.selectItem(option.value);\n            }\n          }}\n        >\n          <span class=\"radio__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n            <span class={{ radio__circle: true, 'radio__circle--checked': isChecked }}>\n              {isChecked && <span class=\"radio__dot\" />}\n            </span>\n          </span>\n          <span class=\"radio__copy ds-interaction-fill__content\">\n            <ds-text\n              class=\"radio__label\"\n              as=\"span\"\n              variant={CONTROL_TEXT_VARIANT[this.size]}\n              textId={labelId}\n            >\n              {option.label}\n            </ds-text>\n            {option.description ? (\n              <ds-text\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n                textId={descriptionId}\n              >\n                {option.description}\n              </ds-text>\n            ) : null}\n          </span>\n        </div>\n      );\n    });\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && this.value.length === 0;\n    const selectedIdx = this.options.findIndex(option => option.value === this.value);\n    const firstActiveIdx = this.options.findIndex(option => !inactive && !option.isInactive);\n    const focusableIdx =\n      selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n        ? selectedIdx\n        : firstActiveIdx;\n    const renderedOptions = this.renderOptions(inactive, focusableIdx);\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.showGroupLabel ? this.groupLabel : this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={invalid ? 'true' : undefined}\n        class={{\n          radio: true,\n          'radio--horizontal': this.direction === 'horizontal',\n          [`radio--${this.size}`]: true,\n          'radio--labeled': this.showGroupLabel,\n        }}\n      >\n        {this.showGroupLabel ? (\n          <ds-text\n            key=\"radio-group-label\"\n            class={`radio__group-label ds-control-section-heading ds-control--${this.size}`}\n            as=\"span\"\n            variant=\"text-body-small\"\n            emphasis\n          >\n            {this.groupLabel}\n          </ds-text>\n        ) : null}\n        <div key=\"radio-options\" class=\"radio__options\">\n          {renderedOptions}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]