@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition34.cjs

@@ -3,20 +3,20 @@ const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition6.cjs");
 const require_key_codes = require("./key-codes.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
+const require_definition$1 = require("./definition22.cjs");
 const require_data_grid_options = require("./data-grid.options.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@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;
@@ -900,9 +900,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 require_vivid_element.VividElement {
-	/**
-	*  generates a gridTemplateColumns based on columndata array
-	*/
+	/**  generates a gridTemplateColumns based on columndata array */
 	static generateTemplateColumns(columnDefinitions) {
 		let templateColumns = "";
 		columnDefinitions.forEach((_) => {
@@ -910,24 +908,18 @@ var DataGrid = class DataGrid extends require_vivid_element.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) {
@@ -935,16 +927,12 @@ var DataGrid = class DataGrid extends require_vivid_element.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 = "";
@@ -957,30 +945,22 @@ var DataGrid = class DataGrid extends require_vivid_element.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) {
@@ -988,9 +968,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 			this.setupResizeObserver();
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	setupResizeObserver() {
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect();
@@ -1003,9 +981,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 			this.resizeObserver.observe(this);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		/* v8 ignore else -- @preserve */
@@ -1028,9 +1004,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 		this.#setTabIndex();
 		_microsoft_fast_element.Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener("row-focused", this.handleRowFocus);
@@ -1045,9 +1019,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 		this.generatedHeader = null;
 		_microsoft_fast_element.Observable.getNotifier(this).unsubscribe(this.#changeHandler, "columnDefinitions");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleRowFocus(e) {
 		this.isUpdatingFocus = true;
 		const focusRow = e.target;
@@ -1056,21 +1028,15 @@ var DataGrid = class DataGrid extends require_vivid_element.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;
@@ -1171,11 +1137,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 			return;
 		}
 	}
-	/**
-	*
-	*
-	* @internal
-	*/
+	/** @internal */
 	slottedRowElementsChanged() {
 		this._resetSelection();
 	}
@@ -1188,9 +1150,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 			return acc.concat(selectedCells);
 		}, []);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	selectionModeChanged(oldValue) {
 		if (oldValue === void 0) {
 			_microsoft_fast_element.Updates.enqueue(this._resetSelection);
@@ -1354,9 +1314,7 @@ var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 			};
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	applyFixedColumns() {
 		if (!this.fixedColumns || this.fixedColumns <= 0) {
 			this.clearFixedColumns();
@@ -1465,33 +1423,23 @@ var DataGridRow = class extends require_host_semantics.HostSemantics(require_viv
 		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 */
@@ -1506,32 +1454,24 @@ var DataGridRow = class extends require_host_semantics.HostSemantics(require_viv
 		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
 		this.updateRowStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener("cell-focused", this.handleCellFocus);
 		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
 		this.removeEventListener(_microsoft_fast_web_utilities.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) {
@@ -1564,9 +1504,7 @@ var DataGridRow = class extends require_host_semantics.HostSemantics(require_viv
 	updateItemTemplate() {
 		this.activeCellItemTemplate = this.rowType === require_data_grid_options.DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === require_data_grid_options.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;
@@ -1675,21 +1613,15 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 		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();
 	}
@@ -1714,9 +1646,7 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 		this.fixedPosition = position;
 		this.updateFixedStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
@@ -1727,9 +1657,7 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 		this.updateCellStyle();
 		this.updateFixedStyle();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
@@ -1737,9 +1665,7 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
 		this.disconnectCellView();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	handleFocusin(_) {
 		this.shadowRoot.querySelector(".base").classList.add("active");
 		if (this.isActiveCell) return;
@@ -1762,17 +1688,13 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 		}
 		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 === require_data_grid_options.DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === require_data_grid_options.DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) return;
 		switch (e.key) {
@@ -1831,17 +1753,13 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 			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) {
@@ -1853,9 +1771,7 @@ var DataGridCell = class extends require_localized.Localized(require_host_semant
 	#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", {
@@ -1911,7 +1827,6 @@ function createHeaderCellItemTemplate(context) {
 var DataGridRowTemplate = (context) => {
 	const cellItemTemplate = createCellItemTemplate(context);
 	const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-	const getBaseClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", !!x.selected]);
 	return _microsoft_fast_element.html`
 		<template
 			${require_host_semantics.applyHostSemantics({
@@ -1927,7 +1842,7 @@ var DataGridRowTemplate = (context) => {
 	})}
 		>
 			<div
-				class="${getBaseClasses}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", !!x.selected])}"
 				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
 			>
 				<slot ${(0, _microsoft_fast_element.slotted)("slottedCellElements")}></slot>
@@ -1989,7 +1904,6 @@ function handleClick(x, e) {
 }
 var DataGridCellTemplate = (context) => {
 	const visuallyHiddenTagName = context.tagFor(require_definition$1.VisuallyHidden);
-	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
 	return _microsoft_fast_element.html`
 		<template
 			tabindex="-1"
@@ -2001,7 +1915,9 @@ var DataGridCellTemplate = (context) => {
 			@click="${(x, c) => handleClick(x, c.event)}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
-			<div class="${getBaseClasses}">
+			<div
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)])}"
+			>
 				<div
 					class="content"
 					role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
@@ -2036,17 +1952,11 @@ var DataGridCellTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/data-grid/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var dataGridCellDefinition = require_vivid_element.defineVividComponent("data-grid-cell", DataGridCell, DataGridCellTemplate, [require_definition.iconDefinition, require_definition$1.visuallyHiddenDefinition], { styles: data_grid_cell_default });
-/**
-* @internal
-*/
+/** @internal */
 var dataGridRowDefinition = require_vivid_element.defineVividComponent("data-grid-row", DataGridRow, DataGridRowTemplate, [dataGridCellDefinition], { styles: data_grid_row_default });
-/**
-* @internal
-*/
+/** @internal */
 var dataGridDefinition = require_vivid_element.defineVividComponent("data-grid", DataGrid, DataGridTemplate, [dataGridRowDefinition], { styles: data_grid_default });
 /**
 * Registers the data-grid element with the design system.