@vonage/vivid 5.21.0 → 5.22.0

package/tree-view/index.cjs

@@ -1,4 +1,4 @@
-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
+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)}},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)}}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)}"

package/tree-view/index.js

@@ -84,7 +84,6 @@ var T = class extends S(a) {
 				let t = e.target;
 				/* v8 ignore else -- @preserve */
 				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]");
@@ -107,7 +106,6 @@ var T = class extends S(a) {
 			if (!(e.target instanceof Element) || !v(e.target)) return !0;
 			let t = e.target;
 			t.disabled || (t.selected = !t.selected);
-			return;
 		}
 	}
 	focusNextNode(e, t) {

package/unbundled/affix.cjs

@@ -59,14 +59,14 @@ var affixIconTemplateFactory = (context) => {
 				${(0, _microsoft_fast_element.slotted)("iconSlottedContent")}
 			></slot>`;
 		if (!icon && slottedState) return null;
-		const iconTemplate = _microsoft_fast_element.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+		const iconTemplate = _microsoft_fast_element.html`<${iconTag} :name="${() => icon}" :label="${() => announcement.label || void 0}"></${iconTag}>`;
 		const wrapperTag = _microsoft_fast_element.html.partial(slottedState ? "span" : "slot");
 		return _microsoft_fast_element.html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
-					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
-					:role="${() => announcement?.announceOnUpdate ? "status" : void 0}"
-					:ariaLive="${() => announcement?.announceOnUpdate ? "polite" : void 0}"
+					aria-hidden="${() => announcement.label ? false : ariaHidden}"
+					:role="${() => announcement.announceOnUpdate ? "status" : void 0}"
+					:ariaLive="${() => announcement.announceOnUpdate ? "polite" : void 0}"
 			  >
 					${iconTemplate}
 			  </${wrapperTag}>`;

package/unbundled/affix.js

@@ -58,14 +58,14 @@ var affixIconTemplateFactory = (context) => {
 				${slotted("iconSlottedContent")}
 			></slot>`;
 		if (!icon && slottedState) return null;
-		const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+		const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement.label || void 0}"></${iconTag}>`;
 		const wrapperTag = html.partial(slottedState ? "span" : "slot");
 		return html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
-					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
-					:role="${() => announcement?.announceOnUpdate ? "status" : void 0}"
-					:ariaLive="${() => announcement?.announceOnUpdate ? "polite" : void 0}"
+					aria-hidden="${() => announcement.label ? false : ariaHidden}"
+					:role="${() => announcement.announceOnUpdate ? "status" : void 0}"
+					:ariaLive="${() => announcement.announceOnUpdate ? "polite" : void 0}"
 			  >
 					${iconTemplate}
 			  </${wrapperTag}>`;

package/unbundled/base-color-picker.cjs

@@ -211,15 +211,15 @@ var BaseColorPicker = (Base) => {
 		*/
 		_renderColorSwatch(iconTag, tooltipTag) {
 			return _microsoft_fast_element.html`
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.label ?? x.value}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.label ?? x.value}"
 					exportparts="vvd-theme-alternate">
 					<button
 						slot="anchor"
 						class="swatch ${(x, c) => (0, _microsoft_fast_web_utilities.classNames)(c.parent.value === x.value ? "selected" : "", c.parent._applyContrastClass(x.value) ? "contrast" : "")}"
 						role="gridcell"
 						style="--swatch-color: ${(x) => x.value};"
-						tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
+						tabindex="${(_x, c) => c.index === 0 ? "0" : "-1"}"
 						aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(x.value, x.label, c.parent.value === x.value)}"
 						@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
 						@keydown="${(x, c) => c.parent._handleCellKeydown(c.event, x.value, c.index)}"

package/unbundled/base-color-picker.js

@@ -210,15 +210,15 @@ var BaseColorPicker = (Base) => {
 		*/
 		_renderColorSwatch(iconTag, tooltipTag) {
 			return html`
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.label ?? x.value}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.label ?? x.value}"
 					exportparts="vvd-theme-alternate">
 					<button
 						slot="anchor"
 						class="swatch ${(x, c) => classNames(c.parent.value === x.value ? "selected" : "", c.parent._applyContrastClass(x.value) ? "contrast" : "")}"
 						role="gridcell"
 						style="--swatch-color: ${(x) => x.value};"
-						tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
+						tabindex="${(_x, c) => c.index === 0 ? "0" : "-1"}"
 						aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(x.value, x.label, c.parent.value === x.value)}"
 						@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
 						@keydown="${(x, c) => c.parent._handleCellKeydown(c.event, x.value, c.index)}"

package/unbundled/button.cjs

@@ -34,7 +34,7 @@ var VividFoundationButton = class extends require_delegates_aria.DelegatesAria(r
 		this.handleUnsupportedDelegatesFocus = () => {
 			/* v8 ignore else -- @preserve */
 			if (this.$fastController.definition.shadowOptions) {
-				if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
+				if (window.ShadowRoot && !Object.prototype.hasOwnProperty.call(window.ShadowRoot.prototype, "delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
 					value: () => {
 						this.control.focus();
 					},
@@ -66,10 +66,10 @@ var VividFoundationButton = class extends require_delegates_aria.DelegatesAria(r
 	typeChanged(previous, next) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.type = this.type;
-		next === "submit" && this.addEventListener("click", this.handleSubmission);
-		previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-		next === "reset" && this.addEventListener("click", this.handleFormReset);
-		previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+		if (next === "submit") this.addEventListener("click", this.handleSubmission);
+		if (previous === "submit") this.removeEventListener("click", this.handleSubmission);
+		if (next === "reset") this.addEventListener("click", this.handleFormReset);
+		if (previous === "reset") this.removeEventListener("click", this.handleFormReset);
 	}
 	/** {@inheritDoc (FormAssociated:interface).validate} */
 	validate() {

package/unbundled/button.js

@@ -33,7 +33,7 @@ var VividFoundationButton = class extends DelegatesAria(FormAssociated(VividElem
 		this.handleUnsupportedDelegatesFocus = () => {
 			/* v8 ignore else -- @preserve */
 			if (this.$fastController.definition.shadowOptions) {
-				if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
+				if (window.ShadowRoot && !Object.prototype.hasOwnProperty.call(window.ShadowRoot.prototype, "delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
 					value: () => {
 						this.control.focus();
 					},
@@ -65,10 +65,10 @@ var VividFoundationButton = class extends DelegatesAria(FormAssociated(VividElem
 	typeChanged(previous, next) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.type = this.type;
-		next === "submit" && this.addEventListener("click", this.handleSubmission);
-		previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-		next === "reset" && this.addEventListener("click", this.handleFormReset);
-		previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+		if (next === "submit") this.addEventListener("click", this.handleSubmission);
+		if (previous === "submit") this.removeEventListener("click", this.handleSubmission);
+		if (next === "reset") this.addEventListener("click", this.handleFormReset);
+		if (previous === "reset") this.removeEventListener("click", this.handleFormReset);
 	}
 	/** {@inheritDoc (FormAssociated:interface).validate} */
 	validate() {

package/unbundled/definition10.cjs

@@ -44,6 +44,7 @@ var Popup = class extends require_vivid_element.VividElement {
 		this.alternate = false;
 		this.placementStrategy = PlacementStrategy.Flip;
 		this.animationFrame = false;
+		this.shiftCrossAxis = false;
 		this.strategy = "fixed";
 		this.offset = null;
 		this.#autoUpdateCallback = () => {
@@ -55,14 +56,14 @@ var Popup = class extends require_vivid_element.VividElement {
 		let middleware = [
 			(0, _floating_ui_dom.inline)(),
 			placementStrategyMiddlewares[this.placementStrategy],
+			(0, _floating_ui_dom.shift)({ crossAxis: this.shiftCrossAxis }),
 			(0, _floating_ui_dom.hide)(),
 			(0, _floating_ui_dom.size)({ apply({ availableWidth, availableHeight, elements }) {
 				Object.assign(elements.floating.style, {
 					maxWidth: `${availableWidth}px`,
 					maxHeight: `${availableHeight}px`
 				});
-			} }),
-			(0, _floating_ui_dom.shift)()
+			} })
 		];
 		let offsetValue = this.offset ?? 0;
 		if (this.arrow) {
@@ -90,6 +91,12 @@ var Popup = class extends require_vivid_element.VividElement {
 	/**
 	* @internal
 	*/
+	shiftCrossAxisChanged() {
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
 	anchorChanged() {
 		this.#updateAutoUpdate();
 	}
@@ -112,7 +119,7 @@ var Popup = class extends require_vivid_element.VividElement {
 		this.#cleanup?.();
 		if (!this.isConnected) return;
 		if (this.open && this.controlEl) this.controlEl.classList.add("open");
-		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.anchorEl, this.popupEl, this.#autoUpdateCallback, { animationFrame: this.animationFrame });
+		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.anchorEl, this.popupEl, () => void this.#autoUpdateCallback(), { animationFrame: this.animationFrame });
 	}
 	#togglePopover() {
 		if (this.popupEl && this.strategy === "fixed") if (this.open) this.popupEl.showPopover();
@@ -182,6 +189,10 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
 	attribute: "animation-frame"
 })], Popup.prototype, "animationFrame", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "shift-cross-axis"
+})], Popup.prototype, "shiftCrossAxis", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Popup.prototype, "strategy", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	attribute: "offset",
@@ -193,7 +204,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Popup.prototyp
 var popup_default = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 //#endregion
 //#region src/lib/popup/popup.template.ts
-var getClasses = ({ open, dismissible, alternate }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", Boolean(open)], ["dismissible", Boolean(dismissible)], ["alternate", Boolean(alternate)]);
+var getClasses = ({ open, dismissible, alternate }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", open], ["dismissible", dismissible], ["alternate", alternate]);
 function handlePopover(x) {
 	return x.strategy && x.strategy === "fixed" ? "manual" : null;
 }

package/unbundled/definition10.js

@@ -43,6 +43,7 @@ var Popup = class extends VividElement {
 		this.alternate = false;
 		this.placementStrategy = PlacementStrategy.Flip;
 		this.animationFrame = false;
+		this.shiftCrossAxis = false;
 		this.strategy = "fixed";
 		this.offset = null;
 		this.#autoUpdateCallback = () => {
@@ -54,14 +55,14 @@ var Popup = class extends VividElement {
 		let middleware = [
 			inline(),
 			placementStrategyMiddlewares[this.placementStrategy],
+			shift({ crossAxis: this.shiftCrossAxis }),
 			hide(),
 			size({ apply({ availableWidth, availableHeight, elements }) {
 				Object.assign(elements.floating.style, {
 					maxWidth: `${availableWidth}px`,
 					maxHeight: `${availableHeight}px`
 				});
-			} }),
-			shift()
+			} })
 		];
 		let offsetValue = this.offset ?? 0;
 		if (this.arrow) {
@@ -89,6 +90,12 @@ var Popup = class extends VividElement {
 	/**
 	* @internal
 	*/
+	shiftCrossAxisChanged() {
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
 	anchorChanged() {
 		this.#updateAutoUpdate();
 	}
@@ -111,7 +118,7 @@ var Popup = class extends VividElement {
 		this.#cleanup?.();
 		if (!this.isConnected) return;
 		if (this.open && this.controlEl) this.controlEl.classList.add("open");
-		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, this.#autoUpdateCallback, { animationFrame: this.animationFrame });
+		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => void this.#autoUpdateCallback(), { animationFrame: this.animationFrame });
 	}
 	#togglePopover() {
 		if (this.popupEl && this.strategy === "fixed") if (this.open) this.popupEl.showPopover();
@@ -181,6 +188,10 @@ __decorate([attr({
 	mode: "boolean",
 	attribute: "animation-frame"
 })], Popup.prototype, "animationFrame", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "shift-cross-axis"
+})], Popup.prototype, "shiftCrossAxis", void 0);
 __decorate([attr({ mode: "fromView" })], Popup.prototype, "strategy", void 0);
 __decorate([attr({
 	attribute: "offset",
@@ -192,7 +203,7 @@ __decorate([observable], Popup.prototype, "anchor", void 0);
 var popup_default = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 //#endregion
 //#region src/lib/popup/popup.template.ts
-var getClasses = ({ open, dismissible, alternate }) => classNames("control", ["open", Boolean(open)], ["dismissible", Boolean(dismissible)], ["alternate", Boolean(alternate)]);
+var getClasses = ({ open, dismissible, alternate }) => classNames("control", ["open", open], ["dismissible", dismissible], ["alternate", alternate]);
 function handlePopover(x) {
 	return x.strategy && x.strategy === "fixed" ? "manual" : null;
 }

package/unbundled/definition11.cjs

@@ -266,7 +266,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	* @public
 	*/
 	increment() {
-		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) + this.step : Number(this.value) - this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -275,7 +275,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	* @public
 	*/
 	decrement() {
-		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) - this.step : Number(this.value) + this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -297,7 +297,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	* are not whole numbers
 	*/
 	updateStepMultiplier() {
-		const stepString = this.step + "";
+		const stepString = String(this.step);
 		const decimalPlacesOfStep = this.step % 1 ? stepString.length - stepString.indexOf(".") - 1 : 0;
 		this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
 	}

package/unbundled/definition11.js

@@ -265,7 +265,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	* @public
 	*/
 	increment() {
-		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + this.step : Number(this.value) - this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -274,7 +274,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	* @public
 	*/
 	decrement() {
-		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - this.step : Number(this.value) + this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -296,7 +296,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	* are not whole numbers
 	*/
 	updateStepMultiplier() {
-		const stepString = this.step + "";
+		const stepString = String(this.step);
 		const decimalPlacesOfStep = this.step % 1 ? stepString.length - stepString.indexOf(".") - 1 : 0;
 		this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
 	}

package/unbundled/definition12.cjs

@@ -227,7 +227,7 @@ var getIndicatorIcon = (x) => {
 	if (x.checkedAppearance === "tick-only") return x.checked ? "check-line" : "";
 	return `${x.controlType === "checkbox" ? "checkbox" : "radio"}-${x.checked ? "checked" : "unchecked"}-2-line`;
 };
-var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", Boolean(disabled)], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
+var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", disabled], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
 function checkIndicator(context) {
 	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => Boolean(x.controlType), _microsoft_fast_element.html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;

package/unbundled/definition12.js

@@ -226,7 +226,7 @@ var getIndicatorIcon = (x) => {
 	if (x.checkedAppearance === "tick-only") return x.checked ? "check-line" : "";
 	return `${x.controlType === "checkbox" ? "checkbox" : "radio"}-${x.checked ? "checked" : "unchecked"}-2-line`;
 };
-var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", Boolean(disabled)], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
+var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", disabled], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
 function checkIndicator(context) {
 	const iconTag = context.tagFor(Icon);
 	return html`${when((x) => Boolean(x.controlType), html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;

package/unbundled/definition13.cjs

@@ -54,7 +54,7 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 		};
 		this.handleExpandedChanged = (e) => {
 			const changedItem = e.target;
-			if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) this.expandedItem = null;
+			if (this.expandedItem !== null && changedItem === this.expandedItem && !changedItem.expanded) this.expandedItem = null;
 			if (changedItem.expanded) this.expandedItem = changedItem;
 		};
 		this.removeItemListeners = () => {
@@ -179,7 +179,7 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 	}
 	openChanged(_, newValue) {
 		if (newValue) this._popupEl?.show().then(() => this.focus());
-		newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
+		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
 		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
 	}
 	/**

package/unbundled/definition13.js

@@ -53,7 +53,7 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 		};
 		this.handleExpandedChanged = (e) => {
 			const changedItem = e.target;
-			if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) this.expandedItem = null;
+			if (this.expandedItem !== null && changedItem === this.expandedItem && !changedItem.expanded) this.expandedItem = null;
 			if (changedItem.expanded) this.expandedItem = changedItem;
 		};
 		this.removeItemListeners = () => {
@@ -178,7 +178,7 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 	}
 	openChanged(_, newValue) {
 		if (newValue) this._popupEl?.show().then(() => this.focus());
-		newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
+		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
 		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
 	}
 	/**

package/unbundled/definition14.cjs

@@ -22,7 +22,7 @@ function formatTime(time) {
 	if (!time || Number.isNaN(time)) return "0:00";
 	const min = Math.floor(time / 60);
 	const sec = Math.floor(time % 60);
-	return min + ":" + (sec < 10 ? "0" + sec : sec);
+	return `${min}:${sec < 10 ? `0${sec}` : sec}`;
 }
 var PAUSE = true;
 var PLAY = false;
@@ -44,6 +44,75 @@ var validSkipByConverter = {
 * @event {CustomEvent<undefined>} pause - Fires when the audio playback is paused.
 */
 var AudioPlayer = class extends require_localized.Localized(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.playButtonAriaLabel = null;
+		this.pauseButtonAriaLabel = null;
+		this.sliderAriaLabel = null;
+		this.skipForwardButtonAriaLabel = null;
+		this.skipBackwardButtonAriaLabel = null;
+		this.disabled = false;
+		this.notime = false;
+		this.playbackRates = null;
+		this.#playerEl = new Audio();
+		this.#isProgrammaticSliderUpdate = false;
+		this.durationFallback = false;
+		this.#onPlay = () => {
+			if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
+		};
+		this.#onPause = () => {
+			if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
+		};
+		this.#pausedChanged = (pausing) => {
+			if (pausing === this.paused) {
+				this.#setPausedState();
+				return;
+			}
+			if (!this.paused) this.#playerEl.pause();
+			else {
+				this.#updateProgress();
+				this.#playerEl.play();
+			}
+			this.#setPausedState();
+		};
+		this.#updateProgress = () => {
+			_microsoft_fast_element.Observable.notify(this, "currentTime");
+			const duration = this.duration;
+			const currentTime = this.currentTime;
+			const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
+			const percent = isValid ? currentTime / duration * 100 : 0;
+			/* v8 ignore else -- @preserve */
+			if (this.#sliderEl) {
+				this.#isProgrammaticSliderUpdate = true;
+				this.#sliderEl.value = percent.toString();
+				this.#isProgrammaticSliderUpdate = false;
+			}
+			if (isValid && percent === 100) this.pause();
+		};
+		this.#updateTotalTime = () => {
+			_microsoft_fast_element.Observable.notify(this, "duration");
+			if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+				if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
+			}
+		};
+		this.#updateCurrentTimeOnSliderChange = () => {
+			if (!this.paused && this.#sliderEl.isDragging) {
+				this.pause();
+				this.#dragInterval = window.setInterval(() => {
+					/* v8 ignore else -- @preserve */
+					if (!this.#sliderEl.isDragging || !this.isConnected) {
+						clearInterval(this.#dragInterval);
+						if (this.isConnected) this.play();
+					}
+				}, 0);
+			}
+			if (this.#isProgrammaticSliderUpdate) return;
+			this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
+		};
+		this.#setPausedState = () => {
+			_microsoft_fast_element.Observable.notify(this, "paused");
+		};
+	}
 	/**
 	* @internal
 	*/
@@ -133,76 +202,6 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
 	}
 	#playerEl;
 	#isProgrammaticSliderUpdate;
-	constructor() {
-		super();
-		this.playButtonAriaLabel = null;
-		this.pauseButtonAriaLabel = null;
-		this.sliderAriaLabel = null;
-		this.skipForwardButtonAriaLabel = null;
-		this.skipBackwardButtonAriaLabel = null;
-		this.disabled = false;
-		this.notime = false;
-		this.playbackRates = null;
-		this.#playerEl = new Audio();
-		this.#isProgrammaticSliderUpdate = false;
-		this.durationFallback = false;
-		this.#onPlay = () => {
-			if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
-		};
-		this.#onPause = () => {
-			if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
-		};
-		this.#pausedChanged = (pausing) => {
-			if (pausing === this.paused) {
-				this.#setPausedState();
-				return;
-			}
-			if (!this.paused) this.#playerEl.pause();
-			else {
-				this.#updateProgress();
-				this.#playerEl.play();
-			}
-			this.#setPausedState();
-		};
-		this.#updateProgress = () => {
-			_microsoft_fast_element.Observable.notify(this, "currentTime");
-			const duration = this.duration;
-			const currentTime = this.currentTime;
-			const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
-			const percent = isValid ? currentTime / duration * 100 : 0;
-			/* v8 ignore else -- @preserve */
-			if (this.#sliderEl) {
-				this.#isProgrammaticSliderUpdate = true;
-				this.#sliderEl.value = percent.toString();
-				this.#isProgrammaticSliderUpdate = false;
-			}
-			if (isValid && percent === 100) this.pause();
-		};
-		this.#updateTotalTime = () => {
-			_microsoft_fast_element.Observable.notify(this, "duration");
-			if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
-				if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
-			}
-		};
-		this.#updateCurrentTimeOnSliderChange = () => {
-			if (!this.paused && this.#sliderEl.isDragging) {
-				this.pause();
-				this.#dragInterval = window.setInterval(() => {
-					/* v8 ignore else -- @preserve */
-					if (!this.#sliderEl.isDragging || !this.isConnected) {
-						clearInterval(this.#dragInterval);
-						if (this.isConnected) this.play();
-					}
-				}, 0);
-			}
-			if (this.#isProgrammaticSliderUpdate) return;
-			/* v8 ignore else -- @preserve */
-			if (this.#playerEl) this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
-		};
-		this.#setPausedState = () => {
-			_microsoft_fast_element.Observable.notify(this, "paused");
-		};
-	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
@@ -275,7 +274,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 })], AudioPlayer.prototype, "durationFallback", void 0);
 //#endregion
 //#region src/lib/audio-player/audio-player.template.ts
-var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => (0, _microsoft_fast_web_utilities.classNames)(["disabled", Boolean(disabled) || !duration], ["two-lines", !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))], ["playback", Boolean(playbackRates)]);
+var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => (0, _microsoft_fast_web_utilities.classNames)(["disabled", disabled || !duration], ["two-lines", !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))], ["playback", Boolean(playbackRates)]);
 var isMenuItemChekced = (playbackRate, { parent }) => {
 	return playbackRate === parent.playbackRate;
 };
@@ -330,12 +329,10 @@ function renderSlider(context) {
 }
 function renderTimestamp() {
 	return _microsoft_fast_element.html` <div class="time-stamp">
-		<span class="current-time"
-			>${(x) => formatTime(x.currentTime || 0)}</span
-		>
+		<span class="current-time">${(x) => formatTime(x.currentTime || 0)}</span>
 		${(0, _microsoft_fast_element.when)((x) => x.duration && x.duration !== Infinity, _microsoft_fast_element.html`
 				<span>/</span>
-				<span class="total-time">${(x) => formatTime(x?.duration)}</span>
+				<span class="total-time">${(x) => formatTime(x.duration)}</span>
 			`)}
 	</div>`;
 }