@vonage/vivid 5.4.0 → 5.5.0

package/dial-pad/index.js

@@ -1,23 +1,23 @@
 import { B as h, b as m } from "../bundled/definition3.js";
-import { T as g, t as _ } from "../bundled/definition10.js";
-import { V as $, a as i, o as y, h as d, c as L, d as A } from "../bundled/vivid-element.js";
-import { I as x, i as w } from "../bundled/definition2.js";
-import { V as F, v as E } from "../bundled/definition13.js";
-import { L as k } from "../bundled/localized.js";
+import { T as _, t as $ } from "../bundled/definition10.js";
+import { V as L, a as i, o as y, h as d, c as w, d as k } from "../bundled/vivid-element.js";
+import { I as P, i as T } from "../bundled/definition2.js";
+import { V as A, v as x } from "../bundled/definition14.js";
+import { L as C } from "../bundled/localized.js";
 import { w as p } from "../bundled/when.js";
-import { r as D } from "../bundled/repeat.js";
-import { r as T } from "../bundled/ref.js";
-import { c as B } from "../bundled/class-names.js";
-import { f as C } from "../bundled/key-codes.js";
-const I = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
-var V = Object.defineProperty, n = (a, t, e, o) => {
-  for (var c = void 0, s = a.length - 1, u; s >= 0; s--)
-    (u = a[s]) && (c = u(t, e, c) || c);
-  return c && V(t, e, c), c;
+import { r as E } from "../bundled/repeat.js";
+import { r as D } from "../bundled/ref.js";
+import { c as F } from "../bundled/class-names.js";
+import { f as I } from "../bundled/key-codes.js";
+const B = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
+var V = Object.defineProperty, l = (n, t, e, a) => {
+  for (var s = void 0, c = n.length - 1, u; c >= 0; c--)
+    (u = n[c]) && (s = u(t, e, s) || s);
+  return s && V(t, e, s), s;
 };
-class l extends k($) {
+class o extends C(L) {
   constructor() {
-    super(...arguments), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._onDial = () => {
+    super(...arguments), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._longPressTimeoutId = null, this._suppressNextClick = !1, this._keyboardLongPressCompleted = !1, this._onDial = () => {
       !this._textFieldEl.checkValidity() ? this._announceValidationError(
         this._textFieldEl.errorValidationMessage ?? ""
       ) : this._clearErrorAnnouncement(), this.callActive ? this.$emit("end-call") : this.$emit("dial");
@@ -26,6 +26,52 @@ class l extends k($) {
   valueChanged(t, e) {
     e != null && this._textFieldEl && e !== this._textFieldEl.value && (this._textFieldEl.value = e, this._textFieldEl.reportValidity());
   }
+  /**
+   * @internal
+   */
+  _startLongPress(t, e) {
+    if (this.disabled || this.callActive || t !== "0") return;
+    this._clearLongPressTimer();
+    const a = e.currentTarget;
+    this._longPressTimeoutId = window.setTimeout(() => {
+      this._suppressNextClick = !0, this.value += "+", this.$emit("keypad-click", a), this.$emit("input"), this.$emit("change");
+    }, 600);
+  }
+  /**
+   * @internal
+   */
+  _startKeyboardLongPress() {
+    this.disabled || this.callActive || this._longPressTimeoutId === null && (this._keyboardLongPressCompleted = !1, this._longPressTimeoutId = window.setTimeout(() => {
+      this._keyboardLongPressCompleted = !0, this.value += "+", this.$emit("input"), this.$emit("change");
+    }, 650));
+  }
+  /**
+   * @internal
+   */
+  _endLongPress() {
+    this._clearLongPressTimer(), window.setTimeout(() => {
+      this._suppressNextClick && (this._suppressNextClick = !1);
+    }, 0);
+  }
+  /**
+   * @internal
+   * @returns true if long press completed (timer fired), false otherwise
+   */
+  _endKeyboardLongPress() {
+    const t = this._keyboardLongPressCompleted;
+    return this._clearLongPressTimer(), window.setTimeout(() => {
+      this._keyboardLongPressCompleted = !1;
+    }, 0), t;
+  }
+  /**
+   * @internal
+   */
+  _cancelLongPress() {
+    this._clearLongPressTimer();
+  }
+  _clearLongPressTimer() {
+    this._longPressTimeoutId !== null && (clearTimeout(this._longPressTimeoutId), this._longPressTimeoutId = null);
+  }
   /**
    * Moves focus into the diapl-pad.
    *
@@ -50,54 +96,54 @@ class l extends k($) {
     this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
   }
 }
-n([
+l([
   i({ attribute: "helper-text" })
-], l.prototype, "helperText");
-n([
+], o.prototype, "helperText");
+l([
   i
-], l.prototype, "placeholder");
-n([
+], o.prototype, "placeholder");
+l([
   i({ mode: "fromView" })
-], l.prototype, "value");
-n([
+], o.prototype, "value");
+l([
   i({ mode: "fromView" })
-], l.prototype, "pattern");
-n([
+], o.prototype, "pattern");
+l([
   i({ mode: "boolean" })
-], l.prototype, "disabled");
-n([
+], o.prototype, "disabled");
+l([
   i({ mode: "boolean" })
-], l.prototype, "pending");
-n([
+], o.prototype, "pending");
+l([
   i({ attribute: "call-active", mode: "boolean" })
-], l.prototype, "callActive");
-n([
+], o.prototype, "callActive");
+l([
   i({ mode: "boolean", attribute: "no-call" })
-], l.prototype, "noCall");
-n([
+], o.prototype, "noCall");
+l([
   i({ mode: "boolean", attribute: "no-input" })
-], l.prototype, "noInput");
-n([
+], o.prototype, "noInput");
+l([
   i({ attribute: "end-call-button-label" })
-], l.prototype, "endCallButtonLabel");
-n([
+], o.prototype, "endCallButtonLabel");
+l([
   i({ attribute: "call-button-label" })
-], l.prototype, "callButtonLabel");
-n([
+], o.prototype, "callButtonLabel");
+l([
   i({ attribute: "delete-aria-label" })
-], l.prototype, "deleteAriaLabel");
-n([
+], o.prototype, "deleteAriaLabel");
+l([
   i({ mode: "boolean" })
-], l.prototype, "autofocus");
-n([
+], o.prototype, "autofocus");
+l([
   y
-], l.prototype, "_errorAnnouncement");
+], o.prototype, "_errorAnnouncement");
 class r {
-  constructor(t, e, o, c, s) {
-    this.value = t, this.label = e, this.ariaLabel = o, this.icon = c, this.id = s;
+  constructor(t, e, a, s, c) {
+    this.value = t, this.label = e, this.ariaLabel = a, this.icon = s, this.id = c;
   }
 }
-const f = [
+const b = [
   new r("1", " ", "digitOneLabel", "one-solid", "btn1"),
   new r("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
   new r("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
@@ -122,42 +168,57 @@ const f = [
     "hashtag-solid",
     "btnHashtag"
   )
-], P = ({ noInput: a }) => B("base", ["no-input", !!a]);
-function z(a, t) {
-  if (t.key === C && !a.pending && !a.disabled && !a.callActive && !a.noCall && a.value.length > 0 && t.target instanceof HTMLInputElement)
-    a._onDial();
+], K = ({ noInput: n }) => F("base", ["no-input", !!n]);
+function N(n, t) {
+  if (t.key === I && !n.pending && !n.disabled && !n.callActive && !n.noCall && n.value.length > 0 && t.target instanceof HTMLInputElement)
+    n._onDial();
+  else if (t.key === " " || t.key === "Space")
+    t.target instanceof HTMLInputElement && (t.preventDefault(), t.repeat || n._startKeyboardLongPress());
   else {
-    const e = f.findIndex((o) => o.value === t.key);
+    const e = b.findIndex((a) => a.value === t.key);
     if (e > -1) {
-      const o = a.shadowRoot.querySelector(".digits").children[e];
-      o && (o.active = !0, setTimeout(() => {
-        o.active = !1;
+      const a = n.shadowRoot.querySelector(".digits").children[e];
+      a && (a.active = !0, setTimeout(() => {
+        a.active = !1;
       }, 200));
     }
   }
   return !0;
 }
-function v(a) {
-  a.value = a._textFieldEl.value;
+function S(n, t) {
+  return (t.key === " " || t.key === "Space") && t.target instanceof HTMLInputElement && (t.preventDefault(), !n._endKeyboardLongPress() && !n.disabled && !n.callActive && (n.value += " ", n.$emit("input"), n.$emit("change"))), !0;
+}
+function z(n, { parent: t, event: e }) {
+  return (e.key === " " || e.key === "Space") && n.value === "0" && (e.preventDefault(), e.repeat || t._startKeyboardLongPress()), !0;
 }
-function b(a, { event: t }) {
+function H(n, { parent: t, event: e }) {
+  return (e.key === " " || e.key === "Space") && n.value === "0" && (e.preventDefault(), !t._endKeyboardLongPress() && !t.disabled && !t.callActive && g(n, {
+    parent: t,
+    event: new MouseEvent("click", { bubbles: !0 })
+  })), !0;
+}
+function v(n) {
+  n.value = n._textFieldEl.value;
+}
+function f(n, { event: t }) {
   t.stopImmediatePropagation();
 }
-function H(a) {
-  a.value = a.value.slice(0, -1), a.$emit("input"), a.$emit("change"), a.value === "" && a._textFieldEl?.focus();
+function M(n) {
+  n.value = n.value.slice(0, -1), n.$emit("input"), n.$emit("change"), n.value === "" && n._textFieldEl?.focus();
 }
-function S(a, t) {
-  return d`<${a} ${T(
+function O(n, t) {
+  return d`<${n} ${D(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(e) => e.value}" placeholder="${(e) => e.placeholder}"
             ?disabled="${(e) => e.disabled}" helper-text="${(e) => e.helperText}" pattern="${(e) => e.pattern}"
             aria-label="${(e) => e.locale.dialPad.inputLabel}"
-            @keydown="${(e, o) => z(e, o.event)}"
+            @keydown="${(e, a) => N(e, a.event)}"
+            @keyup="${(e, a) => S(e, a.event)}"
             @input="${v}"
 			@change="${v}"
-			@focus="${b}"
-			@blur="${b}"
+			@focus="${f}"
+			@blur="${f}"
 			?autofocus="${(e) => e.autofocus}"
 			>
          ${p(
@@ -169,20 +230,24 @@ function S(a, t) {
 								aria-label="${(e) => e.deleteAriaLabel || e.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(e) => e.disabled || e.callActive}"
-								@click="${(e) => H(e)}">
+								@click="${(e) => M(e)}">
             </${t}>`
   )}
-        </${a}>`;
+        </${n}>`;
 }
-function M(a, { parent: t, event: e }) {
-  t.value += a.value, t.$emit("keypad-click", e.currentTarget), t.$emit("input"), t.$emit("change");
+function g(n, { parent: t, event: e }) {
+  if (t._suppressNextClick) {
+    t._suppressNextClick = !1;
+    return;
+  }
+  t.value += n.value, t.$emit("keypad-click", e.currentTarget), t.$emit("input"), t.$emit("change");
 }
-function N(a, t) {
+function R(n, t) {
   return d`
-		${D(
-    (e) => f,
+		${E(
+    (e) => b,
     d`
-			<${a}
+			<${n}
 					  id="${(e) => e.id}"
 					  value="${(e) => e.value}"
 					  stacked
@@ -191,14 +256,26 @@ function N(a, t) {
 					  label="${(e) => e.label === "&nbsp;" ? " " : e.label}"
 					  size='condensed'
 					  class="digit-btn"
-						?autofocus="${(e, o) => o.parent.autofocus && o.parent.noInput && o.index === 0}"
-					  aria-label="${(e, o) => o.parent.locale.dialPad[e.ariaLabel]}"
-					  ?disabled="${(e, o) => o.parent.disabled}"
-					  @click="${M}">
+						?autofocus="${(e, a) => a.parent.autofocus && a.parent.noInput && a.index === 0}"
+					  aria-label="${(e, a) => a.parent.locale.dialPad[e.ariaLabel]}"
+					  ?disabled="${(e, a) => a.parent.disabled}"
+					  @pointerdown="${(e, a) => a.parent._startLongPress(e.value, a.event)}"
+					  @pointerup="${(e, a) => a.parent._endLongPress()}"
+					  @pointercancel="${(e, a) => a.parent._cancelLongPress()}"
+					  @pointerleave="${(e, a) => a.parent._cancelLongPress()}"
+					  @keydown="${(e, a) => z(e, {
+      parent: a.parent,
+      event: a.event
+    })}"
+					  @keyup="${(e, a) => H(e, {
+      parent: a.parent,
+      event: a.event
+    })}"
+					  @click="${g}">
 					  	<${t} slot="icon"
 									name="${(e) => e.icon}"
 									class="digit-btn-num"></${t}>
-					</${a}>
+					</${n}>
 		`,
     {
       positioning: !0
@@ -206,8 +283,8 @@ function N(a, t) {
   )}
 	`;
 }
-function O(a) {
-  return d`<${a} class="call-btn"
+function U(n) {
+  return d`<${n} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${(t) => t.callActive ? "disable-call-line" : "call-line"}"
@@ -216,33 +293,33 @@ function O(a) {
 		?pending="${(t) => t.pending}"
         @click="${(t) => t._onDial()}"
         label="${(t) => t.callActive ? t.endCallButtonLabel || t.locale.dialPad.endCallButtonLabel : t.callButtonLabel || t.locale.dialPad.callButtonLabel}">
-    </${a}>`;
+    </${n}>`;
 }
-function R(a) {
-  return d`<${a} role="alert" aria-atomic="true">
+function q(n) {
+  return d`<${n} role="alert" aria-atomic="true">
 		${(t) => `${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
-	</${a}>`;
+	</${n}>`;
 }
-const q = (a) => {
-  const t = a.tagFor(h), e = a.tagFor(x), o = a.tagFor(g), c = a.tagFor(F);
-  return d` <div class="${P}">
-		${p((s) => !s.noInput, S(o, t))}
-		<div class="digits">${N(t, e)}</div>
-		${p((s) => !s.noCall, O(t))}
-		${R(c)}
+const Z = (n) => {
+  const t = n.tagFor(h), e = n.tagFor(P), a = n.tagFor(_), s = n.tagFor(A);
+  return d` <div class="${K}">
+		${p((c) => !c.noInput, O(a, t))}
+		<div class="digits">${R(t, e)}</div>
+		${p((c) => !c.noCall, U(t))}
+		${q(s)}
 	</div>`;
-}, K = A(
+}, j = k(
   "dial-pad",
-  l,
-  q,
+  o,
+  Z,
   [
     m,
-    _,
-    w,
-    E
+    $,
+    T,
+    x
   ],
   {
-    styles: I
+    styles: B
   }
-), U = L(K);
-U();
+), G = w(j);
+G();

package/divider/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition14.cjs");i.registerDivider();
+"use strict";const i=require("../bundled/definition15.cjs");i.registerDivider();

package/divider/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition14.js";
+import { r } from "../bundled/definition15.js";
 r();

package/icon/definition.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const vividElement = require('../unbundled/vivid-element.cjs');
 const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
-const ramda = require('ramda');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ":host{display:inline-block;vertical-align:sub}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
@@ -66,24 +65,50 @@ const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
-  signal
-}).then(extractSvg);
-const resolveIcon = ramda.memoizeWith(
-  ramda.identity,
-  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(
+  extractSvg
 );
+const normalizeKey = (iconId) => (iconId ?? "").trim();
+const iconCache = /* @__PURE__ */ new Map();
+const 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;
+};
 class Icon extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
+    this.#currentRequestId = 0;
     this.#abortController = null;
   }
+  #currentRequestId;
   get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
+    const key = normalizeKey(this.name);
+    return key ? baseUrlTemplate(`${key}.svg`, ICONS_VERSION) : this._svg;
   }
   #abortController;
   async nameChanged() {
+    const requestId = ++this.#currentRequestId;
     if (this.#abortController) {
       this.#abortController.abort();
     }
@@ -91,21 +116,30 @@ class Icon extends vividElement.VividElement {
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
-      this._svg = PLACEHOLDER_ICON;
-      timeout = setTimeout(() => {
-        if (this._svg === PLACEHOLDER_ICON) {
-          this._svg = void 0;
-        }
-      }, PLACEHOLDER_TIMEOUT);
+      if (this.#currentRequestId === requestId) {
+        this._svg = PLACEHOLDER_ICON;
+        timeout = setTimeout(() => {
+          if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
+            this._svg = void 0;
+          }
+        }, PLACEHOLDER_TIMEOUT);
+      }
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
-      this._svg = svg;
-    }).catch(() => {
-      this._svg = void 0;
-    }).finally(() => {
-      clearTimeout(timeout);
-      this.iconLoaded = true;
-    });
+    try {
+      const svg = await resolveIcon(this.name, this.#abortController.signal);
+      if (this.#currentRequestId === requestId) {
+        this._svg = svg;
+      }
+    } catch {
+      if (this.#currentRequestId === requestId) {
+        this._svg = void 0;
+      }
+    } finally {
+      if (this.#currentRequestId === requestId) {
+        clearTimeout(timeout);
+        this.iconLoaded = true;
+      }
+    }
   }
 }
 __decorateClass([

package/icon/definition.js

@@ -1,7 +1,6 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
 import { attr, observable, volatile, when, html } from '@microsoft/fast-element';
-import { memoizeWith, identity } from 'ramda';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ":host{display:inline-block;vertical-align:sub}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
@@ -62,24 +61,50 @@ const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
-  signal
-}).then(extractSvg);
-const resolveIcon = memoizeWith(
-  identity,
-  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(
+  extractSvg
 );
+const normalizeKey = (iconId) => (iconId ?? "").trim();
+const iconCache = /* @__PURE__ */ new Map();
+const 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;
+};
 class Icon extends VividElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
+    this.#currentRequestId = 0;
     this.#abortController = null;
   }
+  #currentRequestId;
   get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
+    const key = normalizeKey(this.name);
+    return key ? baseUrlTemplate(`${key}.svg`, ICONS_VERSION) : this._svg;
   }
   #abortController;
   async nameChanged() {
+    const requestId = ++this.#currentRequestId;
     if (this.#abortController) {
       this.#abortController.abort();
     }
@@ -87,21 +112,30 @@ class Icon extends VividElement {
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
-      this._svg = PLACEHOLDER_ICON;
-      timeout = setTimeout(() => {
-        if (this._svg === PLACEHOLDER_ICON) {
-          this._svg = void 0;
-        }
-      }, PLACEHOLDER_TIMEOUT);
+      if (this.#currentRequestId === requestId) {
+        this._svg = PLACEHOLDER_ICON;
+        timeout = setTimeout(() => {
+          if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
+            this._svg = void 0;
+          }
+        }, PLACEHOLDER_TIMEOUT);
+      }
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
-      this._svg = svg;
-    }).catch(() => {
-      this._svg = void 0;
-    }).finally(() => {
-      clearTimeout(timeout);
-      this.iconLoaded = true;
-    });
+    try {
+      const svg = await resolveIcon(this.name, this.#abortController.signal);
+      if (this.#currentRequestId === requestId) {
+        this._svg = svg;
+      }
+    } catch {
+      if (this.#currentRequestId === requestId) {
+        this._svg = void 0;
+      }
+    } finally {
+      if (this.#currentRequestId === requestId) {
+        clearTimeout(timeout);
+        this.iconLoaded = true;
+      }
+    }
   }
 }
 __decorateClass([