@vonage/vivid 5.8.0 → 5.10.0

package/data-grid/index.js

@@ -1,6 +1,7 @@
 import { I as N, i as W } from "../bundled/definition2.js";
-import { V as $, h as u, a as m, o as a, b as G, U as D, O as R, n as J, c as X, d as F } from "../bundled/vivid-element.js";
+import { V as $, h as u, a as f, o as a, b as G, U as D, O as R, n as J, c as X, d as F } from "../bundled/vivid-element.js";
 import { V as Y, v as Z } from "../bundled/definition14.js";
+import { D as v, a as _, b as g, G as b, c as H } from "../bundled/data-grid.options.js";
 import { R as A } from "../bundled/repeat.js";
 import { n as T } from "../bundled/normalize.js";
 import { d as ee, e as te, f as L, k as P, a as M, g as oe, h as le, i as ie, j as ne, b as ae, c as re, l as se } from "../bundled/key-codes.js";
@@ -9,35 +10,14 @@ import { c as V } from "../bundled/children.js";
 import { s as q, e as Q } from "../bundled/slotted.js";
 import { L as ce } from "../bundled/localized.js";
 import { c as B } from "../bundled/class-names.js";
-import { w as k } from "../bundled/when.js";
-const H = "focus", O = "focusin", w = "focusout", y = "keydown", de = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", ue = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", he = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}', _ = {
-  none: "none",
-  ascending: "ascending",
-  descending: "descending",
-  other: "other"
-}, b = {
-  none: "none",
-  default: "default",
-  sticky: "sticky"
-}, v = {
-  default: "default",
-  columnHeader: "columnheader",
-  rowHeader: "rowheader"
-}, g = {
-  default: "default",
-  header: "header",
-  stickyHeader: "sticky-header"
-}, z = {
-  columnheader: "columnheader",
-  rowheader: "rowheader",
-  default: "gridcell"
-};
-var fe = Object.defineProperty, C = (o, e, t, i) => {
+import { w as I } from "../bundled/when.js";
+const O = "focus", z = "focusin", w = "focusout", y = "keydown", de = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", ue = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", he = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}';
+var me = Object.defineProperty, C = (o, e, t, i) => {
   for (var l = void 0, n = o.length - 1, r; n >= 0; n--)
     (r = o[n]) && (l = r(e, t, l) || l);
-  return l && fe(e, t, l), l;
+  return l && me(e, t, l), l;
 };
-const me = u`
+const fe = u`
 	<template>
 		${(o) => o.rowData === null || o.columnDefinition === null || o.columnDefinition.columnDataKey === null ? null : o.rowData[o.columnDefinition.columnDataKey]}
 	</template>
@@ -88,13 +68,13 @@ class p extends ce(K($)) {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener(O, this.handleFocusin), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`, this.updateCellView(), this.updateCellStyle(), this.updateFixedStyle();
+    super.connectedCallback(), this.addEventListener(z, this.handleFocusin), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`, this.updateCellView(), this.updateCellStyle(), this.updateFixedStyle();
   }
   /**
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener(O, this.handleFocusin), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener(z, this.handleFocusin), this.removeEventListener(
       w,
       this.handleFocusout
     ), this.removeEventListener(y, this.handleKeydown), this.disconnectCellView();
@@ -175,7 +155,7 @@ class p extends ce(K($)) {
           this.columnDefinition.cellTemplate !== void 0 ? this.customCellView = this.columnDefinition.cellTemplate.render(
             this,
             this
-          ) : this.customCellView = me.render(this, this);
+          ) : this.customCellView = fe.render(this, this);
           break;
       }
       this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = _.none : this.sortDirection = void 0;
@@ -220,10 +200,10 @@ class p extends ce(K($)) {
   }
 }
 C([
-  m({ attribute: "cell-type" })
+  f({ attribute: "cell-type" })
 ], p.prototype, "cellType");
 C([
-  m({ attribute: "grid-column" })
+  f({ attribute: "grid-column" })
 ], p.prototype, "gridColumn");
 C([
   a
@@ -235,10 +215,10 @@ C([
   a
 ], p.prototype, "_selectable");
 C([
-  m({ mode: "boolean" })
+  f({ mode: "boolean" })
 ], p.prototype, "selected");
 C([
-  m({ attribute: "sort-direction" })
+  f({ attribute: "sort-direction" })
 ], p.prototype, "sortDirection");
 var ve = Object.defineProperty, h = (o, e, t, i) => {
   for (var l = void 0, n = o.length - 1, r; n >= 0; n--)
@@ -339,10 +319,10 @@ class c extends K($) {
   }
 }
 h([
-  m({ attribute: "grid-template-columns" })
+  f({ attribute: "grid-template-columns" })
 ], c.prototype, "gridTemplateColumns");
 h([
-  m({ attribute: "row-type" })
+  f({ attribute: "row-type" })
 ], c.prototype, "rowType");
 h([
   a
@@ -375,20 +355,20 @@ h([
   a
 ], c.prototype, "_selectable");
 h([
-  m({ mode: "boolean" })
+  f({ mode: "boolean" })
 ], c.prototype, "selected");
 var ge = Object.defineProperty, d = (o, e, t, i) => {
   for (var l = void 0, n = o.length - 1, r; n >= 0; n--)
     (r = o[n]) && (l = r(e, t, l) || l);
   return l && ge(e, t, l), l;
 };
-const f = {
+const m = {
   none: "none",
   singleRow: "single-row",
   multiRow: "multi-row",
   singleCell: "single-cell",
   multiCell: "multi-cell"
-}, s = class I extends $ {
+}, s = class k extends $ {
   constructor() {
     super(), this.noTabbing = !1, this.generateHeader = b.default, this.rowsData = [], this.columnDefinitions = null, this.focusRowIndex = 0, this.focusColumnIndex = 0, this.fixedColumnsPositions = [], this.behaviorOrchestrator = null, this.generatedHeader = null, this.isUpdatingFocus = !1, this.pendingFocusUpdate = !1, this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !0, this.generatedGridTemplateColumns = "", this.focusOnCell = (e, t, i) => {
       if (this.rowElements.length === 0) {
@@ -433,11 +413,11 @@ const f = {
       (e.key === "Enter" || e.key === " ") && this.#t(e);
     }, this.#t = ({ target: e, ctrlKey: t, shiftKey: i, metaKey: l }) => {
       if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
-        if (this.selectionMode === f.singleCell || this.selectionMode === f.multiCell) {
+        if (this.selectionMode === m.singleCell || this.selectionMode === m.multiCell) {
           this.#i({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
           return;
         }
-        (this.selectionMode === f.singleRow || this.selectionMode === f.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
+        (this.selectionMode === m.singleRow || this.selectionMode === m.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: i, metaKey: l });
       }
     }, this.#i = ({
       target: e,
@@ -446,7 +426,7 @@ const f = {
       metaKey: l
     }) => {
       const n = e;
-      if (this.selectionMode === f.multiCell && (t || i || l))
+      if (this.selectionMode === m.multiCell && (t || i || l))
         n.selected = !this.#r.includes(n);
       else {
         const r = n.selected;
@@ -459,7 +439,7 @@ const f = {
       metaKey: l
     }) => {
       const n = e.parentNode;
-      if (this.selectionMode === f.multiRow && (t || i || l))
+      if (this.selectionMode === m.multiRow && (t || i || l))
         n.selected = !this.#a.includes(n);
       else {
         const r = n.selected;
@@ -479,16 +459,16 @@ const f = {
       ), i = Array.from(
         this.querySelectorAll('[role="row"], [row-type="default"]')
       );
-      if (this.selectionMode === f.singleCell || this.selectionMode === f.multiCell) {
+      if (this.selectionMode === m.singleCell || this.selectionMode === m.multiCell) {
         for (const l of t)
           l._selectable = !0, l.selected = e ? !1 : l.selected || !1;
         for (const l of i)
           l._selectable = !1, l.selected = !1;
       }
-      if (this.selectionMode === f.none)
+      if (this.selectionMode === m.none)
         for (const l of [...t, ...i])
           l._selectable = !1, l.selected = !1;
-      if (this.selectionMode === f.singleRow || this.selectionMode === f.multiRow) {
+      if (this.selectionMode === m.singleRow || this.selectionMode === m.multiRow) {
         for (const l of t)
           l._selectable = !1, l.selected = !1;
         for (const l of i)
@@ -534,7 +514,7 @@ const f = {
    * @internal
    */
   rowsDataChanged() {
-    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = I.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
+    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = k.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
   }
   /**
    * @internal
@@ -544,7 +524,7 @@ const f = {
       this.generatedGridTemplateColumns = "";
       return;
     }
-    this.generatedGridTemplateColumns = I.generateTemplateColumns(
+    this.generatedGridTemplateColumns = k.generateTemplateColumns(
       this.columnDefinitions
     );
     /* v8 ignore if -- @preserve */
@@ -599,7 +579,7 @@ const f = {
         { positioning: !0 }
       ),
       this.appendChild(document.createComment(""))
-    )), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(H, this.handleFocus), this.addEventListener(y, this.handleKeydown), this.addEventListener(w, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), D.enqueue(this.queueRowIndexUpdate), this.#e(), R.getNotifier(this).subscribe(
+    )), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(O, this.handleFocus), this.addEventListener(y, this.handleKeydown), this.addEventListener(w, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), D.enqueue(this.queueRowIndexUpdate), this.#e(), R.getNotifier(this).subscribe(
       this.#o,
       "columnDefinitions"
     );
@@ -608,7 +588,7 @@ const f = {
    * @internal
    */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(H, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(O, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
       w,
       this.handleFocusOut
     ), this.observer.disconnect(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.generatedHeader = null, R.getNotifier(this).unsubscribe(
@@ -825,13 +805,13 @@ const f = {
   }
 };
 d([
-  m({ attribute: "no-tabbing", mode: "boolean" })
+  f({ attribute: "no-tabbing", mode: "boolean" })
 ], s.prototype, "noTabbing");
 d([
-  m({ attribute: "generate-header" })
+  f({ attribute: "generate-header" })
 ], s.prototype, "generateHeader");
 d([
-  m({ attribute: "grid-template-columns" })
+  f({ attribute: "grid-template-columns" })
 ], s.prototype, "gridTemplateColumns");
 d([
   a
@@ -855,7 +835,7 @@ d([
   a
 ], s.prototype, "focusColumnIndex");
 d([
-  m({ attribute: "fixed-columns", converter: J })
+  f({ attribute: "fixed-columns", converter: J })
 ], s.prototype, "fixedColumns");
 d([
   a
@@ -870,7 +850,7 @@ d([
   a
 ], s.prototype, "slottedRowElements");
 d([
-  m({ attribute: "selection-mode" })
+  f({ attribute: "selection-mode" })
 ], s.prototype, "selectionMode");
 let Ce = s;
 function be(o) {
@@ -884,7 +864,7 @@ function be(o) {
 `;
 }
 function we(o) {
-  return o.selectionMode === void 0 || o.selectionMode === f.none ? null : o.selectionMode.includes("multi") ? "true" : "false";
+  return o.selectionMode === void 0 || o.selectionMode === m.none ? null : o.selectionMode.includes("multi") ? "true" : "false";
 }
 function ye(o) {
   if (o.columnDefinitions === null) {
@@ -939,7 +919,7 @@ function Te(o) {
     ></${e}>
 `;
 }
-function ke(o) {
+function Ie(o) {
   const e = o.tagFor(p);
   return u`
     <${e}
@@ -949,8 +929,8 @@ function ke(o) {
     ></${e}>
 `;
 }
-const Ie = (o) => {
-  const e = Te(o), t = ke(o), i = (l) => B("base", ["selected", !!l.selected]);
+const ke = (o) => {
+  const e = Te(o), t = Ie(o), i = (l) => B("base", ["selected", !!l.selected]);
   return u`
 		<template
 			${U({
@@ -988,7 +968,7 @@ function $e(o) {
 function Fe(o) {
   const e = o.tagFor(N);
   return u`
-		${k(
+		${I(
     E,
     u`
 				<${e} class="header-icon" name="${Ee}"></${e}>
@@ -1022,7 +1002,7 @@ const Ge = (o) => {
 		<template
 			tabindex="-1"
 			${U({
-    role: (i) => z[i.cellType] ?? z.default,
+    role: (i) => H[i.cellType] ?? H.default,
     ariaSelected: $e,
     ariaSort: (i) => i.sortDirection ?? null
   })}
@@ -1039,7 +1019,7 @@ const Ge = (o) => {
 								${(l) => l.locale.dataGrid.cell.selected}
 							</${e}>` : null}
 				<slot></slot>
-				${k(
+				${I(
     E,
     u`<${e}
 							data-announcement="button-role"
@@ -1048,7 +1028,7 @@ const Ge = (o) => {
 						</${e}>
 					`
   )}
-				${k(
+				${I(
     Se,
     u`<${e}
 							aria-live="polite"
@@ -1072,7 +1052,7 @@ const Ge = (o) => {
 ), Le = F(
   "data-grid-row",
   c,
-  Ie,
+  ke,
   [Ae],
   {
     styles: ue

package/file-picker/definition.cjs

@@ -289,13 +289,15 @@ class FilePicker extends withContextualHelp.WithContextualHelp(
     this.#updateFormValue();
   }
   #addFiles(files) {
-    if (this.singleFile) {
-      /* v8 ignore else -- @preserve */
-      if (files.length > 0) {
-        this._allFiles = [files[files.length - 1]];
-      }
+    const newFiles = Array.from(files).filter(
+      (file) => !this._allFiles.some(
+        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
+      )
+    );
+    if (this.singleFile && newFiles.length > 0) {
+      this._allFiles = [newFiles[newFiles.length - 1]];
     } else {
-      this._allFiles = [...this._allFiles, ...files];
+      this._allFiles = [...this._allFiles, ...newFiles];
     }
     this.$emit("change");
   }
@@ -461,12 +463,12 @@ const FilePickerTemplate = (context) => {
 					aria-describedby="${(x) => x._feedbackDescribedBy}"
 					${delegatesAria.delegateAria()}
 				>
-					<vwc-icon
+					<${iconTag}
 						class="upload-icon"
 						name="cloud-upload-line"
 						size="-4"
 						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
-					></vwc-icon>
+					></${iconTag}>
 					<span class="upload-text"><slot></slot></span>
 				</button>
 				${(x) => x._getFeedbackTemplate(context)}

package/file-picker/definition.js

@@ -285,13 +285,15 @@ class FilePicker extends WithContextualHelp(
     this.#updateFormValue();
   }
   #addFiles(files) {
-    if (this.singleFile) {
-      /* v8 ignore else -- @preserve */
-      if (files.length > 0) {
-        this._allFiles = [files[files.length - 1]];
-      }
+    const newFiles = Array.from(files).filter(
+      (file) => !this._allFiles.some(
+        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
+      )
+    );
+    if (this.singleFile && newFiles.length > 0) {
+      this._allFiles = [newFiles[newFiles.length - 1]];
     } else {
-      this._allFiles = [...this._allFiles, ...files];
+      this._allFiles = [...this._allFiles, ...newFiles];
     }
     this.$emit("change");
   }
@@ -457,12 +459,12 @@ const FilePickerTemplate = (context) => {
 					aria-describedby="${(x) => x._feedbackDescribedBy}"
 					${delegateAria()}
 				>
-					<vwc-icon
+					<${iconTag}
 						class="upload-icon"
 						name="cloud-upload-line"
 						size="-4"
 						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
-					></vwc-icon>
+					></${iconTag}>
 					<span class="upload-text"><slot></slot></span>
 				</button>
 				${(x) => x._getFeedbackTemplate(context)}

package/file-picker/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),a=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),y=require("../bundled/with-error-text.cjs"),w=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),C=require("../bundled/repeat.cjs"),b=require("../bundled/class-names.cjs"),$=".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}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";async function z(l){return l.items?.[0]?.webkitGetAsEntry!=null?await D(l.items):Array.from(l.files)}async function D(l){const r=[];for(const t of l){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(l,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=l.isFile?t(l):l.isDirectory?T(l):Promise.resolve([]);return e.catch(()=>null),e},T=async l=>new Promise((r,t)=>{const e=[],o=l.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(l,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(l.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(l.type)===o(i))return!0}else if(l.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(l,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=l.length-1,c;i>=0;i--)(c=l[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(y.WithErrorText(w.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(a.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,a.ExecutionContext.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#l(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){/* v8 ignore if -- @preserve */this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#a(){this.#r=a.Observable.binding(()=>this.#l(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){/* v8 ignore else -- @preserve */return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){if(this.singleFile){/* v8 ignore else -- @preserve */r.length>0&&(this._allFiles=[r[r.length-1]])}else this._allFiles=[...this._allFiles,...r];this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([a.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([a.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([a.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([a.attr],s.prototype,"accept",2);n([a.attr],s.prototype,"size",2);n([a.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([a.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([a.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([a.observable],s.prototype,"_customValidationError",2);n([a.observable],s.prototype,"_dragHover",2);n([a.observable],s.prototype,"_allFiles",2);n([a.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(l,r)=>{let t=0,e="b";/* v8 ignore else -- @preserve */if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return a.html`<strong>${l._formatNumber(t)}</strong>
+"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),a=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),y=require("../bundled/with-error-text.cjs"),w=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),$=require("../bundled/repeat.cjs"),b=require("../bundled/class-names.cjs"),C=".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}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";async function z(l){return l.items?.[0]?.webkitGetAsEntry!=null?await D(l.items):Array.from(l.files)}async function D(l){const r=[];for(const t of l){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(l,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=l.isFile?t(l):l.isDirectory?T(l):Promise.resolve([]);return e.catch(()=>null),e},T=async l=>new Promise((r,t)=>{const e=[],o=l.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(l,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(l.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(l.type)===o(i))return!0}else if(l.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(l,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=l.length-1,c;i>=0;i--)(c=l[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(y.WithErrorText(w.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(a.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,a.ExecutionContext.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#l(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){/* v8 ignore if -- @preserve */this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#a(){this.#r=a.Observable.binding(()=>this.#l(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){/* v8 ignore else -- @preserve */return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){const t=Array.from(r).filter(e=>!this._allFiles.some(o=>o.name===e.name&&o.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([a.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([a.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([a.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([a.attr],s.prototype,"accept",2);n([a.attr],s.prototype,"size",2);n([a.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([a.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([a.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([a.observable],s.prototype,"_customValidationError",2);n([a.observable],s.prototype,"_dragHover",2);n([a.observable],s.prototype,"_allFiles",2);n([a.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(l,r)=>{let t=0,e="b";/* v8 ignore else -- @preserve */if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return a.html`<strong>${l._formatNumber(t)}</strong>
 		${q[e]}`},H=({size:l,_dragHover:r})=>b.classNames("control",[`size-${l}`,!!l],["drag-hover",r]),B=l=>{const r=l.tagFor(u.Icon),t=l.tagFor(h.Button);return a.html`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
@@ -20,18 +20,18 @@
 					aria-describedby="${e=>e._feedbackDescribedBy}"
 					${m.delegateAria()}
 				>
-					<vwc-icon
+					<${r}
 						class="upload-icon"
 						name="cloud-upload-line"
 						size="-4"
 						label="${e=>e.locale.filePicker.uploadFilesLabel}"
-					></vwc-icon>
+					></${r}>
 					<span class="upload-text"><slot></slot></span>
 				</button>
 				${e=>e._getFeedbackTemplate(l)}
 			</div>
 			<div class="preview-list">
-				${C.repeat(e=>e._validatedFiles,a.html`
+				${$.repeat(e=>e._validatedFiles,a.html`
 				<div class="${e=>b.classNames("preview",["has-error",!!e.validationError])}">
 					<div class="details">
 						<div class="filename">${e=>e.file.name}</div>
@@ -58,4 +58,4 @@
 			tabindex="-1"
 			@change="${(e,o)=>e._onHiddenInputChange(o.event)}"
 		/>
-	`},O=a.defineVividComponent("file-picker",s,B,[u.iconDefinition,h.buttonDefinition,f.feedbackMessageDefinition],{styles:$,shadowOptions:{delegatesFocus:!0}}),I=a.createRegisterFunction(O);I();
+	`},O=a.defineVividComponent("file-picker",s,B,[u.iconDefinition,h.buttonDefinition,f.feedbackMessageDefinition],{styles:C,shadowOptions:{delegatesFocus:!0}}),I=a.createRegisterFunction(O);I();

package/file-picker/index.js

@@ -1,7 +1,7 @@
 import { I as b, i as g } from "../bundled/definition2.js";
 import { B as x, b as F } from "../bundled/definition3.js";
-import { V as y, E as w, O as k, a as d, o as v, v as _, h as p, c as E, d as C } from "../bundled/vivid-element.js";
-import { W as $, f as z } from "../bundled/mixins.js";
+import { V as y, E as w, O as k, a as d, o as v, v as _, h as p, c as E, d as $ } from "../bundled/vivid-element.js";
+import { W as C, f as z } from "../bundled/mixins.js";
 import { D, d as P } from "../bundled/delegates-aria.js";
 import { F as T } from "../bundled/form-associated.js";
 import { W as V } from "../bundled/with-contextual-help.js";
@@ -68,7 +68,7 @@ var N = Object.defineProperty, G = Object.getOwnPropertyDescriptor, s = (a, r, o
   return e && t && N(r, o, t), t;
 };
 class l extends V(
-  $(
+  C(
     A(
       S(D(B(T(y))))
     )
@@ -202,12 +202,12 @@ class l extends V(
     this.#o();
   }
   #t(r) {
-    if (this.singleFile) {
-      /* v8 ignore else -- @preserve */
-      r.length > 0 && (this._allFiles = [r[r.length - 1]]);
-    } else
-      this._allFiles = [...this._allFiles, ...r];
-    this.$emit("change");
+    const o = Array.from(r).filter(
+      (e) => !this._allFiles.some(
+        (t) => t.name === e.name && t.size === e.size
+      )
+    );
+    this.singleFile && o.length > 0 ? this._allFiles = [o[o.length - 1]] : this._allFiles = [...this._allFiles, ...o], this.$emit("change");
   }
   /**
    * Removes all files from the File Picker.
@@ -343,12 +343,12 @@ const f = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r
 					aria-describedby="${(e) => e._feedbackDescribedBy}"
 					${P()}
 				>
-					<vwc-icon
+					<${r}
 						class="upload-icon"
 						name="cloud-upload-line"
 						size="-4"
 						label="${(e) => e.locale.filePicker.uploadFilesLabel}"
-					></vwc-icon>
+					></${r}>
 					<span class="upload-text"><slot></slot></span>
 				</button>
 				${(e) => e._getFeedbackTemplate(a)}
@@ -385,7 +385,7 @@ const f = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r
 			@change="${(e, t) => e._onHiddenInputChange(t.event)}"
 		/>
 	`;
-}, J = C(
+}, J = $(
   "file-picker",
   l,
   q,

package/icon/definition.cjs

@@ -10,7 +10,7 @@ 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}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
-const ICONS_VERSION = '4.6.9';
+const ICONS_VERSION = '4.7.0';
 
 const numberConverter = {
   toView(value) {

package/icon/definition.js

@@ -6,7 +6,7 @@ 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}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
-const ICONS_VERSION = '4.6.9';
+const ICONS_VERSION = '4.7.0';
 
 const numberConverter = {
   toView(value) {