@vonage/vivid 5.7.0 → 5.9.0

package/data-table/definition.js

@@ -0,0 +1,188 @@
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { html } from '@microsoft/fast-element';
+import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
+import { c as DataGridCellRole } from '../unbundled/data-grid.options.js';
+
+const tableStyles = ":host{display:inline-block}.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;display:table;overflow:auto;width:100%;block-size:inherit;border-collapse:collapse;inline-size:100%;max-block-size:inherit}";
+
+const tableHeadStyles = ":host{display:table-header-group}";
+
+const tableBodyStyles = ":host{display:table-row-group}";
+
+const tableRowStyles = ":host{display:table-row}.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:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}";
+
+const tableHeaderCellStyles = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);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-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{--_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: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));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
+
+const tableCellStyles = ":host{display:table-cell}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{box-sizing:border-box;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:12px 14px;padding-inline:12px;vertical-align:middle}:host: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));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
+
+class Table extends VividElement {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableTemplate = (context) => {
+  return html`
+		<template role="table">
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+
+class TableHead extends VividElement {
+}
+
+const TableHeadTemplate = (context) => {
+  return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+
+class TableBody extends VividElement {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableBodyTemplate = (context) => {
+  return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+
+class TableRow extends HostSemantics(VividElement) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableRowTemplate = (context) => {
+  return html`
+		<template
+			${applyHostSemantics({
+    role: "row"
+  })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+
+class TableHeaderCell extends HostSemantics(VividElement) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableHeaderCellTemplate = (context) => {
+  return html`
+		<template
+			tabindex="-1"
+			${applyHostSemantics({
+    role: () => DataGridCellRole.columnheader
+  })}
+		>
+			<slot></slot>
+		</template>
+	`;
+};
+
+class TableCell extends HostSemantics(VividElement) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+const TableCellTemplate = (context) => {
+  return html`
+		<template
+			tabindex="-1"
+			${applyHostSemantics({
+    role: () => "cell"
+  })}
+		>
+			<slot></slot>
+		</template>
+	`;
+};
+
+const tableCellDefinition = defineVividComponent(
+  "table-cell",
+  TableCell,
+  TableCellTemplate,
+  [],
+  {
+    styles: tableCellStyles
+  }
+);
+const tableHeaderCellDefinition = defineVividComponent(
+  "table-header-cell",
+  TableHeaderCell,
+  TableHeaderCellTemplate,
+  [tableCellDefinition],
+  {
+    styles: tableHeaderCellStyles
+  }
+);
+const tableRowDefinition = defineVividComponent(
+  "table-row",
+  TableRow,
+  TableRowTemplate,
+  [tableCellDefinition, tableHeaderCellDefinition],
+  {
+    styles: tableRowStyles
+  }
+);
+const tableBodyDefinition = defineVividComponent(
+  "table-body",
+  TableBody,
+  TableBodyTemplate,
+  [tableRowDefinition],
+  {
+    styles: tableBodyStyles
+  }
+);
+const tableHeadDefinition = defineVividComponent(
+  "table-head",
+  TableHead,
+  TableHeadTemplate,
+  [tableRowDefinition],
+  {
+    styles: tableHeadStyles
+  }
+);
+const tableDefinition = defineVividComponent(
+  "table",
+  Table,
+  TableTemplate,
+  [tableHeadDefinition, tableBodyDefinition],
+  {
+    styles: tableStyles
+  }
+);
+const registerDataTable = createRegisterFunction(tableDefinition);
+
+export { TableBody as VwcTableBodyElement, TableCell as VwcTableCellElement, Table as VwcTableElement, TableHead as VwcTableHeadElement, TableHeaderCell as VwcTableHeaderCellElement, TableRow as VwcTableRowElement, registerDataTable, tableBodyDefinition, tableCellDefinition, tableDefinition, tableHeadDefinition, tableHeaderCellDefinition, tableRowDefinition };

package/data-table/index.cjs

@@ -0,0 +1,37 @@
+"use strict";const a=require("../bundled/vivid-element.cjs"),r=require("../bundled/host-semantics.cjs"),l=require("../bundled/data-grid.options.cjs"),c=":host{display:inline-block}.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;display:table;overflow:auto;width:100%;block-size:inherit;border-collapse:collapse;inline-size:100%;max-block-size:inherit}",n=":host{display:table-header-group}",i=":host{display:table-row-group}",d=":host{display:table-row}.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:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}",v=":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);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-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{--_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: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));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}",s=":host{display:table-cell}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{box-sizing:border-box;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:12px 14px;padding-inline:12px;vertical-align:middle}:host: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));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";class p extends a.VividElement{connectedCallback(){super.connectedCallback()}}const b=o=>a.html`
+		<template role="table">
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;class m extends a.VividElement{}const _=o=>a.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;class f extends a.VividElement{connectedCallback(){super.connectedCallback()}}const h=o=>a.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;class u extends r.HostSemantics(a.VividElement){connectedCallback(){super.connectedCallback()}}const x=o=>a.html`
+		<template
+			${r.applyHostSemantics({role:"row"})}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;class g extends r.HostSemantics(a.VividElement){connectedCallback(){super.connectedCallback()}}const y=o=>a.html`
+		<template
+			tabindex="-1"
+			${r.applyHostSemantics({role:()=>l.DataGridCellRole.columnheader})}
+		>
+			<slot></slot>
+		</template>
+	`;class w extends r.HostSemantics(a.VividElement){connectedCallback(){super.connectedCallback()}}const k=o=>a.html`
+		<template
+			tabindex="-1"
+			${r.applyHostSemantics({role:()=>"cell"})}
+		>
+			<slot></slot>
+		</template>
+	`,t=a.defineVividComponent("table-cell",w,k,[],{styles:s}),C=a.defineVividComponent("table-header-cell",g,y,[t],{styles:v}),e=a.defineVividComponent("table-row",u,x,[t,C],{styles:d}),z=a.defineVividComponent("table-body",f,h,[e],{styles:i}),T=a.defineVividComponent("table-head",m,_,[e],{styles:n}),H=a.defineVividComponent("table",p,b,[T,z],{styles:c}),S=a.createRegisterFunction(H);S();

package/data-table/index.js

@@ -0,0 +1,143 @@
+import { V as o, h as r, c as i, d as t } from "../bundled/vivid-element.js";
+import { H as e, a as l } from "../bundled/host-semantics.js";
+import { c as d } from "../bundled/data-grid.options.js";
+const v = ":host{display:inline-block}.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;display:table;overflow:auto;width:100%;block-size:inherit;border-collapse:collapse;inline-size:100%;max-block-size:inherit}", s = ":host{display:table-header-group}", p = ":host{display:table-row-group}", b = ":host{display:table-row}.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:contents;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host(:is([selected])) .base{background-color:var(--_appearance-color-fill)}", m = ":host{display:table-cell;box-sizing:border-box;padding:0;border-bottom:1px solid var(--vvd-color-canvas-text);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-bold);padding-block:12px 14px;padding-inline:12px;vertical-align:middle}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{--_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: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));outline:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}", _ = ":host{display:table-cell}:host.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))}:host: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))}:host{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}:host.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){:host.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}}:host.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}:host{box-sizing:border-box;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:12px 14px;padding-inline:12px;vertical-align:middle}:host: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));outline:none}:host:not([cell-type=columnheader]){--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host:is([selected]){background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}";
+class f extends o {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+const h = (a) => r`
+		<template role="table">
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+class x extends o {
+}
+const u = (a) => r`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+class g extends o {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+const y = (a) => r`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+class w extends e(o) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+const k = (a) => r`
+		<template
+			${l({
+  role: "row"
+})}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+class C extends e(o) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+const z = (a) => r`
+		<template
+			tabindex="-1"
+			${l({
+  role: () => d.columnheader
+})}
+		>
+			<slot></slot>
+		</template>
+	`;
+class T extends e(o) {
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+const H = (a) => r`
+		<template
+			tabindex="-1"
+			${l({
+  role: () => "cell"
+})}
+		>
+			<slot></slot>
+		</template>
+	`, c = t(
+  "table-cell",
+  T,
+  H,
+  [],
+  {
+    styles: _
+  }
+), D = t(
+  "table-header-cell",
+  C,
+  z,
+  [c],
+  {
+    styles: m
+  }
+), n = t(
+  "table-row",
+  w,
+  k,
+  [c, D],
+  {
+    styles: b
+  }
+), S = t(
+  "table-body",
+  g,
+  y,
+  [n],
+  {
+    styles: p
+  }
+), R = t(
+  "table-head",
+  x,
+  u,
+  [n],
+  {
+    styles: s
+  }
+), B = t(
+  "table",
+  f,
+  h,
+  [R, S],
+  {
+    styles: v
+  }
+), V = i(B);
+V();

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,