@vonage/vivid 5.18.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");
@@ -42,6 +42,13 @@ var Alert = class extends require_affix.AffixIcon(require_localized.Localized(re
 		this.placement = "bottom";
 		this.timeoutms = 0;
 		this.open = false;
+		this.#closeOnEscape = (e) => {
+			if (this.open && this.removable && require_dialog.handleEscapeKeyAndStopPropogation(e)) this.open = false;
+		};
+		this.#onTransitionEnd = () => {
+			if (!this.open) this.style.display = "none";
+			else this.style.display = "contents";
+		};
 	}
 	#timeoutID;
 	/**
@@ -76,13 +83,8 @@ var Alert = class extends require_affix.AffixIcon(require_localized.Localized(re
 		if (this.#timeoutID) clearTimeout(this.#timeoutID);
 		if (this.open && this.timeoutms > 0) this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
 	}
-	#closeOnEscape = (e) => {
-		if (this.open && this.removable && require_dialog.handleEscapeKeyAndStopPropogation(e)) this.open = false;
-	};
-	#onTransitionEnd = () => {
-		if (!this.open) this.style.display = "none";
-		else this.style.display = "contents";
-	};
+	#closeOnEscape;
+	#onTransitionEnd;
 };
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "dismiss-button-aria-label" })], Alert.prototype, "dismissButtonAriaLabel", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Alert.prototype, "removable", void 0);

package/unbundled/definition9.js

@@ -1,5 +1,5 @@
-import { o as defineVividComponent, s as createRegisterFunction, 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";
@@ -41,6 +41,13 @@ var Alert = class extends AffixIcon(Localized(VividElement)) {
 		this.placement = "bottom";
 		this.timeoutms = 0;
 		this.open = false;
+		this.#closeOnEscape = (e) => {
+			if (this.open && this.removable && handleEscapeKeyAndStopPropogation(e)) this.open = false;
+		};
+		this.#onTransitionEnd = () => {
+			if (!this.open) this.style.display = "none";
+			else this.style.display = "contents";
+		};
 	}
 	#timeoutID;
 	/**
@@ -75,13 +82,8 @@ var Alert = class extends AffixIcon(Localized(VividElement)) {
 		if (this.#timeoutID) clearTimeout(this.#timeoutID);
 		if (this.open && this.timeoutms > 0) this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
 	}
-	#closeOnEscape = (e) => {
-		if (this.open && this.removable && handleEscapeKeyAndStopPropogation(e)) this.open = false;
-	};
-	#onTransitionEnd = () => {
-		if (!this.open) this.style.display = "none";
-		else this.style.display = "contents";
-	};
+	#closeOnEscape;
+	#onTransitionEnd;
 };
 __decorate([attr({ attribute: "dismiss-button-aria-label" })], Alert.prototype, "dismissButtonAriaLabel", void 0);
 __decorate([attr({ mode: "boolean" })], Alert.prototype, "removable", void 0);

package/unbundled/delegates-aria.cjs

@@ -1,69 +1,15 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_attribute_binding_behaviour = require("./attribute-binding-behaviour.cjs");
-let _microsoft_fast_element = require("@microsoft/fast-element");
-//#region src/shared/aria/delegate-aria-behavior.ts
-var DelegateAriaBehavior = class {
-	constructor(target, params) {
-		this.target = null;
-		this.bindingBehaviours = [];
-		this.onSourceAriaPropertyChanged = (source, property) => {
-			if (!this.forwardedProperties.has(property) || property in this.boundProperties) return;
-			this.forwardPropertyToTarget(this.target, property, source[property]);
-		};
-		this.target = target;
-		this.boundProperties = params.boundProperties;
-		this.forwardedProperties = params.forwardedProperties;
-	}
-	bind(controller) {
-		const source = controller.source;
-		this.bindPropertiesToTarget(source, this.boundProperties, this.target);
-		this.startForwardingPropertiesToTarget(source, this.forwardedProperties, this.target);
-	}
-	bindPropertiesToTarget(source, boundProperties, target) {
-		for (const [property, binding] of Object.entries(boundProperties)) {
-			const bindingFn = binding instanceof Function ? binding : () => binding;
-			this.bindingBehaviours.push(new require_attribute_binding_behaviour.AttributeBindingBehavior(target, (0, _microsoft_fast_element.oneWay)(bindingFn), _microsoft_fast_element.Observable.isVolatileBinding(bindingFn), require_vivid_element.ariaAttributeName(property)));
-		}
-		for (const behavior of this.bindingBehaviours) behavior.bind({
-			source,
-			context: source.$fastController.context
-		});
-	}
-	startForwardingPropertiesToTarget(source, delegatedProperties, target) {
-		for (const key of delegatedProperties)
- /* v8 ignore else -- @preserve */
-		if (!(key in this.boundProperties)) this.forwardPropertyToTarget(target, key, source[key]);
-		require_vivid_element.subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
-	}
-	forwardPropertyToTarget(target, property, value) {
-		if (value === null || value === void 0 || value === false) target.removeAttribute(require_vivid_element.ariaAttributeName(property));
-		else target.setAttribute(require_vivid_element.ariaAttributeName(property), String(value));
-	}
-};
-//#endregion
+const require_aria_binding_directive = require("./aria-binding-directive.cjs");
 //#region src/shared/aria/delegates-aria.ts
-var DelegateAriaDirective = class extends _microsoft_fast_element.StatelessAttachedAttributeDirective {
-	constructor(boundProperties, forwardedProperties) {
-		super("vvd-delegate-aria");
-		this.boundProperties = boundProperties;
-		this.forwardedProperties = forwardedProperties;
-		this.targetNodeId = "";
-	}
-	bind(controller) {
-		const targetElement = controller.targets[this.targetNodeId];
-		new DelegateAriaBehavior(targetElement, {
-			boundProperties: this.boundProperties,
-			forwardedProperties: this.forwardedProperties
-		}).bind(controller);
-	}
-};
-_microsoft_fast_element.HTMLDirective.define(DelegateAriaDirective);
 /**
 * Directive to delegate ARIA properties to the target element.
 */
 function delegateAria(boundProperties = {}, options = {}) {
-	return new DelegateAriaDirective(boundProperties, new Set((options.onlySpecified ? [] : require_vivid_element.ariaMixinProperties).filter((p) => !(p in boundProperties))));
+	return new require_aria_binding_directive.AriaBindingDirective({
+		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)))
+	});
 }
 /**
 * Mixin for components that delegate ARIA properties to an element inside the
@@ -76,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,68 +1,15 @@
-import { a as subscribeToAriaPropertyChanges, i as ariaMixinProperties, r as ariaAttributeName } from "./vivid-element.js";
-import { t as AttributeBindingBehavior } from "./attribute-binding-behaviour.js";
-import { HTMLDirective, Observable, StatelessAttachedAttributeDirective, oneWay } from "@microsoft/fast-element";
-//#region src/shared/aria/delegate-aria-behavior.ts
-var DelegateAriaBehavior = class {
-	constructor(target, params) {
-		this.target = null;
-		this.bindingBehaviours = [];
-		this.onSourceAriaPropertyChanged = (source, property) => {
-			if (!this.forwardedProperties.has(property) || property in this.boundProperties) return;
-			this.forwardPropertyToTarget(this.target, property, source[property]);
-		};
-		this.target = target;
-		this.boundProperties = params.boundProperties;
-		this.forwardedProperties = params.forwardedProperties;
-	}
-	bind(controller) {
-		const source = controller.source;
-		this.bindPropertiesToTarget(source, this.boundProperties, this.target);
-		this.startForwardingPropertiesToTarget(source, this.forwardedProperties, this.target);
-	}
-	bindPropertiesToTarget(source, boundProperties, target) {
-		for (const [property, binding] of Object.entries(boundProperties)) {
-			const bindingFn = binding instanceof Function ? binding : () => binding;
-			this.bindingBehaviours.push(new AttributeBindingBehavior(target, oneWay(bindingFn), Observable.isVolatileBinding(bindingFn), ariaAttributeName(property)));
-		}
-		for (const behavior of this.bindingBehaviours) behavior.bind({
-			source,
-			context: source.$fastController.context
-		});
-	}
-	startForwardingPropertiesToTarget(source, delegatedProperties, target) {
-		for (const key of delegatedProperties)
- /* v8 ignore else -- @preserve */
-		if (!(key in this.boundProperties)) this.forwardPropertyToTarget(target, key, source[key]);
-		subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
-	}
-	forwardPropertyToTarget(target, property, value) {
-		if (value === null || value === void 0 || value === false) target.removeAttribute(ariaAttributeName(property));
-		else target.setAttribute(ariaAttributeName(property), String(value));
-	}
-};
-//#endregion
+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
-var DelegateAriaDirective = class extends StatelessAttachedAttributeDirective {
-	constructor(boundProperties, forwardedProperties) {
-		super("vvd-delegate-aria");
-		this.boundProperties = boundProperties;
-		this.forwardedProperties = forwardedProperties;
-		this.targetNodeId = "";
-	}
-	bind(controller) {
-		const targetElement = controller.targets[this.targetNodeId];
-		new DelegateAriaBehavior(targetElement, {
-			boundProperties: this.boundProperties,
-			forwardedProperties: this.forwardedProperties
-		}).bind(controller);
-	}
-};
-HTMLDirective.define(DelegateAriaDirective);
 /**
 * Directive to delegate ARIA properties to the target element.
 */
 function delegateAria(boundProperties = {}, options = {}) {
-	return new DelegateAriaDirective(boundProperties, new Set((options.onlySpecified ? [] : ariaMixinProperties).filter((p) => !(p in boundProperties))));
+	return new AriaBindingDirective({
+		boundProperties,
+		forwardedValueProperties: new Set((options.onlySpecified ? [] : ariaValueProperties).filter((p) => !(p in boundProperties))),
+		forwardedIdrefsProperties: new Set((options.onlySpecified ? [] : ariaIdrefsProperties).filter((p) => !(p in boundProperties)))
+	});
 }
 /**
 * Mixin for components that delegate ARIA properties to an element inside the
@@ -75,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/divider.cjs

@@ -12,7 +12,13 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 * @public
 */
 var DividerRole = {
+	/**
+	* The divider semantically separates content
+	*/
 	separator: "separator",
+	/**
+	* The divider has no semantic value and is for visual presentation only.
+	*/
 	presentation: "presentation"
 };
 /**

package/unbundled/divider.js

@@ -11,7 +11,13 @@ import { Orientation } from "@microsoft/fast-web-utilities";
 * @public
 */
 var DividerRole = {
+	/**
+	* The divider semantically separates content
+	*/
 	separator: "separator",
+	/**
+	* The divider has no semantic value and is for visual presentation only.
+	*/
 	presentation: "presentation"
 };
 /**

package/unbundled/form-element.cjs

@@ -16,6 +16,10 @@ var FormElement = (Base) => {
 			this.errorValidationMessage = "";
 			this.forceErrorDisplay = false;
 			this.hasBeenTouched = false;
+			this.#handleInvalidEvent = () => {
+				this.forceErrorDisplay = true;
+				this.validate();
+			};
 			this.addEventListener("blur", () => {
 				this.hasBeenTouched = true;
 				this.forceErrorDisplay = false;
@@ -35,10 +39,7 @@ var FormElement = (Base) => {
 			super.connectedCallback();
 			this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
 		}
-		#handleInvalidEvent = () => {
-			this.forceErrorDisplay = true;
-			this.validate();
-		};
+		#handleInvalidEvent;
 		/**
 		* @internal
 		*/
@@ -59,7 +60,8 @@ var FormElement = (Base) => {
 		*/
 		validate() {
 			super.validate();
-			this.errorValidationMessage = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue ? this.validationMessage : "";
+			const shouldShowValidationError = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;
+			this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
 		}
 	}
 	require_decorate.__decorate([_microsoft_fast_element.attr], FormElementElement.prototype, "label", void 0);

package/unbundled/form-element.js

@@ -15,6 +15,10 @@ var FormElement = (Base) => {
 			this.errorValidationMessage = "";
 			this.forceErrorDisplay = false;
 			this.hasBeenTouched = false;
+			this.#handleInvalidEvent = () => {
+				this.forceErrorDisplay = true;
+				this.validate();
+			};
 			this.addEventListener("blur", () => {
 				this.hasBeenTouched = true;
 				this.forceErrorDisplay = false;
@@ -34,10 +38,7 @@ var FormElement = (Base) => {
 			super.connectedCallback();
 			this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
 		}
-		#handleInvalidEvent = () => {
-			this.forceErrorDisplay = true;
-			this.validate();
-		};
+		#handleInvalidEvent;
 		/**
 		* @internal
 		*/
@@ -58,7 +59,8 @@ var FormElement = (Base) => {
 		*/
 		validate() {
 			super.validate();
-			this.errorValidationMessage = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue ? this.validationMessage : "";
+			const shouldShowValidationError = this.forceErrorDisplay || this.hasBeenTouched && this.dirtyValue;
+			this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
 		}
 	}
 	__decorate([attr], FormElementElement.prototype, "label", void 0);

package/unbundled/host-semantics.cjs

@@ -1,50 +1,16 @@
-require("./chunk.cjs");
-const require_vivid_element = require("./vivid-element.cjs");
-const require_attribute_binding_behaviour = require("./attribute-binding-behaviour.cjs");
-let _microsoft_fast_element = require("@microsoft/fast-element");
-//#region src/shared/aria/host-semantics-behavior.ts
-var HostSemanticsBehavior = class {
-	constructor(target, params) {
-		this.target = null;
-		this.bindingBehaviours = [];
-		this.target = target;
-		this.boundProperties = params.boundProperties;
-	}
-	bind(controller) {
-		const source = controller.source;
-		if (this.target !== source) throw new Error("Target element must be the same as the source element");
-		this.bindPropertiesToTarget(source, this.boundProperties, this.target);
-	}
-	bindPropertiesToTarget(source, boundProperties, target) {
-		for (const [property, binding] of Object.entries(boundProperties)) {
-			const bindingFn = binding instanceof Function ? binding : (x) => x[property] ?? binding;
-			this.bindingBehaviours.push(new require_attribute_binding_behaviour.AttributeBindingBehavior(target, (0, _microsoft_fast_element.oneWay)(bindingFn), true, require_vivid_element.ariaAttributeName(property)));
-		}
-		for (const behavior of this.bindingBehaviours) behavior.bind({
-			source,
-			context: source.$fastController.context
-		});
-	}
-};
-//#endregion
+const require_aria_binding_directive = require("./aria-binding-directive.cjs");
 //#region src/shared/aria/host-semantics.ts
-var HostSemanticsDirective = class extends _microsoft_fast_element.StatelessAttachedAttributeDirective {
-	constructor(boundProperties) {
-		super("vvd-host-semantics");
-		this.boundProperties = boundProperties;
-		this.targetNodeId = "";
-	}
-	bind(controller) {
-		const targetElement = controller.targets[this.targetNodeId];
-		new HostSemanticsBehavior(targetElement, {
-			boundProperties: this.boundProperties,
-			forwardedProperties: new Set(require_vivid_element.ariaMixinProperties.filter((p) => !(p in this.boundProperties)))
-		}).bind(controller);
-	}
-};
-_microsoft_fast_element.HTMLDirective.define(HostSemanticsDirective);
+/**
+* Directive to set ARIA properties to the host element.
+* This is not technically necessary but allows us to change aria handling for host semantics later.
+*/
 function applyHostSemantics(boundProperties = {}) {
-	return new HostSemanticsDirective(boundProperties);
+	return new require_aria_binding_directive.AriaBindingDirective({
+		boundProperties,
+		forwardedValueProperties: /* @__PURE__ */ new Set(),
+		forwardedIdrefsProperties: /* @__PURE__ */ new Set(),
+		requireHost: true
+	});
 }
 /**
 * Mixin for components that place semantics on the host element.

package/unbundled/host-semantics.js

@@ -1,49 +1,16 @@
-import { i as ariaMixinProperties, r as ariaAttributeName } from "./vivid-element.js";
-import { t as AttributeBindingBehavior } from "./attribute-binding-behaviour.js";
-import { HTMLDirective, StatelessAttachedAttributeDirective, oneWay } from "@microsoft/fast-element";
-//#region src/shared/aria/host-semantics-behavior.ts
-var HostSemanticsBehavior = class {
-	constructor(target, params) {
-		this.target = null;
-		this.bindingBehaviours = [];
-		this.target = target;
-		this.boundProperties = params.boundProperties;
-	}
-	bind(controller) {
-		const source = controller.source;
-		if (this.target !== source) throw new Error("Target element must be the same as the source element");
-		this.bindPropertiesToTarget(source, this.boundProperties, this.target);
-	}
-	bindPropertiesToTarget(source, boundProperties, target) {
-		for (const [property, binding] of Object.entries(boundProperties)) {
-			const bindingFn = binding instanceof Function ? binding : (x) => x[property] ?? binding;
-			this.bindingBehaviours.push(new AttributeBindingBehavior(target, oneWay(bindingFn), true, ariaAttributeName(property)));
-		}
-		for (const behavior of this.bindingBehaviours) behavior.bind({
-			source,
-			context: source.$fastController.context
-		});
-	}
-};
-//#endregion
+import { t as AriaBindingDirective } from "./aria-binding-directive.js";
 //#region src/shared/aria/host-semantics.ts
-var HostSemanticsDirective = class extends StatelessAttachedAttributeDirective {
-	constructor(boundProperties) {
-		super("vvd-host-semantics");
-		this.boundProperties = boundProperties;
-		this.targetNodeId = "";
-	}
-	bind(controller) {
-		const targetElement = controller.targets[this.targetNodeId];
-		new HostSemanticsBehavior(targetElement, {
-			boundProperties: this.boundProperties,
-			forwardedProperties: new Set(ariaMixinProperties.filter((p) => !(p in this.boundProperties)))
-		}).bind(controller);
-	}
-};
-HTMLDirective.define(HostSemanticsDirective);
+/**
+* Directive to set ARIA properties to the host element.
+* This is not technically necessary but allows us to change aria handling for host semantics later.
+*/
 function applyHostSemantics(boundProperties = {}) {
-	return new HostSemanticsDirective(boundProperties);
+	return new AriaBindingDirective({
+		boundProperties,
+		forwardedValueProperties: /* @__PURE__ */ new Set(),
+		forwardedIdrefsProperties: /* @__PURE__ */ new Set(),
+		requireHost: true
+	});
 }
 /**
 * Mixin for components that place semantics on the host element.

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;
-	}
-});