@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition58.cjs

@@ -1,299 +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("./definition57.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 = "";
+				});
 			}
 		};
-	}
-	/**
-	* @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");
+		_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;
+				}
+			}
 		}
 	}
-	/**
-	* @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();
+		}
 	}
 };
-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
-/**
-* @internal
-*/
-var radioGroupDefinition = require_vivid_element.defineVividComponent("radio-group", RadioGroup, RadioGroupTemplate, [require_definition.radioDefinition, require_mixins.feedbackMessageDefinition], { styles: radio_group_default });
+//#region src/lib/radio/definition.ts
+/** @internal */
+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;
 	}
 });