@c2n/radio 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @c2n/radio
+
+Radio built with Lit: `c2-radio` options on native `<input type="radio">` elements, and a `c2-radio-group` that turns them into one control with a single value, one name and native-style keyboard navigation.
+
+```bash
+npm install @c2n/radio
+```
+
+```html
+<script type="module">
+  import '@c2n/radio'
+</script>
+
+<c2-radio-group name="plan" value="pro">
+  <span slot="label">Plan</span>
+  <c2-radio value="free">Free</c2-radio>
+  <c2-radio value="pro">Pro<span slot="description">Unlimited projects</span></c2-radio>
+  <c2-radio value="team" disabled>Team</c2-radio>
+</c2-radio-group>
+```
+
+- **Group**: `value` is the checked option's value (set it to select from code), `name` applies to every option, `disabled` disables them all, `orientation="horizontal"` lays them out in a row. It fires one `change` (`detail.value`) per user selection and swallows the options' own `change` events. `role="radiogroup"` is named by the `label` slot or `aria-label`.
+- **Keyboard**: Arrow keys move and select (wrapping, disabled options skipped), Space checks the focused option, and only the checked option is a tab stop, exactly like native radios.
+- **Option**: `value`, `checked`, `disabled`, `label` (or slotted text) and a `description` slot. Options can be nested in wrapper elements inside the group. Standalone options sharing a `name` in the same root uncheck each other.
+- **Indicator**: `--c2-radio__control--border-radius` reshapes the ring (square at `4px`); the `dot` slot replaces the filled dot with a mark such as a check; `icon` and `checked-icon` replace the whole control with an icon per state (`--c2-radio__icon--color`, `--c2-radio__icon__checked--color`, `--c2-radio__icon--size`). With only `icon` the same icon shows in both states and recolours; with only `checked-icon` the ring stays while unchecked.
+- **Forms**: the inputs live in shadow roots and are not submitted with a surrounding form; read `value` from the group or mirror it into a hidden input.
+
+Import `@c2n/radio` for both elements, or `@c2n/radio/radio.js` for the option alone. Every visual aspect is a CSS custom property: `--c2-radio__control--*` and `--c2-radio__dot--*` for the circle (an accent border with a transparent fill gives the outlined look), `--c2-radio__label--*` / `--c2-radio__description--*` for the text, `--c2-radio__container--*` for the row (border, padding and checked background make card-style options), and `--c2-radio-group--*` for spacing and the header. Variables set on the group inherit into every option. The full list is in `custom-elements.json` and on the docs site.

package/dist/index.js

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

package/dist/radio-DKp0-FOe.js

@@ -0,0 +1,230 @@
+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 { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region ../../../node_modules/@lit/context/lib/context-request-event.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var s$1 = class extends Event {
+	constructor(s, t, e, o) {
+		super("context-request", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = s, this.contextTarget = t, this.callback = e, this.subscribe = o ?? !1;
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/controllers/context-consumer.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ var s = class {
+	constructor(t, s, i, h) {
+		if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (t, s) => {
+			this.unsubscribe && (this.unsubscribe !== s && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = t, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(t, s)), this.unsubscribe = s;
+		}, this.host = t, void 0 !== s.context) {
+			const t = s;
+			this.context = t.context, this.callback = t.callback, this.subscribe = t.subscribe ?? !1;
+		} else this.context = s, this.callback = i, this.subscribe = h ?? !1;
+		this.host.addController(this);
+	}
+	hostConnected() {
+		this.dispatchRequest();
+	}
+	hostDisconnected() {
+		this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+	}
+	dispatchRequest() {
+		this.host.dispatchEvent(new s$1(this.context, this.host, this.t, this.subscribe));
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/decorators/consume.js
+/**
+* @license
+* Copyright 2022 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function c({ context: c, subscribe: e }) {
+	return (o, n) => {
+		"object" == typeof n ? n.addInitializer((function() {
+			new s(this, {
+				context: c,
+				callback: (t) => {
+					o.set.call(this, t);
+				},
+				subscribe: e
+			});
+		})) : o.constructor.addInitializer(((o) => {
+			new s(o, {
+				context: c,
+				callback: (t) => {
+					o[n] = t;
+				},
+				subscribe: e
+			});
+		}));
+	};
+}
+//#endregion
+//#region src/radio.scss?inline
+var radio_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-radio {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex: 1;\n  min-width: 0;\n  cursor: pointer;\n  flex-direction: var(--c2-radio__container--flex-direction,row);\n  gap: var(--c2-radio__container--gap,4px);\n  padding-top: var(--c2-radio__container--padding-top,0px);\n  padding-right: var(--c2-radio__container--padding-right,0px);\n  padding-bottom: var(--c2-radio__container--padding-bottom,0px);\n  padding-left: var(--c2-radio__container--padding-left,0px);\n  border: var(--c2-radio__container--border,none);\n  border-radius: var(--c2-radio__container--border-radius,8px);\n  background: var(--c2-radio__container--background);\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), border-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-radio.has-description {\n  align-items: flex-start;\n}\n.c2-radio:hover:has(.c2-radio-input:enabled) {\n  background: var(--c2-radio__container__hover--background,var(--c2-radio__container--background));\n}\n.c2-radio:has(.c2-radio-input:checked) {\n  border: var(--c2-radio__container__checked--border,var(--c2-radio__container--border,none));\n  background: var(--c2-radio__container__checked--background,var(--c2-radio__container--background));\n}\n.c2-radio:has(.c2-radio-input:checked:enabled):hover {\n  background: var(--c2-radio__container__hover--background,var(--c2-radio__container__checked--background,var(--c2-radio__container--background)));\n}\n.c2-radio:has(.c2-radio-input:disabled) {\n  cursor: default;\n}\n\n.c2-radio-control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--c2-radio__state-layer--size,32px);\n  height: var(--c2-radio__state-layer--size,32px);\n  line-height: 0;\n}\n\n.c2-radio-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.c2-radio__background {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-radio__control--size,18px);\n  height: var(--c2-radio__control--size,18px);\n  border-radius: var(--c2-radio__control--border-radius,999px);\n  border: var(--c2-radio__control--border,1px solid #bcbcc6);\n  background-color: var(--c2-radio__control--background-color,transparent);\n  pointer-events: none;\n  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), border-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-radio__dot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--c2-radio__dot--size,8px);\n  height: var(--c2-radio__dot--size,8px);\n  border-radius: var(--c2-radio__control--border-radius,999px);\n  background: var(--c2-radio__dot--color,#ffffff);\n  color: var(--c2-radio__dot--color,#ffffff);\n  line-height: 0;\n  transform: scale(0);\n  transition: transform 200ms cubic-bezier(0, 0, 0, 1);\n  --c2-feather-icon--size: var(--c2-radio__dot--size,8px);\n  --c2-mat-icon--font-size: var(--c2-radio__dot--size,8px);\n}\n.c2-radio__dot ::slotted(*) {\n  width: 100%;\n  height: 100%;\n}\n\n.has-dot .c2-radio__dot {\n  background: transparent;\n}\n\n.c2-radio__icon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-radio__icon--size,var(--c2-radio__control--size,18px));\n  height: var(--c2-radio__icon--size,var(--c2-radio__control--size,18px));\n  border-radius: var(--c2-radio__control--border-radius,999px);\n  color: var(--c2-radio__icon--color,#71717a);\n  line-height: 0;\n  pointer-events: none;\n  transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n  --c2-feather-icon--size: var(--c2-radio__icon--size,var(--c2-radio__control--size,18px));\n  --c2-mat-icon--font-size: var(--c2-radio__icon--size,var(--c2-radio__control--size,18px));\n}\n.c2-radio__icon ::slotted(*) {\n  width: 100%;\n  height: 100%;\n}\n\n.has-icon .c2-radio-input:not(:checked) ~ .c2-radio__background,\n.has-icon:not(.has-checked-icon) .c2-radio-input:checked ~ .c2-radio__background,\n.has-checked-icon .c2-radio-input:checked ~ .c2-radio__background {\n  display: none;\n}\n\n.has-icon .c2-radio-input:not(:checked) ~ .c2-radio__icon--unchecked,\n.has-icon:not(.has-checked-icon) .c2-radio-input:checked ~ .c2-radio__icon--unchecked,\n.has-checked-icon .c2-radio-input:checked ~ .c2-radio__icon--checked {\n  display: inline-flex;\n}\n\n.c2-radio-input:checked ~ .c2-radio__icon {\n  color: var(--c2-radio__icon__checked--color,#0265dc);\n}\n\n.c2-radio-state-layer {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  border-radius: var(--c2-radio__state-layer--border-radius,999px);\n  background-color: transparent;\n  opacity: 0;\n  pointer-events: none;\n  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-radio-input:checked ~ .c2-radio__background {\n  border: var(--c2-radio__control__checked--border,1px solid transparent);\n  background-color: var(--c2-radio__control__checked--background-color,#0265dc);\n}\n.c2-radio-input:checked ~ .c2-radio__background .c2-radio__dot {\n  transform: scale(1);\n}\n\n.c2-radio-input:enabled:not(:checked):hover ~ .c2-radio__background {\n  border: var(--c2-radio__control__hover--border,1px solid #a1a1aa);\n}\n\n.c2-radio-input:enabled:checked:hover ~ .c2-radio__background {\n  background-color: var(--c2-radio__control__checked__hover--background-color,var(--c2-radio__control__checked--background-color,#0154b8));\n}\n\n.c2-radio-input:enabled:hover ~ .c2-radio-state-layer {\n  background-color: var(--c2-radio__state-layer__hover--color);\n  opacity: 0.08;\n}\n\n.c2-radio-input:focus-visible ~ .c2-radio__background,\n.c2-radio-input:focus-visible ~ .c2-radio__icon {\n  outline: var(--c2-radio__control__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-radio__control__focus--outline-offset,2px);\n}\n\n.c2-radio-input:disabled ~ .c2-radio__background,\n.c2-radio-input:disabled ~ .c2-radio__icon {\n  opacity: var(--c2-radio__control__disabled--opacity,0.38);\n}\n\n.c2-radio-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.c2-radio-label {\n  color: var(--c2-radio__label--color,inherit);\n  font-size: var(--c2-radio__label--font-size,inherit);\n  font-weight: var(--c2-radio__label--font-weight,inherit);\n  line-height: var(--c2-radio__label--line-height,inherit);\n  transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.has-description .c2-radio-label {\n  display: flex;\n  align-items: center;\n  min-height: var(--c2-radio__state-layer--size,32px);\n}\n\n.c2-radio:has(.c2-radio-input:checked) .c2-radio-label {\n  color: var(--c2-radio__label__checked--color,var(--c2-radio__label--color,inherit));\n}\n\n.c2-radio:has(.c2-radio-input:disabled) .c2-radio-text {\n  opacity: var(--c2-radio__label__disabled--opacity,0.38);\n}\n\n.c2-radio-description {\n  color: var(--c2-radio__description--color,#71717a);\n  font-size: var(--c2-radio__description--font-size,12px);\n  line-height: var(--c2-radio__description--line-height,1.4);\n  margin-top: var(--c2-radio__description--margin-top,2px);\n}\n.c2-radio-description[hidden] {\n  display: none;\n}\n\n.has-description .c2-radio-description {\n  margin-top: calc(var(--c2-radio__description--margin-top,2px) - (var(--c2-radio__state-layer--size,32px) - 1.5em) / 2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-radio,\n  .c2-radio__background,\n  .c2-radio__dot,\n  .c2-radio__icon,\n  .c2-radio-state-layer,\n  .c2-radio-label {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/radio.ts
+var Radio = class Radio extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.value = "";
+		this.name = "";
+		this.label = "";
+		this.tabbable = true;
+		this.hasDescription = false;
+		this.hasDot = false;
+		this.hasIcon = false;
+		this.hasCheckedIcon = false;
+	}
+	static {
+		this.styles = unsafeCSS(radio_default);
+	}
+	/** 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;
+	}
+	focus(options) {
+		this.formElement?.focus(options);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.group = void 0;
+	}
+	/** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
+	}
+	update(changed) {
+		if (changed.has("checked") && this.formElement) this.formElement.checked = this.checked;
+		super.update(changed);
+	}
+	updated(changed) {
+		if (changed.has("checked") && changed.get("checked") !== void 0 && this.isConnected) {
+			if (this.group) this.group.checkedChanged(this);
+			else if (this.checked) this.uncheckSiblings();
+		}
+	}
+	/** 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;
+	}
+	handleSlotChange(event) {
+		this.updateSlot(event.target);
+	}
+	updateSlot(slot) {
+		const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		if (slot.name === "description") this.hasDescription = filled;
+		else if (slot.name === "dot") this.hasDot = filled;
+		else if (slot.name === "icon") this.hasIcon = filled;
+		else if (slot.name === "checked-icon") this.hasCheckedIcon = filled;
+	}
+	handleChange(event) {
+		this.checked = this.formElement.checked;
+		redispatchEvent(this, event);
+	}
+	render() {
+		const disabled = this.effectiveDisabled;
+		return html`
+      <label
+        class=${classMap({
+			"c2-radio": true,
+			"has-description": this.hasDescription,
+			"has-dot": this.hasDot,
+			"has-icon": this.hasIcon,
+			"has-checked-icon": this.hasCheckedIcon
+		})}
+      >
+        <span class="c2-radio-control">
+          <input
+            class="c2-radio-input"
+            type="radio"
+            name=${ifDefined(this.effectiveName || void 0)}
+            .value=${this.value}
+            tabindex=${this.tabbable ? nothing : "-1"}
+            aria-label=${ifDefined(this.ariaLabel)}
+            aria-describedby=${ifDefined(this.ariaDescribedBy)}
+            ?checked=${this.checked}
+            ?disabled=${disabled}
+            @change=${this.handleChange}
+          />
+          <span class="c2-radio__background" part="control">
+            <span class="c2-radio__dot" part="dot"><slot name="dot" @slotchange=${this.handleSlotChange}></slot></span>
+          </span>
+          <span class="c2-radio__icon c2-radio__icon--unchecked" part="icon"><slot name="icon" @slotchange=${this.handleSlotChange}></slot></span>
+          <span class="c2-radio__icon c2-radio__icon--checked" part="checked-icon"><slot name="checked-icon" @slotchange=${this.handleSlotChange}></slot></span>
+          <span class="c2-radio-state-layer"></span>
+        </span>
+        <span class="c2-radio-text">
+          <span class="c2-radio-label" part="label"><slot>${this.label}</slot></span>
+          <span class="c2-radio-description" part="description" ?hidden=${!this.hasDescription}>
+            <slot name="description" @slotchange=${this.handleSlotChange}></slot>
+          </span>
+        </span>
+      </label>
+    `;
+	}
+};
+__decorate([query("input")], Radio.prototype, "formElement", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Radio.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Radio.prototype, "disabled", void 0);
+__decorate([property()], Radio.prototype, "value", void 0);
+__decorate([property()], Radio.prototype, "name", void 0);
+__decorate([property()], Radio.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], Radio.prototype, "tabbable", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], Radio.prototype, "ariaLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-describedby"
+})], Radio.prototype, "ariaDescribedBy", void 0);
+__decorate([state()], Radio.prototype, "hasDescription", void 0);
+__decorate([state()], Radio.prototype, "hasDot", void 0);
+__decorate([state()], Radio.prototype, "hasIcon", void 0);
+__decorate([state()], Radio.prototype, "hasCheckedIcon", void 0);
+__decorate([c({
+	context: radioGroupContext,
+	subscribe: true
+})], Radio.prototype, "group", void 0);
+Radio = __decorate([customElement("c2-radio")], Radio);
+//#endregion
+export { __decorate as n, s$1 as r, Radio as t };

package/dist/radio-context-De4Idbg9.js

@@ -0,0 +1,14 @@
+//#region ../../../node_modules/@lit/context/lib/create-context.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+function n(n) {
+	return n;
+}
+//#endregion
+//#region src/radio-context.ts
+var radioGroupContext = n(Symbol("c2-radio-group"));
+//#endregion
+export { radioGroupContext as t };

package/dist/radio-context.js

@@ -0,0 +1,2 @@
+import { t as radioGroupContext } from "./radio-context-De4Idbg9.js";
+export { radioGroupContext };

package/dist/radio-group-DhI6N66I.js

@@ -0,0 +1,297 @@
+import { n as __decorate, r as s$1, t as Radio } from "./radio-DKp0-FOe.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 { ifDefined } from "lit/directives/if-defined.js";
+//#region ../../../node_modules/@lit/context/lib/value-notifier.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var s = class {
+	get value() {
+		return this.o;
+	}
+	set value(s) {
+		this.setValue(s);
+	}
+	setValue(s, t = !1) {
+		const i = t || !Object.is(s, this.o);
+		this.o = s, i && this.updateObservers();
+	}
+	constructor(s) {
+		this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+			for (const [s, { disposer: t }] of this.subscriptions) s(this.o, t);
+		}, void 0 !== s && (this.value = s);
+	}
+	addCallback(s, t, i) {
+		if (!i) return void s(this.value);
+		this.subscriptions.has(s) || this.subscriptions.set(s, {
+			disposer: () => {
+				this.subscriptions.delete(s);
+			},
+			consumerHost: t
+		});
+		const { disposer: h } = this.subscriptions.get(s);
+		s(this.value, h);
+	}
+	clearCallbacks() {
+		this.subscriptions.clear();
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/controllers/context-provider.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ var e$1 = class extends Event {
+	constructor(t, s) {
+		super("context-provider", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = t, this.contextTarget = s;
+	}
+};
+var i = class extends s {
+	constructor(s, e, i) {
+		super(void 0 !== e.context ? e.initialValue : i), this.onContextRequest = (t) => {
+			if (t.context !== this.context) return;
+			const s = t.contextTarget ?? t.composedPath()[0];
+			s !== this.host && (t.stopPropagation(), this.addCallback(t.callback, s, t.subscribe));
+		}, this.onProviderRequest = (s) => {
+			if (s.context !== this.context) return;
+			if ((s.contextTarget ?? s.composedPath()[0]) === this.host) return;
+			const e = /* @__PURE__ */ new Set();
+			for (const [s, { consumerHost: i }] of this.subscriptions) e.has(s) || (e.add(s), i.dispatchEvent(new s$1(this.context, i, s, !0)));
+			s.stopPropagation();
+		}, this.host = s, void 0 !== e.context ? this.context = e.context : this.context = e, this.attachListeners(), this.host.addController?.(this);
+	}
+	attachListeners() {
+		this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+	}
+	hostConnected() {
+		this.host.dispatchEvent(new e$1(this.context, this.host));
+	}
+};
+//#endregion
+//#region ../../../node_modules/@lit/context/lib/decorators/provide.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function e({ context: e }) {
+	return (n, i$1) => {
+		const r = /* @__PURE__ */ new WeakMap();
+		if ("object" == typeof i$1) return {
+			get() {
+				return n.get.call(this);
+			},
+			set(t) {
+				return r.get(this).setValue(t), n.set.call(this, t);
+			},
+			init(n) {
+				return r.set(this, new i(this, {
+					context: e,
+					initialValue: n
+				})), n;
+			}
+		};
+		{
+			n.constructor.addInitializer(((n) => {
+				r.set(n, new i(n, { context: e }));
+			}));
+			const o = Object.getOwnPropertyDescriptor(n, i$1);
+			let s;
+			if (void 0 === o) {
+				const t = /* @__PURE__ */ new WeakMap();
+				s = {
+					get() {
+						return t.get(this);
+					},
+					set(e) {
+						r.get(this).setValue(e), t.set(this, e);
+					},
+					configurable: !0,
+					enumerable: !0
+				};
+			} else {
+				const t = o.set;
+				s = {
+					...o,
+					set(e) {
+						r.get(this).setValue(e), t?.call(this, e);
+					}
+				};
+			}
+			Object.defineProperty(n, i$1, s);
+			return;
+		}
+	};
+}
+//#endregion
+//#region src/radio-group.scss?inline
+var radio_group_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-radio-group {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.c2-radio-group-header {\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-radio-group__header--gap,2px);\n  margin-bottom: var(--c2-radio-group__header--margin-bottom,8px);\n}\n.c2-radio-group-header[hidden] {\n  display: none;\n}\n\n:host([disabled]) .c2-radio-group-header {\n  opacity: var(--c2-radio-group__header__disabled--opacity,0.38);\n}\n\n.c2-radio-group-label {\n  color: var(--c2-radio-group__label--color,#18181b);\n  font-size: var(--c2-radio-group__label--font-size,14px);\n  font-weight: var(--c2-radio-group__label--font-weight,500);\n}\n.c2-radio-group-label[hidden] {\n  display: none;\n}\n\n.c2-radio-group-description {\n  color: var(--c2-radio-group__description--color,#71717a);\n  font-size: var(--c2-radio-group__description--font-size,12px);\n}\n.c2-radio-group-description[hidden] {\n  display: none;\n}\n\n.c2-radio-group-items {\n  display: flex;\n  flex-direction: column;\n  align-items: var(--c2-radio-group--align-items,flex-start);\n  gap: var(--c2-radio-group--gap,8px);\n}\n\n:host([orientation=horizontal]) .c2-radio-group-items {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n}";
+//#endregion
+//#region src/radio-group.ts
+var RADIO_TAG = "c2-radio";
+var RadioGroup = class RadioGroup extends LitElement {
+	static {
+		this.styles = unsafeCSS(radio_group_default);
+	}
+	constructor() {
+		super();
+		this.value = "";
+		this.name = "";
+		this.disabled = false;
+		this.orientation = "vertical";
+		this.hasLabel = false;
+		this.hasDescription = false;
+		this.context = this.createContext();
+		this.handleRadioChange = (event) => {
+			const radio = event.target;
+			if (radio === this || !(radio instanceof Radio) || radio.closest("c2-radio-group") !== this) return;
+			event.stopPropagation();
+			this.select(radio);
+		};
+		this.handleKeydown = (event) => {
+			if (this.disabled) return;
+			const radios = this.radios.filter((radio) => !radio.disabled);
+			const current = radios.indexOf(event.target);
+			if (current === -1) return;
+			const rtl = getComputedStyle(this).direction === "rtl";
+			let next;
+			switch (event.key) {
+				case "ArrowDown":
+					next = current + 1;
+					break;
+				case "ArrowUp":
+					next = current - 1;
+					break;
+				case "ArrowRight":
+					next = rtl ? current - 1 : current + 1;
+					break;
+				case "ArrowLeft":
+					next = rtl ? current + 1 : current - 1;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+			const radio = radios[(next + radios.length) % radios.length];
+			radio.focus();
+			this.select(radio);
+		};
+		if (!isServer) {
+			this.addEventListener("change", this.handleRadioChange);
+			this.addEventListener("keydown", this.handleKeydown);
+		}
+	}
+	/** 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);
+	}
+	createContext() {
+		return {
+			name: this.name,
+			disabled: this.disabled,
+			checkedChanged: (radio) => this.handleCheckedChanged(radio)
+		};
+	}
+	/** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
+	}
+	willUpdate(changed) {
+		if (changed.has("name") || changed.has("disabled")) this.context = this.createContext();
+	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("disabled")) this.syncRadios();
+	}
+	handleSlotChange(event) {
+		this.updateSlot(event.target);
+	}
+	updateSlot(slot) {
+		if (slot.name === "label" || slot.name === "description") {
+			const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+			if (slot.name === "label") this.hasLabel = filled;
+			else this.hasDescription = filled;
+		} else this.adoptRadios();
+	}
+	/** Options may upgrade after the group; wait for them, then adopt a pre-checked option as the group value. */
+	async adoptRadios() {
+		await customElements.whenDefined(RADIO_TAG);
+		const radios = this.radios;
+		await Promise.all(radios.map((radio) => radio.updateComplete));
+		if (!this.value) {
+			const checked = radios.find((radio) => radio.checked);
+			if (checked) this.value = checked.value;
+		}
+		this.syncRadios();
+	}
+	/** Called through the context when an option's `checked` changed (user or code). */
+	handleCheckedChanged(radio) {
+		if (radio.checked) {
+			if (this.value !== radio.value) this.value = radio.value;
+			else this.syncRadios();
+		} else if (this.value === radio.value && !this.radios.some((other) => other.checked)) this.value = "";
+	}
+	/** Mirrors `value` onto the options and keeps exactly one of them in the tab order. */
+	syncRadios() {
+		const radios = this.radios;
+		if (radios.length === 0) return;
+		const checked = this.value ? radios.find((radio) => radio.value === this.value) : void 0;
+		const focusable = checked && !checked.disabled ? checked : radios.find((radio) => !radio.disabled);
+		for (const radio of radios) {
+			radio.checked = radio === checked;
+			radio.tabbable = radio === focusable;
+		}
+	}
+	select(radio) {
+		if (this.value === radio.value) return;
+		this.value = radio.value;
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <div
+        class="c2-radio-group"
+        role="radiogroup"
+        aria-label=${ifDefined(this.ariaLabel)}
+        aria-labelledby=${this.hasLabel ? "label" : nothing}
+        aria-describedby=${this.hasDescription ? "description" : nothing}
+        aria-disabled=${this.disabled ? "true" : nothing}
+        aria-orientation=${this.orientation}
+      >
+        <div class="c2-radio-group-header" ?hidden=${!this.hasLabel && !this.hasDescription}>
+          <div id="label" class="c2-radio-group-label" ?hidden=${!this.hasLabel}><slot name="label" @slotchange=${this.handleSlotChange}></slot></div>
+          <div id="description" class="c2-radio-group-description" ?hidden=${!this.hasDescription}>
+            <slot name="description" @slotchange=${this.handleSlotChange}></slot>
+          </div>
+        </div>
+        <div class="c2-radio-group-items"><slot @slotchange=${this.handleSlotChange}></slot></div>
+      </div>
+    `;
+	}
+};
+__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({ reflect: true })], RadioGroup.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], RadioGroup.prototype, "ariaLabel", void 0);
+__decorate([state()], RadioGroup.prototype, "hasLabel", void 0);
+__decorate([state()], RadioGroup.prototype, "hasDescription", void 0);
+__decorate([e({ context: radioGroupContext })], RadioGroup.prototype, "context", void 0);
+RadioGroup = __decorate([customElement("c2-radio-group")], RadioGroup);
+//#endregion
+export { RadioGroup as t };

package/dist/radio-group.js

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

package/dist/radio.js

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

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@c2n/radio",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./types/src/index.d.ts"
+    },
+    "./radio.js": {
+      "default": "./dist/radio.js",
+      "types": "./types/src/radio.d.ts"
+    },
+    "./radio-group.js": {
+      "default": "./dist/radio-group.js",
+      "types": "./types/src/radio-group.d.ts"
+    },
+    "./radio-context.js": {
+      "default": "./dist/radio-context.js",
+      "types": "./types/src/radio-context.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "radio",
+    "radio group",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "@lit/context": "1.1.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/index.d.ts

@@ -0,0 +1,4 @@
+export { Radio } from './radio';
+export { RadioGroup, type RadioGroupOrientation } from './radio-group';
+export { radioGroupContext, type RadioGroupContext } from './radio-context';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

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

@@ -0,0 +1,14 @@
+import type { Radio } from './radio';
+/** What a `c2-radio-group` shares with the `c2-radio` elements inside it. */
+export interface RadioGroupContext {
+    /** Form field name applied to every radio of the group. */
+    name: string;
+    /** Disables every radio of the group. */
+    disabled: boolean;
+    /** Called by a radio after its `checked` state changed, so the group can update `value` and uncheck the others. */
+    checkedChanged(radio: Radio): void;
+}
+export declare const radioGroupContext: {
+    __context__: RadioGroupContext | undefined;
+};
+//# sourceMappingURL=radio-context.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,71 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type RadioGroupContext } from './radio-context';
+import { Radio } from './radio';
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * 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
+ * selected option is a tab stop). Radios may sit anywhere inside the group, wrapped in other elements. The `label`
+ * and `description` slots name the group for assistive technology (`role="radiogroup"`).
+ *
+ * @tag c2-radio-group
+ *
+ * @slot - The `c2-radio` options, optionally inside wrapper elements.
+ * @slot label - Group heading, announced as the group's name.
+ * @slot description - Supporting text under the heading.
+ *
+ * @event {CustomEvent<{ value: string }>} change - Fired after the user selects another option. `detail.value` is the new `value`. Not fired for programmatic changes.
+ *
+ * @cssproperty {pixel} [--c2-radio-group--gap=8px] - Space between options.
+ * @cssproperty {align-items} [--c2-radio-group--align-items=flex-start] - `stretch` makes card-style options fill the width.
+ * @cssproperty {pixel} [--c2-radio-group__header--gap=2px] - Space between the label and the description.
+ * @cssproperty {pixel} [--c2-radio-group__header--margin-bottom=8px] - Space between the header and the options.
+ * @cssproperty {color} [--c2-radio-group__label--color=#18181b]
+ * @cssproperty {font-size} [--c2-radio-group__label--font-size=14px]
+ * @cssproperty {font-weight} [--c2-radio-group__label--font-weight=500]
+ * @cssproperty {color} [--c2-radio-group__description--color=#71717a]
+ * @cssproperty {font-size} [--c2-radio-group__description--font-size=12px]
+ * @cssproperty {opacity} [--c2-radio-group__header__disabled--opacity=0.38]
+ * @slotcomponent c2-radio
+ */
+export declare class RadioGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** `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;
+    /** Lays the options out in a row instead of a column. */
+    orientation: RadioGroupOrientation;
+    ariaLabel: string;
+    private hasLabel;
+    private hasDescription;
+    protected context: RadioGroupContext;
+    constructor();
+    /** The `c2-radio` elements of this group (nested groups keep their own), in DOM order. */
+    get radios(): Radio[];
+    private createContext;
+    /** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
+    firstUpdated(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    private handleSlotChange;
+    private updateSlot;
+    /** Options may upgrade after the group; wait for them, then adopt a pre-checked option as the group value. */
+    private adoptRadios;
+    /** Called through the context when an option's `checked` changed (user or code). */
+    private handleCheckedChanged;
+    /** Mirrors `value` onto the options and keeps exactly one of them in the tab order. */
+    private syncRadios;
+    private select;
+    private handleRadioChange;
+    private handleKeydown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-radio-group': RadioGroup;
+    }
+}
+//# sourceMappingURL=radio-group.d.ts.map

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

@@ -0,0 +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"}

package/types/src/radio.d.ts

@@ -0,0 +1,112 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * 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;
+ * standalone radios that share a `name` in the same document or shadow root still uncheck each other. Theme the
+ * control, the label and the whole row (`container`), which turns a radio into a selectable card. The indicator is
+ * not tied to the ring: the `dot` slot swaps the inner mark, and `icon` / `checked-icon` replace the control with
+ * any icon per state.
+ *
+ * @tag c2-radio
+ *
+ * @slot - Label text. Falls back to the `label` attribute.
+ * @slot description - Supporting text shown under the label.
+ * @slot dot - Mark inside the ring while checked (an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`). Replaces the filled dot.
+ * @slot icon - Replaces the ring with your own indicator. Shown while unchecked, and while checked too unless `checked-icon` is set.
+ * @slot checked-icon - Indicator shown while checked, replacing the ring and dot. Without `icon` the default ring still shows while unchecked.
+ *
+ * @event {Event} change - Re-dispatched from the inner input when the user checks this radio.
+ *
+ * @cssproperty {pixel} [--c2-radio__container--gap=4px] - Space between the control and the text.
+ * @cssproperty {flex-direction-row} [--c2-radio__container--flex-direction=row] - `row-reverse` puts the indicator after the text, e.g. a trailing check mark.
+ * @cssproperty {padding} [--c2-radio__container--padding-top=0px]
+ * @cssproperty {padding} [--c2-radio__container--padding-right=0px]
+ * @cssproperty {padding} [--c2-radio__container--padding-bottom=0px]
+ * @cssproperty {padding} [--c2-radio__container--padding-left=0px]
+ * @cssproperty {border} [--c2-radio__container--border=none] - Set a border and padding for a card-style option.
+ * @cssproperty {border-radius} [--c2-radio__container--border-radius=8px]
+ * @cssproperty {background} --c2-radio__container--background
+ * @cssproperty {background} --c2-radio__container__hover--background
+ * @cssproperty {border} --c2-radio__container__checked--border
+ * @cssproperty {background} --c2-radio__container__checked--background
+ *
+ * @cssproperty {pixel} [--c2-radio__control--size=18px]
+ * @cssproperty {border-radius} [--c2-radio__control--border-radius=999px] - Shape of the ring and its dot; `4px` gives a square control.
+ * @cssproperty {border} [--c2-radio__control--border=1px solid #bcbcc6]
+ * @cssproperty {color} [--c2-radio__control--background-color=transparent]
+ * @cssproperty {border} [--c2-radio__control__hover--border=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-radio__control__checked--border=1px solid transparent] - Transparent so the fill shows through; set an accent border with a transparent fill for an outlined look.
+ * @cssproperty {color} [--c2-radio__control__checked--background-color=#0265dc]
+ * @cssproperty {color} [--c2-radio__control__checked__hover--background-color=#0154b8]
+ * @cssproperty {outline} [--c2-radio__control__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-radio__control__focus--outline-offset=2px]
+ * @cssproperty {opacity} [--c2-radio__control__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-radio__dot--size=8px]
+ * @cssproperty {color} [--c2-radio__dot--color=#ffffff] - Fill of the dot, or `currentColor` of a slotted `dot` mark.
+ *
+ * @cssproperty {pixel} --c2-radio__icon--size - Size of slotted `icon` / `checked-icon` content. Falls back to the control size.
+ * @cssproperty {color} [--c2-radio__icon--color=#71717a] - Colour of the slotted indicator while unchecked.
+ * @cssproperty {color} [--c2-radio__icon__checked--color=#0265dc] - Colour of the slotted indicator while checked.
+ *
+ * @cssproperty {pixel} [--c2-radio__state-layer--size=32px] - Touch target around the control; also the hover layer.
+ * @cssproperty {border-radius} [--c2-radio__state-layer--border-radius=999px]
+ * @cssproperty {color} --c2-radio__state-layer__hover--color - Tint of the hover layer; transparent unless set.
+ *
+ * @cssproperty {color} [--c2-radio__label--color=inherit]
+ * @cssproperty {font-size} [--c2-radio__label--font-size=inherit]
+ * @cssproperty {font-weight} [--c2-radio__label--font-weight=inherit]
+ * @cssproperty {line-height} [--c2-radio__label--line-height=inherit]
+ * @cssproperty {color} --c2-radio__label__checked--color
+ * @cssproperty {opacity} [--c2-radio__label__disabled--opacity=0.38]
+ *
+ * @cssproperty {color} [--c2-radio__description--color=#71717a]
+ * @cssproperty {font-size} [--c2-radio__description--font-size=12px]
+ * @cssproperty {line-height} [--c2-radio__description--line-height=1.4]
+ * @cssproperty {pixel} [--c2-radio__description--margin-top=2px]
+ */
+export declare class Radio extends LitElement {
+    static styles: import("lit").CSSResult;
+    protected formElement: HTMLInputElement;
+    /** Whether this option is selected. Checking one radio unchecks the others of its group. */
+    checked: boolean;
+    /** Disables this option. A disabled `c2-radio-group` disables every radio inside it. */
+    disabled: boolean;
+    /** Value reported by the group and by the inner input. Every radio of a group needs one. */
+    value: string;
+    /** Form field name. Inside a group, the group's `name` wins. */
+    name: string;
+    /** 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;
+    ariaLabel: string;
+    ariaDescribedBy: undefined | string;
+    private hasDescription;
+    private hasDot;
+    private hasIcon;
+    private hasCheckedIcon;
+    private group;
+    /** 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;
+    focus(options?: FocusOptions): void;
+    disconnectedCallback(): void;
+    /** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
+    firstUpdated(): void;
+    protected update(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    /** Standalone radios sharing a `name` in the same root behave as one group. */
+    private uncheckSiblings;
+    private handleSlotChange;
+    private updateSlot;
+    private handleChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-radio': Radio;
+    }
+}
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +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"}