@vonage/vivid 5.17.0 → 5.18.0

package/unbundled/definition55.cjs

@@ -3,508 +3,191 @@ const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_form_element = require("./form-element.cjs");
-const require_localized = require("./localized.cjs");
-const require_definition = require("./definition10.cjs");
-const require_key_codes = require("./key-codes.cjs");
-const require_slider_template = require("./slider.template.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/range-slider/range-slider.scss?inline
-var range_slider_default = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}";
+//#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-300);--_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;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.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/range-slider/range-slider.ts
-var Direction = {
-	Increment: 1,
-	Decrement: -1
-};
+//#region src/lib/radio/radio.ts
 /**
-* Base class for range-slider
-*
-* @component range-slider
 * @public
-* @event {CustomEvent<undefined>} input:start - Event emitted when the start value changes
-* @event {CustomEvent<undefined>} input:end - Event emitted when the end value changes
-* @event {CustomEvent<undefined>} input - Event emitted when either the start or end value changes.
-* @event {CustomEvent<undefined>} change - Event emitted when either the start or end value changes.
-* @vueModel start start input:start `event.currentTarget.start`
-* @vueModel end end input:end `event.currentTarget.end`
-* @vueModel startAsNumber startAsNumber input:start `event.currentTarget.startAsNumber`
-* @vueModel endAsNumber endAsNumber input:end `event.currentTarget.endAsNumber`
-* @testSelector byLabel byLabel
-* @testAction slideStartTo slideTo #track #startThumb
-* @testAction slideEndTo slideTo #track #endThumb
-* @testQuery range rangeAsNumber
-* @testRef track shadow .control
-* @testRef startThumb shadow #start-thumb
-* @testRef endThumb shadow #end-thumb
+* @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
 */
-var RangeSlider = class extends require_localized.Localized(require_form_element.FormElement(require_form_associated.FormAssociated(require_vivid_element.VividElement))) {
-	constructor(..._args) {
-		super(..._args);
-		this.start = "";
-		this.end = "";
-		this.min = 0;
-		this.max = 10;
-		this.step = 1;
-		this.orientation = _microsoft_fast_web_utilities.Orientation.horizontal;
-		this.ariaStartLabel = null;
-		this.ariaEndLabel = null;
-		this.markers = false;
-		this.pin = false;
-		this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
-		this.proxy = document.createElement("input");
-		this._trackEl = null;
-		this._startThumbEl = null;
-		this._endThumbEl = null;
-		this._draggingThumb = false;
-		this._visiblyFocusedThumb = null;
-		this._hoveredThumb = null;
-		this._startThumbCss = "";
-		this._endThumbCss = "";
-		this._selectedRangeCss = "";
-	}
-	#isInternalValueUpdate = false;
+var Radio = class extends require_with_error_text.WithErrorText(require_form_element.FormElement(require_form_associated.CheckableFormAssociated(require_vivid_element.VividElement))) {
 	/**
 	* @internal
 	*/
-	startChanged() {
-		this.currentStart = this.start;
-		if (!this.#isInternalValueUpdate) {
-			this.dirtyValue = true;
-			this.#updateFormValue();
-		}
-		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
 	}
 	/**
 	* @internal
 	*/
-	initialStartChanged(_, newValue) {
-		if (newValue && !this.dirtyValue) {
-			this.start = newValue;
-			this.dirtyValue = false;
+	defaultCheckedChanged() {
+		if (this.$fastController.isConnected && !this.dirtyChecked) {
+			/* v8 ignore else -- @preserve */
+			if (!this.isInsideRadioGroup()) {
+				this.checked = this.defaultChecked;
+				this.dirtyChecked = false;
+			}
 		}
 	}
-	/**
-	* @internal
-	*/
-	currentStartChanged() {
-		this.start = this.currentStart;
-	}
-	/**
-	* The start property, typed as a number.
-	*
-	* @public
-	*/
-	get startAsNumber() {
-		return parseFloat(this.start);
-	}
-	set startAsNumber(next) {
-		this.start = next.toString();
+	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;
+			}
+			return true;
+		};
+		this.proxy = document.createElement("input");
+		this.proxy.setAttribute("type", "radio");
+		this.proxy.setAttribute("name", this.name);
+		this.checked = this.defaultChecked;
+		this.dirtyChecked = false;
 	}
 	/**
 	* @internal
 	*/
-	endChanged() {
-		this.currentEnd = this.end;
-		if (!this.#isInternalValueUpdate) {
-			this.dirtyValue = true;
-			this.#updateFormValue();
-		}
-		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+		_microsoft_fast_element.Updates.enqueue(this.validate);
 	}
 	/**
 	* @internal
 	*/
-	initialEndChanged(_, newValue) {
-		if (newValue && !this.dirtyValue) {
-			this.end = newValue;
-			this.dirtyValue = false;
+	connectedCallback() {
+		super.connectedCallback();
+		_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");
 		}
-	}
-	/**
-	* @internal
-	*/
-	currentEndChanged() {
-		this.end = this.currentEnd;
-	}
-	/**
-	* The end property, typed as a number.
-	*
-	* @public
-	*/
-	get endAsNumber() {
-		return parseFloat(this.end);
-	}
-	set endAsNumber(next) {
-		this.end = next.toString();
-	}
-	#updateValues({ start, end }, emitEvents = true) {
-		if (start === this.start) start = void 0;
-		if (end === this.end) end = void 0;
-		if (start === void 0 && end === void 0) return;
-		this.#isInternalValueUpdate = true;
-		if (start !== void 0) this.start = start;
-		if (end !== void 0) this.end = end;
-		this.#isInternalValueUpdate = false;
-		if (emitEvents) {
-			if (start !== void 0) this.$emit("input:start");
-			if (end !== void 0) this.$emit("input:end");
-			this.$emit("input");
-			this.$emit("change");
-			this.dirtyValue = true;
+		if (this.defaultChecked) {
+			/* v8 ignore else -- @preserve */
+			if (!this.dirtyChecked) {
+				if (!this.isInsideRadioGroup()) {
+					this.checked = this.defaultChecked;
+					this.dirtyChecked = false;
+				}
+			}
 		}
-		this.#updateFormValue();
-	}
-	#applyStep(thumb, direction) {
-		this.#updateValues({ [thumb]: this.#roundToNearestStep(thumb, Number(this[thumb]) + direction * this.step).toString() });
 	}
-	/**
-	* @internal
-	*/
-	orientationChanged() {
-		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	isInsideRadioGroup() {
+		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
 	}
 	/**
 	* @internal
 	*/
-	nameChanged(previous, next) {
-		super.nameChanged(previous, next);
-		this.#updateFormValue();
-	}
-	#updateFormValue() {
-		if (!this.name) this.setFormValue(null);
-		else {
-			const formData = new FormData();
-			formData.append(this.name, this.start);
-			formData.append(this.name, this.end);
-			this.setFormValue(formData);
-		}
-	}
-	formResetCallback() {
-		this.#updateValues({
-			start: this.initialStart ?? this.min.toString(),
-			end: this.initialEnd ?? this.max.toString()
-		});
-		super.formResetCallback();
-	}
-	get #thumbs() {
-		return {
-			start: this._startThumbEl,
-			end: this._endThumbEl
-		};
-	}
-	get #thumbConstraints() {
-		return {
-			start: {
-				min: this.min,
-				max: this.endAsNumber
-			},
-			end: {
-				min: this.startAsNumber,
-				max: this.max
+	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() {
+		const parentGroup = this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);
+		if (parentGroup) return parentGroup;
+		return null;
+	}
+	#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 = "";
 			}
-		};
-	}
-	#getThumbId(thumb) {
-		return thumb === this._startThumbEl ? "start" : "end";
-	}
-	#getThumbIdFromEvent(e) {
-		return this.#getThumbId(e.target);
-	}
-	#updateThumbPositions() {
-		const startOffsetPct = this.#thumbTrackEndOffset(this.startAsNumber);
-		const endOffsetPct = this.#thumbTrackEndOffset(this.endAsNumber);
-		const [dirProp, dimProp] = this.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
-		const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
-		this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
-		this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
-		this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
-	}
-	#thumbTrackEndOffset(value) {
-		return (1 - require_slider_template.inverseLerp(this.min, this.max, value)) * 100;
-	}
-	#calculateValueFromMouseEvent(e) {
-		const trackClientRect = this._trackEl.getBoundingClientRect();
-		const [minPos, maxPos, valuePos] = this.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? [
-			this._trackEl.clientLeft,
-			this._trackEl.clientWidth,
-			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-		] : [
-			trackClientRect.top,
-			trackClientRect.bottom,
-			e.pageY - document.documentElement.scrollTop
-		];
-		return require_slider_template.lerp(this.min, this.max, require_slider_template.inverseLerp(minPos, maxPos, valuePos));
-	}
-	#roundToNearestStep(thumb, value) {
-		return (0, _microsoft_fast_web_utilities.limit)(this.#thumbConstraints[thumb].min, this.#thumbConstraints[thumb].max, require_slider_template.roundToStepValue(value - this.min, this.step) + this.min);
-	}
-	#isNonVisibleFocus = false;
-	#focusThumbNonVisibly(thumb) {
-		this.#isNonVisibleFocus = true;
-		thumb.focus();
-		this.#isNonVisibleFocus = false;
-	}
-	/**
-	* @internal
-	*/
-	_isThumbPopupOpen(thumb) {
-		return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.#updateValues({
-			start: this.start || this.initialStart || this.min.toString(),
-			end: this.end || this.initialEnd || this.max.toString()
-		}, false);
-		this.#registerThumbListeners();
-		this.#updateThumbPositions();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#unregisterThumbListeners();
-		this.#unregisterDragListeners();
-	}
-	#registerThumbListeners() {
-		for (const thumb of ["start", "end"]) {
-			this.#thumbs[thumb].addEventListener("keydown", this.#onThumbKeydown);
-			this.#thumbs[thumb].addEventListener("mousedown", this.#onThumbMousedown, { passive: true });
-			this.#thumbs[thumb].addEventListener("touchstart", this.#onThumbMousedown, { passive: true });
-			this.#thumbs[thumb].addEventListener("mouseover", this.#onMouseOver, { passive: true });
-			this.#thumbs[thumb].addEventListener("mouseout", this.#onMouseOut, { passive: true });
-			this.#thumbs[thumb].addEventListener("focus", this.#onThumbFocus);
-			this.#thumbs[thumb].addEventListener("blur", this.#onThumbBlur);
 		}
-	}
-	#unregisterThumbListeners() {
-		for (const thumb of ["start", "end"]) {
-			this.#thumbs[thumb].removeEventListener("keydown", this.#onThumbKeydown);
-			this.#thumbs[thumb].removeEventListener("mousedown", this.#onThumbMousedown);
-			this.#thumbs[thumb].removeEventListener("touchstart", this.#onThumbMousedown);
-			this.#thumbs[thumb].removeEventListener("mouseover", this.#onMouseOver);
-			this.#thumbs[thumb].removeEventListener("mouseout", this.#onMouseOut);
-			this.#thumbs[thumb].removeEventListener("focus", this.#onThumbFocus);
-			this.#thumbs[thumb].removeEventListener("blur", this.#onThumbBlur);
+	};
+	#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 = "";
+			});
 		}
-	}
+	};
 	/**
 	* @internal
 	*/
-	_onMouseDown(e) {
-		if (this.disabled || this._draggingThumb) return;
-		const value = this.#calculateValueFromMouseEvent(e);
-		const startDistance = Math.abs(value - Number(this.start));
-		const endDistance = Math.abs(value - Number(this.end));
-		const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
-		this.#updateValues({ [thumb]: `${this.#roundToNearestStep(thumb, value)}` });
-		this._draggingThumb = thumb;
-		this.#focusThumbNonVisibly(this.#thumbs[thumb]);
-		this.#registerDragHandlers();
-	}
-	#onThumbFocus = (e) => {
-		if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
-	};
-	#onThumbBlur = () => {
-		this._visiblyFocusedThumb = null;
-	};
-	#onMouseOver = (e) => {
-		this._hoveredThumb = this.#getThumbIdFromEvent(e);
-	};
-	#onMouseOut = () => {
-		this._hoveredThumb = null;
-	};
-	#onThumbMousedown = (event) => {
-		if (this.disabled || event.defaultPrevented) return;
-		let target = event.target;
-		if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) target = this._startThumbEl;
-		this.#focusThumbNonVisibly(target);
-		this._draggingThumb = this.#getThumbId(target);
-		this.#registerDragHandlers();
-	};
-	#onThumbKeydown = (e) => {
-		const thumb = this.#getThumbIdFromEvent(e);
-		this._visiblyFocusedThumb = thumb;
-		if (e.key === _microsoft_fast_web_utilities.keyHome) {
-			e.preventDefault();
-			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
-		} else if (e.key === _microsoft_fast_web_utilities.keyEnd) {
-			e.preventDefault();
-			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
-		} else {
-			if (e.shiftKey) return;
-			switch (e.key) {
-				case require_key_codes.keyArrowRight:
-				case _microsoft_fast_web_utilities.keyArrowDown:
-					e.preventDefault();
-					this.#applyStep(thumb, Direction.Increment);
-					break;
-				case require_key_codes.keyArrowLeft:
-				case _microsoft_fast_web_utilities.keyArrowUp:
-					e.preventDefault();
-					this.#applyStep(thumb, Direction.Decrement);
-					break;
-			}
+	validate(anchor) {
+		super.validate(anchor);
+		if (this.proxy) {
+			this.errorValidationMessage = this.validationMessage || "";
+			if (this.validity.valueMissing) this.#validateValueMissingWithSiblings();
+			else this.#syncSiblingsRequiredValidationStatus();
 		}
-	};
-	#registerDragHandlers() {
-		window.addEventListener("mousemove", this.#onDragMove, { passive: true });
-		window.addEventListener("touchmove", this.#onDragMove, { passive: true });
-		window.addEventListener("mouseup", this.#onDragEnd);
-		window.addEventListener("touchend", this.#onDragEnd);
-		window.document.addEventListener("mouseleave", this.#onDragEnd);
-	}
-	#unregisterDragListeners() {
-		window.removeEventListener("mouseup", this.#onDragEnd);
-		window.document.removeEventListener("mouseleave", this.#onDragEnd);
-		window.removeEventListener("mousemove", this.#onDragMove);
-		window.removeEventListener("touchmove", this.#onDragMove);
-		window.removeEventListener("touchend", this.#onDragEnd);
 	}
-	#onDragMove = (e) => {
-		if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
-		const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
-		const value = this.#calculateValueFromMouseEvent(sourceEvent);
-		this.#updateValues({ [this._draggingThumb]: `${this.#roundToNearestStep(this._draggingThumb, value)}` });
-	};
-	#onDragEnd = () => {
-		this._draggingThumb = false;
-		this.#unregisterDragListeners();
-	};
 };
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "start", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "fromView",
-	attribute: "start"
-})], RangeSlider.prototype, "initialStart", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "current-start" })], RangeSlider.prototype, "currentStart", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "end", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Radio.prototype, "connotation", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "fromView",
-	attribute: "end"
-})], RangeSlider.prototype, "initialEnd", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "current-end" })], RangeSlider.prototype, "currentEnd", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], RangeSlider.prototype, "min", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], RangeSlider.prototype, "max", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_slider_template.defaultToOneConverter })], RangeSlider.prototype, "step", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], RangeSlider.prototype, "orientation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aria-start-label" })], RangeSlider.prototype, "ariaStartLabel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aria-end-label" })], RangeSlider.prototype, "ariaEndLabel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], RangeSlider.prototype, "markers", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], RangeSlider.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], RangeSlider.prototype, "pin", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "valueTextFormatter", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_draggingThumb", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_visiblyFocusedThumb", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_hoveredThumb", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_startThumbCss", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_endThumbCss", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_selectedRangeCss", void 0);
+	attribute: "readonly",
+	mode: "boolean"
+})], Radio.prototype, "readOnly", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Radio.prototype, "defaultSlottedNodes", void 0);
 //#endregion
-//#region src/lib/range-slider/range-slider.template.ts
-var getClasses = ({ disabled, connotation }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", Boolean(disabled)], [`connotation-${connotation}`, Boolean(connotation)]);
-var getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => (0, _microsoft_fast_web_utilities.classNames)("thumb-container", ["focus-visible", _visiblyFocusedThumb === thumb]);
-var RangeSliderTemplate = (context) => {
-	const popupTag = context.tagFor(require_definition.Popup);
-	return _microsoft_fast_element.html` <template
-		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
-	>
-		<div class="${getClasses} ${(x) => x.orientation}">
-			<div class="positioning-region">
-				<div ${(0, _microsoft_fast_element.ref)("_trackEl")} class="track">
-					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
-					${(0, _microsoft_fast_element.when)((x) => x.markers, _microsoft_fast_element.html`${(x) => require_slider_template.getMarkersTemplate(x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal, Math.floor((x.max - x.min) / x.step))}`)}
-				</div>
-				<div
-					id="start-thumb"
-					${(0, _microsoft_fast_element.ref)("_startThumbEl")}
-					class="${getThumbClassesFor("start")}"
-					style="${(x) => x._startThumbCss}"
-					role="slider"
-					tabindex="${(x) => x.disabled ? null : 0}"
-					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
-					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
-					aria-valuenow="${(x) => x.start}"
-					aria-valuemin="${(x) => x.min}"
-					aria-valuemax="${(x) => x.end}"
-					aria-disabled="${(x) => x.disabled}"
-					aria-orientation="${(x) => x.orientation}"
-				></div>
-				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
-					class="popup"
-					arrow
-					alternate
-					:anchor="${(x) => x._startThumbEl}"
-					:open=${(x) => x._isThumbPopupOpen("start")}
-					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.PlacementStrategy.AutoPlacementVertical}
-					animation-frame
-					exportparts="vvd-theme-alternate"
-					aria-hidden="true"
-				>
-					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
-				</${popupTag}>`)}
-				<div
-					id="end-thumb"
-					${(0, _microsoft_fast_element.ref)("_endThumbEl")}
-					class="${getThumbClassesFor("end")}"
-					style="${(x) => x._endThumbCss}"
-					role="slider"
-					tabindex="${(x) => x.disabled ? null : 0}"
-					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
-					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
-					aria-valuenow="${(x) => x.end}"
-					aria-valuemin="${(x) => x.start}"
-					aria-valuemax="${(x) => x.max}"
-					aria-disabled="${(x) => x.disabled}"
-					aria-orientation="${(x) => x.orientation}"
-				></div>
-				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
-					class="popup"
-					arrow
-					alternate
-					:anchor="${(x) => x._endThumbEl}"
-					:open=${(x) => x._isThumbPopupOpen("end")}
-					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.PlacementStrategy.AutoPlacementVertical}
-					animation-frame
-					exportparts="vvd-theme-alternate"
-					aria-hidden="true"
-				>
-					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
-				</${popupTag}>`)}
-			</div>
-		</div>
-	</template>`;
-};
+//#region src/lib/radio/radio.template.ts
+var getClasses = ({ connotation, checked, readOnly, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["checked", Boolean(checked)], ["readonly", Boolean(readOnly)], ["disabled", Boolean(disabled)]);
+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="${getClasses}">
+		<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/range-slider/definition.ts
+//#region src/lib/radio/definition.ts
 /**
 * @internal
 */
-var rangeSliderDefinition = require_vivid_element.defineVividComponent("range-slider", RangeSlider, RangeSliderTemplate, [require_definition.popupDefinition], {
-	styles: range_slider_default,
-	shadowOptions: { delegatesFocus: true }
-});
+var radioDefinition = require_vivid_element.defineVividComponent("radio", Radio, RadioTemplate, [], { styles: radio_default });
 /**
-* Registers the range-slider element with the design system.
+* Registers the radio elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRangeSlider = require_vivid_element.createRegisterFunction(rangeSliderDefinition);
+var registerRadio = require_vivid_element.createRegisterFunction(radioDefinition);
 //#endregion
-Object.defineProperty(exports, "RangeSlider", {
+Object.defineProperty(exports, "Radio", {
 	enumerable: true,
 	get: function() {
-		return RangeSlider;
+		return Radio;
 	}
 });
-Object.defineProperty(exports, "rangeSliderDefinition", {
+Object.defineProperty(exports, "radioDefinition", {
 	enumerable: true,
 	get: function() {
-		return rangeSliderDefinition;
+		return radioDefinition;
 	}
 });
-Object.defineProperty(exports, "registerRangeSlider", {
+Object.defineProperty(exports, "registerRadio", {
 	enumerable: true,
 	get: function() {
-		return registerRangeSlider;
+		return registerRadio;
 	}
 });