@vonage/vivid 5.18.0 → 5.20.0

package/unbundled/definition23.js

@@ -1,16 +1,16 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as CheckableFormAssociated } from "./form-associated.js";
 import { t as FormElement } from "./form-element.js";
 import { t as WithSuccessText } from "./with-success-text.js";
 import { t as WithErrorText } from "./with-error-text.js";
-import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/checkbox/checkbox.scss?inline
-var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);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);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);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);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
 /**
 * @public
 * @component checkbox
@@ -101,13 +101,13 @@ var CheckboxTemplate = (context) => {
 	return html`<template>
 		<div
 			class="${getClasses}"
-			aria-describedby="${(x) => x._feedbackDescribedBy}"
 			${delegateAria({
 		role: "checkbox",
 		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
 		ariaRequired: (x) => x.required,
 		ariaDisabled: (x) => x.disabled,
-		ariaReadOnly: (x) => x.readOnly
+		ariaReadOnly: (x) => x.readOnly,
+		ariaDescribedBy: (x) => x._feedbackDescribedBy
 	})}
 			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event)}"

package/unbundled/definition24.cjs

@@ -24,11 +24,24 @@ var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host
 var Toggletip = class extends require_localized.Localized(require_anchored.Anchored(require_vivid_element.VividElement)) {
 	constructor(..._args) {
 		super(..._args);
+		this.#originalAriaLabel = null;
 		this.alternate = false;
 		this.placement = "right";
 		this.open = false;
+		this.#openIfClosed = () => {
+			if (!this.open) _microsoft_fast_element.Updates.enqueue(() => this.open = true);
+		};
+		this.#closeOnClickOutside = (e) => {
+			const clickedOutside = !this.contains(e.target);
+			const clickedOnAnchor = this._anchorEl?.contains(e.target);
+			if (clickedOutside || clickedOnAnchor) this.open = false;
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.open = false;
+		};
 	}
-	#originalAriaLabel = null;
+	#originalAriaLabel;
 	/**
 	* @internal
 	*/
@@ -71,9 +84,7 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 		/* v8 ignore else -- @preserve */
 		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
 	}
-	#openIfClosed = () => {
-		if (!this.open) _microsoft_fast_element.Updates.enqueue(() => this.open = true);
-	};
+	#openIfClosed;
 	#updateListeners() {
 		document.removeEventListener("click", this.#closeOnClickOutside);
 		document.removeEventListener("keydown", this.#closeOnEscape);
@@ -82,15 +93,8 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 			document.addEventListener("keydown", this.#closeOnEscape);
 		}
 	}
-	#closeOnClickOutside = (e) => {
-		const clickedOutside = !this.contains(e.target);
-		const clickedOnAnchor = this._anchorEl?.contains(e.target);
-		if (clickedOutside || clickedOnAnchor) this.open = false;
-	};
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.open = false;
-	};
+	#closeOnClickOutside;
+	#closeOnEscape;
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], Toggletip.prototype, "headline", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);

package/unbundled/definition24.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
@@ -23,11 +23,24 @@ var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host
 var Toggletip = class extends Localized(Anchored(VividElement)) {
 	constructor(..._args) {
 		super(..._args);
+		this.#originalAriaLabel = null;
 		this.alternate = false;
 		this.placement = "right";
 		this.open = false;
+		this.#openIfClosed = () => {
+			if (!this.open) Updates.enqueue(() => this.open = true);
+		};
+		this.#closeOnClickOutside = (e) => {
+			const clickedOutside = !this.contains(e.target);
+			const clickedOnAnchor = this._anchorEl?.contains(e.target);
+			if (clickedOutside || clickedOnAnchor) this.open = false;
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.open = false;
+		};
 	}
-	#originalAriaLabel = null;
+	#originalAriaLabel;
 	/**
 	* @internal
 	*/
@@ -70,9 +83,7 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 		/* v8 ignore else -- @preserve */
 		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
 	}
-	#openIfClosed = () => {
-		if (!this.open) Updates.enqueue(() => this.open = true);
-	};
+	#openIfClosed;
 	#updateListeners() {
 		document.removeEventListener("click", this.#closeOnClickOutside);
 		document.removeEventListener("keydown", this.#closeOnEscape);
@@ -81,15 +92,8 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 			document.addEventListener("keydown", this.#closeOnEscape);
 		}
 	}
-	#closeOnClickOutside = (e) => {
-		const clickedOutside = !this.contains(e.target);
-		const clickedOnAnchor = this._anchorEl?.contains(e.target);
-		if (clickedOutside || clickedOnAnchor) this.open = false;
-	};
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.open = false;
-	};
+	#closeOnClickOutside;
+	#closeOnEscape;
 };
 __decorate([attr], Toggletip.prototype, "headline", void 0);
 __decorate([attr({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);

package/unbundled/definition25.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition$1 = require("./definition24.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");

package/unbundled/definition25.js

@@ -1,5 +1,5 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { n as toggletipDefinition, r as Toggletip } from "./definition24.js";
 import { attr, html } from "@microsoft/fast-element";

package/unbundled/definition26.cjs

@@ -1,7 +1,6 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
-const require_definition$1 = require("./definition2.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
@@ -10,8 +9,10 @@ const require_form_element = require("./form-element.cjs");
 const require_with_success_text = require("./with-success-text.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
+const require_definition$1 = require("./definition6.cjs");
 const require_char_count = require("./char-count.cjs");
 const require_mixins = require("./mixins.cjs");
+const require_randomId = require("./randomId.cjs");
 const require_definition$2 = require("./definition25.cjs");
 const require_text_field = require("./text-field.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -22,10 +23,25 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 * @public
 */
 var TextFieldType = {
+	/**
+	* An email TextField
+	*/
 	email: "email",
+	/**
+	* A password TextField
+	*/
 	password: "password",
+	/**
+	* A telephone TextField
+	*/
 	tel: "tel",
+	/**
+	* A text TextField
+	*/
 	text: "text",
+	/**
+	* A URL TextField
+	*/
 	url: "url"
 };
 var safariWorkaroundStyles = new _microsoft_fast_element.ElementStyles([`
@@ -59,6 +75,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 		super(..._args);
 		this.proxy = document.createElement("input");
 		this.type = TextFieldType.text;
+		this.#randomId = require_randomId.generateRandomId();
 	}
 	/**
 	* @internal
@@ -215,7 +232,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 	focus() {
 		this.control?.focus();
 	}
-	#randomId = require_mixins.generateRandomId();
+	#randomId;
 	/**
 	* @internal
 	*/
@@ -262,7 +279,7 @@ var TextfieldTemplate = (context) => {
 					${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			${require_mixins.renderInLightDOM(_microsoft_fast_element.html`
+			${require_randomId.renderInLightDOM(_microsoft_fast_element.html`
 				${(0, _microsoft_fast_element.when)((x) => x.label, _microsoft_fast_element.html`
 						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
 							${(x) => x.label}
@@ -279,7 +296,7 @@ var TextfieldTemplate = (context) => {
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
-					${require_mixins.renderInLightDOM(_microsoft_fast_element.html`<input
+					${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<input
 							slot="_control"
 							id="${(x) => getControlId(x._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
@@ -305,9 +322,8 @@ var TextfieldTemplate = (context) => {
 							autocomplete="${(x) => x.autoComplete}"
 							type="${(x) => x.type}"
 							inputmode="${(x) => x.inputMode}"
-							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
 							value="${(x) => x.initialValue}"
-							${require_delegates_aria.delegateAria()}
+							${require_delegates_aria.delegateAria({ ariaDescribedBy: (x) => `${x._feedbackDescribedBy} ${x.charCount && x.maxlength ? x._charCountDescribedBy : null}` })}
 							${(0, _microsoft_fast_element.ref)("control")}
 						/>`)}
 				</div>
@@ -328,9 +344,9 @@ var TextfieldTemplate = (context) => {
 * @internal
 */
 var textFieldDefinition = require_vivid_element.defineVividComponent("text-field", TextField, TextfieldTemplate, [
-	require_definition$1.iconDefinition,
+	require_definition.iconDefinition,
 	require_mixins.feedbackMessageDefinition,
-	require_definition.visuallyHiddenDefinition,
+	require_definition$1.visuallyHiddenDefinition,
 	require_definition$2.contextualHelpDefinition
 ], {
 	styles: require_text_field.text_field_default,

package/unbundled/definition26.js

@@ -1,6 +1,5 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { n as visuallyHiddenDefinition } from "./definition.js";
-import { t as iconDefinition } from "./definition2.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
@@ -9,8 +8,10 @@ import { t as FormElement } from "./form-element.js";
 import { t as WithSuccessText } from "./with-success-text.js";
 import { t as WithErrorText } from "./with-error-text.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { n as visuallyHiddenDefinition } from "./definition6.js";
 import { t as WithCharCount } from "./char-count.js";
-import { a as feedbackMessageDefinition, i as renderInLightDOM, n as WithLightDOMFeedback, r as generateRandomId } from "./mixins.js";
+import { n as WithLightDOMFeedback, r as feedbackMessageDefinition } from "./mixins.js";
+import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
 import { t as contextualHelpDefinition } from "./definition25.js";
 import { t as text_field_default } from "./text-field.js";
 import { ElementStyles, Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
@@ -21,10 +22,25 @@ import { classNames } from "@microsoft/fast-web-utilities";
 * @public
 */
 var TextFieldType = {
+	/**
+	* An email TextField
+	*/
 	email: "email",
+	/**
+	* A password TextField
+	*/
 	password: "password",
+	/**
+	* A telephone TextField
+	*/
 	tel: "tel",
+	/**
+	* A text TextField
+	*/
 	text: "text",
+	/**
+	* A URL TextField
+	*/
 	url: "url"
 };
 var safariWorkaroundStyles = new ElementStyles([`
@@ -58,6 +74,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 		super(..._args);
 		this.proxy = document.createElement("input");
 		this.type = TextFieldType.text;
+		this.#randomId = generateRandomId();
 	}
 	/**
 	* @internal
@@ -214,7 +231,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 	focus() {
 		this.control?.focus();
 	}
-	#randomId = generateRandomId();
+	#randomId;
 	/**
 	* @internal
 	*/
@@ -304,9 +321,8 @@ var TextfieldTemplate = (context) => {
 							autocomplete="${(x) => x.autoComplete}"
 							type="${(x) => x.type}"
 							inputmode="${(x) => x.inputMode}"
-							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
 							value="${(x) => x.initialValue}"
-							${delegateAria()}
+							${delegateAria({ ariaDescribedBy: (x) => `${x._feedbackDescribedBy} ${x.charCount && x.maxlength ? x._charCountDescribedBy : null}` })}
 							${ref("control")}
 						/>`)}
 				</div>

package/unbundled/definition27.cjs

@@ -1,13 +1,15 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_kbd_shortcut = require("./kbd-shortcut.cjs");
 const require_dialog = require("./dialog.cjs");
 const require_definition = require("./definition10.cjs");
 const require_anchored = require("./anchored.cjs");
+const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -18,10 +20,26 @@ var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :h
 * @testQuery open open true
 * @testQuery closed open false
 */
-var Tooltip = class extends require_anchored.Anchored(require_vivid_element.VividElement) {
+var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchored.Anchored(require_vivid_element.VividElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.open = false;
+		this._descriptionId = `vwc-tooltip-desc-${require_randomId.generateRandomId()}`;
+		this.#show = () => {
+			this.open = true;
+		};
+		this.#hide = () => {
+			this.open = false;
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.#hide();
+		};
+	}
+	/** @internal */
+	_kbdAriaShortcutsValueChanged() {
+		if (!this._anchorEl) return;
+		_microsoft_fast_element.DOM.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -43,36 +61,28 @@ var Tooltip = class extends require_anchored.Anchored(require_vivid_element.Vivi
 		a.addEventListener("mouseout", this.#hide);
 		a.addEventListener("focusin", this.#show);
 		a.addEventListener("focusout", this.#hide);
-		a.setAttribute("aria-haspopup", "true");
-		a.setAttribute("aria-expanded", String(this.open));
+		const existing = a.getAttribute("aria-describedby") ?? a.ariaDescribedBy;
+		a.setAttribute("aria-describedby", existing ? `${existing} ${this._descriptionId}` : this._descriptionId);
+		_microsoft_fast_element.DOM.setAttribute(a, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	#cleanupAnchor(a) {
 		a.removeEventListener("mouseover", this.#show);
 		a.removeEventListener("mouseout", this.#hide);
 		a.removeEventListener("focusin", this.#show);
 		a.removeEventListener("focusout", this.#hide);
-		a.removeAttribute("aria-haspopup");
-		a.removeAttribute("aria-expanded");
-	}
-	#show = () => {
-		this.open = true;
-		this.#updateAnchorExpanded();
-	};
-	#hide = () => {
-		this.open = false;
-		this.#updateAnchorExpanded();
-	};
-	#updateAnchorExpanded() {
-		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
+		const tokens = (a.getAttribute("aria-describedby") ?? a.ariaDescribedBy ?? "").split(" ").filter((t) => t !== this._descriptionId);
+		const newDescribedBy = tokens.length ? tokens.join(" ") : null;
+		if (a.hasAttribute("aria-describedby")) _microsoft_fast_element.DOM.setAttribute(a, "aria-describedby", newDescribedBy);
+		else a.ariaDescribedBy = newDescribedBy;
+		a.removeAttribute("aria-keyshortcuts");
 	}
+	#show;
+	#hide;
 	#updateListeners() {
 		document.removeEventListener("keydown", this.#closeOnEscape);
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.#hide();
-	};
+	#closeOnEscape;
 	/**
 	* @internal
 	*/
@@ -91,6 +101,7 @@ var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
 	return _microsoft_fast_element.html`
 ${require_anchored.anchorSlotTemplateFactory()}
+${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
@@ -100,7 +111,13 @@ ${require_anchored.anchorSlotTemplateFactory()}
 	}}"
   exportparts="vvd-theme-alternate">
   <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		${(x) => x.text}
+		<span class="text"><slot name="_description"></slot></span>
+		<slot name="kbd-shortcut"
+			${(0, _microsoft_fast_element.slotted)({
+		property: "_kbdShortcutSlotted",
+		filter: (0, _microsoft_fast_element.elements)()
+	})}
+		></slot>
   </div>
 </${popupTag}>`;
 };

package/unbundled/definition27.js

@@ -1,12 +1,14 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
+import { t as WithKbdShortcut } from "./kbd-shortcut.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition10.js";
 import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
-import { attr, html } from "@microsoft/fast-element";
+import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
+import { DOM, attr, elements, html, slotted } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -17,10 +19,26 @@ var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :h
 * @testQuery open open true
 * @testQuery closed open false
 */
-var Tooltip = class extends Anchored(VividElement) {
+var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.open = false;
+		this._descriptionId = `vwc-tooltip-desc-${generateRandomId()}`;
+		this.#show = () => {
+			this.open = true;
+		};
+		this.#hide = () => {
+			this.open = false;
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.#hide();
+		};
+	}
+	/** @internal */
+	_kbdAriaShortcutsValueChanged() {
+		if (!this._anchorEl) return;
+		DOM.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -42,36 +60,28 @@ var Tooltip = class extends Anchored(VividElement) {
 		a.addEventListener("mouseout", this.#hide);
 		a.addEventListener("focusin", this.#show);
 		a.addEventListener("focusout", this.#hide);
-		a.setAttribute("aria-haspopup", "true");
-		a.setAttribute("aria-expanded", String(this.open));
+		const existing = a.getAttribute("aria-describedby") ?? a.ariaDescribedBy;
+		a.setAttribute("aria-describedby", existing ? `${existing} ${this._descriptionId}` : this._descriptionId);
+		DOM.setAttribute(a, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	#cleanupAnchor(a) {
 		a.removeEventListener("mouseover", this.#show);
 		a.removeEventListener("mouseout", this.#hide);
 		a.removeEventListener("focusin", this.#show);
 		a.removeEventListener("focusout", this.#hide);
-		a.removeAttribute("aria-haspopup");
-		a.removeAttribute("aria-expanded");
-	}
-	#show = () => {
-		this.open = true;
-		this.#updateAnchorExpanded();
-	};
-	#hide = () => {
-		this.open = false;
-		this.#updateAnchorExpanded();
-	};
-	#updateAnchorExpanded() {
-		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
+		const tokens = (a.getAttribute("aria-describedby") ?? a.ariaDescribedBy ?? "").split(" ").filter((t) => t !== this._descriptionId);
+		const newDescribedBy = tokens.length ? tokens.join(" ") : null;
+		if (a.hasAttribute("aria-describedby")) DOM.setAttribute(a, "aria-describedby", newDescribedBy);
+		else a.ariaDescribedBy = newDescribedBy;
+		a.removeAttribute("aria-keyshortcuts");
 	}
+	#show;
+	#hide;
 	#updateListeners() {
 		document.removeEventListener("keydown", this.#closeOnEscape);
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.#hide();
-	};
+	#closeOnEscape;
 	/**
 	* @internal
 	*/
@@ -90,6 +100,7 @@ var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
 	return html`
 ${anchorSlotTemplateFactory()}
+${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
@@ -99,7 +110,13 @@ ${anchorSlotTemplateFactory()}
 	}}"
   exportparts="vvd-theme-alternate">
   <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		${(x) => x.text}
+		<span class="text"><slot name="_description"></slot></span>
+		<slot name="kbd-shortcut"
+			${slotted({
+		property: "_kbdShortcutSlotted",
+		filter: elements()
+	})}
+		></slot>
   </div>
 </${popupTag}>`;
 };

package/unbundled/definition28.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_with_success_text = require("./with-success-text.cjs");
@@ -56,7 +56,12 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		this.disableSavedColors = false;
 		this.savedColors = [];
 		this.maxSwatches = 6;
+		this.#closeOnPointerOutside = (e) => {
+			if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+			this.open = false;
+		};
 		this.copyIconName = "copy-2-line";
+		this.#iconResetTimer = null;
 		this._copyValueToClipboard = async (value) => {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -205,7 +210,8 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this.value = textField.value;
 	}
 	/**
 	* @internal
@@ -239,10 +245,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	/**
 	* @internal
 	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
+	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
 		this.savedColors = this._loadSavedColors();
@@ -252,7 +255,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		super.disconnectedCallback();
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
-	#iconResetTimer = null;
+	#iconResetTimer;
 	/**
 	* @internal
 	*/