@vonage/vivid 5.25.0 → 5.27.0

package/data-grid/index.js

@@ -4,16 +4,16 @@ import { r as d, t as f } from "../bundled/repeat.js";
 import { r as p, t as m } from "../bundled/slotted.js";
 import { t as h } from "../bundled/children.js";
 import { t as g } from "../bundled/when.js";
-import { n as _, r as v } from "../bundled/definition.js";
-import { t as y } from "../bundled/decorate.js";
-import { t as b } from "../bundled/class-names.js";
-import { a as x, c as S, i as C, l as ee, n as te, o as w, r as T, s as E, t as D } from "../bundled/key-codes.js";
-import { t as O } from "../bundled/definition3.js";
-import { t as ne } from "../bundled/icon.js";
-import { n as k, t as A } from "../bundled/host-semantics.js";
-import { a as j, i as M, n as N, r as P, t as F } from "../bundled/data-grid.options.js";
+import { n as ee, r as _ } from "../bundled/definition.js";
+import { t as v } from "../bundled/decorate.js";
+import { t as y } from "../bundled/class-names.js";
+import { a as te, c as b, i as x, l as S, n as C, o as w, r as ne, s as T, t as re } from "../bundled/key-codes.js";
+import { t as E } from "../bundled/definition2.js";
+import { t as D } from "../bundled/icon.js";
+import { n as O, t as k } from "../bundled/host-semantics.js";
+import { a as A, i as j, n as M, o as N, r as P, t as F } from "../bundled/data-grid.options.js";
 //#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/events.js
-var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}", V = ".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{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", H = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.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{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(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_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([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}", U = {
+var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}", V = ".base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", H = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.base{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(--vvd-color-canvas-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_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([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}", U = {
 	none: "none",
 	singleRow: "single-row",
 	multiRow: "multi-row",
@@ -90,13 +90,13 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 		if (e.defaultPrevented) return;
 		let t, n = this.rowElements.length - 1, r = this.offsetHeight + this.scrollTop, i = this.rowElements[n];
 		switch (e.key) {
-			case C:
+			case x:
 				e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
 				break;
-			case D:
+			case re:
 				e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
 				break;
-			case ee:
+			case S:
 				if (e.preventDefault(), this.rowElements.length === 0) {
 					this.focusOnCell(0, 0, !1);
 					break;
@@ -114,7 +114,7 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 				}
 				this.focusOnCell(t, this.focusColumnIndex, !1);
 				break;
-			case S:
+			case b:
 				if (e.preventDefault(), this.rowElements.length === 0) {
 					this.focusOnCell(0, 0, !1);
 					break;
@@ -127,20 +127,19 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 					let e = this.rowElements[t];
 					if (e.offsetTop + e.offsetHeight > r) {
 						let t = 0;
-						this.generateHeader === j.sticky && this.generatedHeader !== null && (t = this.generatedHeader.clientHeight), this.scrollTop = e.offsetTop - t;
+						this.generateHeader === A.sticky && this.generatedHeader !== null && (t = this.generatedHeader.clientHeight), this.scrollTop = e.offsetTop - t;
 						break;
 					}
 				}
 				this.focusOnCell(t, this.focusColumnIndex, !1);
 				break;
-			case E:
+			case T:
 				/* v8 ignore else -- @preserve */
 				e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
 				break;
 			case "End":
-				/* v8 ignore else -- @preserve */
-				e.ctrlKey && this.columnDefinitions !== null && (e.preventDefault(), this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, !0));
-				break;
+ /* v8 ignore else -- @preserve */
+			e.ctrlKey && this.columnDefinitions !== null && (e.preventDefault(), this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, !0));
 		}
 	}
 	queueFocusUpdate() {
@@ -150,10 +149,10 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 		this.pendingFocusUpdate = !1, this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
 	}
 	toggleGeneratedHeader() {
-		if (this.generatedHeader !== null && (this.removeChild(this.generatedHeader), this.generatedHeader = null), this.generateHeader !== j.none && this.columnDefinitions !== null) {
+		if (this.generatedHeader !== null && (this.removeChild(this.generatedHeader), this.generatedHeader = null), this.generateHeader !== A.none && this.columnDefinitions !== null) {
 			let e = document.createElement(this.rowElementTag);
 			/* v8 ignore else -- @preserve */
-			this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === j.sticky ? M.stickyHeader : M.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
+			this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === A.sticky ? j.stickyHeader : j.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
 			return;
 		}
 	}
@@ -181,7 +180,7 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 	#a;
 	#o;
 	constructor() {
-		super(), this.noTabbing = !1, this.generateHeader = j.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, n) => {
+		super(), this.noTabbing = !1, this.generateHeader = A.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, n) => {
 			if (this.rowElements.length === 0) {
 				this.focusRowIndex = 0, this.focusColumnIndex = 0;
 				return;
@@ -216,7 +215,7 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 		}, this.#r = (e) => {
 			(e.key === "Enter" || e.key === " ") && this.#i(e);
 		}, this.#i = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
-			if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
+			if (e.getAttribute("role") === "gridcell" && e.getAttribute("cell-type") === "default") {
 				if (this.selectionMode === U.singleCell || this.selectionMode === U.multiCell) {
 					this.#a({
 						target: e,
@@ -313,18 +312,18 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 		}), this.fixedColumnsPositions = [];
 	}
 };
-y([s({
+v([s({
 	attribute: "no-tabbing",
 	mode: "boolean"
-})], W.prototype, "noTabbing", void 0), y([s({ attribute: "generate-header" })], W.prototype, "generateHeader", void 0), y([s({ attribute: "grid-template-columns" })], W.prototype, "gridTemplateColumns", void 0), y([t], W.prototype, "rowsData", void 0), y([t], W.prototype, "columnDefinitions", void 0), y([t], W.prototype, "rowItemTemplate", void 0), y([t], W.prototype, "cellItemTemplate", void 0), y([t], W.prototype, "headerCellItemTemplate", void 0), y([t], W.prototype, "focusRowIndex", void 0), y([t], W.prototype, "focusColumnIndex", void 0), y([s({
+})], W.prototype, "noTabbing", void 0), v([s({ attribute: "generate-header" })], W.prototype, "generateHeader", void 0), v([s({ attribute: "grid-template-columns" })], W.prototype, "gridTemplateColumns", void 0), v([t], W.prototype, "rowsData", void 0), v([t], W.prototype, "columnDefinitions", void 0), v([t], W.prototype, "rowItemTemplate", void 0), v([t], W.prototype, "cellItemTemplate", void 0), v([t], W.prototype, "headerCellItemTemplate", void 0), v([t], W.prototype, "focusRowIndex", void 0), v([t], W.prototype, "focusColumnIndex", void 0), v([s({
 	attribute: "fixed-columns",
 	converter: a
-})], W.prototype, "fixedColumns", void 0), y([t], W.prototype, "defaultRowItemTemplate", void 0), y([t], W.prototype, "rowElementTag", void 0), y([t], W.prototype, "rowElements", void 0), y([t], W.prototype, "slottedRowElements", void 0), y([s({ attribute: "selection-mode" })], W.prototype, "selectionMode", void 0);
+})], W.prototype, "fixedColumns", void 0), v([t], W.prototype, "defaultRowItemTemplate", void 0), v([t], W.prototype, "rowElementTag", void 0), v([t], W.prototype, "rowElements", void 0), v([t], W.prototype, "slottedRowElements", void 0), v([s({ attribute: "selection-mode" })], W.prototype, "selectionMode", void 0);
 //#endregion
 //#region src/lib/data-grid/data-grid-row.ts
-var G = class extends A(l) {
+var G = class extends k(l) {
 	constructor(...e) {
-		super(...e), this.rowType = M.default, this.rowData = null, this.columnDefinitions = null, this.behaviorOrchestrator = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
+		super(...e), this.rowType = j.default, this.rowData = null, this.columnDefinitions = null, this.behaviorOrchestrator = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
 			this.style.gridTemplateColumns = this.gridTemplateColumns;
 		}, this.ariaSelected = null, this._selectable = !1, this.selected = !1;
 	}
@@ -355,32 +354,30 @@ var G = class extends A(l) {
 	}
 	handleKeydown(e) {
 		if (!e.defaultPrevented) switch (e.key) {
-			case te: {
+			case C: {
 				let t = Math.max(0, this.focusColumnIndex - 1);
 				this.cellElements[t].focus(), e.preventDefault();
 				break;
 			}
-			case T: {
+			case ne: {
 				let t = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
 				this.cellElements[t].focus(), e.preventDefault();
 				break;
 			}
-			case E:
+			case T:
 				e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
 				break;
-			case "End":
-				e.ctrlKey || (this.cellElements[this.cellElements.length - 1].focus(), e.preventDefault());
-				break;
+			case "End": e.ctrlKey || (this.cellElements[this.cellElements.length - 1].focus(), e.preventDefault());
 		}
 	}
 	updateItemTemplate() {
-		this.activeCellItemTemplate = this.rowType === M.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === M.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate === void 0 ? this.defaultHeaderCellItemTemplate : this.headerCellItemTemplate;
+		this.activeCellItemTemplate = this.rowType === j.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === j.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate === void 0 ? this.defaultHeaderCellItemTemplate : this.headerCellItemTemplate;
 	}
 	ariaSelectedChanged(e, t) {
 		super.ariaSelectedChanged(e, t), this._selectable = t !== null, this.selected = t === "true";
 	}
 };
-y([s({ attribute: "grid-template-columns" })], G.prototype, "gridTemplateColumns", void 0), y([s({ attribute: "row-type" })], G.prototype, "rowType", void 0), y([t], G.prototype, "rowData", void 0), y([t], G.prototype, "columnDefinitions", void 0), y([t], G.prototype, "cellItemTemplate", void 0), y([t], G.prototype, "headerCellItemTemplate", void 0), y([t], G.prototype, "rowIndex", void 0), y([t], G.prototype, "activeCellItemTemplate", void 0), y([t], G.prototype, "defaultCellItemTemplate", void 0), y([t], G.prototype, "defaultHeaderCellItemTemplate", void 0), y([t], G.prototype, "cellElements", void 0), y([s], G.prototype, "connotation", void 0), y([t], G.prototype, "_selectable", void 0), y([s({ mode: "boolean" })], G.prototype, "selected", void 0);
+v([s({ attribute: "grid-template-columns" })], G.prototype, "gridTemplateColumns", void 0), v([s({ attribute: "row-type" })], G.prototype, "rowType", void 0), v([t], G.prototype, "rowData", void 0), v([t], G.prototype, "columnDefinitions", void 0), v([t], G.prototype, "cellItemTemplate", void 0), v([t], G.prototype, "headerCellItemTemplate", void 0), v([t], G.prototype, "rowIndex", void 0), v([t], G.prototype, "activeCellItemTemplate", void 0), v([t], G.prototype, "defaultCellItemTemplate", void 0), v([t], G.prototype, "defaultHeaderCellItemTemplate", void 0), v([t], G.prototype, "cellElements", void 0), v([s], G.prototype, "connotation", void 0), v([t], G.prototype, "_selectable", void 0), v([s({ mode: "boolean" })], G.prototype, "selected", void 0);
 //#endregion
 //#region src/lib/data-grid/data-grid.template.ts
 function K(e) {
@@ -399,9 +396,9 @@ function q(e) {
 function J(e) {
 	if (e.columnDefinitions === null) {
 		let t = e.querySelector("[cell-type=\"columnheader\"]")?.parentElement;
-		if (e.generateHeader === j.default && (t?.getAttribute("row-type") === M.header || t?.getAttribute("row-type") === M.stickyHeader)) return;
+		if (e.generateHeader === A.default && (t?.getAttribute("row-type") === j.header || t?.getAttribute("row-type") === j.stickyHeader)) return;
 		if (t) {
-			let n = e.generateHeader === j.sticky ? M.stickyHeader : M.header;
+			let n = e.generateHeader === A.sticky ? j.stickyHeader : j.header;
 			t.setAttribute("row-type", n);
 		}
 	}
@@ -430,15 +427,15 @@ var X = (e) => {
 			</div>
 		</template>
 	`;
-}, re = c`
+}, ie = c`
 	<template>
 		${(e) => e.rowData === null || e.columnDefinition === null || e.columnDefinition.columnDataKey === null ? null : e.rowData[e.columnDefinition.columnDataKey]}
 	</template>
-`, ie = c`
+`, ae = c`
 	<template>
 		${(e) => e.columnDefinition.title === void 0 ? e.columnDefinition.columnDataKey : e.columnDefinition.title}
 	</template>
-`, Z = class extends e(A(l)) {
+`, Z = class extends e(k(l)) {
 	constructor(...e) {
 		super(...e), this.cellType = P.default, this.rowData = null, this.columnDefinition = null, this.isActiveCell = !1, this.customCellView = null, this.updateCellStyle = () => {
 			this.gridColumn && !this.gridColumn.includes("undefined") ? this.style.gridColumn = this.gridColumn : this.style.removeProperty("grid-column");
@@ -475,13 +472,11 @@ var X = (e) => {
 						e !== null && e.focus();
 					}
 					break;
-				default:
-					if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== !0 && typeof this.columnDefinition.cellFocusTargetCallback == "function") {
-						let e = this.columnDefinition.cellFocusTargetCallback(this);
-						/* v8 ignore else -- @preserve */
-						e !== null && e.focus();
-					}
-					break;
+				default: if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== !0 && typeof this.columnDefinition.cellFocusTargetCallback == "function") {
+					let e = this.columnDefinition.cellFocusTargetCallback(this);
+					/* v8 ignore else -- @preserve */
+					e !== null && e.focus();
+				}
 			}
 			this.$emit("cell-focused", this);
 		}
@@ -492,7 +487,7 @@ var X = (e) => {
 	}
 	handleKeydown(e) {
 		if (!(e.defaultPrevented || this.columnDefinition === null || this.cellType === P.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === P.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0)) switch (e.key) {
-			case x:
+			case te:
 			case "F2":
 				if (this.contains(document.activeElement) && document.activeElement !== this) return;
 				switch (this.cellType) {
@@ -502,32 +497,27 @@ var X = (e) => {
 							t !== null && t.focus(), e.preventDefault();
 						}
 						break;
-					default:
-						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
-							let t = this.columnDefinition.cellFocusTargetCallback(this);
-							t !== null && t.focus(), e.preventDefault();
-						}
-						break;
+					default: if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+						let t = this.columnDefinition.cellFocusTargetCallback(this);
+						t !== null && t.focus(), e.preventDefault();
+					}
 				}
 				break;
 			case w:
-				/* v8 ignore else -- @preserve */
-				this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
-				break;
+ /* v8 ignore else -- @preserve */
+			this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
 		}
 	}
 	updateCellView() {
 		if (this.disconnectCellView(), this.columnDefinition !== null) {
 			switch (this.cellType) {
 				case P.columnHeader:
-					this.columnDefinition.headerCellTemplate === void 0 ? this.customCellView = ie.render(this, this) : this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
+					this.customCellView = this.columnDefinition.headerCellTemplate === void 0 ? ae.render(this, this) : this.columnDefinition.headerCellTemplate.render(this, this);
 					break;
 				case P.rowHeader:
-				case P.default:
-					this.columnDefinition.cellTemplate === void 0 ? this.customCellView = re.render(this, this) : this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
-					break;
+				case P.default: this.customCellView = this.columnDefinition.cellTemplate === void 0 ? ie.render(this, this) : this.columnDefinition.cellTemplate.render(this, this);
 			}
-			this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = N.none : this.sortDirection = void 0;
+			this.sortDirection = this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.columnDefinition.sortDirection : M.none : void 0;
 		}
 	}
 	disconnectCellView() {
@@ -559,13 +549,13 @@ var X = (e) => {
 		}), !0;
 	}
 };
-y([s({ attribute: "cell-type" })], Z.prototype, "cellType", void 0), y([s({ attribute: "grid-column" })], Z.prototype, "gridColumn", void 0), y([t], Z.prototype, "rowData", void 0), y([t], Z.prototype, "columnDefinition", void 0), y([t], Z.prototype, "_selectable", void 0), y([s({ mode: "boolean" })], Z.prototype, "selected", void 0), y([s({ attribute: "sort-direction" })], Z.prototype, "sortDirection", void 0), y([s], Z.prototype, "connotation", void 0), y([t], Z.prototype, "_actionItemsSlottedContent", void 0);
+v([s({ attribute: "cell-type" })], Z.prototype, "cellType", void 0), v([s({ attribute: "grid-column" })], Z.prototype, "gridColumn", void 0), v([t], Z.prototype, "rowData", void 0), v([t], Z.prototype, "columnDefinition", void 0), v([t], Z.prototype, "_selectable", void 0), v([s({ mode: "boolean" })], Z.prototype, "selected", void 0), v([s({ attribute: "sort-direction" })], Z.prototype, "sortDirection", void 0), v([s], Z.prototype, "connotation", void 0), v([t], Z.prototype, "_actionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/data-grid/data-grid-row.template.ts
-function ae(e) {
+function oe(e) {
 	return e._selectable && e.selected ? "true" : e._selectable && !e.selected ? "false" : null;
 }
-function oe(e) {
+function se(e) {
 	let t = e.tagFor(Z);
 	return c`
     <${t}
@@ -573,11 +563,11 @@ function oe(e) {
         grid-column="${(e, t) => t.index + 1}"
         :rowData="${(e, t) => t.parent.rowData}"
         :columnDefinition="${(e) => e}"
-				selected="${(e, t) => t.parent.ariaSelected === "true" ? !0 : null}"
+				selected="${(e, t) => t.parent.ariaSelected === "true" || null}"
     ></${t}>
 `;
 }
-function se(e) {
+function ce(e) {
 	let t = e.tagFor(Z);
 	return c`
     <${t}
@@ -587,13 +577,13 @@ function se(e) {
     ></${t}>
 `;
 }
-var ce = (e) => {
-	let t = oe(e), n = se(e);
+var le = (e) => {
+	let t = se(e), n = ce(e);
 	return c`
 		<template
-			${k({
+			${O({
 		role: "row",
-		ariaSelected: ae
+		ariaSelected: oe
 	})}
 			class="${(e) => e.rowType === "default" ? "" : e.rowType}"
 			:defaultCellItemTemplate="${t}"
@@ -604,7 +594,7 @@ var ce = (e) => {
 	})}
 		>
 			<div
-				class="${(e) => b("base", ["selected", !!e.selected], [`connotation-${e.connotation}`, !!e.connotation])}"
+				class="${(e) => y("base", `connotation-${N.parse(e.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", ["selected", !!e.selected])}"
 				style="grid-template-columns: ${(e) => e.gridTemplateColumns};"
 			>
 				<slot ${m("slottedCellElements")}></slot>
@@ -615,66 +605,66 @@ var ce = (e) => {
 //#endregion
 //#region src/lib/data-grid/data-grid-cell.template.ts
 function Q(e) {
-	return e.cellType === "columnheader" && e.sortDirection !== void 0 && e.sortDirection !== N.other;
-}
-function le(e) {
-	return e.sortDirection === N.ascending ? "sort-asc-solid" : e.sortDirection === N.descending ? "sort-desc-solid" : "sort-solid";
+	return e.cellType === "columnheader" && e.sortDirection !== void 0 && e.sortDirection !== M.other;
 }
 function ue(e) {
-	return e._selectable && e.selected ? "true" : e._selectable && !e.selected ? "false" : null;
+	return e.sortDirection === M.ascending ? "sort-asc-solid" : e.sortDirection === M.descending ? "sort-desc-solid" : "sort-solid";
 }
 function de(e) {
-	let t = e.tagFor(ne);
+	return e._selectable && e.selected ? "true" : e._selectable && !e.selected ? "false" : null;
+}
+function fe(e) {
+	let t = e.tagFor(D);
 	return c`
 		${g(Q, c`
-				<${t} class="header-icon" name="${le}"></${t}>
+				<${t} class="header-icon" name="${ue}"></${t}>
 			`)}
 	`;
 }
-function fe(e) {
+function pe(e) {
 	return e.cellType === P.columnHeader && e.sortDirection !== void 0;
 }
 function $(e) {
-	return e.sortDirection ?? N.none;
+	return e.sortDirection ?? M.none;
 }
-function pe(e) {
+function me(e) {
 	let t = $(e);
 	return e.locale.dataGrid.cell.sortStatus?.[t];
 }
-function me(e) {
+function he(e) {
 	let t = $(e);
 	return e.locale.dataGrid.cell.sortInstruction?.[t];
 }
-function he(e) {
-	return [pe(e), me(e)].filter((e) => !!e).join(" ").trim();
+function ge(e) {
+	return [me(e), he(e)].filter((e) => !!e).join(" ").trim();
 }
-function ge(e, t) {
+function _e(e, t) {
 	if (t.key === "Enter" || t.key === " ") {
 		if (t.target.closest("[slot=\"action-items\"]")) return !0;
 		e._handleInteraction();
 	}
 	return !0;
 }
-function _e(e, t) {
+function ve(e, t) {
 	return t.target.closest("[slot=\"action-items\"]") || e._handleInteraction(), !0;
 }
 //#endregion
-//#region src/lib/data-grid/index.ts
-r(u("data-grid", W, X, [u("data-grid-row", G, ce, [u("data-grid-cell", Z, (e) => {
-	let t = e.tagFor(v);
+//#region src/lib/data-grid/definition.ts
+var ye = u("data-grid-cell", Z, (e) => {
+	let t = e.tagFor(_);
 	return c`
 		<template
 			tabindex="-1"
-			${k({
+			${O({
 		role: (e) => F[e.cellType] ?? F.default,
-		ariaSelected: ue,
+		ariaSelected: de,
 		ariaSort: (e) => e.sortDirection ?? null
 	})}
-			@click="${(e, t) => _e(e, t.event)}"
-			@keydown="${(e, t) => ge(e, t.event)}"
+			@click="${(e, t) => ve(e, t.event)}"
+			@keydown="${(e, t) => _e(e, t.event)}"
 		>
 			<div
-				class="${(e) => b("base", ["selected", e.selected], ["has-action-items", !!e._actionItemsSlottedContent?.length], [`connotation-${e.connotation}`, !!e.connotation])}"
+				class="${(e) => y("base", `connotation-${N.parse(e.connotation)}`, "appearance-listitem", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", ["selected", e.selected], ["has-action-items", !!e._actionItemsSlottedContent?.length])}"
 			>
 				<div
 					class="content"
@@ -692,13 +682,13 @@ r(u("data-grid", W, X, [u("data-grid-row", G, ce, [u("data-grid-cell", Z, (e) =>
 							${(e) => e.locale.dataGrid.cell.button}
 						</${t}>
 						`)}
-					${g(fe, c`<${t}
+					${g(pe, c`<${t}
 							aria-live="polite"
 							data-announcement="sort-state"
 						>
-							${he}
+							${ge}
 						</${t}>`)}
-					${(t) => de(e)}
+					${(t) => fe(e)}
 				</div>
 				<slot
 					name="action-items"
@@ -707,5 +697,8 @@ r(u("data-grid", W, X, [u("data-grid-row", G, ce, [u("data-grid-cell", Z, (e) =>
 			</div>
 		</template>
 	`;
-}, [O, _], { styles: H })], { styles: V })], { styles: B }))();
+}, [E, ee], { styles: H }), be = u("data-grid-row", G, le, [ye], { styles: V }), xe = u("data-grid", W, X, [be], { styles: B });
+//#endregion
+//#region src/lib/data-grid/index.ts
+r(xe)();
 //#endregion

package/date-picker/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition12.cjs`),o=require(`../bundled/picker-field.template.cjs`),s=require(`../bundled/single-value-picker.cjs`),c=require(`../bundled/definition20.cjs`),l=require(`../bundled/calendar-picker.template.cjs`),u=require(`../bundled/single-date-picker.cjs`);var d=class extends u.t(s.t(l.n(l.i(o.n)))){_toPresentationValue(e){return l.a(e,this.locale.calendarPicker)}_parsePresentationValue(e){return l.o(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}constructor(){super(),this._isValidValue=l.l,this._textFieldSize=`20`,this.proxy.type=`date`}get _pickerButtonLabel(){return this.value?this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)):this.locale.calendarPicker.chooseDateLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDateLabel}get _textFieldPlaceholder(){return this.locale.calendarPicker.dateFormatPlaceholder}_onDateClick(e){super._onDateClick(e),this._closePopup()}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateError:null}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll(`button, .vwc-button`)}get _pickerButtonIcon(){return`calendar-line`}};n.t([e.j],d.prototype,`_pickerButtonLabel`,null);var f=e.u(`date-picker`,d,e=>o.t(e,l.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,c.t,t.n],{styles:[o.r,l.u],shadowOptions:{delegatesFocus:!0}});e.d(f)();
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/definition.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/definition5.cjs"),i=require("../bundled/definition7.cjs"),a=require("../bundled/definition11.cjs"),o=require("../bundled/picker-field.template.cjs"),s=require("../bundled/single-value-picker.cjs"),c=require("../bundled/definition20.cjs"),l=require("../bundled/calendar-picker.template.cjs"),u=require("../bundled/single-date-picker.cjs");var d=class extends u.t(s.t(l.n(l.i(o.n)))){_toPresentationValue(e){return l.a(e,this.locale.calendarPicker)}_parsePresentationValue(e){return l.o(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}constructor(){super(),this._isValidValue=l.l,this._textFieldSize=`20`,this.proxy.type=`date`}get _pickerButtonLabel(){return this.value?this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)):this.locale.calendarPicker.chooseDateLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDateLabel}get _textFieldPlaceholder(){return this.locale.calendarPicker.dateFormatPlaceholder}_onDateClick(e){super._onDateClick(e),this._closePopup()}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateError:null}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll(`button, .vwc-button`)}get _pickerButtonIcon(){return`calendar-line`}};n.t([e.j],d.prototype,`_pickerButtonLabel`,null);var f=e.u(`date-picker`,d,e=>o.t(e,l.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,c.t,t.n],{styles:[o.r,l.u],shadowOptions:{delegatesFocus:!0}});e.d(f)();

package/date-picker/index.js

@@ -1,9 +1,9 @@
 import { d as e, j as t, u as n } from "../bundled/vivid-element.js";
 import { n as r } from "../bundled/definition.js";
 import { t as i } from "../bundled/decorate.js";
-import { t as a } from "../bundled/definition6.js";
-import { t as o } from "../bundled/definition8.js";
-import { n as s } from "../bundled/definition12.js";
+import { t as a } from "../bundled/definition5.js";
+import { t as o } from "../bundled/definition7.js";
+import { n as s } from "../bundled/definition11.js";
 import { n as c, r as l, t as u } from "../bundled/picker-field.template.js";
 import { t as d } from "../bundled/single-value-picker.js";
 import { t as f } from "../bundled/definition20.js";
@@ -48,9 +48,10 @@ var x = class extends b(d(g(m(c)))) {
 		return "calendar-line";
 	}
 };
+i([t], x.prototype, "_pickerButtonLabel", null);
 //#endregion
-//#region src/lib/date-picker/index.ts
-i([t], x.prototype, "_pickerButtonLabel", null), e(n("date-picker", x, (e) => u(e, v(e), {
+//#region src/lib/date-picker/definition.ts
+var S = n("date-picker", x, (e) => u(e, v(e), {
 	withSeparator: !1,
 	padded: !0
 }), [
@@ -62,5 +63,8 @@ i([t], x.prototype, "_pickerButtonLabel", null), e(n("date-picker", x, (e) => u(
 ], {
 	styles: [l, y],
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/date-picker/index.ts
+e(S)();
 //#endregion

package/date-range-picker/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition12.cjs`),o=require(`../bundled/picker-field.template.cjs`),s=require(`../bundled/definition20.cjs`),c=require(`../bundled/calendar-picker.template.cjs`);var l=(e,t)=>`${e} – ${t}`,u=(e,t)=>l(c.a(e.start,t),c.a(e.end,t)),d=(e,t)=>{let n=e.trim().split(/[\s—–-]+/);if(n.length!==2)throw Error(`Invalid date range: ${e}`);let[r,i]=n.map(e=>c.o(e,t));return{start:r,end:i}},f=e=>typeof e==`string`;function p(e){return!!e}var m=class extends c.n(c.i(o.n)){constructor(...e){super(...e),this.initialStart=``,this.initialEnd=``,this.#e=!1,this.start=``,this.end=``,this.setFormValue=(e,t)=>{f(e)||super.setFormValue(e,t)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize=`30`}initialStartChanged(){this.dirtyValue||=(this.start=this.initialStart,!1)}initialEndChanged(){this.dirtyValue||=(this.end=this.initialEnd,!1)}#e;startChanged(){if(this.start&&!c.l(this.start)){this.start=``;return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#n()}endChanged(){if(this.end&&!c.l(this.end)){this.end=``;return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#n()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(e){this.#e=!0,e.start!==void 0&&(this.start=e.start,this.$emit(`input:start`)),e.end!==void 0&&(this.end=e.end,this.$emit(`input:end`)),this.#e=!1,this.$emit(`input`),this.$emit(`change`),this.#n()}#n(){if(this.start&&this.end){if(c.s(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=l(this.start,this.end)}else this.value=``;this._updatePresentationValue();let e=this.start||this.end;e&&this._adjustSelectedMonthToEnsureVisibilityOf(e),this.#r()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=u({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=``}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}connectedCallback(){super.connectedCallback(),this.start||=this.initialStart,this.end||=this.initialEnd}#i(){let e=[this.start,this.end].filter(p),t=e.length===1;this._hoverDate&&t&&e.push(this._hoverDate);let[n,r]=e.sort(c.s);return{start:n,end:r}}_isDateAriaSelected(e){return this._isDateInSelectedRange(e)}_isDateInSelectedRange(e){let{start:t,end:n}=this.#i();return t&&n?c.s(e,t)>=0&&c.s(e,n)<=0:!1}_isDateRangeStart(e){return e===this.#i().start}_isDateRangeEnd(e){return e===this.#i().end}_getSelectedDates(){let e=[];return this.start&&e.push(this.start),this.end&&e.push(this.end),e}_onDateClick(e){this.start&&this.end?this.#t({start:e,end:``}):this.start?(this.#t({end:e}),this._closePopup()):this.end?(this.#t({start:e}),this._closePopup()):this.#t({start:e})}get _textFieldPlaceholder(){return l(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===``){this.#t({start:``,end:``});return}try{let{start:e,end:t}=d(this._presentationValue,this.locale.calendarPicker);this.#t({start:e,end:t})}catch{let e=this._presentationValue;this.#t({start:``,end:``}),this._presentationValue=e;return}}_onDateMouseEnter(e){this._hoverDate=e}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&c.s(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(c.a(this.min,this.locale.calendarPicker)):this.max&&this.end&&c.s(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(c.a(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue===``)return!1;try{return d(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:``,end:``}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(u({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll(`button, .vwc-button`)}get _pickerButtonIcon(){return`calendar-line`}};n.t([e.m({mode:`fromView`,attribute:`start`})],m.prototype,`initialStart`,void 0),n.t([e.m({mode:`fromView`,attribute:`end`})],m.prototype,`initialEnd`,void 0),n.t([e.A],m.prototype,`start`,void 0),n.t([e.A],m.prototype,`end`,void 0),n.t([e.m({attribute:`current-start`})],m.prototype,`currentStart`,void 0),n.t([e.m({attribute:`current-end`})],m.prototype,`currentEnd`,void 0),n.t([e.A],m.prototype,`_numCalendars`,void 0),n.t([e.A],m.prototype,`_hoverDate`,void 0),n.t([e.j],m.prototype,`_pickerButtonLabel`,null);var h=e.u(`date-range-picker`,m,e=>o.t(e,c.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,s.t,t.n],{styles:[o.r,c.u],shadowOptions:{delegatesFocus:!0}});e.d(h)();
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/definition.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/definition5.cjs"),i=require("../bundled/definition7.cjs"),a=require("../bundled/definition11.cjs"),o=require("../bundled/picker-field.template.cjs"),s=require("../bundled/definition20.cjs"),c=require("../bundled/calendar-picker.template.cjs");var l=(e,t)=>`${e} – ${t}`,u=(e,t)=>l(c.a(e.start,t),c.a(e.end,t)),d=(e,t)=>{let n=e.trim().split(/[\s—–-]+/);if(n.length!==2)throw Error(`Invalid date range: ${e}`);let[r,i]=n.map(e=>c.o(e,t));return{start:r,end:i}},f=e=>typeof e==`string`;function p(e){return!!e}var m=class extends c.n(c.i(o.n)){constructor(...e){super(...e),this.initialStart=``,this.initialEnd=``,this.#e=!1,this.start=``,this.end=``,this.setFormValue=(e,t)=>{f(e)||super.setFormValue(e,t)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize=`30`}initialStartChanged(){this.dirtyValue||=(this.start=this.initialStart,!1)}initialEndChanged(){this.dirtyValue||=(this.end=this.initialEnd,!1)}#e;startChanged(){if(this.start&&!c.l(this.start)){this.start=``;return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#n()}endChanged(){if(this.end&&!c.l(this.end)){this.end=``;return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#n()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(e){this.#e=!0,e.start!==void 0&&(this.start=e.start,this.$emit(`input:start`)),e.end!==void 0&&(this.end=e.end,this.$emit(`input:end`)),this.#e=!1,this.$emit(`input`),this.$emit(`change`),this.#n()}#n(){if(this.start&&this.end){if(c.s(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=l(this.start,this.end)}else this.value=``;this._updatePresentationValue();let e=this.start||this.end;e&&this._adjustSelectedMonthToEnsureVisibilityOf(e),this.#r()}_updatePresentationValue(){this._presentationValue=this.start&&this.end?u({start:this.start,end:this.end},this.locale.calendarPicker):``}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}connectedCallback(){super.connectedCallback(),this.start||=this.initialStart,this.end||=this.initialEnd}#i(){let e=[this.start,this.end].filter(p),t=e.length===1;this._hoverDate&&t&&e.push(this._hoverDate);let[n,r]=e.sort(c.s);return{start:n,end:r}}_isDateAriaSelected(e){return this._isDateInSelectedRange(e)}_isDateInSelectedRange(e){let{start:t,end:n}=this.#i();return t&&n?c.s(e,t)>=0&&c.s(e,n)<=0:!1}_isDateRangeStart(e){return e===this.#i().start}_isDateRangeEnd(e){return e===this.#i().end}_getSelectedDates(){let e=[];return this.start&&e.push(this.start),this.end&&e.push(this.end),e}_onDateClick(e){this.start&&this.end?this.#t({start:e,end:``}):this.start?(this.#t({end:e}),this._closePopup()):this.end?(this.#t({start:e}),this._closePopup()):this.#t({start:e})}get _textFieldPlaceholder(){return l(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===``){this.#t({start:``,end:``});return}try{let{start:e,end:t}=d(this._presentationValue,this.locale.calendarPicker);this.#t({start:e,end:t})}catch{let e=this._presentationValue;this.#t({start:``,end:``}),this._presentationValue=e;return}}_onDateMouseEnter(e){this._hoverDate=e}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&c.s(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(c.a(this.min,this.locale.calendarPicker)):this.max&&this.end&&c.s(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(c.a(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue===``)return!1;try{return d(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:``,end:``}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(u({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll(`button, .vwc-button`)}get _pickerButtonIcon(){return`calendar-line`}};n.t([e.m({mode:`fromView`,attribute:`start`})],m.prototype,`initialStart`,void 0),n.t([e.m({mode:`fromView`,attribute:`end`})],m.prototype,`initialEnd`,void 0),n.t([e.A],m.prototype,`start`,void 0),n.t([e.A],m.prototype,`end`,void 0),n.t([e.m({attribute:`current-start`})],m.prototype,`currentStart`,void 0),n.t([e.m({attribute:`current-end`})],m.prototype,`currentEnd`,void 0),n.t([e.A],m.prototype,`_numCalendars`,void 0),n.t([e.A],m.prototype,`_hoverDate`,void 0),n.t([e.j],m.prototype,`_pickerButtonLabel`,null);var h=e.u(`date-range-picker`,m,e=>o.t(e,c.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,s.t,t.n],{styles:[o.r,c.u],shadowOptions:{delegatesFocus:!0}});e.d(h)();

package/date-range-picker/index.js

@@ -1,9 +1,9 @@
 import { A as e, d as t, j as n, m as r, u as i } from "../bundled/vivid-element.js";
 import { n as a } from "../bundled/definition.js";
 import { t as o } from "../bundled/decorate.js";
-import { t as s } from "../bundled/definition6.js";
-import { t as c } from "../bundled/definition8.js";
-import { n as l } from "../bundled/definition12.js";
+import { t as s } from "../bundled/definition5.js";
+import { t as c } from "../bundled/definition7.js";
+import { n as l } from "../bundled/definition11.js";
 import { n as u, r as d, t as f } from "../bundled/picker-field.template.js";
 import { t as p } from "../bundled/definition20.js";
 import { a as m, i as h, l as g, n as _, o as v, s as y, t as b, u as x } from "../bundled/calendar-picker.template.js";
@@ -72,10 +72,10 @@ var D = class extends _(h(u)) {
 		e && this._adjustSelectedMonthToEnsureVisibilityOf(e), this.#r();
 	}
 	_updatePresentationValue() {
-		this.start && this.end ? this._presentationValue = C({
+		this._presentationValue = this.start && this.end ? C({
 			start: this.start,
 			end: this.end
-		}, this.locale.calendarPicker) : this._presentationValue = "";
+		}, this.locale.calendarPicker) : "";
 	}
 	nameChanged(e, t) {
 		super.nameChanged(e, t), this.#r();
@@ -194,15 +194,16 @@ var D = class extends _(h(u)) {
 		return "calendar-line";
 	}
 };
-//#endregion
-//#region src/lib/date-range-picker/index.ts
 o([r({
 	mode: "fromView",
 	attribute: "start"
 })], D.prototype, "initialStart", void 0), o([r({
 	mode: "fromView",
 	attribute: "end"
-})], D.prototype, "initialEnd", void 0), o([e], D.prototype, "start", void 0), o([e], D.prototype, "end", void 0), o([r({ attribute: "current-start" })], D.prototype, "currentStart", void 0), o([r({ attribute: "current-end" })], D.prototype, "currentEnd", void 0), o([e], D.prototype, "_numCalendars", void 0), o([e], D.prototype, "_hoverDate", void 0), o([n], D.prototype, "_pickerButtonLabel", null), t(i("date-range-picker", D, (e) => f(e, b(e), {
+})], D.prototype, "initialEnd", void 0), o([e], D.prototype, "start", void 0), o([e], D.prototype, "end", void 0), o([r({ attribute: "current-start" })], D.prototype, "currentStart", void 0), o([r({ attribute: "current-end" })], D.prototype, "currentEnd", void 0), o([e], D.prototype, "_numCalendars", void 0), o([e], D.prototype, "_hoverDate", void 0), o([n], D.prototype, "_pickerButtonLabel", null);
+//#endregion
+//#region src/lib/date-range-picker/definition.ts
+var O = i("date-range-picker", D, (e) => f(e, b(e), {
 	withSeparator: !1,
 	padded: !0
 }), [
@@ -214,5 +215,8 @@ o([r({
 ], {
 	styles: [d, x],
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/date-range-picker/index.ts
+t(O)();
 //#endregion