@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition34.js

@@ -2,20 +2,20 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
-import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition6.js";
 import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
 import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
+import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition22.js";
 import { a as GenerateHeaderOptions, i as DataGridRowTypes, n as DataGridCellSortStates, r as DataGridCellTypes, t as DataGridCellRole } from "./data-grid.options.js";
 import { Observable, RepeatDirective, Updates, attr, children, elements, html, normalizeBinding, nullableNumberConverter, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames, eventFocus, eventFocusIn, eventFocusOut, eventKeyDown, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyFunction2, keyHome, keyPageDown, keyPageUp, keySpace } from "@microsoft/fast-web-utilities";
 //#region src/lib/data-grid/data-grid.scss?inline
-var data_grid_default = ":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}";
+var data_grid_default = ":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}";
 //#endregion
 //#region src/lib/data-grid/data-grid-row.scss?inline
 var data_grid_row_default = ".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)}";
 //#endregion
 //#region src/lib/data-grid/data-grid-cell.scss?inline
-var data_grid_cell_default = ":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(--_appearance-color-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}";
+var data_grid_cell_default = ":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(--_appearance-color-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}";
 //#endregion
 //#region ../../node_modules/.pnpm/@microsoft+fast-element@2.10.4/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
 var kernelMode;
@@ -899,9 +899,7 @@ var DataGridSelectionMode = {
 * @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
 */
 var DataGrid = class DataGrid extends VividElement {
-	/**
-	*  generates a gridTemplateColumns based on columndata array
-	*/
+	/**  generates a gridTemplateColumns based on columndata array */
 	static generateTemplateColumns(columnDefinitions) {
 		let templateColumns = "";
 		columnDefinitions.forEach((_) => {
@@ -909,24 +907,18 @@ var DataGrid = class DataGrid extends VividElement {
 		});
 		return templateColumns;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	noTabbingChanged() {
 		if (this.$fastController.isConnected) this.#setTabIndex();
 	}
 	#setTabIndex() {
 		this.setAttribute("tabIndex", this.noTabbing || this.contains(document.activeElement) ? "-1" : "0");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	generateHeaderChanged() {
 		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	gridTemplateColumnsChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.$fastController.isConnected) {
@@ -934,16 +926,12 @@ var DataGrid = class DataGrid extends VividElement {
 			if (this.fixedColumns && this.fixedColumns > 0) this.applyFixedColumns();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	rowsDataChanged() {
 		if (this.columnDefinitions === null && this.rowsData.length > 0) this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
 		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	columnDefinitionsChanged() {
 		if (this.columnDefinitions === null) {
 			this.generatedGridTemplateColumns = "";
@@ -956,30 +944,22 @@ var DataGrid = class DataGrid extends VividElement {
 			this.queueRowIndexUpdate();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	headerCellItemTemplateChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.$fastController.isConnected) {
 			if (this.generatedHeader !== null) this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	focusRowIndexChanged() {
 		if (this.$fastController.isConnected) this.queueFocusUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	focusColumnIndexChanged() {
 		if (this.$fastController.isConnected) this.queueFocusUpdate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	fixedColumnsChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.$fastController.isConnected) {
@@ -987,9 +967,7 @@ var DataGrid = class DataGrid extends VividElement {
 			this.setupResizeObserver();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	setupResizeObserver() {
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect();
@@ -1002,9 +980,7 @@ var DataGrid = class DataGrid extends VividElement {
 			this.resizeObserver.observe(this);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		/* v8 ignore else -- @preserve */
@@ -1027,9 +1003,7 @@ var DataGrid = class DataGrid extends VividElement {
 		this.#setTabIndex();
 		Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener("row-focused", this.handleRowFocus);
@@ -1044,9 +1018,7 @@ var DataGrid = class DataGrid extends VividElement {
 		this.generatedHeader = null;
 		Observable.getNotifier(this).unsubscribe(this.#changeHandler, "columnDefinitions");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleRowFocus(e) {
 		this.isUpdatingFocus = true;
 		const focusRow = e.target;
@@ -1055,21 +1027,15 @@ var DataGrid = class DataGrid extends VividElement {
 		this.setAttribute("tabIndex", "-1");
 		this.isUpdatingFocus = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleFocus(_) {
 		this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleFocusOut(e) {
 		if (e.relatedTarget === null || !this.contains(e.relatedTarget)) this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleKeydown(e) {
 		if (e.defaultPrevented) return;
 		let newFocusRowIndex;
@@ -1170,11 +1136,7 @@ var DataGrid = class DataGrid extends VividElement {
 			return;
 		}
 	}
-	/**
-	*
-	*
-	* @internal
-	*/
+	/** @internal */
 	slottedRowElementsChanged() {
 		this._resetSelection();
 	}
@@ -1187,9 +1149,7 @@ var DataGrid = class DataGrid extends VividElement {
 			return acc.concat(selectedCells);
 		}, []);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	selectionModeChanged(oldValue) {
 		if (oldValue === void 0) {
 			Updates.enqueue(this._resetSelection);
@@ -1353,9 +1313,7 @@ var DataGrid = class DataGrid extends VividElement {
 			};
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	applyFixedColumns() {
 		if (!this.fixedColumns || this.fixedColumns <= 0) {
 			this.clearFixedColumns();
@@ -1464,33 +1422,23 @@ var DataGridRow = class extends HostSemantics(VividElement) {
 		this._selectable = false;
 		this.selected = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	gridTemplateColumnsChanged() {
 		if (this.$fastController.isConnected) this.updateRowStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	rowTypeChanged() {
 		if (this.$fastController.isConnected) this.updateItemTemplate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	cellItemTemplateChanged() {
 		this.updateItemTemplate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	headerCellItemTemplateChanged() {
 		this.updateItemTemplate();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		/* v8 ignore else -- @preserve */
@@ -1505,32 +1453,24 @@ var DataGridRow = class extends HostSemantics(VividElement) {
 		this.addEventListener(eventKeyDown, this.handleKeydown);
 		this.updateRowStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener("cell-focused", this.handleCellFocus);
 		this.removeEventListener(eventFocusOut, this.handleFocusout);
 		this.removeEventListener(eventKeyDown, this.handleKeydown);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleFocusout(_) {
 		/* v8 ignore else -- @preserve */
 		if (!this.contains(document.activeElement)) this.focusColumnIndex = 0;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleCellFocus(e) {
 		this.focusColumnIndex = this.cellElements.indexOf(e.target);
 		this.$emit("row-focused", this);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleKeydown(e) {
 		if (e.defaultPrevented) return;
 		switch (e.key) {
@@ -1563,9 +1503,7 @@ var DataGridRow = class extends HostSemantics(VividElement) {
 	updateItemTemplate() {
 		this.activeCellItemTemplate = this.rowType === DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === DataGridRowTypes.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	ariaSelectedChanged(oldValue, newValue) {
 		super.ariaSelectedChanged(oldValue, newValue);
 		this._selectable = newValue !== null;
@@ -1674,21 +1612,15 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 		this.ariaSelected = null;
 		this.ariaSort = null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	cellTypeChanged() {
 		if (this.$fastController.isConnected) this.updateCellView();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	gridColumnChanged() {
 		if (this.$fastController.isConnected) this.updateCellStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	columnDefinitionChanged(_oldValue, _newValue) {
 		if (this.$fastController.isConnected) this.updateCellView();
 	}
@@ -1713,9 +1645,7 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 		this.fixedPosition = position;
 		this.updateFixedStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener(eventFocusIn, this.handleFocusin);
@@ -1726,9 +1656,7 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 		this.updateCellStyle();
 		this.updateFixedStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(eventFocusIn, this.handleFocusin);
@@ -1736,9 +1664,7 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 		this.removeEventListener(eventKeyDown, this.handleKeydown);
 		this.disconnectCellView();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleFocusin(_) {
 		this.shadowRoot.querySelector(".base").classList.add("active");
 		if (this.isActiveCell) return;
@@ -1761,17 +1687,13 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 		}
 		this.$emit("cell-focused", this);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleFocusout(_) {
 		this.shadowRoot.querySelector(".base").classList.remove("active");
 		/* v8 ignore else -- @preserve */
 		if (this !== document.activeElement && !this.contains(document.activeElement)) this.isActiveCell = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleKeydown(e) {
 		if (e.defaultPrevented || this.columnDefinition === null || this.cellType === DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) return;
 		switch (e.key) {
@@ -1830,17 +1752,13 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 			this.customCellView = null;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	ariaSelectedChanged(prevValue, newValue) {
 		super.ariaSelectedChanged(prevValue, newValue);
 		this._selectable = newValue !== null;
 		this.selected = newValue === "true";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	ariaSortChanged(oldValue, newValue) {
 		super.ariaSortChanged(oldValue, newValue);
 		if (newValue === null) {
@@ -1852,9 +1770,7 @@ var DataGridCell = class extends Localized(HostSemantics(VividElement)) {
 	#getColumnDataKey() {
 		return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleInteraction() {
 		const isHeaderCell = this.cellType === "columnheader";
 		if (isHeaderCell && this.sortDirection !== void 0) this.$emit("sort", {
@@ -1910,7 +1826,6 @@ function createHeaderCellItemTemplate(context) {
 var DataGridRowTemplate = (context) => {
 	const cellItemTemplate = createCellItemTemplate(context);
 	const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-	const getBaseClasses = (x) => classNames("base", ["selected", !!x.selected]);
 	return html`
 		<template
 			${applyHostSemantics({
@@ -1926,7 +1841,7 @@ var DataGridRowTemplate = (context) => {
 	})}
 		>
 			<div
-				class="${getBaseClasses}"
+				class="${(x) => classNames("base", ["selected", !!x.selected])}"
 				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
 			>
 				<slot ${slotted("slottedCellElements")}></slot>
@@ -1988,7 +1903,6 @@ function handleClick(x, e) {
 }
 var DataGridCellTemplate = (context) => {
 	const visuallyHiddenTagName = context.tagFor(VisuallyHidden);
-	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => classNames("base", ["selected", selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
 	return html`
 		<template
 			tabindex="-1"
@@ -2000,7 +1914,9 @@ var DataGridCellTemplate = (context) => {
 			@click="${(x, c) => handleClick(x, c.event)}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
-			<div class="${getBaseClasses}">
+			<div
+				class="${(x) => classNames("base", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)])}"
+			>
 				<div
 					class="content"
 					role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
@@ -2035,17 +1951,11 @@ var DataGridCellTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/data-grid/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dataGridCellDefinition = defineVividComponent("data-grid-cell", DataGridCell, DataGridCellTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: data_grid_cell_default });
-/**
-* @internal
-*/
+/** @internal */
 var dataGridRowDefinition = defineVividComponent("data-grid-row", DataGridRow, DataGridRowTemplate, [dataGridCellDefinition], { styles: data_grid_row_default });
-/**
-* @internal
-*/
+/** @internal */
 var dataGridDefinition = defineVividComponent("data-grid", DataGrid, DataGridTemplate, [dataGridRowDefinition], { styles: data_grid_default });
 /**
 * Registers the data-grid element with the design system.

package/unbundled/definition35.cjs

@@ -8,7 +8,6 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#endregion
 //#region src/lib/divider/divider.template.ts
-var getClasses = ({ orientation, appearance }) => (0, _microsoft_fast_web_utilities.classNames)("base", [orientation, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
 var getAriaOrientation = ({ role, orientation }) => role === require_divider.DividerRole.presentation ? null : orientation;
 var DividerTemplate = _microsoft_fast_element.html`<template
 	${require_host_semantics.applyHostSemantics({
@@ -17,13 +16,13 @@ var DividerTemplate = _microsoft_fast_element.html`<template
 	ariaOrientation: getAriaOrientation
 })}
 >
-	<span class="${getClasses}"></span
+	<span
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [x.orientation, Boolean(x.orientation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	></span
 ></template>`;
 //#endregion
 //#region src/lib/divider/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dividerDefinition = require_vivid_element.defineVividComponent("divider", require_divider.Divider, DividerTemplate, [], { styles: divider_default });
 /**
 * Registers the divider elements with the design system.

package/unbundled/definition35.js

@@ -7,13 +7,10 @@ import { classNames } from "@microsoft/fast-web-utilities";
 var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
 //#endregion
 //#region src/lib/divider/divider.template.ts
-var getClasses = ({ orientation, appearance }) => classNames("base", [orientation, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
 var getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 //#endregion
 //#region src/lib/divider/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dividerDefinition = defineVividComponent("divider", Divider, html`<template
 	${applyHostSemantics({
 	role: (x) => x.role || DividerRole.separator,
@@ -21,7 +18,9 @@ var dividerDefinition = defineVividComponent("divider", Divider, html`<template
 	ariaOrientation: getAriaOrientation
 })}
 >
-	<span class="${getClasses}"></span
+	<span
+		class="${(x) => classNames("base", [x.orientation, Boolean(x.orientation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	></span
 ></template>`, [], { styles: divider_default });
 /**
 * Registers the divider elements with the design system.

package/unbundled/definition36.cjs

@@ -2,8 +2,8 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition6.cjs");
-const require_definition$1 = require("./definition7.cjs");
-const require_definition$2 = require("./definition10.cjs");
+const require_definition$1 = require("./definition9.cjs");
+const require_definition$2 = require("./definition22.cjs");
 const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition35.cjs");
 const require_picker_field_template = require("./picker-field.template.cjs");
@@ -24,27 +24,19 @@ let _microsoft_fast_element = require("@microsoft/fast-element");
 * @testAction selectDate selectDate
 */
 var DatePicker = class extends require_single_date_picker.SingleDatePickerMixin(require_single_value_picker.SingleValuePicker(require_calendar_picker_template.MinMaxCalendarPicker(require_calendar_picker_template.CalendarPicker(require_picker_field_template.PickerField)))) {
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_toPresentationValue(value) {
 		return require_calendar_picker_template.formatPresentationDate(value, this.locale.calendarPicker);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_parsePresentationValue(presentationValue) {
 		return require_calendar_picker_template.parsePresentationDate(presentationValue, this.locale.calendarPicker);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_dateValue() {
 		return this.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_withUpdatedDate(dateStr) {
 		return dateStr;
 	}
@@ -54,22 +46,16 @@ var DatePicker = class extends require_single_date_picker.SingleDatePickerMixin(
 		this._textFieldSize = "20";
 		this.proxy.type = "date";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonLabel() {
 		if (this.value) return this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value));
 		else return this.locale.calendarPicker.chooseDateLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _dialogLabel() {
 		return this.locale.calendarPicker.chooseDateLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _textFieldPlaceholder() {
 		return this.locale.calendarPicker.dateFormatPlaceholder;
 	}
@@ -81,22 +67,16 @@ var DatePicker = class extends require_single_date_picker.SingleDatePickerMixin(
 		super._onDateClick(date);
 		this._closePopup();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_getCustomValidationError() {
 		if (this._isPresentationValueInvalid()) return this.locale.calendarPicker.invalidDateError;
 		return null;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_focusableElsWithinDialog() {
 		return this._dialogEl.querySelectorAll("button, .vwc-button");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _pickerButtonIcon() {
 		return "calendar-line";
 	}
@@ -112,15 +92,13 @@ var DatePickerTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/date-picker/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var datePickerDefinition = require_vivid_element.defineVividComponent("date-picker", DatePicker, DatePickerTemplate, [
-	require_definition$1.buttonDefinition,
-	require_definition$2.popupDefinition,
+	require_definition.buttonDefinition,
+	require_definition$1.popupDefinition,
 	require_definition$3.textFieldDefinition,
 	require_definition$4.dividerDefinition,
-	require_definition.visuallyHiddenDefinition
+	require_definition$2.visuallyHiddenDefinition
 ], {
 	styles: [require_picker_field_template.picker_field_default, require_calendar_picker_template.calendar_picker_default],
 	shadowOptions: { delegatesFocus: true }