@vonage/vivid 5.5.0 → 5.6.0

package/bundled/definition19.js

@@ -5,33 +5,32 @@ import { U as z, O as u, o as p, a as c, v as T, h, c as W, d as L } from "./viv
 import { a as P, f as B } from "./mixins.js";
 import { L as S } from "./listbox.js";
 import { H as N, a as M } from "./host-semantics.js";
-import { F as j } from "./form-associated.js";
+import { F as K } from "./form-associated.js";
 import { i as v } from "./numbers.js";
-import { W as K } from "./with-contextual-help.js";
-import { W as R } from "./with-error-text.js";
+import { W as R } from "./with-contextual-help.js";
+import { W as j } from "./with-error-text.js";
 import { W as U } from "./with-success-text.js";
 import { F as q } from "./form-element.js";
 import { A as X, a as G, I as J } from "./affix.js";
 import { u as Q } from "./strings.js";
-import { l as g, d as y, m as _, k, c as I, b as w, a as O, f as Y } from "./key-codes.js";
+import { l as g, d as y, m as _, k, c as I, b as O, a as w, f as Y } from "./key-codes.js";
 import { c as Z } from "./definition3.js";
 import { h as ee } from "./index.js";
 import { r as b } from "./ref.js";
 import { w as f } from "./when.js";
 import { s as x } from "./slotted.js";
 import { c as te } from "./class-names.js";
-const oe = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}:host(:focus-within) .control:not(.has-activedescendant){--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))}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){border-radius:8px;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));--focus-stroke-gap-color: transparent}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
-var ae = Object.defineProperty, re = Object.getOwnPropertyDescriptor, l = (r, e, t, o) => {
-  for (var a = o > 1 ? void 0 : o ? re(e, t) : e, n = r.length - 1, s; n >= 0; n--)
+var oe = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, l = (r, e, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? ae(e, t) : e, n = r.length - 1, s; n >= 0; n--)
     (s = r[n]) && (a = (o ? s(e, t, a) : s(a)) || a);
-  return o && a && ae(e, t, a), a;
+  return o && a && oe(e, t, a), a;
 };
 class i extends P(
-  K(
-    R(
+  R(
+    j(
       U(
         q(
-          N(X(j(S)))
+          N(X(K(S)))
         )
       )
     )
@@ -82,6 +81,7 @@ class i extends P(
    */
   checkActiveIndex() {
     const e = this.activeOption;
+    /* v8 ignore else -- @preserve */
     e && (e.checked = !0);
   }
   /**
@@ -95,9 +95,14 @@ class i extends P(
    * @internal
    */
   checkFirstOption(e) {
-    e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex + 1), this.options.forEach((t, o) => {
-      t.checked = v(o, this.rangeStartIndex);
-    })) : this.uncheckAllOptions(), this.activeIndex = 0, this.checkActiveIndex();
+    if (e) {
+      /* v8 ignore else -- @preserve */
+      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex + 1), this.options.forEach((t, o) => {
+        t.checked = v(o, this.rangeStartIndex);
+      });
+    } else
+      this.uncheckAllOptions();
+    this.activeIndex = 0, this.checkActiveIndex();
   }
   /**
    * Decrements the active index and sets the matching option as checked.
@@ -110,9 +115,14 @@ class i extends P(
    * @internal
    */
   checkLastOption(e) {
-    e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((t, o) => {
-      t.checked = v(o, this.rangeStartIndex, this.length);
-    })) : this.uncheckAllOptions(), this.activeIndex = this.length - 1, this.checkActiveIndex();
+    if (e) {
+      /* v8 ignore else -- @preserve */
+      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((t, o) => {
+        t.checked = v(o, this.rangeStartIndex, this.length);
+      });
+    } else
+      this.uncheckAllOptions();
+    this.activeIndex = this.length - 1, this.checkActiveIndex();
   }
   /**
    * Increments the active index and marks the matching option as checked.
@@ -125,9 +135,14 @@ class i extends P(
    * @internal
    */
   checkNextOption(e) {
-    e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((t, o) => {
-      t.checked = v(o, this.rangeStartIndex, this.activeIndex + 1);
-    })) : this.uncheckAllOptions(), this.activeIndex += this.activeIndex < this.length - 1 ? 1 : 0, this.checkActiveIndex();
+    if (e) {
+      /* v8 ignore else -- @preserve */
+      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((t, o) => {
+        t.checked = v(o, this.rangeStartIndex, this.activeIndex + 1);
+      });
+    } else
+      this.uncheckAllOptions();
+    this.activeIndex += this.activeIndex < this.length - 1 ? 1 : 0, this.checkActiveIndex();
   }
   /**
    * Decrements the active index and marks the matching option as checked.
@@ -140,9 +155,16 @@ class i extends P(
    * @internal
    */
   checkPreviousOption(e) {
-    e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.checkedOptions.length === 1 && (this.rangeStartIndex += 1), this.options.forEach((t, o) => {
-      t.checked = v(o, this.activeIndex, this.rangeStartIndex);
-    })) : this.uncheckAllOptions(), this.activeIndex -= this.activeIndex > 0 ? 1 : 0, this.checkActiveIndex();
+    if (e) {
+      /* v8 ignore else -- @preserve */
+      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex);
+      /* v8 ignore else -- @preserve */
+      this.checkedOptions.length === 1 && (this.rangeStartIndex += 1), this.options.forEach((t, o) => {
+        t.checked = v(o, this.activeIndex, this.rangeStartIndex);
+      });
+    } else
+      this.uncheckAllOptions();
+    this.activeIndex -= this.activeIndex > 0 ? 1 : 0, this.checkActiveIndex();
   }
   /**
    * @internal
@@ -161,6 +183,7 @@ class i extends P(
   focusinHandler(e) {
     if (!this.multiple)
       return super.focusinHandler(e);
+    /* v8 ignore else -- @preserve */
     !this.shouldSkipFocus && e.target === e.currentTarget && (this.uncheckAllOptions(), this.activeIndex === -1 && (this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0), this.checkActiveIndex(), this.setSelectedOptions(), this.focusAndScrollOptionIntoView()), this.shouldSkipFocus = !1;
   }
   /**
@@ -173,6 +196,7 @@ class i extends P(
       super.setSelectedOptions();
       return;
     }
+    /* v8 ignore else -- @preserve */
     this.$fastController.isConnected && this.options && (this.selectedOptions = this.options.filter((e) => e.selected), this.focusAndScrollOptionIntoView());
   }
   /**
@@ -198,6 +222,7 @@ class i extends P(
       super.typeaheadBufferChanged(e, t);
       return;
     }
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       const o = this.getTypeaheadMatches(), a = this.options.indexOf(o[0]);
       a > -1 && (this.activeIndex = a, this.uncheckAllOptions(), this.checkActiveIndex()), this.typeaheadExpired = !1;
@@ -214,7 +239,9 @@ class i extends P(
    * @internal
    */
   uncheckAllOptions(e = !1) {
-    this.options.forEach((t) => t.checked = !1), e || (this.rangeStartIndex = -1);
+    this.options.forEach((t) => t.checked = !1);
+    /* v8 ignore else -- @preserve */
+    e || (this.rangeStartIndex = -1);
   }
   /**
    * Sets focus when the open property changes.
@@ -294,6 +321,7 @@ class i extends P(
       this.focus();
       return;
     }
+    /* v8 ignore else -- @preserve */
     this.options.includes(t) || (this.open = !1, this.indexWhenOpened !== this.selectedIndex && this.updateValue(!0));
   }
   /**
@@ -323,7 +351,9 @@ class i extends P(
   multipleChanged(e, t) {
     this.options.forEach((o) => {
       o.checked = t ? !1 : void 0;
-    }), this.setSelectedOptions(), this.proxy && (this.proxy.multiple = t);
+    }), this.setSelectedOptions();
+    /* v8 ignore if -- @preserve */
+    this.proxy && (this.proxy.multiple = t);
   }
   /**
    * Updates the selectedness of each option when the list of selected options changes.
@@ -345,6 +375,7 @@ class i extends P(
    * @internal
    */
   setProxyOptions() {
+    /* v8 ignore else -- @preserve */
     this.proxy instanceof HTMLSelectElement && this.options && (this.proxy.length = 0, this.options.forEach((e) => {
       const t = e.proxy || (e instanceof HTMLOptionElement ? e.cloneNode() : null);
       t && this.proxy.options.add(t);
@@ -360,11 +391,11 @@ class i extends P(
       return;
     const { key: t, shiftKey: o } = e;
     switch (this.shouldSkipFocus = !1, t) {
-      case O: {
+      case w: {
         this.checkFirstOption(o);
         return;
       }
-      case w: {
+      case O: {
         this.checkNextOption(o);
         return;
       }
@@ -384,12 +415,16 @@ class i extends P(
         this.uncheckAllOptions(), this.checkActiveIndex();
         return;
       }
-      case g:
-        if (e.preventDefault(), this.typeaheadExpired) {
+      case g: {
+        e.preventDefault();
+        /* v8 ignore else -- @preserve */
+        if (this.typeaheadExpired) {
           this.toggleSelectedForAllCheckedOptions();
           return;
         }
+      }
       default: {
+        /* v8 ignore else -- @preserve */
         t.length === 1 && this.handleTypeAhead(`${t}`);
         return;
       }
@@ -408,7 +443,7 @@ class i extends P(
         e.preventDefault(), this.collapsible && this.typeaheadExpired && (this.open = !this.open);
         break;
       }
-      case O:
+      case w:
       case k: {
         e.preventDefault();
         break;
@@ -424,7 +459,7 @@ class i extends P(
       case _:
         return this.collapsible && this.open && (e.preventDefault(), this.open = !1), !0;
     }
-    return this.collapsible && !this.open && this.selectedIndex !== t && this.updateValue(!0), !(e.key === w || e.key === I);
+    return this.collapsible && !this.open && this.selectedIndex !== t && this.updateValue(!0), !(e.key === O || e.key === I);
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("focusout", this.focusoutHandler), this.addEventListener("contentchange", this.updateDisplayValue);
@@ -518,7 +553,7 @@ l([
 l([
   p
 ], i.prototype, "metaSlottedContent", 2);
-const ne = ({
+const re = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}:host(:focus-within) .control:not(.has-activedescendant){--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))}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){border-radius:8px;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));--focus-stroke-gap-color: transparent}", ne = ({
   shape: r,
   disabled: e,
   appearance: t,
@@ -655,7 +690,7 @@ const de = (r) => h`
     B
   ],
   {
-    styles: oe
+    styles: re
   }
 ), ze = W(he);
 export {

package/bundled/definition2.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("./vivid-element.cjs"),m=require("./definition14.cjs"),u=require("./class-names.cjs"),d=require("./when.cjs"),_=":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}",b="https://icon.resources.vonage.com",h="4.6.9",f={toView(o){return o===void 0?null:o.toString()},fromView(o){if(typeof o=="string"&&(o=parseFloat(o.toString())),typeof o=="number")return isNaN(o)||!isFinite(o)?void 0:o}},p=`<svg width="80%" height="80%" viewBox="0 0 64 64">
+"use strict";const e=require("./vivid-element.cjs"),p=require("./definition14.cjs"),z=require("./class-names.cjs"),h=require("./when.cjs"),y=":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}",g="https://icon.resources.vonage.com",u="4.6.9",f={toView(o){return o===void 0?null:o.toString()},fromView(o){if(typeof o=="string"&&(o=parseFloat(o.toString())),typeof o=="number")return isNaN(o)||!isFinite(o)?void 0:o}},d=`<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">
@@ -9,16 +9,15 @@
             </animateTransform>
         </g>
     </g>
-</svg>`;var w=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(o,t,n,e)=>{for(var r=e>1?void 0:e?x(t,n):t,a=o.length-1,c;a>=0;a--)(c=o[a])&&(r=(e?c(t,n,r):c(r))||r);return e&&r&&w(t,n,r),r};const k=500,C=2e3,z=(o,t)=>[b,`v${t}`,o].join("/"),$=({ok:o,headers:t})=>{if(!o||t.get("content-type")!=="image/svg+xml")throw new Error("Something went wrong")},E=o=>($(o),o.text()),L=(o,t)=>fetch(z(`${o}.svg`,h),{signal:t}).then(E),g=o=>(o??"").trim(),v=new Map,I=(o,t)=>{const n=g(o);if(!n)return Promise.resolve("");const e=v.get(n);if(e&&!e.signal?.aborted)return e.promise;const r=L(n,t).then(a=>{const c=v.get(n);if(c&&c.promise===r&&t.aborted)throw v.delete(n),t.reason??new DOMException("Aborted","AbortError");return a}).catch(a=>{const c=v.get(n);throw c&&c.promise===r&&v.delete(n),a});return v.set(n,{promise:r,signal:t}),r};class s extends i.VividElement{constructor(){super(...arguments),this.iconLoaded=!1,this.#o=0,this.#t=null}#o;get iconUrl(){const t=g(this.name);return t?z(`${t}.svg`,h):this._svg}#t;async nameChanged(){const t=++this.#o;this.#t&&this.#t.abort(),this.#t=new AbortController,this._svg=void 0,this.iconLoaded=!1;let n=setTimeout(()=>{this.#o===t&&(this._svg=p,n=setTimeout(()=>{this.#o===t&&this._svg===p&&(this._svg=void 0)},C))},k);try{const e=await I(this.name,this.#t.signal);this.#o===t&&(this._svg=e)}catch{this.#o===t&&(this._svg=void 0)}finally{this.#o===t&&(clearTimeout(n),this.iconLoaded=!0)}}}l([i.attr],s.prototype,"connotation",2);l([i.attr({converter:f})],s.prototype,"size",2);l([i.observable],s.prototype,"_svg",2);l([i.observable],s.prototype,"iconLoaded",2);l([i.attr],s.prototype,"label",2);l([i.attr],s.prototype,"name",2);l([i.volatile],s.prototype,"iconUrl",1);const O=({connotation:o,size:t})=>u.classNames("control",[`connotation-${o}`,!!o],[`size-${t}`,typeof t=="number"]),D=o=>{const t=o.tagFor(m.VisuallyHidden),n=e=>!e.label||e.label.trim().length===0;return i.html`
+</svg>`;var b=Object.defineProperty,v=(o,t,n,i)=>{for(var r=void 0,a=o.length-1,c;a>=0;a--)(c=o[a])&&(r=c(t,n,r)||r);return r&&b(t,n,r),r};const _=500,k=2e3,w=(o,t)=>[g,`v${t}`,o].join("/"),x=({ok:o,headers:t})=>{if(!o||t.get("content-type")!=="image/svg+xml")throw new Error("Something went wrong")},C=o=>(x(o),o.text()),E=(o,t)=>fetch(w(`${o}.svg`,u),{signal:t}).then(C),L=o=>(o??"").trim(),l=new Map,I=(o,t)=>{const n=L(o);if(!n)return Promise.resolve("");const i=l.get(n);if(i&&!i.signal?.aborted)return i.promise;const r=E(n,t).then(a=>{const c=l.get(n);if(c&&c.promise===r&&t.aborted)throw l.delete(n),t.reason??new DOMException("Aborted","AbortError");return a}).catch(a=>{const c=l.get(n);throw c&&c.promise===r&&l.delete(n),a});return l.set(n,{promise:r,signal:t}),r};class s extends e.VividElement{constructor(){super(...arguments),this.iconLoaded=!1,this.#o=0,this.#t=null}#o;#t;async nameChanged(){const t=++this.#o;this.#t&&this.#t.abort(),this.#t=new AbortController,this._svg=void 0,this.iconLoaded=!1;let n=setTimeout(()=>{/* v8 ignore else -- @preserve */this.#o===t&&(this._svg=d,n=setTimeout(()=>{/* v8 ignore else -- @preserve */this.#o===t&&this._svg===d&&(this._svg=void 0)},k))},_);try{const i=await I(this.name,this.#t.signal);/* v8 ignore else -- @preserve */this.#o===t&&(this._svg=i)}catch{this.#o===t&&(this._svg=void 0)}finally{this.#o===t&&(clearTimeout(n),this.iconLoaded=!0)}}}v([e.attr],s.prototype,"connotation");v([e.attr({converter:f})],s.prototype,"size");v([e.observable],s.prototype,"_svg");v([e.observable],s.prototype,"iconLoaded");v([e.attr],s.prototype,"label");v([e.attr],s.prototype,"name");const $=({connotation:o,size:t})=>z.classNames("control",[`connotation-${o}`,!!o],[`size-${t}`,typeof t=="number"]),O=o=>{const t=o.tagFor(p.VisuallyHidden),n=i=>!i.label||i.label.trim().length===0;return e.html`
 		<figure
-			class="${O}"
-			?aria-hidden="${e=>n(e)}"
-			?aria-busy="${e=>!e?.iconLoaded}"
+			class="${$}"
+			?aria-hidden="${i=>n(i)}"
+			?aria-busy="${i=>!i?.iconLoaded}"
 		>
 			<slot>
-				${d.when(e=>!e?.iconLoaded,i.html`<img alt="${e=>e?.name}" src="${e=>e?.iconUrl}" />`)}
-				${d.when(e=>e?.iconLoaded&&e?._svg,e=>i.html`${i.html.partial(e._svg)}`)}
+				${h.when(i=>i?.iconLoaded&&i?._svg,i=>e.html`${e.html.partial(i._svg)}`)}
 			</slot>
-			<${t} class="label">${e=>e?.label}</${t}>
+			<${t} class="label">${i=>i?.label}</${t}>
 		</figure>
-	`},y=i.defineVividComponent("icon",s,D,[m.visuallyHiddenDefinition],{styles:_}),S=i.createRegisterFunction(y);exports.Icon=s;exports.iconDefinition=y;exports.registerIcon=S;
+	`},m=e.defineVividComponent("icon",s,O,[p.visuallyHiddenDefinition],{styles:y}),S=e.createRegisterFunction(m);exports.Icon=s;exports.iconDefinition=m;exports.registerIcon=S;

package/bundled/definition2.js

@@ -1,8 +1,8 @@
-import { V as u, a as d, o as z, v as f, h as v, c as _, d as b } from "./vivid-element.js";
-import { V as w, v as x } from "./definition14.js";
-import { c as k } from "./class-names.js";
-import { w as p } from "./when.js";
-const C = ":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}", $ = "https://icon.resources.vonage.com", h = "4.6.9", L = {
+import { V as z, a as v, o as m, h as d, c as h, d as y } from "./vivid-element.js";
+import { V as g, v as f } from "./definition14.js";
+import { c as u } from "./class-names.js";
+import { w as _ } from "./when.js";
+const b = ":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}", k = "https://icon.resources.vonage.com", w = "4.6.9", x = {
   toView(o) {
     return o === void 0 ? null : o.toString();
   },
@@ -10,7 +10,7 @@ const C = ":host{display:inline-block;vertical-align:sub}.control.connotation-ac
     if (typeof o == "string" && (o = parseFloat(o.toString())), typeof o == "number")
       return isNaN(o) || !isFinite(o) ? void 0 : o;
   }
-}, m = `<svg width="80%" height="80%" viewBox="0 0 64 64">
+}, p = `<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">
@@ -22,53 +22,52 @@ const C = ":host{display:inline-block;vertical-align:sub}.control.connotation-ac
         </g>
     </g>
 </svg>`;
-var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, a = (o, t, n, i) => {
-  for (var e = i > 1 ? void 0 : i ? O(t, n) : t, c = o.length - 1, r; c >= 0; c--)
-    (r = o[c]) && (e = (i ? r(t, n, e) : r(e)) || e);
-  return i && e && E(t, n, e), e;
+var C = Object.defineProperty, l = (o, t, n, i) => {
+  for (var e = void 0, s = o.length - 1, r; s >= 0; s--)
+    (r = o[s]) && (e = r(t, n, e) || e);
+  return e && C(t, n, e), e;
 };
-const I = 500, D = 2e3, y = (o, t) => [$, `v${t}`, o].join("/"), S = ({ ok: o, headers: t }) => {
+const E = 500, L = 2e3, I = (o, t) => [k, `v${t}`, o].join("/"), $ = ({ ok: o, headers: t }) => {
   if (!o || t.get("content-type") !== "image/svg+xml")
     throw new Error("Something went wrong");
-}, T = (o) => (S(o), o.text()), V = (o, t) => fetch(y(`${o}.svg`, h), { signal: t }).then(
-  T
-), g = (o) => (o ?? "").trim(), l = /* @__PURE__ */ new Map(), A = (o, t) => {
-  const n = g(o);
+}, O = (o) => ($(o), o.text()), S = (o, t) => fetch(I(`${o}.svg`, w), { signal: t }).then(
+  O
+), T = (o) => (o ?? "").trim(), a = /* @__PURE__ */ new Map(), V = (o, t) => {
+  const n = T(o);
   if (!n) return Promise.resolve("");
-  const i = l.get(n);
+  const i = a.get(n);
   if (i && !i.signal?.aborted)
     return i.promise;
-  const e = V(n, t).then((c) => {
-    const r = l.get(n);
+  const e = S(n, t).then((s) => {
+    const r = a.get(n);
     if (r && r.promise === e && t.aborted)
-      throw l.delete(n), t.reason ?? new DOMException("Aborted", "AbortError");
-    return c;
-  }).catch((c) => {
-    const r = l.get(n);
-    throw r && r.promise === e && l.delete(n), c;
+      throw a.delete(n), t.reason ?? new DOMException("Aborted", "AbortError");
+    return s;
+  }).catch((s) => {
+    const r = a.get(n);
+    throw r && r.promise === e && a.delete(n), s;
   });
-  return l.set(n, { promise: e, signal: t }), e;
+  return a.set(n, { promise: e, signal: t }), e;
 };
-class s extends u {
+class c extends z {
   constructor() {
     super(...arguments), this.iconLoaded = !1, this.#o = 0, this.#t = null;
   }
   #o;
-  get iconUrl() {
-    const t = g(this.name);
-    return t ? y(`${t}.svg`, h) : this._svg;
-  }
   #t;
   async nameChanged() {
     const t = ++this.#o;
     this.#t && this.#t.abort(), this.#t = new AbortController(), this._svg = void 0, this.iconLoaded = !1;
     let n = setTimeout(() => {
-      this.#o === t && (this._svg = m, n = setTimeout(() => {
-        this.#o === t && this._svg === m && (this._svg = void 0);
-      }, D));
-    }, I);
+      /* v8 ignore else -- @preserve */
+      this.#o === t && (this._svg = p, n = setTimeout(() => {
+        /* v8 ignore else -- @preserve */
+        this.#o === t && this._svg === p && (this._svg = void 0);
+      }, L));
+    }, E);
     try {
-      const i = await A(this.name, this.#t.signal);
+      const i = await V(this.name, this.#t.signal);
+      /* v8 ignore else -- @preserve */
       this.#o === t && (this._svg = i);
     } catch {
       this.#o === t && (this._svg = void 0);
@@ -77,63 +76,56 @@ class s extends u {
     }
   }
 }
-a([
-  d
-], s.prototype, "connotation", 2);
-a([
-  d({ converter: L })
-], s.prototype, "size", 2);
-a([
-  z
-], s.prototype, "_svg", 2);
-a([
-  z
-], s.prototype, "iconLoaded", 2);
-a([
-  d
-], s.prototype, "label", 2);
-a([
-  d
-], s.prototype, "name", 2);
-a([
-  f
-], s.prototype, "iconUrl", 1);
-const N = ({ connotation: o, size: t }) => k(
+l([
+  v
+], c.prototype, "connotation");
+l([
+  v({ converter: x })
+], c.prototype, "size");
+l([
+  m
+], c.prototype, "_svg");
+l([
+  m
+], c.prototype, "iconLoaded");
+l([
+  v
+], c.prototype, "label");
+l([
+  v
+], c.prototype, "name");
+const A = ({ connotation: o, size: t }) => u(
   "control",
   [`connotation-${o}`, !!o],
   [`size-${t}`, typeof t == "number"]
-), P = (o) => {
-  const t = o.tagFor(w), n = (i) => !i.label || i.label.trim().length === 0;
-  return v`
+), D = (o) => {
+  const t = o.tagFor(g), n = (i) => !i.label || i.label.trim().length === 0;
+  return d`
 		<figure
-			class="${N}"
+			class="${A}"
 			?aria-hidden="${(i) => n(i)}"
 			?aria-busy="${(i) => !i?.iconLoaded}"
 		>
 			<slot>
-				${p(
-    (i) => !i?.iconLoaded,
-    v`<img alt="${(i) => i?.name}" src="${(i) => i?.iconUrl}" />`
-  )}
-				${p(
+				${_(
     (i) => i?.iconLoaded && i?._svg,
-    (i) => v`${v.partial(i._svg)}`
+    (i) => d`${d.partial(i._svg)}`
   )}
 			</slot>
 			<${t} class="label">${(i) => i?.label}</${t}>
 		</figure>
 	`;
-}, R = b(
+}, N = y(
   "icon",
-  s,
-  P,
-  [x],
+  c,
+  D,
+  [f],
   {
-    styles: C
+    styles: b
   }
-), j = _(R);
+), F = h(N);
 export {
-  s as I,
-  R as i,
-  j as r
+  c as I,
+  N as i,
+  F as r
 };

package/bundled/definition22.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("./definition2.cjs"),r=require("./vivid-element.cjs"),d=require("./affix.cjs"),u=require("./host-semantics.cjs"),x=require("./dom.cjs"),b=require("./children.cjs"),v=require("./when.cjs"),m=require("./slotted.cjs"),_=require("./ref.cjs"),g=require("./class-names.cjs"),y=":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover: hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";var C=Object.defineProperty,i=(t,o,n,e)=>{for(var l=void 0,s=t.length-1,p;s>=0;s--)(p=t[s])&&(l=p(o,n,l)||l);return l&&C(o,n,l),l};function c(t){return x.isHTMLElement(t)&&(t.getAttribute("role")==="treeitem"||t instanceof a)}class a extends u.HostSemantics(d.AffixIcon(r.VividElement)){constructor(){super(...arguments),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>c(this.parentElement),this.handleExpandCollapseButtonClick=o=>{!this.disabled&&!o.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=o=>{this.setAttribute("tabindex","0")},this.handleBlur=o=>{this.setAttribute("tabindex","-1")}}expandedChanged(){this.$fastController.isConnected&&this.$emit("expanded-change",this)}selectedChanged(){this.$fastController.isConnected&&this.$emit("selected-change",this)}itemsChanged(){this.$fastController.isConnected&&this.items.forEach(o=>{c(o)&&(o.nested=!0)})}static focusItem(o){o.focusable=!0,o.focus()}childItemLength(){return this.childItems.filter(n=>c(n)).length}}i([r.attr],a.prototype,"text");i([r.attr({mode:"boolean"})],a.prototype,"expanded");i([r.attr({mode:"boolean"})],a.prototype,"selected");i([r.attr({mode:"boolean"})],a.prototype,"disabled");i([r.observable],a.prototype,"focusable");i([r.observable],a.prototype,"childItems");i([r.observable],a.prototype,"items");i([r.observable],a.prototype,"nested");i([r.observable],a.prototype,"renderCollapsedChildren");const I=({disabled:t,selected:o})=>g.classNames("control",["disabled",t],["selected",!!o]),$=t=>{const o=t.tagFor(h.Icon);return r.html`
+"use strict";const h=require("./definition2.cjs"),r=require("./vivid-element.cjs"),d=require("./affix.cjs"),u=require("./host-semantics.cjs"),x=require("./dom.cjs"),b=require("./children.cjs"),v=require("./when.cjs"),m=require("./slotted.cjs"),_=require("./ref.cjs"),g=require("./class-names.cjs"),y=":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover: hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";var C=Object.defineProperty,i=(t,o,n,e)=>{for(var l=void 0,s=t.length-1,p;s>=0;s--)(p=t[s])&&(l=p(o,n,l)||l);return l&&C(o,n,l),l};function c(t){return x.isHTMLElement(t)&&(t.getAttribute("role")==="treeitem"||t instanceof a)}class a extends u.HostSemantics(d.AffixIcon(r.VividElement)){constructor(){super(...arguments),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>c(this.parentElement),this.handleExpandCollapseButtonClick=o=>{!this.disabled&&!o.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=o=>{this.setAttribute("tabindex","0")},this.handleBlur=o=>{this.setAttribute("tabindex","-1")}}expandedChanged(){this.$fastController.isConnected&&this.$emit("expanded-change",this)}selectedChanged(){this.$fastController.isConnected&&this.$emit("selected-change",this)}itemsChanged(){this.$fastController.isConnected&&this.items.forEach(o=>{/* v8 ignore else -- @preserve */c(o)&&(o.nested=!0)})}static focusItem(o){o.focusable=!0,o.focus()}childItemLength(){return this.childItems.filter(n=>c(n)).length}}i([r.attr],a.prototype,"text");i([r.attr({mode:"boolean"})],a.prototype,"expanded");i([r.attr({mode:"boolean"})],a.prototype,"selected");i([r.attr({mode:"boolean"})],a.prototype,"disabled");i([r.observable],a.prototype,"focusable");i([r.observable],a.prototype,"childItems");i([r.observable],a.prototype,"items");i([r.observable],a.prototype,"nested");i([r.observable],a.prototype,"renderCollapsedChildren");const I=({disabled:t,selected:o})=>g.classNames("control",["disabled",t],["selected",!!o]),$=t=>{const o=t.tagFor(h.Icon);return r.html`
 	<div aria-hidden="true"
 		class="expandCollapseButton"
 		@click="${(n,e)=>n.handleExpandCollapseButtonClick(e.event)}"

package/bundled/definition22.js

@@ -35,6 +35,7 @@ class a extends C(_(u)) {
   }
   itemsChanged() {
     this.$fastController.isConnected && this.items.forEach((o) => {
+      /* v8 ignore else -- @preserve */
       d(o) && (o.nested = !0);
     });
   }