@vonage/vivid 5.17.0 → 5.18.0

package/tooltip/definition.cjs

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

package/tooltip/definition.js

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

package/tooltip/index.cjs

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

package/tooltip/index.js

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

package/tree-item/definition.cjs

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

package/tree-item/definition.js

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

package/tree-item/index.cjs

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

package/tree-item/index.js

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

package/tree-view/definition.cjs

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

package/tree-view/definition.js

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

package/tree-view/index.cjs

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

package/tree-view/index.js

@@ -1,7 +1,7 @@
 import { O as e, T as t, d as n, l as r, o as i, s as a, t as o } from "../bundled/vivid-element.js";
 import { t as s } from "../bundled/ref.js";
 import { t as c } from "../bundled/slotted.js";
-import "../bundled/definition2.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";

package/unbundled/definition11.cjs

@@ -156,6 +156,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this._hoveringOnThumb = false;
 		this._onFocusIn = () => {
 			if (!this.#isNonVisibleFocus) this._focusVisible = true;
+			this.#isNonVisibleFocus = false;
 		};
 		this._onFocusOut = () => {
 			this._focusVisible = false;
@@ -239,6 +240,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this.setupDefaultValue();
 		this.setThumbPositionForOrientation(this.direction);
 		this.#registerThumbListeners();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* @internal
@@ -246,6 +248,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	disconnectedCallback() {
 		this.setupListeners(true);
 		this.#unregisterThumbListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* Increment the value by the step
@@ -330,6 +333,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;
 	};

package/unbundled/definition11.js

@@ -155,6 +155,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this._hoveringOnThumb = false;
 		this._onFocusIn = () => {
 			if (!this.#isNonVisibleFocus) this._focusVisible = true;
+			this.#isNonVisibleFocus = false;
 		};
 		this._onFocusOut = () => {
 			this._focusVisible = false;
@@ -238,6 +239,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.setupDefaultValue();
 		this.setThumbPositionForOrientation(this.direction);
 		this.#registerThumbListeners();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* @internal
@@ -245,6 +247,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	disconnectedCallback() {
 		this.setupListeners(true);
 		this.#unregisterThumbListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* Increment the value by the step
@@ -329,6 +332,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;
 	};

package/unbundled/definition14.cjs

@@ -220,6 +220,7 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
 		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();

package/unbundled/definition14.js

@@ -219,6 +219,7 @@ var AudioPlayer = class extends Localized(VividElement) {
 		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();

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
@@ -106,15 +36,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 +58,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);

package/unbundled/definition2.js

@@ -1,85 +1,15 @@
 import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
 import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition.js";
+import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.js";
 import { attr, html, observable, when } from "@microsoft/fast-element";
 import { classNames } from "@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

package/unbundled/definition28.cjs

@@ -47,6 +47,7 @@ var vcInputTag = VC_HEX_INPUT_TAG;
 * @slot popup-text - Overrides the default "Color Picker" title of the Popup window.
 * @slot swatches-text -  Overrides the default "Saved colors:" text above color swatches.
 * @event {CustomEvent<undefined>} change - Fires when the value changes
+* @event {Event} input - Fires when the value of the element changes.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 */
 var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_delegates_aria.DelegatesAria(require_trapped_focus.TrappedFocus(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement))))))) {

package/unbundled/definition28.js

@@ -46,6 +46,7 @@ var vcInputTag = VC_HEX_INPUT_TAG;
 * @slot popup-text - Overrides the default "Color Picker" title of the Popup window.
 * @slot swatches-text -  Overrides the default "Saved colors:" text above color swatches.
 * @event {CustomEvent<undefined>} change - Fires when the value changes
+* @event {Event} input - Fires when the value of the element changes.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 */
 var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(DelegatesAria(TrappedFocus(BaseColorPicker(VividElement))))))) {