@vonage/vivid 5.19.0 → 5.20.0

package/unbundled/definition9.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_affix = require("./affix.cjs");
 const require_localized = require("./localized.cjs");

package/unbundled/definition9.js

@@ -1,5 +1,5 @@
-import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.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, i as IconWrapper, r as IconAriaHidden, t as AffixIcon } from "./affix.js";
 import { t as Localized } from "./localized.js";

package/unbundled/delegates-aria.cjs

@@ -7,7 +7,8 @@ const require_aria_binding_directive = require("./aria-binding-directive.cjs");
 function delegateAria(boundProperties = {}, options = {}) {
 	return new require_aria_binding_directive.AriaBindingDirective({
 		boundProperties,
-		forwardedProperties: new Set((options.onlySpecified ? [] : require_vivid_element.ariaMixinProperties).filter((p) => !(p in boundProperties)))
+		forwardedValueProperties: new Set((options.onlySpecified ? [] : require_vivid_element.ariaValueProperties).filter((p) => !(p in boundProperties))),
+		forwardedIdrefsProperties: new Set((options.onlySpecified ? [] : require_vivid_element.ariaIdrefsProperties).filter((p) => !(p in boundProperties)))
 	});
 }
 /**
@@ -21,6 +22,19 @@ var DelegatesAria = (Base) => {
 			this._vividAriaBehaviour = "delegate";
 		}
 	}
+	for (const ariaProperty of require_vivid_element.ariaIdrefsProperties) {
+		DelegatesAriaElement.prototype[`${ariaProperty}Changed`] = function() {
+			require_aria_binding_directive.IdrefsController.for(this, ariaProperty).setAttribute(this[ariaProperty]);
+		};
+		Object.defineProperty(DelegatesAriaElement.prototype, `${ariaProperty}Elements`, {
+			get() {
+				return require_aria_binding_directive.IdrefsController.resolvedElements(this, ariaProperty);
+			},
+			set(value) {
+				require_aria_binding_directive.IdrefsController.for(this, ariaProperty).setElements(value);
+			}
+		});
+	}
 	return DelegatesAriaElement;
 };
 //#endregion

package/unbundled/delegates-aria.js

@@ -1,5 +1,5 @@
-import { i as ariaMixinProperties } from "./vivid-element.js";
-import { t as AriaBindingDirective } from "./aria-binding-directive.js";
+import { a as ariaValueProperties, i as ariaIdrefsProperties } from "./vivid-element.js";
+import { n as IdrefsController, t as AriaBindingDirective } from "./aria-binding-directive.js";
 //#region src/shared/aria/delegates-aria.ts
 /**
 * Directive to delegate ARIA properties to the target element.
@@ -7,7 +7,8 @@ import { t as AriaBindingDirective } from "./aria-binding-directive.js";
 function delegateAria(boundProperties = {}, options = {}) {
 	return new AriaBindingDirective({
 		boundProperties,
-		forwardedProperties: new Set((options.onlySpecified ? [] : ariaMixinProperties).filter((p) => !(p in boundProperties)))
+		forwardedValueProperties: new Set((options.onlySpecified ? [] : ariaValueProperties).filter((p) => !(p in boundProperties))),
+		forwardedIdrefsProperties: new Set((options.onlySpecified ? [] : ariaIdrefsProperties).filter((p) => !(p in boundProperties)))
 	});
 }
 /**
@@ -21,6 +22,19 @@ var DelegatesAria = (Base) => {
 			this._vividAriaBehaviour = "delegate";
 		}
 	}
+	for (const ariaProperty of ariaIdrefsProperties) {
+		DelegatesAriaElement.prototype[`${ariaProperty}Changed`] = function() {
+			IdrefsController.for(this, ariaProperty).setAttribute(this[ariaProperty]);
+		};
+		Object.defineProperty(DelegatesAriaElement.prototype, `${ariaProperty}Elements`, {
+			get() {
+				return IdrefsController.resolvedElements(this, ariaProperty);
+			},
+			set(value) {
+				IdrefsController.for(this, ariaProperty).setElements(value);
+			}
+		});
+	}
 	return DelegatesAriaElement;
 };
 //#endregion

package/unbundled/host-semantics.cjs

@@ -7,7 +7,8 @@ const require_aria_binding_directive = require("./aria-binding-directive.cjs");
 function applyHostSemantics(boundProperties = {}) {
 	return new require_aria_binding_directive.AriaBindingDirective({
 		boundProperties,
-		forwardedProperties: /* @__PURE__ */ new Set(),
+		forwardedValueProperties: /* @__PURE__ */ new Set(),
+		forwardedIdrefsProperties: /* @__PURE__ */ new Set(),
 		requireHost: true
 	});
 }

package/unbundled/host-semantics.js

@@ -7,7 +7,8 @@ import { t as AriaBindingDirective } from "./aria-binding-directive.js";
 function applyHostSemantics(boundProperties = {}) {
 	return new AriaBindingDirective({
 		boundProperties,
-		forwardedProperties: /* @__PURE__ */ new Set(),
+		forwardedValueProperties: /* @__PURE__ */ new Set(),
+		forwardedIdrefsProperties: /* @__PURE__ */ new Set(),
 		requireHost: true
 	});
 }

package/unbundled/kbd-shortcut.cjs

@@ -0,0 +1,26 @@
+require("./chunk.cjs");
+const require_decorate = require("./decorate.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/shared/patterns/kbd-shortcut.ts
+var WithKbdShortcut = (Base) => {
+	/**
+	* @slot kbd-shortcut - Used to display a keyboard shortcut.
+	*/
+	class WithKbdShortcutElement extends Base {
+		/** @internal */
+		_kbdShortcutSlottedChanged() {
+			const shortcut = this._kbdShortcutSlotted.find((el) => typeof el.getKeyshortcutsValue === "function");
+			this._kbdAriaShortcutsValue = shortcut?.getKeyshortcutsValue() ?? void 0;
+		}
+	}
+	require_decorate.__decorate([_microsoft_fast_element.observable], WithKbdShortcutElement.prototype, "_kbdShortcutSlotted", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.observable], WithKbdShortcutElement.prototype, "_kbdAriaShortcutsValue", void 0);
+	return WithKbdShortcutElement;
+};
+//#endregion
+Object.defineProperty(exports, "WithKbdShortcut", {
+	enumerable: true,
+	get: function() {
+		return WithKbdShortcut;
+	}
+});

package/unbundled/kbd-shortcut.js

@@ -0,0 +1,20 @@
+import { t as __decorate } from "./decorate.js";
+import { observable } from "@microsoft/fast-element";
+//#region src/shared/patterns/kbd-shortcut.ts
+var WithKbdShortcut = (Base) => {
+	/**
+	* @slot kbd-shortcut - Used to display a keyboard shortcut.
+	*/
+	class WithKbdShortcutElement extends Base {
+		/** @internal */
+		_kbdShortcutSlottedChanged() {
+			const shortcut = this._kbdShortcutSlotted.find((el) => typeof el.getKeyshortcutsValue === "function");
+			this._kbdAriaShortcutsValue = shortcut?.getKeyshortcutsValue() ?? void 0;
+		}
+	}
+	__decorate([observable], WithKbdShortcutElement.prototype, "_kbdShortcutSlotted", void 0);
+	__decorate([observable], WithKbdShortcutElement.prototype, "_kbdAriaShortcutsValue", void 0);
+	return WithKbdShortcutElement;
+};
+//#endregion
+export { WithKbdShortcut as t };

package/unbundled/mixins.cjs

@@ -1,12 +1,12 @@
 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_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.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");
-let uuid = require("uuid");
 //#region src/shared/feedback/feedback-message.scss?inline
 var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
 //#endregion
@@ -22,7 +22,7 @@ var FeedbackMessage = class extends require_localized.Localized(require_vivid_el
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], FeedbackMessage.prototype, "type", void 0);
 function iconTemplate(context, icon, textI18nKey) {
-	const iconTag = context.tagFor(require_definition$1.Icon);
+	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
 }
 function iconForType(context) {
@@ -46,65 +46,7 @@ var FeedbackMessageTemplate = (ctx) => {
 			${(0, _microsoft_fast_element.when)((x) => shouldAnnounce(x.type), message)}
 		</span>`;
 };
-var feedbackMessageDefinition = require_vivid_element.defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [require_definition$1.iconDefinition, require_definition.visuallyHiddenDefinition], { styles: feedback_message_default });
-//#endregion
-//#region src/shared/templating/render-in-light-dom.ts
-var RenderInLightDomBehaviour = class {
-	constructor(directive) {
-		this.source = null;
-		this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
-	}
-	bind(controller) {
-		this.source = controller.source;
-		this.context = controller.context;
-		this.controller = controller;
-		if (!this.insertionPoint) {
-			this.insertionPoint = document.createComment("");
-			this.source.appendChild(this.insertionPoint);
-		}
-		this.templateBindingObserver.bind(controller);
-		this.handleChange(this.source, this.templateBindingObserver);
-	}
-	/**
-	* Handles change of the template itself.
-	*/
-	handleChange(source, args) {
-		/* v8 ignore else -- @preserve */
-		if (args === this.templateBindingObserver) {
-			const template = this.templateBindingObserver.bind(this.controller);
-			this.instantiateTemplate(template);
-		}
-	}
-	instantiateTemplate(template) {
-		if (this.view) this.view.dispose();
-		this.view = template.create();
-		this.view.bind(this.source, this.context);
-		this.view.insertBefore(this.insertionPoint);
-	}
-};
-var RenderInLightDomDirective = class {
-	constructor(templateBinding) {
-		this.targetNodeId = "";
-		this.templateBinding = templateBinding;
-		this.dataBinding = templateBinding;
-	}
-	createHTML(add) {
-		return _microsoft_fast_element.Markup.comment(add(this));
-	}
-	createBehavior() {
-		return new RenderInLightDomBehaviour(this);
-	}
-};
-_microsoft_fast_element.HTMLDirective.define(RenderInLightDomDirective);
-/**
-* Directive to render a template into the light DOM of the host element.
-*/
-function renderInLightDOM(templateOrTemplateBinding) {
-	return new RenderInLightDomDirective((0, _microsoft_fast_element.normalizeBinding)(templateOrTemplateBinding));
-}
-//#endregion
-//#region src/shared/utils/randomId.ts
-var generateRandomId = () => (0, uuid.v4)();
+var feedbackMessageDefinition = require_vivid_element.defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [require_definition.iconDefinition, require_definition$1.visuallyHiddenDefinition], { styles: feedback_message_default });
 //#endregion
 //#region src/shared/feedback/mixins.ts
 /**
@@ -177,8 +119,8 @@ var WithFeedback = (Base) => {
 * This is needed if the control is in light DOM so that the describedby relation works.
 */
 var WithLightDOMFeedback = (Base) => {
-	const randomFeedbackId = () => `vvd-feedback-${generateRandomId()}`;
-	const randomSlottedContentId = () => `vvd-slotted-feedback-${generateRandomId()}`;
+	const randomFeedbackId = () => `vvd-feedback-${require_randomId.generateRandomId()}`;
+	const randomSlottedContentId = () => `vvd-slotted-feedback-${require_randomId.generateRandomId()}`;
 	class ElementWithLightDOMFeedback extends WithFeedback(Base) {
 		constructor(..._args) {
 			super(..._args);
@@ -207,7 +149,7 @@ var WithLightDOMFeedback = (Base) => {
 			const feedbackTag = ctx.tagFor(FeedbackMessage);
 			return _microsoft_fast_element.html`
 				<slot name="_feedback"></slot>
-				${renderInLightDOM(_microsoft_fast_element.html`<${feedbackTag}
+				${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<${feedbackTag}
 					slot="_feedback"
 					id="${(x) => x._feedbackId}"
 					:type="${(x) => x._internalFeedback().type}"
@@ -245,15 +187,3 @@ Object.defineProperty(exports, "feedbackMessageDefinition", {
 		return feedbackMessageDefinition;
 	}
 });
-Object.defineProperty(exports, "generateRandomId", {
-	enumerable: true,
-	get: function() {
-		return generateRandomId;
-	}
-});
-Object.defineProperty(exports, "renderInLightDOM", {
-	enumerable: true,
-	get: function() {
-		return renderInLightDOM;
-	}
-});

package/unbundled/mixins.js

@@ -1,11 +1,11 @@
-import { s as defineVividComponent, t as VividElement } from "./vivid-element.js";
-import { n as visuallyHiddenDefinition } from "./definition.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { 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 { t as Localized } from "./localized.js";
-import { HTMLDirective, Markup, attr, html, normalizeBinding, observable, slotted, when } from "@microsoft/fast-element";
+import { n as visuallyHiddenDefinition } from "./definition6.js";
+import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
+import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-import { v4 } from "uuid";
 //#region src/shared/feedback/feedback-message.scss?inline
 var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
 //#endregion
@@ -47,64 +47,6 @@ var FeedbackMessageTemplate = (ctx) => {
 };
 var feedbackMessageDefinition = defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: feedback_message_default });
 //#endregion
-//#region src/shared/templating/render-in-light-dom.ts
-var RenderInLightDomBehaviour = class {
-	constructor(directive) {
-		this.source = null;
-		this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
-	}
-	bind(controller) {
-		this.source = controller.source;
-		this.context = controller.context;
-		this.controller = controller;
-		if (!this.insertionPoint) {
-			this.insertionPoint = document.createComment("");
-			this.source.appendChild(this.insertionPoint);
-		}
-		this.templateBindingObserver.bind(controller);
-		this.handleChange(this.source, this.templateBindingObserver);
-	}
-	/**
-	* Handles change of the template itself.
-	*/
-	handleChange(source, args) {
-		/* v8 ignore else -- @preserve */
-		if (args === this.templateBindingObserver) {
-			const template = this.templateBindingObserver.bind(this.controller);
-			this.instantiateTemplate(template);
-		}
-	}
-	instantiateTemplate(template) {
-		if (this.view) this.view.dispose();
-		this.view = template.create();
-		this.view.bind(this.source, this.context);
-		this.view.insertBefore(this.insertionPoint);
-	}
-};
-var RenderInLightDomDirective = class {
-	constructor(templateBinding) {
-		this.targetNodeId = "";
-		this.templateBinding = templateBinding;
-		this.dataBinding = templateBinding;
-	}
-	createHTML(add) {
-		return Markup.comment(add(this));
-	}
-	createBehavior() {
-		return new RenderInLightDomBehaviour(this);
-	}
-};
-HTMLDirective.define(RenderInLightDomDirective);
-/**
-* Directive to render a template into the light DOM of the host element.
-*/
-function renderInLightDOM(templateOrTemplateBinding) {
-	return new RenderInLightDomDirective(normalizeBinding(templateOrTemplateBinding));
-}
-//#endregion
-//#region src/shared/utils/randomId.ts
-var generateRandomId = () => v4();
-//#endregion
 //#region src/shared/feedback/mixins.ts
 /**
 * Mixin for elements that display a feedback message.
@@ -226,4 +168,4 @@ var WithLightDOMFeedback = (Base) => {
 	return ElementWithLightDOMFeedback;
 };
 //#endregion
-export { feedbackMessageDefinition as a, renderInLightDOM as i, WithLightDOMFeedback as n, generateRandomId as r, WithFeedback as t };
+export { WithLightDOMFeedback as n, feedbackMessageDefinition as r, WithFeedback as t };

package/unbundled/platform.cjs

@@ -0,0 +1,17 @@
+//#region src/shared/utils/platform.ts
+/**
+* Returns true if the current platform is Apple (macOS, iOS, iPadOS).
+*/
+function isApplePlatform() {
+	/* v8 ignore next 3 -- @preserve */
+	if (typeof navigator === "undefined") return false;
+	const ua = navigator.userAgent.toLowerCase();
+	return ua.includes("mac") || ua.includes("iphone") || ua.includes("ipad");
+}
+//#endregion
+Object.defineProperty(exports, "isApplePlatform", {
+	enumerable: true,
+	get: function() {
+		return isApplePlatform;
+	}
+});

package/unbundled/platform.js

@@ -0,0 +1,12 @@
+//#region src/shared/utils/platform.ts
+/**
+* Returns true if the current platform is Apple (macOS, iOS, iPadOS).
+*/
+function isApplePlatform() {
+	/* v8 ignore next 3 -- @preserve */
+	if (typeof navigator === "undefined") return false;
+	const ua = navigator.userAgent.toLowerCase();
+	return ua.includes("mac") || ua.includes("iphone") || ua.includes("ipad");
+}
+//#endregion
+export { isApplePlatform as t };

package/unbundled/randomId.cjs

@@ -0,0 +1,47 @@
+require("./chunk.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let uuid = require("uuid");
+//#region src/shared/templating/render-in-light-dom.ts
+var RenderInLightDomDirective = class {
+	constructor(template) {
+		this.template = template;
+	}
+	createHTML(add) {
+		return _microsoft_fast_element.Markup.comment(add(this));
+	}
+	createBehavior() {
+		return this;
+	}
+	bind(controller) {
+		const view = this.template.create();
+		view.bind(controller.source, controller.context);
+		view.appendTo(controller.source);
+		controller.onUnbind({ unbind: () => {
+			if (view.firstChild.parentNode && view.lastChild.parentNode) view.dispose();
+			else view.unbind();
+		} });
+	}
+};
+_microsoft_fast_element.HTMLDirective.define(RenderInLightDomDirective);
+/**
+* Directive to render a template into the light DOM of the host element.
+*/
+function renderInLightDOM(template) {
+	return new RenderInLightDomDirective(template);
+}
+//#endregion
+//#region src/shared/utils/randomId.ts
+var generateRandomId = () => (0, uuid.v4)();
+//#endregion
+Object.defineProperty(exports, "generateRandomId", {
+	enumerable: true,
+	get: function() {
+		return generateRandomId;
+	}
+});
+Object.defineProperty(exports, "renderInLightDOM", {
+	enumerable: true,
+	get: function() {
+		return renderInLightDOM;
+	}
+});

package/unbundled/randomId.js

@@ -0,0 +1,35 @@
+import { HTMLDirective, Markup } from "@microsoft/fast-element";
+import { v4 } from "uuid";
+//#region src/shared/templating/render-in-light-dom.ts
+var RenderInLightDomDirective = class {
+	constructor(template) {
+		this.template = template;
+	}
+	createHTML(add) {
+		return Markup.comment(add(this));
+	}
+	createBehavior() {
+		return this;
+	}
+	bind(controller) {
+		const view = this.template.create();
+		view.bind(controller.source, controller.context);
+		view.appendTo(controller.source);
+		controller.onUnbind({ unbind: () => {
+			if (view.firstChild.parentNode && view.lastChild.parentNode) view.dispose();
+			else view.unbind();
+		} });
+	}
+};
+HTMLDirective.define(RenderInLightDomDirective);
+/**
+* Directive to render a template into the light DOM of the host element.
+*/
+function renderInLightDOM(template) {
+	return new RenderInLightDomDirective(template);
+}
+//#endregion
+//#region src/shared/utils/randomId.ts
+var generateRandomId = () => v4();
+//#endregion
+export { renderInLightDOM as n, generateRandomId as t };

package/unbundled/time-selection-picker.template.js

@@ -1,4 +1,4 @@
-import { c as createRegisterFunction, s as defineVividComponent, 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 { n as ignoreEventInFocusTraps } from "./trapped-focus.js";

package/unbundled/vivid-element.cjs

@@ -104,10 +104,9 @@ var handleElementConnectedCallback = (element) => {
 //#endregion
 //#region src/shared/aria/aria-mixin.ts
 /**
-* Properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
-* IDREF properties are omitted.
+* Value properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
 */
-var ariaMixinProperties = [
+var ariaValueProperties = [
 	"role",
 	"ariaAtomic",
 	"ariaAutoComplete",
@@ -151,6 +150,27 @@ var ariaMixinProperties = [
 	"ariaValueText",
 	"ariaRelevant"
 ];
+/**
+* Single-element IDREF properties of the ARIAMixin
+* Not yet supported.
+*/
+/**
+* Multi-element IDREF properties of the ARIAMixin.
+*/
+var ariaIdrefsProperties = [
+	"ariaControls",
+	"ariaDescribedBy",
+	"ariaDetails",
+	"ariaErrorMessage",
+	"ariaFlowTo",
+	"ariaLabelledBy",
+	"ariaOwns"
+];
+var ariaProperties = [...ariaValueProperties, ...ariaIdrefsProperties];
+/**
+* Derives the HTML attribute name from an ARIA property name.
+* e.g. `ariaLabel` → `aria-label`
+*/
 var ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
 /**
 * Mixin for all components. Declares all ARIA attributes.
@@ -160,14 +180,14 @@ var AriaMixin = (Base) => {
 		constructor(...args) {
 			super(...args);
 			this._vividAriaBehaviour = "default";
-			for (const ariaProperty of ariaMixinProperties) this[`_${ariaProperty}`] = null;
+			for (const ariaProperty of ariaProperties) this[`_${ariaProperty}`] = null;
 		}
 		connectedCallback() {
 			super.connectedCallback();
 			handleElementConnectedCallback(this);
 		}
 	}
-	for (const ariaProperty of ariaMixinProperties) {
+	for (const ariaProperty of ariaProperties) {
 		(0, _microsoft_fast_element.attr)({
 			attribute: ariaAttributeName(ariaProperty),
 			mode: "fromView"
@@ -180,6 +200,41 @@ var AriaMixin = (Base) => {
 	return AriaMixinElement;
 };
 //#endregion
+//#region src/shared/framework/reactive-controller.ts
+/**
+* Mixin implementing ReactiveControllerHost for custom elements.
+*/
+var ReactiveControllerHostSupport = (Base) => {
+	class ReactiveControllerHostSupportElement extends Base {
+		#controllers = /* @__PURE__ */ new Set();
+		/**
+		* Adds a controller to the host, which sets up the controller's lifecycle
+		* methods to be called with the host's lifecycle.
+		* @internal
+		*/
+		_addController(controller) {
+			this.#controllers.add(controller);
+			if (this.$fastController.isConnected) controller.hostConnected?.();
+		}
+		/**
+		* Removes a controller from the host.
+		* @internal
+		*/
+		_removeController(controller) {
+			this.#controllers.delete(controller);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			for (const controller of this.#controllers) controller.hostConnected?.();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			for (const controller of this.#controllers) controller.hostDisconnected?.();
+		}
+	}
+	return ReactiveControllerHostSupportElement;
+};
+//#endregion
 //#region src/shared/deprecation/replaced-props.ts
 function createMetadataLocator() {
 	const metadataMap = /* @__PURE__ */ new WeakMap();
@@ -242,9 +297,9 @@ var ReplacedPropHandling = (Base) => {
 * @testAction focus focus #locator
 * @testAction blur blur #locator
 */
-var VividElement = class extends AriaMixin(ReplacedPropHandling(_microsoft_fast_element.FASTElement)) {
+var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.19.0";
+		this.VIVID_VERSION = "5.20.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,
@@ -269,10 +324,16 @@ Object.defineProperty(exports, "ariaAttributeName", {
 		return ariaAttributeName;
 	}
 });
-Object.defineProperty(exports, "ariaMixinProperties", {
+Object.defineProperty(exports, "ariaIdrefsProperties", {
+	enumerable: true,
+	get: function() {
+		return ariaIdrefsProperties;
+	}
+});
+Object.defineProperty(exports, "ariaValueProperties", {
 	enumerable: true,
 	get: function() {
-		return ariaMixinProperties;
+		return ariaValueProperties;
 	}
 });
 Object.defineProperty(exports, "createRegisterFunction", {
@@ -287,6 +348,18 @@ Object.defineProperty(exports, "defineVividComponent", {
 		return defineVividComponent;
 	}
 });
+Object.defineProperty(exports, "handleAriaPropertyChange", {
+	enumerable: true,
+	get: function() {
+		return handleAriaPropertyChange;
+	}
+});
+Object.defineProperty(exports, "publishAriaPropertyChange", {
+	enumerable: true,
+	get: function() {
+		return publishAriaPropertyChange;
+	}
+});
 Object.defineProperty(exports, "replaces", {
 	enumerable: true,
 	get: function() {