@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition58.js

@@ -1,281 +1,160 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { n as delegateAria } from "./delegates-aria.js";
-import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
-import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
-import { r as Radio, t as radioDefinition } from "./definition57.js";
-import { attr, elements, html, observable, slotted, when } from "@microsoft/fast-element";
-import { Orientation, keyArrowDown, keyArrowUp, keyEnter } from "@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}";
+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)}";
 //#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 WithFeedback(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.errorValidationMessage = "";
-		this.orientation = 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 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;
 			}
-			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 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 keyEnter:
-					this.checkFocusedRadio(e.target);
-					return;
-				case keyArrowRight$1:
-				case keyArrowDown:
-					this.moveRight(e);
-					return;
-				case keyArrowLeft$1:
-				case 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 = "";
+				});
 			}
 		};
-	}
-	/**
-	* @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\"]");
-	}
-	/**
-	* @internal
-	*/
+		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();
-		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);
+		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;
+				}
+			}
 		}
 	}
-	/**
-	* @internal
-	*/
-	focusInHandler(e) {
-		this.#setTabRovingTarget(e.target);
-	}
-	#setTabRovingTarget(radio) {
-		radio.setAttribute("tabindex", "0");
-		for (const slottedRadio of this.slottedRadioButtons) if (slottedRadio !== radio) slottedRadio.setAttribute("tabindex", "-1");
-	}
-	checkFocusedRadio(target) {
-		if (!target.readOnly) target.checked = true;
+	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();
+		}
 	}
 };
-__decorate([attr], RadioGroup.prototype, "label", void 0);
-__decorate([attr({
-	attribute: "required",
-	mode: "boolean"
-})], RadioGroup.prototype, "required", void 0);
+__decorate([attr], Radio.prototype, "connotation", void 0);
 __decorate([attr({
 	attribute: "readonly",
 	mode: "boolean"
-})], RadioGroup.prototype, "readOnly", void 0);
-__decorate([attr({
-	attribute: "disabled",
-	mode: "boolean"
-})], RadioGroup.prototype, "disabled", void 0);
-__decorate([attr], RadioGroup.prototype, "name", void 0);
-__decorate([attr], RadioGroup.prototype, "value", void 0);
-__decorate([observable], RadioGroup.prototype, "errorValidationMessage", void 0);
-__decorate([attr({ attribute: "error-text" })], RadioGroup.prototype, "errorText", void 0);
-__decorate([attr], RadioGroup.prototype, "orientation", void 0);
-__decorate([observable], RadioGroup.prototype, "slottedRadioButtons", void 0);
-//#endregion
-//#region src/lib/radio-group/radio-group.template.ts
-var RadioGroupTemplate = (context) => {
-	const radioTagName = context.tagFor(Radio, true);
-	return html`
-		<template
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			<div class="base">
-				<fieldset
-					${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 === Orientation.horizontal ? "horizontal" : "vertical"}"
-				>
-					${when((x) => x.label, html`<legend id="label">${(x) => x.label}</legend>`)}
-					<slot
-						${slotted({
-		property: "slottedRadioButtons",
-		filter: elements(radioTagName)
-	})}
-						@slotchange="${(x) => x.handleSlotChange()}"
-					></slot>
-				</fieldset>
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-		</template>
-	`;
-};
+})], Radio.prototype, "readOnly", void 0);
+__decorate([observable], Radio.prototype, "defaultSlottedNodes", void 0);
 //#endregion
-//#region src/lib/radio-group/definition.ts
-/**
-* @internal
-*/
-var radioGroupDefinition = defineVividComponent("radio-group", RadioGroup, RadioGroupTemplate, [radioDefinition, feedbackMessageDefinition], { styles: radio_group_default });
+//#region src/lib/radio/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"
+>
+	<div
+		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
+	>
+		<div class="control"></div>
+		${when((x) => x?.label, html`<label class="label">${(x) => x?.label}</label>`)}
+	</div>
+</template>`, [], { 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 = createRegisterFunction(radioGroupDefinition);
+var registerRadio = createRegisterFunction(radioDefinition);
 //#endregion
-export { registerRadioGroup as n, RadioGroup as r, radioGroupDefinition as t };
+export { registerRadio as n, Radio as r, radioDefinition as t };