@vonage/vivid 5.18.0 → 5.20.0

package/tree-view/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
-const require_definition = require("../unbundled/definition76.cjs");
+const require_definition = require("../unbundled/definition79.cjs");
 exports.VwcTreeViewElement = require_definition.TreeView;
 exports.registerTreeView = require_definition.registerTreeView;
 exports.treeViewDefinition = require_definition.treeViewDefinition;

package/tree-view/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
-import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition76.js";
+import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition79.js";
 export { TreeView as VwcTreeViewElement, registerTreeView, treeViewDefinition };

package/tree-view/index.cjs

@@ -1,5 +1,5 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/slotted.cjs`);require(`../bundled/numberConverter.cjs`);const r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/definition4.cjs`),c=require(`../bundled/host-semantics.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof s.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends c.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&s.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&s.r.focusItem(t[0]);return;case`End`:t.length&&s.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof s.r&&t.parentElement instanceof s.r&&s.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof s.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{this.currentSelected=this.treeView.querySelector(`[selected]`),(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{s.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>s.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.O.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&s.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>s.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.l({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.T],d.prototype,`currentSelected`,void 0),r.t([e.T],d.prototype,`slottedTreeItems`,void 0);var f=e.d` <template
-	${t.t(`treeView`)}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/definition4.cjs`),c=require(`../bundled/host-semantics.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof s.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends c.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&s.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&s.r.focusItem(t[0]);return;case`End`:t.length&&s.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof s.r&&t.parentElement instanceof s.r&&s.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof s.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{let e=this.treeView.querySelector(`[selected]`);this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{s.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>s.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.M.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&s.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>s.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.m({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.A],d.prototype,`currentSelected`,void 0),r.t([e.A],d.prototype,`slottedTreeItems`,void 0);var f=e.p` <template
+	${n.t(`treeView`)}
 	${c.n({role:`tree`})}
 	@keydown="${(e,t)=>e.handleKeyDown(t.event)}"
 	@focusin="${(e,t)=>e.handleFocus(t.event)}"
@@ -8,6 +8,6 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 	@selected-change="${(e,t)=>e.handleSelectedChange(t.event)}"
 >
 	<div class="${e=>i.t(`control`)}">
-		<slot ${n.t(`slottedTreeItems`)}></slot>
+		<slot ${t.t(`slottedTreeItems`)}></slot>
 	</div>
-</template>`,p=e.o(`tree-view`,d,f,[s.n],{styles:l});e.s(p)();
+</template>`,p=e.u(`tree-view`,d,f,[s.n],{styles:l});e.d(p)();

package/tree-view/index.js

@@ -1,7 +1,6 @@
-import { O as e, T as t, d as n, l as r, o as i, s as a, t as o } from "../bundled/vivid-element.js";
-import { t as s } from "../bundled/ref.js";
-import { t as c } from "../bundled/slotted.js";
-import "../bundled/numberConverter.js";
+import { A as e, M as t, d as n, m as r, p as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { t as s } from "../bundled/slotted.js";
+import { t as c } from "../bundled/ref.js";
 import { t as l } from "../bundled/decorate.js";
 import { t as u } from "../bundled/class-names.js";
 import { t as d } from "../bundled/dom.js";
@@ -20,7 +19,7 @@ function w(e, t) {
 		return !1;
 	}) : [];
 }
-var T = class extends S(o) {
+var T = class extends S(a) {
 	constructor(...e) {
 		super(...e), this.currentFocused = null, this.handleFocus = (e) => {
 			if (this.slottedTreeItems.length > 0) {
@@ -88,7 +87,8 @@ var T = class extends S(o) {
 				return;
 			}
 		}, this.setItems = () => {
-			this.currentSelected = this.treeView.querySelector("[selected]"), (this.currentFocused === null || !this.contains(this.currentFocused)) && (this.currentFocused = this.getValidFocusableItem()), this.nested = this.checkForNestedItems(), this.getVisibleNodes().forEach((e) => {
+			let e = this.treeView.querySelector("[selected]");
+			this.currentSelected = e, (this.currentFocused === null || !this.contains(this.currentFocused)) && (this.currentFocused = this.getValidFocusableItem()), this.nested = this.checkForNestedItems(), this.getVisibleNodes().forEach((e) => {
 				/* v8 ignore else -- @preserve */
 				v(e) && (e.nested = this.nested);
 			});
@@ -98,7 +98,7 @@ var T = class extends S(o) {
 		this.$fastController.isConnected && this.setItems();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.setAttribute("tabindex", "0"), e.enqueue(() => {
+		super.connectedCallback(), this.setAttribute("tabindex", "0"), t.enqueue(() => {
 			this.setItems();
 		});
 	}
@@ -132,8 +132,8 @@ var T = class extends S(o) {
 };
 //#endregion
 //#region src/lib/tree-view/index.ts
-l([r({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNodes", void 0), l([t], T.prototype, "currentSelected", void 0), l([t], T.prototype, "slottedTreeItems", void 0), a(i("tree-view", T, n` <template
-	${s("treeView")}
+l([r({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNodes", void 0), l([e], T.prototype, "currentSelected", void 0), l([e], T.prototype, "slottedTreeItems", void 0), n(o("tree-view", T, i` <template
+	${c("treeView")}
 	${x({ role: "tree" })}
 	@keydown="${(e, t) => e.handleKeyDown(t.event)}"
 	@focusin="${(e, t) => e.handleFocus(t.event)}"
@@ -142,7 +142,7 @@ l([r({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNod
 	@selected-change="${(e, t) => e.handleSelectedChange(t.event)}"
 >
 	<div class="${(e) => u("control")}">
-		<slot ${c("slottedTreeItems")}></slot>
+		<slot ${s("slottedTreeItems")}></slot>
 	</div>
 </template>`, [y], { styles: C }))();
 //#endregion

package/unbundled/affix.cjs

@@ -1,5 +1,5 @@
 require("./chunk.cjs");
-const require_definition = require("./definition2.cjs");
+const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/affix.ts

package/unbundled/affix.js

@@ -1,4 +1,4 @@
-import { r as Icon } from "./definition2.js";
+import { r as Icon } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { attr, html, observable, slotted } from "@microsoft/fast-element";
 //#region src/shared/patterns/affix.ts

package/unbundled/aria-binding-directive.cjs

@@ -0,0 +1,152 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/shared/aria/idrefs-controller.ts
+var parseIdrefs = (idrefs) => {
+	if (!idrefs.trim()) return [];
+	return idrefs.trim().split(/\s+/);
+};
+var idrefsControllers = /* @__PURE__ */ new WeakMap();
+/** Manages a single IDREF property for an element. Lazily created only when the property is used. */
+var IdrefsController = class IdrefsController {
+	static resolvedElements(host, property) {
+		return idrefsControllers.get(host)?.get(property)?.getResolvedElements() ?? null;
+	}
+	static for(host, property) {
+		let controllersByProp = idrefsControllers.get(host);
+		if (!controllersByProp) {
+			controllersByProp = /* @__PURE__ */ new Map();
+			idrefsControllers.set(host, controllersByProp);
+		}
+		let controller = controllersByProp.get(property);
+		if (!controller) {
+			controller = new IdrefsController(host, property);
+			controllersByProp.set(property, controller);
+		}
+		return controller;
+	}
+	constructor(host, propertyName) {
+		this.host = host;
+		this.propertyName = propertyName;
+		host._addController(this);
+	}
+	#isConnected = false;
+	hostConnected() {
+		this.#isConnected = true;
+		this.#updateResolution();
+	}
+	hostDisconnected() {
+		this.#isConnected = false;
+		this.#updateResolution();
+	}
+	getAttribute() {
+		return this.host[`_${this.propertyName}`];
+	}
+	setAttribute(value) {
+		this.host[`_${this.propertyName}`] = value;
+		require_vivid_element.handleAriaPropertyChange(this.host, this.propertyName);
+		this.#updateResolution();
+	}
+	#resolvedElements = null;
+	#setResolvedElements(elements) {
+		this.#resolvedElements = elements;
+		require_vivid_element.publishAriaPropertyChange(this.host, this.propertyName);
+	}
+	getResolvedElements() {
+		if (!this.host.isConnected && this.#resolvedElements) return [];
+		return this.#resolvedElements;
+	}
+	/** When elements property is set on the host */
+	setElements(elements) {
+		this.setAttribute(elements !== null ? "" : null);
+		this.#setResolvedElements(elements);
+	}
+	#updateResolution() {
+		this.#cleanupObserver();
+		if (!(this.#isConnected && this.host.isConnected)) return;
+		const attrValue = this.getAttribute();
+		if (attrValue) {
+			const idList = parseIdrefs(attrValue);
+			if (idList.length === 0) {
+				this.#setResolvedElements([]);
+				return;
+			}
+			const resolved = this.#resolveIds(idList);
+			this.#setResolvedElements(resolved);
+			if (resolved.length < idList.length) this.#observeForElements(idList);
+		}
+	}
+	#resolveId(id) {
+		return this.host.getRootNode().getElementById(id);
+	}
+	#resolveIds(idList) {
+		return idList.map((id) => this.#resolveId(id)).filter((el) => el !== null);
+	}
+	#observer;
+	#observeForElements(idList) {
+		this.#observer = new MutationObserver(() => {
+			const resolved = this.#resolveIds(idList);
+			this.#setResolvedElements(resolved);
+			if (resolved.length === idList.length) this.#cleanupObserver();
+		});
+		this.#observer.observe(this.host.getRootNode(), {
+			childList: true,
+			subtree: true
+		});
+	}
+	#cleanupObserver() {
+		this.#observer?.disconnect();
+		this.#observer = void 0;
+	}
+};
+//#endregion
+//#region src/shared/aria/aria-binding-directive.ts
+var setAriaAttribute = (target, property, value) => _microsoft_fast_element.DOM.setAttribute(target, require_vivid_element.ariaAttributeName(property), value === false ? null : value);
+/**
+* Directive for both delegate and host semantics.
+*/
+var AriaBindingDirective = class extends _microsoft_fast_element.StatelessAttachedAttributeDirective {
+	get propertyBindingBehaviours() {
+		if (!this._propertyBindingBehaviours) this._propertyBindingBehaviours = Object.entries(this.options.boundProperties).map(([property, binding]) => {
+			const attributeBindingDirective = new _microsoft_fast_element.HTMLBindingDirective((0, _microsoft_fast_element.oneWay)(binding instanceof Function ? binding : () => binding));
+			attributeBindingDirective.id = (0, _microsoft_fast_web_utilities.uniqueId)();
+			attributeBindingDirective.targetNodeId = this.targetNodeId;
+			attributeBindingDirective.policy = this.policy;
+			_microsoft_fast_element.HTMLDirective.assignAspect(attributeBindingDirective, require_vivid_element.ariaAttributeName(property));
+			return attributeBindingDirective.createBehavior();
+		});
+		return this._propertyBindingBehaviours;
+	}
+	bind(controller) {
+		const source = controller.source;
+		const target = controller.targets[this.targetNodeId];
+		if (this.options.requireHost && target !== source) throw new Error("Target element must be the same as the source element");
+		for (const behaviour of this.propertyBindingBehaviours) behaviour.bind(controller);
+		for (const key of this.options.forwardedValueProperties) setAriaAttribute(target, key, source[key]);
+		const setIdrefElementsOnTarget = (property) => {
+			target[`${property}Elements`] = IdrefsController.resolvedElements(source, property);
+		};
+		for (const key of this.options.forwardedIdrefsProperties) setIdrefElementsOnTarget(key);
+		const onAriaPropertyChange = (source, property) => {
+			if (this.options.forwardedValueProperties.has(property)) setAriaAttribute(target, property, source[property]);
+			if (this.options.forwardedIdrefsProperties.has(property)) setIdrefElementsOnTarget(property);
+		};
+		require_vivid_element.subscribeToAriaPropertyChanges(source, onAriaPropertyChange);
+		controller.onUnbind({ unbind: () => require_vivid_element.unsubscribeFromAriaPropertyChanges(source, onAriaPropertyChange) });
+	}
+};
+_microsoft_fast_element.HTMLDirective.define(AriaBindingDirective);
+//#endregion
+Object.defineProperty(exports, "AriaBindingDirective", {
+	enumerable: true,
+	get: function() {
+		return AriaBindingDirective;
+	}
+});
+Object.defineProperty(exports, "IdrefsController", {
+	enumerable: true,
+	get: function() {
+		return IdrefsController;
+	}
+});

package/unbundled/aria-binding-directive.js

@@ -0,0 +1,140 @@
+import { c as subscribeToAriaPropertyChanges, l as unsubscribeFromAriaPropertyChanges, o as handleAriaPropertyChange, r as ariaAttributeName, s as publishAriaPropertyChange } from "./vivid-element.js";
+import { DOM, HTMLBindingDirective, HTMLDirective, StatelessAttachedAttributeDirective, oneWay } from "@microsoft/fast-element";
+import { uniqueId } from "@microsoft/fast-web-utilities";
+//#region src/shared/aria/idrefs-controller.ts
+var parseIdrefs = (idrefs) => {
+	if (!idrefs.trim()) return [];
+	return idrefs.trim().split(/\s+/);
+};
+var idrefsControllers = /* @__PURE__ */ new WeakMap();
+/** Manages a single IDREF property for an element. Lazily created only when the property is used. */
+var IdrefsController = class IdrefsController {
+	static resolvedElements(host, property) {
+		return idrefsControllers.get(host)?.get(property)?.getResolvedElements() ?? null;
+	}
+	static for(host, property) {
+		let controllersByProp = idrefsControllers.get(host);
+		if (!controllersByProp) {
+			controllersByProp = /* @__PURE__ */ new Map();
+			idrefsControllers.set(host, controllersByProp);
+		}
+		let controller = controllersByProp.get(property);
+		if (!controller) {
+			controller = new IdrefsController(host, property);
+			controllersByProp.set(property, controller);
+		}
+		return controller;
+	}
+	constructor(host, propertyName) {
+		this.host = host;
+		this.propertyName = propertyName;
+		host._addController(this);
+	}
+	#isConnected = false;
+	hostConnected() {
+		this.#isConnected = true;
+		this.#updateResolution();
+	}
+	hostDisconnected() {
+		this.#isConnected = false;
+		this.#updateResolution();
+	}
+	getAttribute() {
+		return this.host[`_${this.propertyName}`];
+	}
+	setAttribute(value) {
+		this.host[`_${this.propertyName}`] = value;
+		handleAriaPropertyChange(this.host, this.propertyName);
+		this.#updateResolution();
+	}
+	#resolvedElements = null;
+	#setResolvedElements(elements) {
+		this.#resolvedElements = elements;
+		publishAriaPropertyChange(this.host, this.propertyName);
+	}
+	getResolvedElements() {
+		if (!this.host.isConnected && this.#resolvedElements) return [];
+		return this.#resolvedElements;
+	}
+	/** When elements property is set on the host */
+	setElements(elements) {
+		this.setAttribute(elements !== null ? "" : null);
+		this.#setResolvedElements(elements);
+	}
+	#updateResolution() {
+		this.#cleanupObserver();
+		if (!(this.#isConnected && this.host.isConnected)) return;
+		const attrValue = this.getAttribute();
+		if (attrValue) {
+			const idList = parseIdrefs(attrValue);
+			if (idList.length === 0) {
+				this.#setResolvedElements([]);
+				return;
+			}
+			const resolved = this.#resolveIds(idList);
+			this.#setResolvedElements(resolved);
+			if (resolved.length < idList.length) this.#observeForElements(idList);
+		}
+	}
+	#resolveId(id) {
+		return this.host.getRootNode().getElementById(id);
+	}
+	#resolveIds(idList) {
+		return idList.map((id) => this.#resolveId(id)).filter((el) => el !== null);
+	}
+	#observer;
+	#observeForElements(idList) {
+		this.#observer = new MutationObserver(() => {
+			const resolved = this.#resolveIds(idList);
+			this.#setResolvedElements(resolved);
+			if (resolved.length === idList.length) this.#cleanupObserver();
+		});
+		this.#observer.observe(this.host.getRootNode(), {
+			childList: true,
+			subtree: true
+		});
+	}
+	#cleanupObserver() {
+		this.#observer?.disconnect();
+		this.#observer = void 0;
+	}
+};
+//#endregion
+//#region src/shared/aria/aria-binding-directive.ts
+var setAriaAttribute = (target, property, value) => DOM.setAttribute(target, ariaAttributeName(property), value === false ? null : value);
+/**
+* Directive for both delegate and host semantics.
+*/
+var AriaBindingDirective = class extends StatelessAttachedAttributeDirective {
+	get propertyBindingBehaviours() {
+		if (!this._propertyBindingBehaviours) this._propertyBindingBehaviours = Object.entries(this.options.boundProperties).map(([property, binding]) => {
+			const attributeBindingDirective = new HTMLBindingDirective(oneWay(binding instanceof Function ? binding : () => binding));
+			attributeBindingDirective.id = uniqueId();
+			attributeBindingDirective.targetNodeId = this.targetNodeId;
+			attributeBindingDirective.policy = this.policy;
+			HTMLDirective.assignAspect(attributeBindingDirective, ariaAttributeName(property));
+			return attributeBindingDirective.createBehavior();
+		});
+		return this._propertyBindingBehaviours;
+	}
+	bind(controller) {
+		const source = controller.source;
+		const target = controller.targets[this.targetNodeId];
+		if (this.options.requireHost && target !== source) throw new Error("Target element must be the same as the source element");
+		for (const behaviour of this.propertyBindingBehaviours) behaviour.bind(controller);
+		for (const key of this.options.forwardedValueProperties) setAriaAttribute(target, key, source[key]);
+		const setIdrefElementsOnTarget = (property) => {
+			target[`${property}Elements`] = IdrefsController.resolvedElements(source, property);
+		};
+		for (const key of this.options.forwardedIdrefsProperties) setIdrefElementsOnTarget(key);
+		const onAriaPropertyChange = (source, property) => {
+			if (this.options.forwardedValueProperties.has(property)) setAriaAttribute(target, property, source[property]);
+			if (this.options.forwardedIdrefsProperties.has(property)) setIdrefElementsOnTarget(property);
+		};
+		subscribeToAriaPropertyChanges(source, onAriaPropertyChange);
+		controller.onUnbind({ unbind: () => unsubscribeFromAriaPropertyChanges(source, onAriaPropertyChange) });
+	}
+};
+HTMLDirective.define(AriaBindingDirective);
+//#endregion
+export { IdrefsController as n, AriaBindingDirective as t };

package/unbundled/calendar-picker.template.cjs

@@ -1,6 +1,6 @@
 require("./chunk.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_definition = require("./definition6.cjs");
 const require_definition$1 = require("./definition7.cjs");
 const require_divider = require("./divider.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -29,7 +29,7 @@ function addLeadingZeros(number, targetLength) {
 * > 1 mean year = (365+1/4-1/100+1/400) days = 365.2425 days
 */
 var daysInYear = 365.2425;
-Math.pow(10, 8) * 24 * 60 * 60 * 1e3;
+-(Math.pow(10, 8) * 24 * 60 * 60 * 1e3);
 /**
 * @constant
 * @name millisecondsInWeek
@@ -4978,7 +4978,6 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
 	const dividerTag = context.tagFor(require_divider.Divider);
-	const visuallyHiddenTag = context.tagFor(require_definition.VisuallyHidden);
 	return _microsoft_fast_element.html`
 		<${dividerTag}
 			class='months-separator'
@@ -4996,7 +4995,13 @@ function renderMonthPickerGrid(context) {
 									<button
 										class="${(x, c) => (0, _microsoft_fast_web_utilities.classNames)("month", "button", ["current", areMonthsEqual(x.month, c.parentContext.parentContext.parent._currentMonth)], ["selected", areMonthsEqual(x.month, c.parentContext.parentContext.parent._selectedMonth)])}"
 										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(x.month, c.parentContext.parentContext.parent._tabbableMonth) ? 1 : -1}"
-										aria-label="${(x) => x.monthName}"
+										aria-label="${(x, c) => {
+		const picker = c.parentContext.parentContext.parent;
+		const announcements = [x.monthName];
+		if (areMonthsEqual(x.month, picker._currentMonth)) announcements.push(picker.locale.calendarPicker.currentLabel);
+		if (areMonthsEqual(x.month, picker._selectedMonth)) announcements.push(picker.locale.calendarPicker.selectedLabel);
+		return announcements.join(" ");
+	}}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(x.month)}"
 										@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(x.month)}"
@@ -5004,13 +5009,6 @@ function renderMonthPickerGrid(context) {
 										@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(x.month, c.event)}"
 									>
 										${(x) => x.label}
-										<${visuallyHiddenTag}>${(x, c) => {
-		const picker = c.parentContext.parentContext.parent;
-		const announcements = [];
-		if (areMonthsEqual(x.month, picker._currentMonth)) announcements.push(picker.locale.calendarPicker.currentLabel);
-		if (areMonthsEqual(x.month, picker._selectedMonth)) announcements.push(picker.locale.calendarPicker.selectedLabel);
-		return announcements.join(" ");
-	}}</${visuallyHiddenTag}>
 									</button>
 								</span>
 							`)}

package/unbundled/calendar-picker.template.js

@@ -1,5 +1,5 @@
-import { r as VisuallyHidden } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { r as VisuallyHidden } from "./definition6.js";
 import { i as Button } from "./definition7.js";
 import { t as Divider } from "./divider.js";
 import { Updates, attr, html, observable, repeat, volatile, when } from "@microsoft/fast-element";
@@ -28,7 +28,7 @@ function addLeadingZeros(number, targetLength) {
 * > 1 mean year = (365+1/4-1/100+1/400) days = 365.2425 days
 */
 var daysInYear = 365.2425;
-Math.pow(10, 8) * 24 * 60 * 60 * 1e3;
+-(Math.pow(10, 8) * 24 * 60 * 60 * 1e3);
 /**
 * @constant
 * @name millisecondsInWeek
@@ -4977,7 +4977,6 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
 	const dividerTag = context.tagFor(Divider);
-	const visuallyHiddenTag = context.tagFor(VisuallyHidden);
 	return html`
 		<${dividerTag}
 			class='months-separator'
@@ -4995,7 +4994,13 @@ function renderMonthPickerGrid(context) {
 									<button
 										class="${(x, c) => classNames("month", "button", ["current", areMonthsEqual(x.month, c.parentContext.parentContext.parent._currentMonth)], ["selected", areMonthsEqual(x.month, c.parentContext.parentContext.parent._selectedMonth)])}"
 										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(x.month, c.parentContext.parentContext.parent._tabbableMonth) ? 1 : -1}"
-										aria-label="${(x) => x.monthName}"
+										aria-label="${(x, c) => {
+		const picker = c.parentContext.parentContext.parent;
+		const announcements = [x.monthName];
+		if (areMonthsEqual(x.month, picker._currentMonth)) announcements.push(picker.locale.calendarPicker.currentLabel);
+		if (areMonthsEqual(x.month, picker._selectedMonth)) announcements.push(picker.locale.calendarPicker.selectedLabel);
+		return announcements.join(" ");
+	}}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(x.month)}"
 										@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(x.month)}"
@@ -5003,13 +5008,6 @@ function renderMonthPickerGrid(context) {
 										@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(x.month, c.event)}"
 									>
 										${(x) => x.label}
-										<${visuallyHiddenTag}>${(x, c) => {
-		const picker = c.parentContext.parentContext.parent;
-		const announcements = [];
-		if (areMonthsEqual(x.month, picker._currentMonth)) announcements.push(picker.locale.calendarPicker.currentLabel);
-		if (areMonthsEqual(x.month, picker._selectedMonth)) announcements.push(picker.locale.calendarPicker.selectedLabel);
-		return announcements.join(" ");
-	}}</${visuallyHiddenTag}>
 									</button>
 								</span>
 							`)}

package/unbundled/char-count.cjs

@@ -1,7 +1,7 @@
 require("./chunk.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
+const require_definition = require("./definition6.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/char-count/char-count.ts
 /**
@@ -12,6 +12,7 @@ var WithCharCount = (Base) => {
 		constructor(..._args) {
 			super(..._args);
 			this.charCount = false;
+			this.#charCountTimeout = null;
 			this._charCountDescribedBy = "char-count-description";
 			this._renderCharCountRemaining = () => {
 				if (!this.charCount || !this.maxlength) return;
@@ -44,7 +45,7 @@ var WithCharCount = (Base) => {
 		* used to debounce screen reader announcements
 		* @internal
 		*/
-		#charCountTimeout = null;
+		#charCountTimeout;
 	}
 	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 		attribute: "char-count",

package/unbundled/char-count.js

@@ -1,6 +1,6 @@
-import { r as VisuallyHidden } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
+import { r as VisuallyHidden } from "./definition6.js";
 import { attr, html, ref } from "@microsoft/fast-element";
 //#region src/shared/patterns/char-count/char-count.ts
 /**
@@ -11,6 +11,7 @@ var WithCharCount = (Base) => {
 		constructor(..._args) {
 			super(..._args);
 			this.charCount = false;
+			this.#charCountTimeout = null;
 			this._charCountDescribedBy = "char-count-description";
 			this._renderCharCountRemaining = () => {
 				if (!this.charCount || !this.maxlength) return;
@@ -43,7 +44,7 @@ var WithCharCount = (Base) => {
 		* used to debounce screen reader announcements
 		* @internal
 		*/
-		#charCountTimeout = null;
+		#charCountTimeout;
 	}
 	__decorate([attr({
 		attribute: "char-count",

package/unbundled/decorate.cjs

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.120.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/unbundled/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.120.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);