@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition58.js

@@ -1,160 +1,64 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { t as CheckableFormAssociated } from "./form-associated.js";
-import { t as FormElement } from "./form-element.js";
-import { t as WithErrorText } from "./with-error-text.js";
-import { Updates, attr, html, observable, when } from "@microsoft/fast-element";
-import { classNames, keySpace } from "@microsoft/fast-web-utilities";
-//#region src/lib/radio/radio.scss?inline
-var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as BaseProgress } from "./base-progress.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/progress/progress.scss?inline
+var progress_default = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
 //#endregion
-//#region src/lib/radio/radio.ts
+//#region src/lib/progress/progress.ts
 /**
 * @public
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value changes
-* @component radio
-* @testAction check click #control
-* @testQuery checked checked true
-* @testQuery unchecked checked false
-* @testRef control shadow .control
+* @component progress
 */
-var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(VividElement))) {
-	/** @internal */
-	readOnlyChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
-	}
-	/** @internal */
-	defaultCheckedChanged() {
-		if (this.$fastController.isConnected && !this.dirtyChecked) {
-			/* v8 ignore else -- @preserve */
-			if (!this.isInsideRadioGroup()) {
-				this.checked = this.defaultChecked;
-				this.dirtyChecked = false;
-			}
-		}
-	}
-	constructor() {
-		super();
-		this.initialValue = "on";
-		this.defaultSlottedNodes = [];
-		this.keypressHandler = (e) => {
-			switch (e.key) {
-				case keySpace:
-					if (!this.checked && !this.readOnly) this.checked = true;
-					return;
-			}
-			return true;
-		};
-		this.proxy = document.createElement("input");
-		this.#validateValueMissingWithSiblings = () => {
-			const siblings = this.#radioSiblings;
-			const group = this.#radioGroup;
-			if (siblings && siblings.length > 1) {
-				if (siblings.some((x) => x.checked)) {
-					this.setValidity({ valueMissing: false });
-					this.errorValidationMessage = "";
-					if (group) group.errorValidationMessage = "";
-				}
-			}
-		};
-		this.#syncSiblingsRequiredValidationStatus = () => {
-			if (this.elementInternals && !this.validity.valueMissing) {
-				const siblings = this.#radioSiblings;
-				const group = this.#radioGroup;
-				if (siblings && siblings.length > 1) siblings.forEach((x) => {
-					x.elementInternals.setValidity({ valueMissing: false });
-					x.errorValidationMessage = "";
-					if (group) group.errorValidationMessage = "";
-				});
-			}
-		};
-		this.proxy.setAttribute("type", "radio");
-		this.proxy.setAttribute("name", this.name);
-		this.checked = this.defaultChecked;
-		this.dirtyChecked = false;
-	}
-	/** @internal */
-	nameChanged(previous, next) {
-		super.nameChanged(previous, next);
-		if (next !== null) this.proxy.setAttribute("name", this.name);
-		else this.proxy.removeAttribute("name");
-		Updates.enqueue(this.validate);
-	}
-	/** @internal */
-	connectedCallback() {
-		super.connectedCallback();
-		Updates.enqueue(this.validate);
-		if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
-			/* v8 ignore else -- @preserve */
-			if (!this.disabled) this.setAttribute("tabindex", "0");
-		}
-		if (this.defaultChecked) {
-			/* v8 ignore else -- @preserve */
-			if (!this.dirtyChecked) {
-				if (!this.isInsideRadioGroup()) {
-					this.checked = this.defaultChecked;
-					this.dirtyChecked = false;
-				}
-			}
-		}
-	}
-	isInsideRadioGroup() {
-		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
-	}
-	/** @internal */
-	clickHandler(_) {
-		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
-	}
-	get #radioSiblings() {
-		const siblings = this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);
-		if (siblings) return Array.from(siblings);
-		return [];
-	}
-	get #radioGroup() {
-		return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);
-	}
-	#validateValueMissingWithSiblings;
-	#syncSiblingsRequiredValidationStatus;
-	/** @internal */
-	validate(anchor) {
-		super.validate(anchor);
-		if (this.proxy) {
-			this.errorValidationMessage = this.validationMessage || "";
-			if (this.validity.valueMissing) this.#validateValueMissingWithSiblings();
-			else this.#syncSiblingsRequiredValidationStatus();
-		}
+var Progress = class extends DelegatesAria(BaseProgress) {
+	constructor(..._args) {
+		super(..._args);
+		this.reverse = false;
 	}
 };
-__decorate([attr], Radio.prototype, "connotation", void 0);
-__decorate([attr({
-	attribute: "readonly",
-	mode: "boolean"
-})], Radio.prototype, "readOnly", void 0);
-__decorate([observable], Radio.prototype, "defaultSlottedNodes", void 0);
+__decorate([attr()], Progress.prototype, "shape", void 0);
+__decorate([attr()], Progress.prototype, "connotation", void 0);
+__decorate([attr({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
+//#endregion
+//#region src/lib/progress/progress.template.ts
+function determinate() {
+	return html` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
+}
+function indeterminate() {
+	return html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
 //#endregion
-//#region src/lib/radio/definition.ts
+//#region src/lib/progress/definition.ts
 /** @internal */
-var radioDefinition = defineVividComponent("radio", Radio, html`<template
-	aria-checked="${(x) => x?.checked}"
-	aria-disabled="${(x) => x?.disabled}"
-	aria-required="${(x) => x?.required}"
-	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
-	@click="${(x, c) => x?.clickHandler(c.event)}"
-	role="radio"
->
+var progressDefinition = defineVividComponent("progress", Progress, html`<template>
 	<div
-		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
+		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`shape-${x.shape}`, Boolean(x.shape)], ["reverse", x.reverse], ["paused", x.paused])}"
+		${delegateAria({
+	role: "progressbar",
+	ariaValueNow: (x) => x.value,
+	ariaValueMin: (x) => x.min,
+	ariaValueMax: (x) => x.max
+})}
 	>
-		<div class="control"></div>
-		${when((x) => x?.label, html`<label class="label">${(x) => x?.label}</label>`)}
+		<div class="progress">
+			${when((x) => typeof x.value === "number", determinate())}
+			${when((x) => typeof x.value !== "number", indeterminate())}
+		</div>
 	</div>
-</template>`, [], { styles: radio_default });
+</template>`, [], { styles: progress_default });
 /**
-* Registers the radio elements with the design system.
+* Registers the progress elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRadio = createRegisterFunction(radioDefinition);
+var registerProgress = createRegisterFunction(progressDefinition);
 //#endregion
-export { registerRadio as n, Radio as r, radioDefinition as t };
+export { registerProgress as n, Progress as r, progressDefinition as t };

package/unbundled/definition59.cjs

@@ -1,279 +1,181 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
-const require_key_codes = require("./key-codes.cjs");
-const require_mixins = require("./mixins.cjs");
-const require_definition = require("./definition58.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/radio-group/radio-group.scss?inline
-var radio_group_default = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:8px;display:flex}.positioning-region{flex-wrap:wrap;gap:8px;display:flex}.positioning-region.vertical{flex-direction:column}fieldset{border:none;margin:0;padding:0;display:block}legend{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px;padding:0}";
+//#region src/lib/radio/radio.scss?inline
+var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 //#endregion
-//#region src/lib/radio-group/radio-group.ts
+//#region src/lib/radio/radio.ts
 /**
 * @public
-* @component radio-group
-* @slot - Default slot.
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value changes
-* @vueModel modelValue value change `event.currentTarget.value`
+* @component radio
+* @testAction check click #control
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef control shadow .control
 */
-var RadioGroup = class extends require_mixins.WithFeedback(require_vivid_element.VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.errorValidationMessage = "";
-		this.orientation = _microsoft_fast_web_utilities.Orientation.horizontal;
-		this.slottedRadioButtons = [];
-		this.radioErrorHandler = (e) => {
-			const radio = e.target;
-			this.errorValidationMessage = radio.errorValidationMessage || "";
-		};
-		this.radioChangeHandler = (e) => {
-			const changedRadio = e.target;
-			if (changedRadio.checked) {
-				this.slottedRadioButtons.forEach((radio) => {
-					if (radio !== changedRadio) radio.checked = false;
-				});
-				this.value = changedRadio.value;
-				this.#setTabRovingTarget(changedRadio);
+var Radio = class extends require_with_error_text.WithErrorText(require_form_element.FormElement(require_form_associated.CheckableFormAssociated(require_vivid_element.VividElement))) {
+	/** @internal */
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	}
+	/** @internal */
+	defaultCheckedChanged() {
+		if (this.$fastController.isConnected && !this.dirtyChecked) {
+			/* v8 ignore else -- @preserve */
+			if (!this.isInsideRadioGroup()) {
+				this.checked = this.defaultChecked;
+				this.dirtyChecked = false;
 			}
-			e.stopPropagation();
-		};
-		this.moveToRadioByIndex = (group, index) => {
-			const radio = group[index];
-			if (!this.isInsideToolbar && !radio.readOnly) radio.checked = true;
-			radio.focus();
-		};
-		this.moveRightOffGroup = () => {
-			const next = this.nextElementSibling;
-			if (next instanceof HTMLElement) next.focus();
-		};
-		this.moveLeftOffGroup = () => {
-			const prev = this.previousElementSibling;
-			if (prev instanceof HTMLElement) prev.focus();
-		};
-		this.moveRight = (e) => {
-			const radio = e.target;
-			const group = this.#focusableRadioButtons;
-			let index = group.indexOf(radio) + 1;
-			if (index === group.length && this.isInsideToolbar && e.key === "ArrowRight") {
-				this.moveRightOffGroup();
-				return;
+		}
+	}
+	constructor() {
+		super();
+		this.initialValue = "on";
+		this.defaultSlottedNodes = [];
+		this.keypressHandler = (e) => {
+			switch (e.key) {
+				case _microsoft_fast_web_utilities.keySpace:
+					if (!this.checked && !this.readOnly) this.checked = true;
+					return;
 			}
-			if (index === group.length) index = 0;
-			this.moveToRadioByIndex(group, index);
+			return true;
 		};
-		this.moveLeft = (e) => {
-			const radio = e.target;
-			const group = this.#focusableRadioButtons;
-			let index = group.indexOf(radio) - 1;
-			if (this.isInsideToolbar && e.key === "ArrowLeft" && index < 0) {
-				this.moveLeftOffGroup();
-				return;
+		this.proxy = document.createElement("input");
+		this.#validateValueMissingWithSiblings = () => {
+			const siblings = this.#radioSiblings;
+			const group = this.#radioGroup;
+			if (siblings && siblings.length > 1) {
+				if (siblings.some((x) => x.checked)) {
+					this.setValidity({ valueMissing: false });
+					this.errorValidationMessage = "";
+					if (group) group.errorValidationMessage = "";
+				}
 			}
-			index = index < 0 ? group.length - 1 : index;
-			this.moveToRadioByIndex(group, index);
 		};
-		this.keydownHandler = (e) => {
-			switch (e.key) {
-				case _microsoft_fast_web_utilities.keyEnter:
-					this.checkFocusedRadio(e.target);
-					return;
-				case require_key_codes.keyArrowRight:
-				case _microsoft_fast_web_utilities.keyArrowDown:
-					this.moveRight(e);
-					return;
-				case require_key_codes.keyArrowLeft:
-				case _microsoft_fast_web_utilities.keyArrowUp:
-					this.moveLeft(e);
-					return;
-				default: return true;
+		this.#syncSiblingsRequiredValidationStatus = () => {
+			if (this.elementInternals && !this.validity.valueMissing) {
+				const siblings = this.#radioSiblings;
+				const group = this.#radioGroup;
+				if (siblings && siblings.length > 1) siblings.forEach((x) => {
+					x.elementInternals.setValidity({ valueMissing: false });
+					x.errorValidationMessage = "";
+					if (group) group.errorValidationMessage = "";
+				});
 			}
 		};
+		this.proxy.setAttribute("type", "radio");
+		this.proxy.setAttribute("name", this.name);
+		this.checked = this.defaultChecked;
+		this.dirtyChecked = false;
 	}
 	/** @internal */
-	requiredChanged() {
-		this.slottedRadioButtons.forEach((radio) => {
-			if (this.required) radio.required = true;
-			else radio.required = false;
-		});
-	}
-	/** @internal */
-	readOnlyChanged() {
-		this.slottedRadioButtons.forEach((radio) => {
-			if (this.readOnly) radio.readOnly = true;
-			else radio.readOnly = false;
-		});
-	}
-	/** @internal */
-	disabledChanged() {
-		this.slottedRadioButtons.forEach((radio) => {
-			if (this.disabled) radio.disabled = true;
-			else radio.disabled = false;
-		});
-	}
-	nameChanged() {
-		this.slottedRadioButtons.forEach((radio) => {
-			radio.setAttribute("name", this.name);
-		});
-	}
-	/** @internal */
-	valueChanged() {
-		this.slottedRadioButtons.forEach((radio) => {
-			if (radio.value === this.value) radio.checked = true;
-		});
-		this.$emit("change");
-	}
-	/** @internal */
-	handleSlotChange() {
-		if (this.errorText) this.slottedRadioButtons.forEach((radio) => {
-			radio.errorText = this.errorText;
-		});
-	}
-	/** @internal */
-	errorTextChanged(_, newErrorText) {
-		if (newErrorText) this.errorValidationMessage = newErrorText;
-		else this.errorValidationMessage = "";
-	}
-	get #focusableRadioButtons() {
-		return this.slottedRadioButtons.filter((radio) => !radio.disabled);
-	}
-	/** @internal */
-	slottedRadioButtonsChanged() {
-		if (this.slottedRadioButtons.length > 0) this.setupRadioButtons();
-	}
-	get isInsideToolbar() {
-		return !!this.closest("[role=\"toolbar\"]");
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		if (next !== null) this.proxy.setAttribute("name", this.name);
+		else this.proxy.removeAttribute("name");
+		_microsoft_fast_element.Updates.enqueue(this.validate);
 	}
 	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
-		this.setupRadioButtons();
-	}
-	disconnectedCallback() {
-		this.slottedRadioButtons.forEach((radio) => {
-			radio.removeEventListener("change", this.radioChangeHandler);
-			radio.removeEventListener("invalid", this.radioErrorHandler);
-		});
-	}
-	setupRadioButtons() {
-		let foundMatchingVal = false;
-		for (const radio of this.slottedRadioButtons) {
-			if (this.name !== void 0) radio.setAttribute("name", this.name);
-			if (this.disabled) radio.disabled = true;
-			if (this.readOnly) radio.readOnly = true;
-			if (this.required) radio.required = true;
-			if (this.value && this.value === radio.value) {
-				radio.checked = true;
-				this.#setTabRovingTarget(radio);
-				foundMatchingVal = true;
-			} else radio.checked = false;
-			radio.addEventListener("change", this.radioChangeHandler);
-			radio.addEventListener("invalid", this.radioErrorHandler);
+		_microsoft_fast_element.Updates.enqueue(this.validate);
+		if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
+			/* v8 ignore else -- @preserve */
+			if (!this.disabled) this.setAttribute("tabindex", "0");
 		}
-		if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
-			const checkedRadios = this.slottedRadioButtons.filter((radio) => radio.hasAttribute("checked"));
-			if (checkedRadios.length > 0 && !foundMatchingVal) {
-				const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
-				lastCheckedRadio.checked = true;
-				this.#setTabRovingTarget(lastCheckedRadio);
-			} else this.#setTabRovingTarget(this.slottedRadioButtons[0]);
+		if (this.defaultChecked) {
+			/* v8 ignore else -- @preserve */
+			if (!this.dirtyChecked) {
+				if (!this.isInsideRadioGroup()) {
+					this.checked = this.defaultChecked;
+					this.dirtyChecked = false;
+				}
+			}
 		}
 	}
+	isInsideRadioGroup() {
+		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
+	}
 	/** @internal */
-	focusInHandler(e) {
-		this.#setTabRovingTarget(e.target);
+	clickHandler(_) {
+		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
 	}
-	#setTabRovingTarget(radio) {
-		radio.setAttribute("tabindex", "0");
-		for (const slottedRadio of this.slottedRadioButtons) if (slottedRadio !== radio) slottedRadio.setAttribute("tabindex", "-1");
+	get #radioSiblings() {
+		const siblings = this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);
+		if (siblings) return Array.from(siblings);
+		return [];
 	}
-	checkFocusedRadio(target) {
-		if (!target.readOnly) target.checked = true;
+	get #radioGroup() {
+		return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);
+	}
+	#validateValueMissingWithSiblings;
+	#syncSiblingsRequiredValidationStatus;
+	/** @internal */
+	validate(anchor) {
+		super.validate(anchor);
+		if (this.proxy) {
+			this.errorValidationMessage = this.validationMessage || "";
+			if (this.validity.valueMissing) this.#validateValueMissingWithSiblings();
+			else this.#syncSiblingsRequiredValidationStatus();
+		}
 	}
 };
-require_decorate.__decorate([_microsoft_fast_element.attr], RadioGroup.prototype, "label", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "required",
-	mode: "boolean"
-})], RadioGroup.prototype, "required", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Radio.prototype, "connotation", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	attribute: "readonly",
 	mode: "boolean"
-})], RadioGroup.prototype, "readOnly", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "disabled",
-	mode: "boolean"
-})], RadioGroup.prototype, "disabled", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], RadioGroup.prototype, "name", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], RadioGroup.prototype, "value", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RadioGroup.prototype, "errorValidationMessage", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "error-text" })], RadioGroup.prototype, "errorText", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], RadioGroup.prototype, "orientation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RadioGroup.prototype, "slottedRadioButtons", void 0);
+})], Radio.prototype, "readOnly", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Radio.prototype, "defaultSlottedNodes", void 0);
 //#endregion
-//#region src/lib/radio-group/radio-group.template.ts
-var RadioGroupTemplate = (context) => {
-	const radioTagName = context.tagFor(require_definition.Radio, true);
-	return _microsoft_fast_element.html`
-		<template
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			<div class="base">
-				<fieldset
-					${require_delegates_aria.delegateAria({
-		role: "radiogroup",
-		ariaDisabled: (x) => x.disabled,
-		ariaReadOnly: (x) => x.readOnly,
-		ariaOrientation: (x) => x.orientation,
-		ariaInvalid: (x) => x.errorText ? "true" : "false",
-		ariaLabelledBy: "label",
-		ariaDescribedBy: (x) => x._feedbackDescribedBy
-	})}
-					class="control positioning-region ${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? "horizontal" : "vertical"}"
-				>
-					${(0, _microsoft_fast_element.when)((x) => x.label, _microsoft_fast_element.html`<legend id="label">${(x) => x.label}</legend>`)}
-					<slot
-						${(0, _microsoft_fast_element.slotted)({
-		property: "slottedRadioButtons",
-		filter: (0, _microsoft_fast_element.elements)(radioTagName)
-	})}
-						@slotchange="${(x) => x.handleSlotChange()}"
-					></slot>
-				</fieldset>
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-		</template>
-	`;
-};
+//#region src/lib/radio/radio.template.ts
+var RadioTemplate = _microsoft_fast_element.html`<template
+	aria-checked="${(x) => x?.checked}"
+	aria-disabled="${(x) => x?.disabled}"
+	aria-required="${(x) => x?.required}"
+	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
+	@click="${(x, c) => x?.clickHandler(c.event)}"
+	role="radio"
+>
+	<div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
+	>
+		<div class="control"></div>
+		${(0, _microsoft_fast_element.when)((x) => x?.label, _microsoft_fast_element.html`<label class="label">${(x) => x?.label}</label>`)}
+	</div>
+</template>`;
 //#endregion
-//#region src/lib/radio-group/definition.ts
+//#region src/lib/radio/definition.ts
 /** @internal */
-var radioGroupDefinition = require_vivid_element.defineVividComponent("radio-group", RadioGroup, RadioGroupTemplate, [require_definition.radioDefinition, require_mixins.feedbackMessageDefinition], { styles: radio_group_default });
+var radioDefinition = require_vivid_element.defineVividComponent("radio", Radio, RadioTemplate, [], { styles: radio_default });
 /**
-* Registers the radio-group elements with the design system.
+* Registers the radio elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRadioGroup = require_vivid_element.createRegisterFunction(radioGroupDefinition);
+var registerRadio = require_vivid_element.createRegisterFunction(radioDefinition);
 //#endregion
-Object.defineProperty(exports, "RadioGroup", {
+Object.defineProperty(exports, "Radio", {
 	enumerable: true,
 	get: function() {
-		return RadioGroup;
+		return Radio;
 	}
 });
-Object.defineProperty(exports, "radioGroupDefinition", {
+Object.defineProperty(exports, "radioDefinition", {
 	enumerable: true,
 	get: function() {
-		return radioGroupDefinition;
+		return radioDefinition;
 	}
 });
-Object.defineProperty(exports, "registerRadioGroup", {
+Object.defineProperty(exports, "registerRadio", {
 	enumerable: true,
 	get: function() {
-		return registerRadioGroup;
+		return registerRadio;
 	}
 });