@vonage/vivid 5.18.0 → 5.19.0

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/numberConverter.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,6 +154,7 @@ 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;
@@ -161,6 +162,15 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		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
@@ -324,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 });
@@ -333,15 +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);
 	}
-	#onVisibilityChange = () => {
-		if (document.hidden && this.shadowRoot.activeElement !== null) this.#isNonVisibleFocus = true;
-	};
-	#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,6 +153,7 @@ 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;
@@ -160,6 +161,15 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		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
@@ -323,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 });
@@ -332,15 +342,9 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.thumb.removeEventListener("mouseover", this.#onMouseOver);
 		this.thumb.removeEventListener("mouseout", this.#onMouseOut);
 	}
-	#onVisibilityChange = () => {
-		if (document.hidden && this.shadowRoot.activeElement !== null) this.#isNonVisibleFocus = true;
-	};
-	#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
 	*/

package/unbundled/definition13.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 { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
@@ -78,6 +78,12 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 		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;
+			Updates.enqueue(() => this.open = newValue);
+		};
 		this._onFocusout = (e) => {
 			const focusTarget = e.relatedTarget;
 			const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
@@ -199,12 +205,7 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 		a.ariaExpanded = null;
 		delete a.dataset.expanded;
 	}
-	#onAnchorClick = () => {
-		if (this.#triggerBehaviour === "off") return;
-		if (this.#triggerBehaviour === "legacy" && this.open) return;
-		const newValue = !this.open;
-		Updates.enqueue(() => this.open = newValue);
-	};
+	#onAnchorClick;
 	/**
 	* @internal
 	*/

package/unbundled/definition14.cjs

@@ -131,8 +131,8 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
 	get #sliderEl() {
 		return this.shadowRoot.querySelector(".slider");
 	}
-	#playerEl = new Audio();
-	#isProgrammaticSliderUpdate = false;
+	#playerEl;
+	#isProgrammaticSliderUpdate;
 	constructor() {
 		super();
 		this.playButtonAriaLabel = null;
@@ -143,7 +143,65 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
 		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();
@@ -172,68 +230,19 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
 	pause() {
 		this.#pausedChanged(PAUSE);
 	}
-	#onPlay = () => {
-		if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
-	};
-	#onPause = () => {
-		if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
-	};
+	#onPlay;
+	#onPause;
 	#setSliderInteractionListeners(add = true) {
 		const action = add ? "addEventListener" : "removeEventListener";
 		/* v8 ignore else -- @preserve */
 		if (this.#sliderEl) this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
 	}
-	#pausedChanged = (pausing) => {
-		if (pausing === this.paused) {
-			this.#setPausedState();
-			return;
-		}
-		if (!this.paused) this.#playerEl.pause();
-		else {
-			this.#updateProgress();
-			this.#playerEl.play();
-		}
-		this.#setPausedState();
-	};
-	#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();
-	};
-	#updateTotalTime = () => {
-		_microsoft_fast_element.Observable.notify(this, "duration");
-		if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
-			if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
-		}
-	};
+	#pausedChanged;
+	#updateProgress;
+	#updateTotalTime;
 	#dragInterval;
-	#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;
-	};
-	#setPausedState = () => {
-		_microsoft_fast_element.Observable.notify(this, "paused");
-	};
+	#updateCurrentTimeOnSliderChange;
+	#setPausedState;
 	/**
 	* Skips the current time by the skipBy value
 	*