@nldd/design-system 0.8.88 → 0.8.90

package/dist/components/{dist-eVFegyjM.js → dist-Dh_b9r4M.js}

@@ -1,4 +1,4 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, W as EditorView, ct as EditorSelection, n as ExternalTokenizer, p as bracketMatchingHandle, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, y as foldNodeProp } from "./dist-fIxe0l7k.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, W as EditorView, ct as EditorSelection, n as ExternalTokenizer, p as bracketMatchingHandle, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, y as foldNodeProp } from "./dist-DHA-0RyT.js";
 //#region node_modules/@lezer/xml/dist/index.js
 var StartTag = 1;
 var StartCloseTag = 2;

package/dist/components/{dist-DXZ-cFAl.js → dist-DkZlotgT.js}

@@ -1,5 +1,5 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, y as foldNodeProp } from "./dist-fIxe0l7k.js";
-import { a as ifNotIn, r as completeFromList } from "./dist-CgDuh26K.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, u as LanguageSupport, y as foldNodeProp } from "./dist-DHA-0RyT.js";
+import { a as ifNotIn, r as completeFromList } from "./dist-D_ckX1sK.js";
 //#region node_modules/@codemirror/lang-sql/dist/index.js
 var whitespace = 36;
 var LineComment = 1;

package/dist/components/{dist-CSrO_mYe.js → dist-TCqV9dho.js}

@@ -1,4 +1,4 @@
-import { C as indentNodeProp, M as styleTags, N as tags, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-fIxe0l7k.js";
+import { C as indentNodeProp, M as styleTags, N as tags, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-DHA-0RyT.js";
 //#region node_modules/@lezer/yaml/dist/index.js
 var blockEnd = 63;
 var eof = 64;

package/dist/components/{dist-ByH8hQze.js → dist-Y54Lma86.js}

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, O as sublanguageProp, P as IterMode, R as NodeWeakMap, W as EditorView, _ as flatIndent, ct as EditorSelection, g as delimitedIndent, h as defineLanguageFacet, i as LocalTokenGroup, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-fIxe0l7k.js";
-import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-CgDuh26K.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, O as sublanguageProp, P as IterMode, R as NodeWeakMap, W as EditorView, _ as flatIndent, ct as EditorSelection, g as delimitedIndent, h as defineLanguageFacet, i as LocalTokenGroup, m as continuedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-DHA-0RyT.js";
+import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-D_ckX1sK.js";
 //#region node_modules/@lezer/javascript/dist/index.js
 var noSemi = 316;
 var noSemiType = 317;

package/dist/components/{dist-CRwuSgMM.js → dist-yyE8P2O6.js}

@@ -1,5 +1,5 @@
-import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, P as IterMode, R as NodeWeakMap, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-fIxe0l7k.js";
-import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-CgDuh26K.js";
+import { A as syntaxTree, C as indentNodeProp, M as styleTags, N as tags, P as IterMode, R as NodeWeakMap, g as delimitedIndent, n as ExternalTokenizer, r as LRParser, s as LRLanguage, t as ContextTracker, u as LanguageSupport, v as foldInside, y as foldNodeProp } from "./dist-DHA-0RyT.js";
+import { a as ifNotIn, o as snippetCompletion, r as completeFromList } from "./dist-D_ckX1sK.js";
 //#region node_modules/@lezer/python/dist/index.js
 var printKeyword = 1;
 var indent = 194;

package/dist/components/inputs/radio-button/radio-button.d.ts

@@ -1,34 +1,46 @@
 /**
  * Nederlandse Digitale Dienst Radio Button Component (Lit + TypeScript)
  *
- * WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with
- * role="radiogroup" and aria-labelledby for proper group semantics.
+ * WAI-ARIA: put the buttons of one group in a container with
+ * role="radiogroup" and a name of its own. A screen reader counts the options
+ * from that container, so a bare <fieldset> (which is a group, not a
+ * radiogroup) leaves them uncounted. nldd-radio-button-group does this for you.
+ *
+ * Radio buttons with the same name, in the same form and the same tree, form
+ * one group the way native radios do: checking one unchecks the others, the
+ * arrow keys move between them, Tab stops at the group once, and a screen
+ * reader hears each one's place in it. The element itself is the radio, because
+ * an input per shadow root would leave every button a group of one.
+ *
+ * The shape is all this component draws. A radio with a label beside it is
+ * nldd-radio-button-field.
  *
  * @example
- * <fieldset>
- *   <legend>Kies een optie</legend>
- *   <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button>
- *   <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button>
+ * <fieldset role="radiogroup" aria-labelledby="options-label">
+ *   <legend id="options-label">Kies een optie</legend>
+ *   <nldd-radio-button name="options" value="1" accessible-label="Optie 1"></nldd-radio-button>
+ *   <nldd-radio-button name="options" value="2" accessible-label="Optie 2"></nldd-radio-button>
  * </fieldset>
  *
  * @element nldd-radio-button
  * @attr {boolean} checked - Checked state
  * @attr {boolean} disabled - Disabled state
  * @attr {boolean} no-tab - Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable.
- * @attr {boolean} decorative - Renders the shape without the input: no focus, no
+ * @attr {boolean} decorative - Renders the shape only: no role, no focus, no
  *   name/value, nothing announced. For a control that owns the state elsewhere,
- *   such as a list row that is itself the radio; putting a real input in there
- *   would nest a control inside a control.
- * @attr {boolean} required - Required state
+ *   such as a list row or an nldd-radio-button-field that is itself the radio;
+ *   putting a second radio in there would nest a control inside a control.
+ * @attr {boolean} required - Required state. What it asks is whether anything in the group is checked, as a native radio does.
+ * @attr {boolean} focus-ring - Draws the focus ring around the shape. Set by nldd-radio-button-field, which is the radio itself and holds the focus. Not part of the public API.
  * @attr {string} name - Radio group name for form submission; ties the buttons of one group together
  * @attr {string} value - Value submitted with the form when this radio button is checked
- * @attr {string} accessible-label - Accessible label forwarded as aria-label to the native input.
+ * @attr {string} accessible-label - Accessible label, set as aria-label on this element: it is the radio.
  * @attr {boolean} invalid - Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it.
  *   Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries.
  *
  * @fires change - When checked state changes; detail: { checked: boolean, value: string, name: string }
  */
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import { type FormValue } from '../../../utilities/form-associated-mixin.js';
 declare const NLDDRadioButton_base: typeof LitElement & (abstract new (...args: any[]) => LitElement & import("../../../utilities/form-associated-mixin.js").FormAssociatedElement) & (abstract new (...args: any[]) => import("../../../utilities/described-by-mixin.js").DescribedElement);
 export declare class NLDDRadioButton extends NLDDRadioButton_base {
@@ -46,6 +58,9 @@ export declare class NLDDRadioButton extends NLDDRadioButton_base {
      *  script-focusable. */
     noTab: boolean;
     required: boolean;
+    /** Set by nldd-radio-button-field. Not part of the public API: that field is
+     *  the radio and holds the focus, while the shape it rings is drawn here. */
+    focusRing: boolean;
     name: string;
     value: string;
     accessibleLabel: string;
@@ -59,17 +74,42 @@ export declare class NLDDRadioButton extends NLDDRadioButton_base {
      * choosing not to show something is not a reason to keep quiet about it.
      */
     invalid: boolean;
+    /** Its place among the radio buttons that share its name, and whether any of
+     *  them is checked. */
+    private _grouping;
+    /** The aria-label this radio wrote on itself, so it only takes back its own. */
+    private _appliedLabel;
+    /** Whether anything in its group is checked, which is what `required` asks
+     *  of a radio: one of these, not this one. */
+    get _groupHasSelection(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
+    /** Counting happens before the render, not after it: the place this radio is
+     *  given decides what `updated()` writes on it, and a count from there would
+     *  ask for a second render of what was just drawn. */
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    /**
+     * This element is the radio.
+     *
+     * A native `<input type="radio">` groups with the radios of the same name in
+     * its own tree, and one per shadow root leaves every radio a group of one: a
+     * screen reader announces "1 of 1" and Tab stops at each of them. The role
+     * on the element itself puts every radio of a group in one tree again, where
+     * the browser counts them together.
+     */
+    private _syncHostAria;
+    /** The element assistive software meets is this one, so the description and
+     *  the invalid state belong here rather than on something inside. */
+    describedTarget(): Element | null;
     formValue(): FormValue;
     formResetCallback(): void;
     formStateRestoreCallback(state: File | string | FormData | null): void;
+    /** Checks this radio, the way a click or the space bar does. */
     select(): void;
-    _handleChange(e: Event): void;
-    /**
-     * Delegates focus to the inner native radio `<input>`, so consumers can
-     * call `radioEl.focus()` without reaching into shadow DOM.
-     */
-    focus(options?: FocusOptions): void;
+    private _onClick;
+    private _onKeyDown;
     render(): import("lit-html").TemplateResult;
 }
 declare global {

package/dist/components/inputs/radio-button/radio-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,6CAA6C,CAAC;;AAM7F,qBACa,eAAgB,SAAQ,oBAAuC;IAE3E,OAAgB,MAAM,0BAAqB;IAE3C;wEACoE;IACpE,MAAM,CAAC,WAAW,UAAQ;IAG1B,OAAO,CAAC,eAAe,CAAS;IAGhC,OAAO,UAAS;IAGhB,UAAU,UAAS;IAGnB,QAAQ,UAAS;IACjB;;;4BAGwB;IAExB,KAAK,UAAS;IAId,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,eAAe,SAAM;IAGrB;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAEP,YAAY,IAAI,IAAI;IAKpB,SAAS,IAAI,SAAS;IAI/B,iBAAiB,IAAI,IAAI;IAKzB,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAI/D,MAAM,IAAI,IAAI;IAQd,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAWpC;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEtD,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,6CAA6C,CAAC;;AAS7F,qBACa,eAAgB,SAAQ,oBAAuC;IAE3E,OAAgB,MAAM,0BAAqB;IAE3C;wEACoE;IACpE,MAAM,CAAC,WAAW,UAAQ;IAG1B,OAAO,CAAC,eAAe,CAAS;IAGhC,OAAO,UAAS;IAGhB,UAAU,UAAS;IAGnB,QAAQ,UAAS;IACjB;;;4BAGwB;IAExB,KAAK,UAAS;IAId,QAAQ,UAAS;IAEjB;iFAC6E;IAE7E,SAAS,UAAS;IAGlB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,eAAe,SAAM;IAGrB;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAEhB;2BACuB;IACvB,OAAO,CAAC,SAAS,CAA2B;IAE5C,gFAAgF;IAChF,OAAO,CAAC,aAAa,CAAuB;IAE5C;kDAC8C;IAC9C,IAAI,kBAAkB,IAAI,OAAO,CAEhC;IAEQ,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAI7B;;0DAEsD;IAC7C,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM/C,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAKrD;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IA0BrB;yEACqE;IAC5D,eAAe,IAAI,OAAO,GAAG,IAAI;IAKjC,SAAS,IAAI,SAAS;IAI/B,iBAAiB,IAAI,IAAI;IAKzB,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAItE,gEAAgE;IACzD,MAAM,IAAI,IAAI;IAYrB,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAiBhB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/inputs/radio-button/radio-button.js

@@ -7,28 +7,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Nederlandse Digitale Dienst Radio Button Component (Lit + TypeScript)
  *
- * WAI-ARIA: Wrap radio buttons in a <fieldset>/<legend> or a container with
- * role="radiogroup" and aria-labelledby for proper group semantics.
+ * WAI-ARIA: put the buttons of one group in a container with
+ * role="radiogroup" and a name of its own. A screen reader counts the options
+ * from that container, so a bare <fieldset> (which is a group, not a
+ * radiogroup) leaves them uncounted. nldd-radio-button-group does this for you.
+ *
+ * Radio buttons with the same name, in the same form and the same tree, form
+ * one group the way native radios do: checking one unchecks the others, the
+ * arrow keys move between them, Tab stops at the group once, and a screen
+ * reader hears each one's place in it. The element itself is the radio, because
+ * an input per shadow root would leave every button a group of one.
+ *
+ * The shape is all this component draws. A radio with a label beside it is
+ * nldd-radio-button-field.
  *
  * @example
- * <fieldset>
- *   <legend>Kies een optie</legend>
- *   <nldd-radio-button name="options" value="1">Optie 1</nldd-radio-button>
- *   <nldd-radio-button name="options" value="2">Optie 2</nldd-radio-button>
+ * <fieldset role="radiogroup" aria-labelledby="options-label">
+ *   <legend id="options-label">Kies een optie</legend>
+ *   <nldd-radio-button name="options" value="1" accessible-label="Optie 1"></nldd-radio-button>
+ *   <nldd-radio-button name="options" value="2" accessible-label="Optie 2"></nldd-radio-button>
  * </fieldset>
  *
  * @element nldd-radio-button
  * @attr {boolean} checked - Checked state
  * @attr {boolean} disabled - Disabled state
  * @attr {boolean} no-tab - Takes the control out of the tab order (tabindex="-1"), for a control owned by a roving container (a row of an nldd-list, where the arrow keys move between rows) that manages focus itself. Still mouse- and script-focusable.
- * @attr {boolean} decorative - Renders the shape without the input: no focus, no
+ * @attr {boolean} decorative - Renders the shape only: no role, no focus, no
  *   name/value, nothing announced. For a control that owns the state elsewhere,
- *   such as a list row that is itself the radio; putting a real input in there
- *   would nest a control inside a control.
- * @attr {boolean} required - Required state
+ *   such as a list row or an nldd-radio-button-field that is itself the radio;
+ *   putting a second radio in there would nest a control inside a control.
+ * @attr {boolean} required - Required state. What it asks is whether anything in the group is checked, as a native radio does.
+ * @attr {boolean} focus-ring - Draws the focus ring around the shape. Set by nldd-radio-button-field, which is the radio itself and holds the focus. Not part of the public API.
  * @attr {string} name - Radio group name for form submission; ties the buttons of one group together
  * @attr {string} value - Value submitted with the form when this radio button is checked
- * @attr {string} accessible-label - Accessible label forwarded as aria-label to the native input.
+ * @attr {string} accessible-label - Accessible label, set as aria-label on this element: it is the radio.
  * @attr {boolean} invalid - Marks the control as invalid. Announced with aria-invalid; nothing is drawn for it.
  *   Note: aria-labelledby is not supported as IDREF resolution cannot cross shadow DOM boundaries.
  *
@@ -41,6 +53,9 @@ import { radioButtonStyles } from './radio-button.styles.js';
 import { radioButtonTemplate } from './radio-button.template.js';
 import { DescribedBy } from '../../../utilities/described-by-mixin.js';
 import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { RadioGrouping } from '../../../utilities/radio-grouping.js';
+import { setOwnedAttribute } from '../../../utilities/owned-attribute.js';
+import { submitOnEnter } from '../../../utilities/implicit-submission.js';
 let NLDDRadioButton = class NLDDRadioButton extends DescribedBy(FormAssociated(LitElement)) {
     constructor() {
         super(...arguments);
@@ -54,6 +69,9 @@ let NLDDRadioButton = class NLDDRadioButton extends DescribedBy(FormAssociated(L
          *  script-focusable. */
         this.noTab = false;
         this.required = false;
+        /** Set by nldd-radio-button-field. Not part of the public API: that field is
+         *  the radio and holds the focus, while the shape it rings is drawn here. */
+        this.focusRing = false;
         this.name = '';
         this.value = '';
         this.accessibleLabel = '';
@@ -67,10 +85,109 @@ let NLDDRadioButton = class NLDDRadioButton extends DescribedBy(FormAssociated(L
          * choosing not to show something is not a reason to keep quiet about it.
          */
         this.invalid = false;
+        /** Its place among the radio buttons that share its name, and whether any of
+         *  them is checked. */
+        this._grouping = new RadioGrouping(this);
+        /** The aria-label this radio wrote on itself, so it only takes back its own. */
+        this._appliedLabel = null;
+        this._onClick = () => {
+            this.select();
+        };
+        this._onKeyDown = (e) => {
+            if (this.disabled || this.decorative)
+                return;
+            // The keys a native radio answers to. Space checks it, Enter submits the
+            // form it belongs to, and the arrow keys move through the group.
+            if (e.key === ' ') {
+                e.preventDefault();
+                this.select();
+                return;
+            }
+            if (e.key === 'Enter') {
+                submitOnEnter(this, e);
+                return;
+            }
+            // The arrow keys move through the group and check what they land on, as
+            // with native radios. Not when a roving container manages focus itself:
+            // it set no-tab and owns the keys.
+            if (!this.noTab)
+                this._grouping.moveWithArrow(e);
+        };
+    }
+    /** Whether anything in its group is checked, which is what `required` asks
+     *  of a radio: one of these, not this one. */
+    get _groupHasSelection() {
+        return this._grouping.answered;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._onClick);
+        this.addEventListener('keydown', this._onKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._onClick);
+        this.removeEventListener('keydown', this._onKeyDown);
     }
     firstUpdated() {
         this._initialChecked = this.checked;
     }
+    /** Counting happens before the render, not after it: the place this radio is
+     *  given decides what `updated()` writes on it, and a count from there would
+     *  ask for a second render of what was just drawn. */
+    willUpdate(changed) {
+        if (changed.has('checked') && this.checked)
+            this._grouping.uncheckOthers();
+        if (changed.has('name') || changed.has('decorative'))
+            this._grouping.regroup();
+        else if (changed.has('checked') || changed.has('disabled'))
+            this._grouping.refresh();
+    }
+    updated(changed) {
+        super.updated(changed);
+        this._syncHostAria();
+    }
+    /**
+     * This element is the radio.
+     *
+     * A native `<input type="radio">` groups with the radios of the same name in
+     * its own tree, and one per shadow root leaves every radio a group of one: a
+     * screen reader announces "1 of 1" and Tab stops at each of them. The role
+     * on the element itself puts every radio of a group in one tree again, where
+     * the browser counts them together.
+     */
+    _syncHostAria() {
+        if (this.decorative) {
+            for (const name of ['role', 'aria-checked', 'aria-disabled', 'aria-posinset', 'aria-setsize', 'tabindex']) {
+                this.removeAttribute(name);
+            }
+            return;
+        }
+        this.setAttribute('role', 'radio');
+        this.setAttribute('aria-checked', String(this.checked));
+        this._appliedLabel = setOwnedAttribute(this, 'aria-label', this.accessibleLabel, this._appliedLabel);
+        if (this.disabled)
+            this.setAttribute('aria-disabled', 'true');
+        else
+            this.removeAttribute('aria-disabled');
+        const position = this._grouping.position;
+        if (position) {
+            this.setAttribute('aria-posinset', String(position.posInSet));
+            this.setAttribute('aria-setsize', String(position.setSize));
+        }
+        else {
+            this.removeAttribute('aria-posinset');
+            this.removeAttribute('aria-setsize');
+        }
+        // A disabled radio is not in the tab order, as a native one is not.
+        const tabbable = !this.disabled && !this.noTab && position?.tabbable !== false;
+        this.setAttribute('tabindex', tabbable ? '0' : '-1');
+    }
+    /** The element assistive software meets is this one, so the description and
+     *  the invalid state belong here rather than on something inside. */
+    describedTarget() {
+        return this;
+    }
     formValue() {
         return this.checked ? this.value : null;
     }
@@ -80,32 +197,19 @@ let NLDDRadioButton = class NLDDRadioButton extends DescribedBy(FormAssociated(L
     formStateRestoreCallback(state) {
         this.checked = state !== null;
     }
+    /** Checks this radio, the way a click or the space bar does. */
     select() {
-        if (this.disabled || this.checked)
+        if (this.disabled || this.decorative || this.checked)
             return;
-        const input = this.shadowRoot?.querySelector('input');
-        if (!input)
-            return;
-        input.checked = true;
-        input.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-    _handleChange(e) {
-        const input = e.target;
-        this.checked = input.checked;
+        this.checked = true;
         this.commitFormValue();
+        this._grouping.uncheckOthers();
         this.dispatchEvent(new CustomEvent('change', {
-            detail: { checked: this.checked, value: this.value, name: this.name },
+            detail: { checked: true, value: this.value, name: this.name },
             bubbles: true,
             composed: true,
         }));
     }
-    /**
-     * Delegates focus to the inner native radio `<input>`, so consumers can
-     * call `radioEl.focus()` without reaching into shadow DOM.
-     */
-    focus(options) {
-        this.shadowRoot?.querySelector('.radio-button__input')?.focus(options);
-    }
     render() {
         return radioButtonTemplate(this);
     }
@@ -129,6 +233,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDRadioButton.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'focus-ring' })
+], NLDDRadioButton.prototype, "focusRing", void 0);
 __decorate([
     property({ reflect: true, converter: reflectNonDefault('') })
 ], NLDDRadioButton.prototype, "name", void 0);

package/dist/components/inputs/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"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"}

package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAoH7B,CAAC"}
+{"version":3,"file":"radio-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA8G7B,CAAC"}

package/dist/components/inputs/radio-button/radio-button.styles.js

@@ -26,12 +26,12 @@ export const radioButtonStyles = css `
 
 	/* # Elements */
 
-	.radio-button__input {
+	.radio-button__validation-input {
 		position: absolute;
 		inset: 0;
 		opacity: 0;
-		z-index: 1;
 		margin: 0;
+		pointer-events: none;
 		width: 100%;
 		height: 100%;
 	}
@@ -58,61 +58,55 @@ export const radioButtonStyles = css `
 		transform: translate(-50%, -50%) scale(0);
 	}
 
-	.radio-button__input:checked ~ .radio-button__outer-shape {
+	:host([checked]) .radio-button__outer-shape {
 		border-color: var(--components-radio-button-is-selected-border-color);
 		background-color: var(--components-radio-button-is-selected-background-color);
 	}
 
-	.radio-button__input:checked ~ .radio-button__outer-shape .radio-button__inner-shape {
-		transform: translate(-50%, -50%) scale(1);
-	}
-
-	/* Decorative has no input to hang :checked on, so the state comes from the
-	   host attribute instead. */
-	:host([decorative][checked]) .radio-button__outer-shape {
-		border-color: var(--components-radio-button-is-selected-border-color);
-		background-color: var(--components-radio-button-is-selected-background-color);
-	}
-
-	:host([decorative][checked]) .radio-button__inner-shape {
+	:host([checked]) .radio-button__inner-shape {
 		transform: translate(-50%, -50%) scale(1);
 	}
 
 	@media (hover: hover) {
-		.radio-button__input:hover:not(:disabled) ~ .radio-button__outer-shape {
+		:host(:hover:not([disabled])) .radio-button__outer-shape {
 			border-color: var(--components-radio-button-is-hovered-border-color);
 		}
 
-		.radio-button__input:checked:hover:not(:disabled) ~ .radio-button__outer-shape {
+		:host([checked]:hover:not([disabled])) .radio-button__outer-shape {
 			border-color: var(--components-radio-button-is-selected-is-hovered-border-color);
 			background-color: var(--components-radio-button-is-selected-is-hovered-background-color);
 		}
 
-		.radio-button__input:checked:hover:not(:disabled) ~ .radio-button__outer-shape .radio-button__inner-shape {
+		:host([checked]:hover:not([disabled])) .radio-button__inner-shape {
 			border-color: var(--components-radio-button-is-selected-is-hovered-inner-shape-border-color);
 		}
 	}
 
-	.radio-button__input:active:not(:disabled) ~ .radio-button__outer-shape {
+	:host(:active:not([disabled])) .radio-button__outer-shape {
 		border-color: var(--components-radio-button-is-active-border-color);
 	}
 
-	.radio-button__input:checked:active:not(:disabled) ~ .radio-button__outer-shape {
+	:host([checked]:active:not([disabled])) .radio-button__outer-shape {
 		border-color: var(--components-radio-button-is-selected-is-active-border-color);
 		background-color: var(--components-radio-button-is-selected-is-active-background-color);
 	}
 
-	.radio-button__input:checked:active:not(:disabled) ~ .radio-button__outer-shape .radio-button__inner-shape {
+	:host([checked]:active:not([disabled])) .radio-button__inner-shape {
 		border-color: var(--components-radio-button-is-selected-is-active-inner-shape-border-color);
 	}
 
-	.radio-button__input:focus-visible ~ .radio-button__outer-shape {
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	:host(:focus-visible) .radio-button__outer-shape,
+	:host([focus-ring]) .radio-button__outer-shape {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
-	.radio-button__input:disabled ~ .radio-button__outer-shape {
+	:host([disabled]) .radio-button__outer-shape {
 		opacity: var(--primitives-opacity-disabled);
 	}
 `;

package/dist/components/inputs/radio-button/radio-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHnC,CAAC"}
+{"version":3,"file":"radio-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GnC,CAAC"}

package/dist/components/inputs/radio-button/radio-button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CA6B9E"}
+{"version":3,"file":"radio-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CAgC9E"}

package/dist/components/inputs/radio-button/radio-button.template.js

@@ -1,7 +1,7 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 export function radioButtonTemplate(component) {
     // Decorative: the shape only. Something else owns the interaction and the
-    // state — a whole row that is itself the control, say — and an input here
+    // state — a whole row that is itself the control, say — and a radio here
     // would be a second control inside it.
     if (component.decorative) {
         return html `
@@ -10,17 +10,20 @@ export function radioButtonTemplate(component) {
 			</div>
 		`;
     }
+    // The radio itself is the host element, so nothing here is announced or
+    // focused. The input is only there to answer `required` for the form, and it
+    // answers the question a radio asks: is anything in this group checked. The
+    // name is for the platform: a radio without one is in no group, and a radio in
+    // no group never reports a missing value.
     return html `
-		<input class="radio-button__input"
+		<input class="radio-button__validation-input"
 			type="radio"
-			.checked=${component.checked}
-			?disabled=${component.disabled}
+			name="nldd-validation"
 			?required=${component.required}
-			name=${component.name || ''}
-			value=${component.value}
-			aria-label=${component.accessibleLabel || nothing}
-			tabindex=${component.noTab ? '-1' : nothing}
-			@change=${component._handleChange}
+			?disabled=${component.disabled}
+			.checked=${component._groupHasSelection}
+			tabindex="-1"
+			aria-hidden="true"
 		>
 		<div class="radio-button__outer-shape"
 			aria-hidden="true"

package/dist/components/inputs/radio-button/radio-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,0EAA0E;IAC1E,0EAA0E;IAC1E,uCAAuC;IACvC,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;;;cAGE,SAAS,CAAC,OAAO;eAChB,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ;UACvB,SAAS,CAAC,IAAI,IAAI,EAAE;WACnB,SAAS,CAAC,KAAK;gBACV,SAAS,CAAC,eAAe,IAAI,OAAO;cACtC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;aACjC,SAAS,CAAC,aAAa;;;;;;;EAOlC,CAAC;AACH,CAAC"}
+{"version":3,"file":"radio-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAG3C,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,0EAA0E;IAC1E,yEAAyE;IACzE,uCAAuC;IACvC,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IACD,wEAAwE;IACxE,6EAA6E;IAC7E,4EAA4E;IAC5E,+EAA+E;IAC/E,0CAA0C;IAC1C,OAAO,IAAI,CAAA;;;;eAIG,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ;cACnB,SAAS,CAAC,kBAAkB;;;;;;;;;EASxC,CAAC;AACH,CAAC"}