@vonage/vivid 5.17.0 → 5.19.0

package/time-picker/definition.js

@@ -1,4 +1,3 @@
-import "../unbundled/definition2.js";
 import { n as TimePicker } from "../unbundled/time-selection-picker.template.js";
-import { n as timePickerDefinition, t as registerTimePicker } from "../unbundled/definition72.js";
+import { n as timePickerDefinition, t as registerTimePicker } from "../unbundled/definition74.js";
 export { TimePicker as VwcTimePickerElement, registerTimePicker, timePickerDefinition };

package/time-picker/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/definition6.cjs`),r=require(`../bundled/definition8.cjs`),i=require(`../bundled/definition12.cjs`),a=require(`../bundled/picker-field.template.cjs`),o=require(`../bundled/time-selection-picker.template.cjs`);var s=e.o(`time-picker`,o.n,e=>a.t(e,o.t(e,6),{withSeparator:!0,padded:!1}),[i.n,r.t,n.t,o.s,t.n],{styles:a.r,shadowOptions:{delegatesFocus:!0}});e.s(s)();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`),n=require(`../bundled/definition6.cjs`),r=require(`../bundled/definition8.cjs`),i=require(`../bundled/definition12.cjs`),a=require(`../bundled/picker-field.template.cjs`),o=require(`../bundled/time-selection-picker.template.cjs`);var s=e.s(`time-picker`,o.n,e=>a.t(e,o.t(e,6),{withSeparator:!0,padded:!1}),[i.n,r.t,n.t,o.s,t.n],{styles:a.r,shadowOptions:{delegatesFocus:!0}});e.c(s)();

package/time-picker/index.js

@@ -1,6 +1,5 @@
-import { o as e, s as t } from "../bundled/vivid-element.js";
+import { c as e, s as t } from "../bundled/vivid-element.js";
 import { n } from "../bundled/definition.js";
-import "../bundled/definition2.js";
 import { t as r } from "../bundled/definition6.js";
 import { t as i } from "../bundled/definition8.js";
 import { n as a } from "../bundled/definition12.js";
@@ -8,7 +7,7 @@ import { r as o, t as s } from "../bundled/picker-field.template.js";
 import { n as c, s as l, t as u } from "../bundled/time-selection-picker.template.js";
 //#endregion
 //#region src/lib/time-picker/index.ts
-t(e("time-picker", c, (e) => s(e, u(e, 6), {
+e(t("time-picker", c, (e) => s(e, u(e, 6), {
 	withSeparator: !0,
 	padded: !1
 }), [

package/toggletip/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition24.cjs");
-exports.VwcToggletipElement = require_definition$1.Toggletip;
-exports.registerToggletip = require_definition$1.registerToggletip;
-exports.toggletipDefinition = require_definition$1.toggletipDefinition;
+const require_definition = require("../unbundled/definition24.cjs");
+exports.VwcToggletipElement = require_definition.Toggletip;
+exports.registerToggletip = require_definition.registerToggletip;
+exports.toggletipDefinition = require_definition.toggletipDefinition;

package/toggletip/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
 import { n as toggletipDefinition, r as Toggletip, t as registerToggletip } from "../unbundled/definition24.js";
 export { Toggletip as VwcToggletipElement, registerToggletip, toggletipDefinition };

package/toggletip/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition10.cjs`).t();
+require(`../bundled/definition10.cjs`).t();

package/toggletip/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/definition2.js";
 import { t as e } from "../bundled/definition10.js";
 //#region src/lib/toggletip/index.ts
 e();

package/tooltip/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition27.cjs");
-exports.VwcTooltipElement = require_definition$1.Tooltip;
-exports.registerTooltip = require_definition$1.registerTooltip;
-exports.tooltipDefinition = require_definition$1.tooltipDefinition;
+const require_definition = require("../unbundled/definition27.cjs");
+exports.VwcTooltipElement = require_definition.Tooltip;
+exports.registerTooltip = require_definition.registerTooltip;
+exports.tooltipDefinition = require_definition.tooltipDefinition;

package/tooltip/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
 import { n as tooltipDefinition, r as Tooltip, t as registerTooltip } from "../unbundled/definition27.js";
 export { Tooltip as VwcTooltipElement, registerTooltip, tooltipDefinition };

package/tooltip/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition9.cjs`).t();
+require(`../bundled/definition9.cjs`).t();

package/tooltip/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/definition2.js";
 import { t as e } from "../bundled/definition9.js";
 //#region src/lib/tooltip/index.ts
 e();

package/tree-item/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition73.cjs");
-exports.VwcTreeItemElement = require_definition$1.TreeItem;
-exports.registerTreeItem = require_definition$1.registerTreeItem;
-exports.treeItemDefinition = require_definition$1.treeItemDefinition;
+const require_definition = require("../unbundled/definition75.cjs");
+exports.VwcTreeItemElement = require_definition.TreeItem;
+exports.registerTreeItem = require_definition.registerTreeItem;
+exports.treeItemDefinition = require_definition.treeItemDefinition;

package/tree-item/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
-import { n as treeItemDefinition, r as TreeItem, t as registerTreeItem } from "../unbundled/definition73.js";
+import { n as treeItemDefinition, r as TreeItem, t as registerTreeItem } from "../unbundled/definition75.js";
 export { TreeItem as VwcTreeItemElement, registerTreeItem, treeItemDefinition };

package/tree-item/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition4.cjs`).t();
+require(`../bundled/definition4.cjs`).t();

package/tree-item/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/definition2.js";
 import { t as e } from "../bundled/definition4.js";
 //#region src/lib/tree-item/index.ts
 e();

package/tree-view/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition74.cjs");
-exports.VwcTreeViewElement = require_definition$1.TreeView;
-exports.registerTreeView = require_definition$1.registerTreeView;
-exports.treeViewDefinition = require_definition$1.treeViewDefinition;
+const require_definition = require("../unbundled/definition76.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/definition2.js";
-import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition74.js";
+import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition76.js";
 export { TreeView as VwcTreeViewElement, registerTreeView, treeViewDefinition };

package/tree-view/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/slotted.cjs`);require(`../bundled/definition2.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
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/slotted.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.A.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.u({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.D],d.prototype,`currentSelected`,void 0),r.t([e.D],d.prototype,`slottedTreeItems`,void 0);var f=e.f` <template
 	${t.t(`treeView`)}
 	${c.n({role:`tree`})}
 	@keydown="${(e,t)=>e.handleKeyDown(t.event)}"
@@ -10,4 +10,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 	<div class="${e=>i.t(`control`)}">
 		<slot ${n.t(`slottedTreeItems`)}></slot>
 	</div>
-</template>`,p=e.o(`tree-view`,d,f,[s.n],{styles:l});e.s(p)();
+</template>`,p=e.s(`tree-view`,d,f,[s.n],{styles:l});e.c(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 { A as e, D as t, c as n, f as r, s as i, t as a, u 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/definition2.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);
 			});
@@ -132,7 +132,7 @@ 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
+l([o({ attribute: "render-collapsed-nodes" })], T.prototype, "renderCollapsedNodes", void 0), l([t], T.prototype, "currentSelected", void 0), l([t], T.prototype, "slottedTreeItems", void 0), n(i("tree-view", T, r` <template
 	${s("treeView")}
 	${x({ role: "tree" })}
 	@keydown="${(e, t) => e.handleKeyDown(t.event)}"

package/unbundled/aria-binding-directive.cjs

@@ -0,0 +1,42 @@
+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/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.forwardedProperties) setAriaAttribute(target, key, source[key]);
+		const onAriaPropertyChange = (source, property) => {
+			if (this.options.forwardedProperties.has(property)) setAriaAttribute(target, property, source[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;
+	}
+});

package/unbundled/aria-binding-directive.js

@@ -0,0 +1,36 @@
+import { a as subscribeToAriaPropertyChanges, o as unsubscribeFromAriaPropertyChanges, r as ariaAttributeName } 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/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.forwardedProperties) setAriaAttribute(target, key, source[key]);
+		const onAriaPropertyChange = (source, property) => {
+			if (this.options.forwardedProperties.has(property)) setAriaAttribute(target, property, source[property]);
+		};
+		subscribeToAriaPropertyChanges(source, onAriaPropertyChange);
+		controller.onUnbind({ unbind: () => unsubscribeFromAriaPropertyChanges(source, onAriaPropertyChange) });
+	}
+};
+HTMLDirective.define(AriaBindingDirective);
+//#endregion
+export { AriaBindingDirective as t };

package/unbundled/calendar-picker.template.cjs

@@ -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

package/unbundled/calendar-picker.template.js

@@ -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

package/unbundled/char-count.cjs

@@ -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

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

package/unbundled/definition.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { html } from "@microsoft/fast-element";
 //#region src/lib/visually-hidden/visually-hidden.scss?inline
 var visually_hidden_default = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}";

package/unbundled/definition10.cjs

@@ -46,6 +46,10 @@ var Popup = class extends require_vivid_element.VividElement {
 		this.animationFrame = false;
 		this.strategy = "fixed";
 		this.offset = null;
+		this.#autoUpdateCallback = () => {
+			this.#lastPositionUpdate = this.updatePosition();
+			return this.#lastPositionUpdate;
+		};
 	}
 	get #middleware() {
 		let middleware = [
@@ -115,10 +119,7 @@ var Popup = class extends require_vivid_element.VividElement {
 		else this.popupEl.hidePopover();
 	}
 	#lastPositionUpdate;
-	#autoUpdateCallback = () => {
-		this.#lastPositionUpdate = this.updatePosition();
-		return this.#lastPositionUpdate;
-	};
+	#autoUpdateCallback;
 	/**
 	* Updates popup's position
 	*

package/unbundled/definition10.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { i as Button, t as buttonDefinition } from "./definition7.js";
 import { r as Elevation, t as elevationDefinition } from "./definition8.js";
@@ -45,6 +45,10 @@ var Popup = class extends VividElement {
 		this.animationFrame = false;
 		this.strategy = "fixed";
 		this.offset = null;
+		this.#autoUpdateCallback = () => {
+			this.#lastPositionUpdate = this.updatePosition();
+			return this.#lastPositionUpdate;
+		};
 	}
 	get #middleware() {
 		let middleware = [
@@ -114,10 +118,7 @@ var Popup = class extends VividElement {
 		else this.popupEl.hidePopover();
 	}
 	#lastPositionUpdate;
-	#autoUpdateCallback = () => {
-		this.#lastPositionUpdate = this.updatePosition();
-		return this.#lastPositionUpdate;
-	};
+	#autoUpdateCallback;
 	/**
 	* Updates popup's position
 	*

package/unbundled/definition11.cjs

@@ -154,12 +154,23 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this.pin = false;
 		this._focusVisible = false;
 		this._hoveringOnThumb = false;
+		this.#isNonVisibleFocus = false;
 		this._onFocusIn = () => {
 			if (!this.#isNonVisibleFocus) this._focusVisible = true;
+			this.#isNonVisibleFocus = false;
 		};
 		this._onFocusOut = () => {
 			this._focusVisible = false;
 		};
+		this.#onVisibilityChange = () => {
+			if (document.hidden && this.shadowRoot.activeElement !== null) this.#isNonVisibleFocus = true;
+		};
+		this.#onMouseOver = () => {
+			this._hoveringOnThumb = true;
+		};
+		this.#onMouseOut = () => {
+			this._hoveringOnThumb = false;
+		};
 	}
 	/**
 	* @internal
@@ -239,6 +250,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this.setupDefaultValue();
 		this.setThumbPositionForOrientation(this.direction);
 		this.#registerThumbListeners();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* @internal
@@ -246,6 +258,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	disconnectedCallback() {
 		this.setupListeners(true);
 		this.#unregisterThumbListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* Increment the value by the step
@@ -321,7 +334,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	get _isThumbPopupOpen() {
 		return this._focusVisible || this._hoveringOnThumb || this.isDragging;
 	}
-	#isNonVisibleFocus = false;
+	#isNonVisibleFocus;
 	#registerThumbListeners() {
 		this.thumb.addEventListener("mouseover", this.#onMouseOver, { passive: true });
 		this.thumb.addEventListener("mouseout", this.#onMouseOut, { passive: true });
@@ -330,12 +343,9 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this.thumb.removeEventListener("mouseover", this.#onMouseOver);
 		this.thumb.removeEventListener("mouseout", this.#onMouseOut);
 	}
-	#onMouseOver = () => {
-		this._hoveringOnThumb = true;
-	};
-	#onMouseOut = () => {
-		this._hoveringOnThumb = false;
-	};
+	#onVisibilityChange;
+	#onMouseOver;
+	#onMouseOut;
 };
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	attribute: "readonly",

package/unbundled/definition11.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as DelegatesAria } from "./delegates-aria.js";
 import { n as FormAssociated } from "./form-associated.js";
@@ -153,12 +153,23 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.pin = false;
 		this._focusVisible = false;
 		this._hoveringOnThumb = false;
+		this.#isNonVisibleFocus = false;
 		this._onFocusIn = () => {
 			if (!this.#isNonVisibleFocus) this._focusVisible = true;
+			this.#isNonVisibleFocus = false;
 		};
 		this._onFocusOut = () => {
 			this._focusVisible = false;
 		};
+		this.#onVisibilityChange = () => {
+			if (document.hidden && this.shadowRoot.activeElement !== null) this.#isNonVisibleFocus = true;
+		};
+		this.#onMouseOver = () => {
+			this._hoveringOnThumb = true;
+		};
+		this.#onMouseOut = () => {
+			this._hoveringOnThumb = false;
+		};
 	}
 	/**
 	* @internal
@@ -238,6 +249,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.setupDefaultValue();
 		this.setThumbPositionForOrientation(this.direction);
 		this.#registerThumbListeners();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* @internal
@@ -245,6 +257,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	disconnectedCallback() {
 		this.setupListeners(true);
 		this.#unregisterThumbListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* Increment the value by the step
@@ -320,7 +333,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	get _isThumbPopupOpen() {
 		return this._focusVisible || this._hoveringOnThumb || this.isDragging;
 	}
-	#isNonVisibleFocus = false;
+	#isNonVisibleFocus;
 	#registerThumbListeners() {
 		this.thumb.addEventListener("mouseover", this.#onMouseOver, { passive: true });
 		this.thumb.addEventListener("mouseout", this.#onMouseOut, { passive: true });
@@ -329,12 +342,9 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.thumb.removeEventListener("mouseover", this.#onMouseOver);
 		this.thumb.removeEventListener("mouseout", this.#onMouseOut);
 	}
-	#onMouseOver = () => {
-		this._hoveringOnThumb = true;
-	};
-	#onMouseOut = () => {
-		this._hoveringOnThumb = false;
-	};
+	#onVisibilityChange;
+	#onMouseOver;
+	#onMouseOut;
 };
 __decorate([attr({
 	attribute: "readonly",

package/unbundled/definition12.cjs

@@ -156,6 +156,7 @@ var MenuItem = class extends require_host_semantics.HostSemantics(require_affix.
 			}
 			return true;
 		};
+		this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
 		this.addEventListener("expanded-change", this.#expandedChange);
 	}
 	#collapseExpandedItem() {
@@ -164,7 +165,7 @@ var MenuItem = class extends require_host_semantics.HostSemantics(require_affix.
 	#expandedChange() {
 		if (this.submenu) this.submenu.open = this.expanded;
 	}
-	#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
+	#syntheticClickEvents;
 	/**
 	* @internal
 	*/
@@ -238,7 +239,6 @@ var MenuItemTemplate = (context) => {
 	return _microsoft_fast_element.html`
 		<template
 			${require_host_semantics.applyHostSemantics({
-		role: MenuItemRole.menuitem,
 		ariaHasPopup: (x) => x.hasSubmenu ? "menu" : void 0,
 		ariaChecked: (x) => x.controlType ? x.checked : void 0,
 		ariaDisabled: (x) => x.disabled,

package/unbundled/definition12.js

@@ -1,4 +1,4 @@
-import { n as replaces, o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, n as replaces, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
@@ -155,6 +155,7 @@ var MenuItem = class extends HostSemantics(AffixIcon(VividElement)) {
 			}
 			return true;
 		};
+		this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
 		this.addEventListener("expanded-change", this.#expandedChange);
 	}
 	#collapseExpandedItem() {
@@ -163,7 +164,7 @@ var MenuItem = class extends HostSemantics(AffixIcon(VividElement)) {
 	#expandedChange() {
 		if (this.submenu) this.submenu.open = this.expanded;
 	}
-	#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
+	#syntheticClickEvents;
 	/**
 	* @internal
 	*/
@@ -237,7 +238,6 @@ var MenuItemTemplate = (context) => {
 	return html`
 		<template
 			${applyHostSemantics({
-		role: MenuItemRole.menuitem,
 		ariaHasPopup: (x) => x.hasSubmenu ? "menu" : void 0,
 		ariaChecked: (x) => x.controlType ? x.checked : void 0,
 		ariaDisabled: (x) => x.disabled,

package/unbundled/definition13.cjs

@@ -79,6 +79,12 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 		this.autoDismiss = false;
 		this.positionStrategy = "fixed";
 		this.open = false;
+		this.#onAnchorClick = () => {
+			if (this.#triggerBehaviour === "off") return;
+			if (this.#triggerBehaviour === "legacy" && this.open) return;
+			const newValue = !this.open;
+			_microsoft_fast_element.Updates.enqueue(() => this.open = newValue);
+		};
 		this._onFocusout = (e) => {
 			const focusTarget = e.relatedTarget;
 			const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
@@ -200,12 +206,7 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 		a.ariaExpanded = null;
 		delete a.dataset.expanded;
 	}
-	#onAnchorClick = () => {
-		if (this.#triggerBehaviour === "off") return;
-		if (this.#triggerBehaviour === "legacy" && this.open) return;
-		const newValue = !this.open;
-		_microsoft_fast_element.Updates.enqueue(() => this.open = newValue);
-	};
+	#onAnchorClick;
 	/**
 	* @internal
 	*/