@c2n/radio 0.0.6 → 0.0.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { t as Radio } from "./radio-DKp0-FOe.js";
+import { t as Radio } from "./radio-B3fDuJv1.js";
 import { t as radioGroupContext } from "./radio-context-De4Idbg9.js";
-import { t as RadioGroup } from "./radio-group-DhI6N66I.js";
+import { t as RadioGroup } from "./radio-group-DQJl6oBt.js";
 export { Radio, RadioGroup, radioGroupContext };

package/dist/{radio-DKp0-FOe.js → radio-B3fDuJv1.js}

@@ -1,6 +1,7 @@
 import { t as radioGroupContext } from "./radio-context-De4Idbg9.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { redispatchEvent } from "@c2n/core/dom-helper.js";
@@ -87,10 +88,16 @@ function __decorate(decorators, target, key, desc) {
 var Radio = class Radio extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
+		this.defaultChecked = false;
+		this.defaultCheckedCaptured = false;
 		this.checked = false;
 		this.disabled = false;
 		this.value = "";
 		this.name = "";
+		this.required = false;
 		this.label = "";
 		this.tabbable = true;
 		this.hasDescription = false;
@@ -98,16 +105,64 @@ var Radio = class Radio extends LitElement {
 		this.hasIcon = false;
 		this.hasCheckedIcon = false;
 	}
+	static {
+		this.formAssociated = true;
+	}
 	static {
 		this.styles = unsafeCSS(radio_default);
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.defaultCheckedCaptured) {
+			this.defaultChecked = this.hasAttribute("checked");
+			this.defaultCheckedCaptured = true;
+		}
+	}
 	/** Field name in effect: the group's, or this radio's own. */
 	get effectiveName() {
 		return this.group?.name || this.name;
 	}
 	/** Disabled by its own attribute or by the group. */
 	get effectiveDisabled() {
-		return this.disabled || !!this.group?.disabled;
+		return this.disabled || this.disabledByForm || !!this.group?.disabled;
+	}
+	/** The containing form, when this standalone radio is associated with one. */
+	get form() {
+		return this.internals.form;
+	}
+	/** Labels associated with this form control. */
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	formResetCallback() {
+		if (this.group) return;
+		this.checked = this.defaultChecked;
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (this.group) return;
+		this.checked = state === "checked";
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.requestUpdate();
 	}
 	focus(options) {
 		this.formElement?.focus(options);
@@ -128,14 +183,46 @@ var Radio = class Radio extends LitElement {
 		if (changed.has("checked") && changed.get("checked") !== void 0 && this.isConnected) {
 			if (this.group) this.group.checkedChanged(this);
 			else if (this.checked) this.uncheckSiblings();
+			else this.requestSiblingValidityUpdates();
 		}
+		this.syncFormState();
 	}
 	/** Standalone radios sharing a `name` in the same root behave as one group. */
 	uncheckSiblings() {
 		if (!this.name) return;
 		const root = this.getRootNode();
 		if (typeof root.querySelectorAll !== "function") return;
-		for (const radio of root.querySelectorAll("c2-radio")) if (radio !== this && radio.checked && radio.name === this.name && !radio.group) radio.checked = false;
+		for (const radio of root.querySelectorAll("c2-radio")) if (this.isStandalonePeer(radio)) {
+			if (radio.checked) radio.checked = false;
+			else radio.requestUpdate();
+		}
+	}
+	requestSiblingValidityUpdates() {
+		if (!this.name) return;
+		const root = this.getRootNode();
+		if (typeof root.querySelectorAll !== "function") return;
+		for (const radio of root.querySelectorAll("c2-radio")) if (this.isStandalonePeer(radio)) radio.requestUpdate();
+	}
+	syncFormState() {
+		this.internals.setFormValue(!this.group && this.checked ? this.value : null, this.checked ? "checked" : "unchecked");
+		if (this.group) {
+			this.internals.setValidity({});
+			return;
+		}
+		const missing = this.required && !this.hasCheckedStandaloneSibling();
+		const flags = this.customValidityMessage ? { customError: true } : missing ? { valueMissing: true } : {};
+		const message = this.customValidityMessage || (missing ? "Please select an option." : "");
+		this.internals.setValidity(flags, message, this.formElement);
+	}
+	hasCheckedStandaloneSibling() {
+		if (this.checked) return true;
+		if (!this.name) return false;
+		const root = this.getRootNode();
+		if (typeof root.querySelectorAll !== "function") return false;
+		return [...root.querySelectorAll("c2-radio")].some((radio) => this.isStandalonePeer(radio) && radio.checked);
+	}
+	isStandalonePeer(radio) {
+		return radio !== this && radio.name === this.name && !radio.group && radio.form === this.form;
 	}
 	handleSlotChange(event) {
 		this.updateSlot(event.target);
@@ -174,6 +261,7 @@ var Radio = class Radio extends LitElement {
             aria-describedby=${ifDefined(this.ariaDescribedBy)}
             ?checked=${this.checked}
             ?disabled=${disabled}
+            ?required=${this.group?.required || this.required}
             @change=${this.handleChange}
           />
           <span class="c2-radio__background" part="control">
@@ -193,6 +281,7 @@ var Radio = class Radio extends LitElement {
     `;
 	}
 };
+__decorate([state()], Radio.prototype, "disabledByForm", void 0);
 __decorate([query("input")], Radio.prototype, "formElement", void 0);
 __decorate([property({
 	type: Boolean,
@@ -204,6 +293,10 @@ __decorate([property({
 })], Radio.prototype, "disabled", void 0);
 __decorate([property()], Radio.prototype, "value", void 0);
 __decorate([property()], Radio.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Radio.prototype, "required", void 0);
 __decorate([property()], Radio.prototype, "label", void 0);
 __decorate([property({
 	type: Boolean,

package/dist/{radio-group-DhI6N66I.js → radio-group-DQJl6oBt.js}

@@ -1,7 +1,8 @@
-import { n as __decorate, r as s$1, t as Radio } from "./radio-DKp0-FOe.js";
+import { n as __decorate, r as s$1, t as Radio } from "./radio-B3fDuJv1.js";
 import { t as radioGroupContext } from "./radio-context-De4Idbg9.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region ../../../node_modules/@lit/context/lib/value-notifier.js
 /**
@@ -137,14 +138,21 @@ var radio_group_default = "/* ex : var((width: 24px), width, c2-checkbox)  retur
 //#region src/radio-group.ts
 var RADIO_TAG = "c2-radio";
 var RadioGroup = class RadioGroup extends LitElement {
+	static {
+		this.formAssociated = true;
+	}
 	static {
 		this.styles = unsafeCSS(radio_group_default);
 	}
 	constructor() {
 		super();
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
 		this.value = "";
 		this.name = "";
 		this.disabled = false;
+		this.required = false;
 		this.orientation = "vertical";
 		this.hasLabel = false;
 		this.hasDescription = false;
@@ -152,11 +160,11 @@ var RadioGroup = class RadioGroup extends LitElement {
 		this.handleRadioChange = (event) => {
 			const radio = event.target;
 			if (radio === this || !(radio instanceof Radio) || radio.closest("c2-radio-group") !== this) return;
-			event.stopPropagation();
+			event.stopImmediatePropagation();
 			this.select(radio);
 		};
 		this.handleKeydown = (event) => {
-			if (this.disabled) return;
+			if (this.effectiveDisabled) return;
 			const radios = this.radios.filter((radio) => !radio.disabled);
 			const current = radios.indexOf(event.target);
 			if (current === -1) return;
@@ -187,6 +195,48 @@ var RadioGroup = class RadioGroup extends LitElement {
 			this.addEventListener("keydown", this.handleKeydown);
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.defaultValue = this.getAttribute("value") ?? void 0;
+	}
+	/** The containing form, when this control is associated with one. */
+	get form() {
+		return this.internals.form;
+	}
+	/** Labels associated with this form control. */
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	formResetCallback() {
+		this.value = this.defaultValue ?? "";
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+		this.context = this.createContext();
+		this.syncRadios();
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.syncFormState();
+	}
 	/** The `c2-radio` elements of this group (nested groups keep their own), in DOM order. */
 	get radios() {
 		return [...this.querySelectorAll(RADIO_TAG)].filter((radio) => radio.closest("c2-radio-group") === this);
@@ -194,7 +244,8 @@ var RadioGroup = class RadioGroup extends LitElement {
 	createContext() {
 		return {
 			name: this.name,
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
+			required: this.required,
 			checkedChanged: (radio) => this.handleCheckedChanged(radio)
 		};
 	}
@@ -203,10 +254,11 @@ var RadioGroup = class RadioGroup extends LitElement {
 		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
 	}
 	willUpdate(changed) {
-		if (changed.has("name") || changed.has("disabled")) this.context = this.createContext();
+		if (changed.has("name") || changed.has("disabled") || changed.has("required")) this.context = this.createContext();
 	}
 	updated(changed) {
 		if (changed.has("value") || changed.has("disabled")) this.syncRadios();
+		this.syncFormState();
 	}
 	handleSlotChange(event) {
 		this.updateSlot(event.target);
@@ -227,6 +279,7 @@ var RadioGroup = class RadioGroup extends LitElement {
 			const checked = radios.find((radio) => radio.checked);
 			if (checked) this.value = checked.value;
 		}
+		this.defaultValue ??= this.value;
 		this.syncRadios();
 	}
 	/** Called through the context when an option's `checked` changed (user or code). */
@@ -256,6 +309,16 @@ var RadioGroup = class RadioGroup extends LitElement {
 			composed: true
 		}));
 	}
+	syncFormState() {
+		this.internals.setFormValue(this.value || null, this.value);
+		const missing = this.required && !this.value;
+		const flags = this.customValidityMessage ? { customError: true } : missing ? { valueMissing: true } : {};
+		const message = this.customValidityMessage || (missing ? "Please select an option." : "");
+		this.internals.setValidity(flags, message);
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
 	render() {
 		return html`
       <div
@@ -264,7 +327,7 @@ var RadioGroup = class RadioGroup extends LitElement {
         aria-label=${ifDefined(this.ariaLabel)}
         aria-labelledby=${this.hasLabel ? "label" : nothing}
         aria-describedby=${this.hasDescription ? "description" : nothing}
-        aria-disabled=${this.disabled ? "true" : nothing}
+        aria-disabled=${this.effectiveDisabled ? "true" : nothing}
         aria-orientation=${this.orientation}
       >
         <div class="c2-radio-group-header" ?hidden=${!this.hasLabel && !this.hasDescription}>
@@ -278,12 +341,17 @@ var RadioGroup = class RadioGroup extends LitElement {
     `;
 	}
 };
+__decorate([state()], RadioGroup.prototype, "disabledByForm", void 0);
 __decorate([property({ reflect: true })], RadioGroup.prototype, "value", void 0);
 __decorate([property()], RadioGroup.prototype, "name", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
 })], RadioGroup.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], RadioGroup.prototype, "required", void 0);
 __decorate([property({ reflect: true })], RadioGroup.prototype, "orientation", void 0);
 __decorate([property({
 	type: String,

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import { t as RadioGroup } from "./radio-group-DhI6N66I.js";
+import { t as RadioGroup } from "./radio-group-DQJl6oBt.js";
 export { RadioGroup };

package/dist/radio.js

@@ -1,2 +1,2 @@
-import { t as Radio } from "./radio-DKp0-FOe.js";
+import { t as Radio } from "./radio-B3fDuJv1.js";
 export { Radio };

package/package.json

@@ -1,30 +1,42 @@
 {
   "name": "@c2n/radio",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
     ".": {
-      "default": "./dist/index.js",
-      "types": "./types/src/index.d.ts"
+      "types": "./types/src/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./radio.js": {
-      "default": "./dist/radio.js",
-      "types": "./types/src/radio.d.ts"
+      "types": "./types/src/radio.d.ts",
+      "default": "./dist/radio.js"
     },
     "./radio-group.js": {
-      "default": "./dist/radio-group.js",
-      "types": "./types/src/radio-group.d.ts"
+      "types": "./types/src/radio-group.d.ts",
+      "default": "./dist/radio-group.js"
     },
     "./radio-context.js": {
-      "default": "./dist/radio-context.js",
-      "types": "./types/src/radio-context.d.ts"
+      "types": "./types/src/radio-context.d.ts",
+      "default": "./dist/radio-context.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "radio",
@@ -63,7 +75,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.7",
     "@lit/context": "1.1.6",
     "lit": "3.3.3"
   },
@@ -71,5 +83,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
 }

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/radio. Import once, anywhere in the program:
+//
+//     import '@c2n/radio/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Radio } from '@c2n/radio/radio.js'
+import type { RadioGroup } from '@c2n/radio/radio-group.js'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-radio': C2Props<Radio>
+      'c2-radio-group': C2Props<RadioGroup>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/radio-context.d.ts

@@ -5,6 +5,8 @@ export interface RadioGroupContext {
     name: string;
     /** Disables every radio of the group. */
     disabled: boolean;
+    /** Requires the group to have a selected radio. */
+    required: boolean;
     /** Called by a radio after its `checked` state changed, so the group can update `value` and uncheck the others. */
     checkedChanged(radio: Radio): void;
 }

package/types/src/radio-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-context.d.ts","sourceRoot":"","sources":["../../src/radio-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAA;IACjB,mHAAmH;IACnH,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,iBAAiB;;CAAyE,CAAA"}
+{"version":3,"file":"radio-context.d.ts","sourceRoot":"","sources":["../../src/radio-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAA;IACjB,mHAAmH;IACnH,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,iBAAiB;;CAAyE,CAAA"}

package/types/src/radio-group.d.ts

@@ -1,7 +1,18 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 import { type RadioGroupContext } from './radio-context';
 import { Radio } from './radio';
 export type RadioGroupOrientation = 'vertical' | 'horizontal';
+/** Events fired by {@link RadioGroup}, keyed for `addEventListener`. */
+export interface RadioGroupEventMap {
+    change: CustomEvent<{
+        value: string;
+    }>;
+}
+export interface RadioGroup {
+    addEventListener: TypedAddEventListener<RadioGroup, RadioGroupEventMap>;
+    removeEventListener: TypedRemoveEventListener<RadioGroup, RadioGroupEventMap>;
+}
 /**
  * Groups `c2-radio` options into one control: a single `value`, one `name` for every option, group-level `disabled`,
  * and keyboard behaviour that matches native radios across the shadow boundary (Arrow keys move and select, only the
@@ -29,20 +40,42 @@ export type RadioGroupOrientation = 'vertical' | 'horizontal';
  * @slotcomponent c2-radio
  */
 export declare class RadioGroup extends LitElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult;
+    private readonly internals;
+    private customValidityMessage;
+    private disabledByForm;
+    private defaultValue;
     /** `value` of the checked option; empty when none is checked. Setting it checks the matching option. */
     value: string;
     /** Form field name applied to every option. */
     name: string;
     /** Disables every option. */
     disabled: boolean;
+    /** Requires one option to be selected for the form to be valid. */
+    required: boolean;
     /** Lays the options out in a row instead of a column. */
     orientation: RadioGroupOrientation;
+    /** Accessible name of the radiogroup when its heading does not label it. */
     ariaLabel: string;
     private hasLabel;
     private hasDescription;
     protected context: RadioGroupContext;
     constructor();
+    connectedCallback(): void;
+    /** The containing form, when this control is associated with one. */
+    get form(): HTMLFormElement | null;
+    /** Labels associated with this form control. */
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
     /** The `c2-radio` elements of this group (nested groups keep their own), in DOM order. */
     get radios(): Radio[];
     private createContext;
@@ -59,6 +92,8 @@ export declare class RadioGroup extends LitElement {
     /** Mirrors `value` onto the options and keeps exactly one of them in the tab order. */
     private syncRadios;
     private select;
+    private syncFormState;
+    private get effectiveDisabled();
     private handleRadioChange;
     private handleKeydown;
     render(): import("lit-html").TemplateResult<1>;

package/types/src/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAIzF,OAAO,EAAqB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAE3E,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAK/B,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAoB;IAE1C,wGAAwG;IAC3E,KAAK,SAAK;IAEvC,+CAA+C;IACnC,IAAI,SAAK;IAErB,6BAA6B;IACe,QAAQ,UAAQ;IAE5D,yDAAyD;IAC5B,WAAW,EAAE,qBAAqB,CAAa;IAGnE,SAAS,EAAG,MAAM,CAAA;IAElB,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,cAAc,CAAQ;IAGvC,SAAS,CAAC,OAAO,EAAE,iBAAiB,CAAuB;;IAU3D,0FAA0F;IAC1F,IAAI,MAAM,IAAI,KAAK,EAAE,CAEpB;IAED,OAAO,CAAC,aAAa;IAIrB,sGAAsG;IAC7F,YAAY;IAIZ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAI9C,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAUlB,8GAA8G;YAChG,WAAW;IAWzB,oFAAoF;IACpF,OAAO,CAAC,oBAAoB;IAS5B,uFAAuF;IACvF,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,iBAAiB,CAMxB;IAED,OAAO,CAAC,aAAa,CA4BpB;IAEQ,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGzF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAGhG,OAAO,EAAqB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAE3E,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAK/B,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE7D,wEAAwE;AACxE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACvC;AAED,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,qBAAqB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAA;IACvE,mBAAmB,EAAE,wBAAwB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAA;CAC9E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAO;IAE5B,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,qBAAqB,CAAK;IACzB,OAAO,CAAC,cAAc,CAAQ;IACvC,OAAO,CAAC,YAAY,CAAoB;IAExC,wGAAwG;IAC3E,KAAK,SAAK;IAEvC,+CAA+C;IACnC,IAAI,SAAK;IAErB,6BAA6B;IACe,QAAQ,UAAQ;IAE5D,mEAAmE;IACvB,QAAQ,UAAQ;IAE5D,yDAAyD;IAC5B,WAAW,EAAE,qBAAqB,CAAa;IAE5E,4EAA4E;IAEnE,SAAS,EAAG,MAAM,CAAA;IAElB,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,cAAc,CAAQ;IAGvC,SAAS,CAAC,OAAO,EAAE,iBAAiB,CAAuB;;IAUlD,iBAAiB;IAK1B,qEAAqE;IACrE,IAAI,IAAI,2BAEP;IAED,gDAAgD;IAChD,IAAI,MAAM,aAET;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAMtC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,aAAa;IAIb,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAKjC,0FAA0F;IAC1F,IAAI,MAAM,IAAI,KAAK,EAAE,CAEpB;IAED,OAAO,CAAC,aAAa;IAIrB,sGAAsG;IAC7F,YAAY;IAIZ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAK9C,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAUlB,8GAA8G;YAChG,WAAW;IAYzB,oFAAoF;IACpF,OAAO,CAAC,oBAAoB;IAS5B,uFAAuF;IACvF,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,aAAa;IAQrB,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,iBAAiB,CAMxB;IAED,OAAO,CAAC,aAAa,CA4BpB;IAEQ,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}

package/types/src/radio.d.ts

@@ -1,4 +1,13 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link Radio}, keyed for `addEventListener`. */
+export interface RadioEventMap {
+    change: Event;
+}
+export interface Radio {
+    addEventListener: TypedAddEventListener<Radio, RadioEventMap>;
+    removeEventListener: TypedRemoveEventListener<Radio, RadioEventMap>;
+}
 /**
  * A single radio option built on a native `<input type="radio">`, with its label and an optional description beside
  * the control. Put several in a `c2-radio-group` to get a single `value`, arrow-key navigation and a roving tab stop;
@@ -66,7 +75,13 @@ import { LitElement, type PropertyValues } from 'lit';
  * @cssproperty {pixel} [--c2-radio__description--margin-top=2px]
  */
 export declare class Radio extends LitElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult;
+    private readonly internals;
+    private customValidityMessage;
+    private disabledByForm;
+    private defaultChecked;
+    private defaultCheckedCaptured;
     protected formElement: HTMLInputElement;
     /** Whether this option is selected. Checking one radio unchecks the others of its group. */
     checked: boolean;
@@ -76,21 +91,39 @@ export declare class Radio extends LitElement {
     value: string;
     /** Form field name. Inside a group, the group's `name` wins. */
     name: string;
+    /** Requires this standalone radio, or its containing group, to have a selected option. */
+    required: boolean;
     /** Label text when the default slot is empty. */
     label: string;
     /** Whether the inner input is in the tab order. The parent group manages this (roving tabindex); do not set by hand. */
     tabbable: boolean;
+    /** Accessible name used when no visible label names the radio. */
     ariaLabel: string;
+    /** Id of the element that describes the radio. */
     ariaDescribedBy: undefined | string;
     private hasDescription;
     private hasDot;
     private hasIcon;
     private hasCheckedIcon;
     private group;
+    connectedCallback(): void;
     /** Field name in effect: the group's, or this radio's own. */
     get effectiveName(): string;
     /** Disabled by its own attribute or by the group. */
     get effectiveDisabled(): boolean;
+    /** The containing form, when this standalone radio is associated with one. */
+    get form(): HTMLFormElement | null;
+    /** Labels associated with this form control. */
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
     focus(options?: FocusOptions): void;
     disconnectedCallback(): void;
     /** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
@@ -99,6 +132,10 @@ export declare class Radio extends LitElement {
     updated(changed: PropertyValues<this>): void;
     /** Standalone radios sharing a `name` in the same root behave as one group. */
     private uncheckSiblings;
+    private requestSiblingValidityUpdates;
+    private syncFormState;
+    private hasCheckedStandaloneSibling;
+    private isStandalonePeer;
     private handleSlotChange;
     private updateSlot;
     private handleChange;

package/types/src/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAS/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1B,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,4FAA4F;IAChD,OAAO,UAAQ;IAE3D,wFAAwF;IAC5C,QAAQ,UAAQ;IAE5D,4FAA4F;IAChF,KAAK,SAAK;IAEtB,gEAAgE;IACpD,IAAI,SAAK;IAErB,iDAAiD;IACrC,KAAK,SAAK;IAEtB,wHAAwH;IACzE,QAAQ,UAAO;IAGrD,SAAS,EAAG,MAAM,CAAA;IAG3B,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,cAAc,CAAQ;IAGvC,OAAO,CAAC,KAAK,CAA+B;IAE5C,8DAA8D;IAC9D,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,qDAAqD;IACrD,IAAI,iBAAiB,IAAI,OAAO,CAE/B;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,oBAAoB;IAK7B,sGAAsG;IAC7F,YAAY;cAIF,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9C,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAO9C,+EAA+E;IAC/E,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAKX,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAQhG,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB,EAAE,qBAAqB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;IAC7D,mBAAmB,EAAE,wBAAwB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;CACpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,cAAc,UAAO;IAE5B,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,qBAAqB,CAAK;IACzB,OAAO,CAAC,cAAc,CAAQ;IACvC,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,sBAAsB,CAAQ;IAEtB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,4FAA4F;IAChD,OAAO,UAAQ;IAE3D,wFAAwF;IAC5C,QAAQ,UAAQ;IAE5D,4FAA4F;IAChF,KAAK,SAAK;IAEtB,gEAAgE;IACpD,IAAI,SAAK;IAErB,0FAA0F;IAC9C,QAAQ,UAAQ;IAE5D,iDAAiD;IACrC,KAAK,SAAK;IAEtB,wHAAwH;IACzE,QAAQ,UAAO;IAE9D,kEAAkE;IAEzD,SAAS,EAAG,MAAM,CAAA;IAE3B,kDAAkD;IAElD,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,cAAc,CAAQ;IAGvC,OAAO,CAAC,KAAK,CAA+B;IAEnC,iBAAiB;IAQ1B,8DAA8D;IAC9D,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,qDAAqD;IACrD,IAAI,iBAAiB,IAAI,OAAO,CAE/B;IAED,8EAA8E;IAC9E,IAAI,IAAI,2BAEP;IAED,gDAAgD;IAChD,IAAI,MAAM,aAET;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,iBAAiB;IAKjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAK/D,aAAa;IAIb,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAKxB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,oBAAoB;IAK7B,sGAAsG;IAC7F,YAAY;cAIF,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9C,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAS9C,+EAA+E;IAC/E,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,6BAA6B;IASrC,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAKX,MAAM;CA0ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}

package/vue.d.ts

@@ -0,0 +1,42 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/radio. Import once, anywhere in the program:
+//
+//     import '@c2n/radio/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Radio, RadioEventMap } from '@c2n/radio/radio.js'
+import type { RadioGroup, RadioGroupEventMap } from '@c2n/radio/radio-group.js'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-radio': DefineComponent<
+      C2Props<Radio> & {
+        'aria-label'?: unknown
+        'aria-describedby'?: unknown
+        onChange?: (event: RadioEventMap['change']) => void
+      }
+    >
+    'c2-radio-group': DefineComponent<
+      C2Props<RadioGroup> & {
+        'aria-label'?: unknown
+        onChange?: (event: RadioGroupEventMap['change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}