@vonage/vivid 5.17.0 → 5.19.0

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,67 +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(() => {
-				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
 	*

package/unbundled/definition14.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 Localized } from "./localized.js";
 import { i as Button, t as buttonDefinition } from "./definition7.js";
@@ -130,8 +130,8 @@ var AudioPlayer = class extends Localized(VividElement) {
 	get #sliderEl() {
 		return this.shadowRoot.querySelector(".slider");
 	}
-	#playerEl = new Audio();
-	#isProgrammaticSliderUpdate = false;
+	#playerEl;
+	#isProgrammaticSliderUpdate;
 	constructor() {
 		super();
 		this.playButtonAriaLabel = null;
@@ -142,7 +142,65 @@ var AudioPlayer = class extends Localized(VividElement) {
 		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 = () => {
+			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 = () => {
+			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 = () => {
+			Observable.notify(this, "paused");
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -171,67 +229,19 @@ var AudioPlayer = class extends Localized(VividElement) {
 	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 = () => {
-		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 = () => {
-		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(() => {
-				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 = () => {
-		Observable.notify(this, "paused");
-	};
+	#updateCurrentTimeOnSliderChange;
+	#setPausedState;
 	/**
 	* Skips the current time by the skipBy value
 	*

package/unbundled/definition15.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 { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria } from "./delegates-aria.js";

package/unbundled/definition16.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 iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";

package/unbundled/definition17.cjs

@@ -35,6 +35,14 @@ var Banner = class extends require_affix.AffixIcon(require_localized.Localized(r
 		super(..._args);
 		this.dismissButtonAriaLabel = null;
 		this.removable = false;
+		this.#handleRemoveEnd = () => {
+			this.$emit("removed");
+			this.parentElement && this.parentElement.removeChild(this);
+		};
+		this.#closeOnKeyDown = (e) => {
+			if (e.key !== "Escape" || !this.removable) return;
+			this.remove();
+		};
 	}
 	get conditionedIcon() {
 		return this.icon ?? getConnotationIcon(this.connotation);
@@ -53,14 +61,8 @@ var Banner = class extends require_affix.AffixIcon(require_localized.Localized(r
 		banner?.classList.add("removing");
 		banner?.addEventListener("transitionend", this.#handleRemoveEnd);
 	}
-	#handleRemoveEnd = () => {
-		this.$emit("removed");
-		this.parentElement && this.parentElement.removeChild(this);
-	};
-	#closeOnKeyDown = (e) => {
-		if (e.key !== "Escape" || !this.removable) return;
-		this.remove();
-	};
+	#handleRemoveEnd;
+	#closeOnKeyDown;
 };
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "dismiss-aria-label" })], Banner.prototype, "dismissButtonAriaLabel", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Banner.prototype, "removable", void 0);

package/unbundled/definition17.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 iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, r as IconAriaHidden, t as AffixIcon } from "./affix.js";
@@ -34,6 +34,14 @@ var Banner = class extends AffixIcon(Localized(DelegatesAria(VividElement))) {
 		super(..._args);
 		this.dismissButtonAriaLabel = null;
 		this.removable = false;
+		this.#handleRemoveEnd = () => {
+			this.$emit("removed");
+			this.parentElement && this.parentElement.removeChild(this);
+		};
+		this.#closeOnKeyDown = (e) => {
+			if (e.key !== "Escape" || !this.removable) return;
+			this.remove();
+		};
 	}
 	get conditionedIcon() {
 		return this.icon ?? getConnotationIcon(this.connotation);
@@ -52,14 +60,8 @@ var Banner = class extends AffixIcon(Localized(DelegatesAria(VividElement))) {
 		banner?.classList.add("removing");
 		banner?.addEventListener("transitionend", this.#handleRemoveEnd);
 	}
-	#handleRemoveEnd = () => {
-		this.$emit("removed");
-		this.parentElement && this.parentElement.removeChild(this);
-	};
-	#closeOnKeyDown = (e) => {
-		if (e.key !== "Escape" || !this.removable) return;
-		this.remove();
-	};
+	#handleRemoveEnd;
+	#closeOnKeyDown;
 };
 __decorate([attr({ attribute: "dismiss-aria-label" })], Banner.prototype, "dismissButtonAriaLabel", void 0);
 __decorate([attr({ mode: "boolean" })], Banner.prototype, "removable", void 0);

package/unbundled/definition18.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as BreadcrumbItem } from "./breadcrumb-item.js";
 import { html, when } from "@microsoft/fast-element";

package/unbundled/definition19.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 BreadcrumbItem } from "./breadcrumb-item.js";

package/unbundled/definition2.cjs

@@ -1,86 +1,16 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
+const require_numberConverter = require("./numberConverter.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/icon/icon.scss?inline
 var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
-//#region ../icons/dist/index.mjs
-var version = "4.10.0";
-var ICONS_BASE_URL = "https://icon.resources.vonage.com";
-var ICONS_VERSION = version;
-`${ICONS_BASE_URL}${ICONS_VERSION}`;
-//#endregion
-//#region src/shared/utils/numberConverter.ts
-var numberConverter = {
-	toView(value) {
-		if (value === void 0) return null;
-		return value.toString();
-	},
-	fromView(value) {
-		if (typeof value === "string") value = parseFloat(value.toString());
-		if (typeof value !== "number") return;
-		return isNaN(value) || !isFinite(value) ? void 0 : value;
-	}
-};
-//#endregion
-//#region src/lib/icon/icon.placeholder.ts
-var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
-    <g>
-        <g stroke-width="6" stroke-linecap="round" fill="none">
-            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
-            </path>
-            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
-            </path>
-            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
-            </animateTransform>
-        </g>
-    </g>
-</svg>`;
-//#endregion
 //#region src/lib/icon/icon.ts
 var PLACEHOLDER_DELAY = 500;
 var PLACEHOLDER_TIMEOUT = 2e3;
-var baseUrlTemplate = (resource, version) => [
-	ICONS_BASE_URL,
-	`v${version}`,
-	resource
-].join("/");
-var assertIsValidResponse = ({ ok, headers }) => {
-	if (!ok || headers.get("content-type") !== "image/svg+xml") throw new Error("Something went wrong");
-};
-var extractSvg = (response) => {
-	assertIsValidResponse(response);
-	return response.text();
-};
-var loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(extractSvg);
-var normalizeKey = (iconId) => (iconId ?? "").trim();
-var iconCache = /* @__PURE__ */ new Map();
-var resolveIcon = (iconId, signal) => {
-	const key = normalizeKey(iconId);
-	if (!key) return Promise.resolve("");
-	const cached = iconCache.get(key);
-	if (cached && !cached.signal?.aborted) return cached.promise;
-	const promise = loadSvg(key, signal).then((svg) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise && signal.aborted) {
-			iconCache.delete(key);
-			throw signal.reason ?? new DOMException("Aborted", "AbortError");
-		}
-		return svg;
-	}).catch((err) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise) iconCache.delete(key);
-		throw err;
-	});
-	iconCache.set(key, {
-		promise,
-		signal
-	});
-	return promise;
-};
 /**
 * @public
 * @component icon
@@ -91,9 +21,11 @@ var Icon = class extends require_vivid_element.VividElement {
 	constructor(..._args) {
 		super(..._args);
 		this.iconLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
 	}
-	#currentRequestId = 0;
-	#abortController = null;
+	#currentRequestId;
+	#abortController;
 	/**
 	* @internal
 	*/
@@ -106,15 +38,15 @@ var Icon = class extends require_vivid_element.VividElement {
 		let timeout = setTimeout(() => {
 			/* v8 ignore else -- @preserve */
 			if (this.#currentRequestId === requestId) {
-				this._svg = PLACEHOLDER_ICON;
+				this._svg = require_numberConverter.PLACEHOLDER_ICON;
 				timeout = setTimeout(() => {
 					/* v8 ignore else -- @preserve */
-					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
+					if (this.#currentRequestId === requestId && this._svg === require_numberConverter.PLACEHOLDER_ICON) this._svg = void 0;
 				}, PLACEHOLDER_TIMEOUT);
 			}
 		}, PLACEHOLDER_DELAY);
 		try {
-			const svg = await resolveIcon(this.name, this.#abortController.signal);
+			const svg = await require_numberConverter.resolveIcon(this.name, this.#abortController.signal);
 			/* v8 ignore else -- @preserve */
 			if (this.#currentRequestId === requestId) this._svg = svg;
 		} catch {
@@ -128,7 +60,7 @@ var Icon = class extends require_vivid_element.VividElement {
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: numberConverter })], Icon.prototype, "size", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_numberConverter.numberConverter })], Icon.prototype, "size", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "_svg", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "iconLoaded", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "label", void 0);