@vonage/vivid 5.17.0 → 5.19.0

package/unbundled/definition34.cjs

@@ -1,46 +1,2060 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition.cjs");
+const require_definition$1 = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_localized = require("./localized.cjs");
+const require_key_codes = require("./key-codes.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
-const require_divider = require("./divider.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/divider/divider.scss?inline
-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({
-	role: (x) => x.role || require_divider.DividerRole.separator,
-	ariaHidden: true,
-	ariaOrientation: getAriaOrientation
-})}
->
-	<span class="${getClasses}"></span
-></template>`;
-//#endregion
-//#region src/lib/divider/definition.ts
+//#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}";
+//#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}";
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/interfaces.js
+var kernelMode;
+var kernelAttr = "fast-kernel";
+try {
+	if (document.currentScript) kernelMode = document.currentScript.getAttribute(kernelAttr);
+	else {
+		const scripts = document.getElementsByTagName("script");
+		kernelMode = scripts[scripts.length - 1].getAttribute(kernelAttr);
+	}
+} catch (e) {
+	kernelMode = "isolate";
+}
+var KernelServiceId;
+switch (kernelMode) {
+	case "share":
+		KernelServiceId = Object.freeze({
+			updateQueue: 1,
+			observable: 2,
+			contextEvent: 3,
+			elementRegistry: 4
+		});
+		break;
+	case "share-v2":
+		KernelServiceId = Object.freeze({
+			updateQueue: 1.2,
+			observable: 2.2,
+			contextEvent: 3.2,
+			elementRegistry: 4.2
+		});
+		break;
+	default:
+		const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
+		KernelServiceId = Object.freeze({
+			updateQueue: `1.2${postfix}`,
+			observable: `2.2${postfix}`,
+			contextEvent: `3.2${postfix}`,
+			elementRegistry: `4.2${postfix}`
+		});
+		break;
+}
+/**
+* Determines whether or not an object is a function.
+* @public
+*/
+var isFunction = (object) => typeof object === "function";
+/**
+* Determines whether or not an object is a string.
+* @public
+*/
+var isString = (object) => typeof object === "string";
+/**
+* A function which does nothing.
+* @public
+*/
+var noop = () => void 0;
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/polyfills.js
+(function ensureGlobalThis() {
+	if (typeof globalThis !== "undefined") return;
+	if (typeof global !== "undefined") global.globalThis = global;
+	else if (typeof self !== "undefined") self.globalThis = self;
+	else if (typeof window !== "undefined") window.globalThis = window;
+	else {
+		const result = new Function("return this")();
+		result.globalThis = result;
+	}
+})();
+(function requestIdleCallbackPolyfill() {
+	if ("requestIdleCallback" in globalThis) return;
+	/**
+	* A polyfill for requestIdleCallback that falls back to setTimeout.
+	*
+	* @param callback - The function to call when the browser is idle.
+	* @param options - Options object that may contain a timeout property.
+	* @returns An ID that can be used to cancel the callback.
+	* @public
+	*/
+	globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
+		const start = Date.now();
+		return setTimeout(() => {
+			callback({
+				didTimeout: (options === null || options === void 0 ? void 0 : options.timeout) ? Date.now() - start >= options.timeout : false,
+				timeRemaining: () => 0
+			});
+		}, 1);
+	};
+	/**
+	* A polyfill for cancelIdleCallback that falls back to clearTimeout.
+	*
+	* @param id - The ID of the callback to cancel.
+	* @public
+	*/
+	globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
+		clearTimeout(id);
+	};
+})();
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/platform.js
+var propConfig = {
+	configurable: false,
+	enumerable: false,
+	writable: false
+};
+if (globalThis.FAST === void 0) Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+/**
+* The FAST global.
+* @public
+*/
+var FAST = globalThis.FAST;
+if (FAST.getById === void 0) {
+	const storage = Object.create(null);
+	Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
+		let found = storage[id];
+		if (found === void 0) found = initialize ? storage[id] = initialize() : null;
+		return found;
+	} }, propConfig));
+}
+if (FAST.error === void 0) Object.assign(FAST, {
+	warn() {},
+	error(code) {
+		return /* @__PURE__ */ new Error(`Error ${code}`);
+	},
+	addMessages() {}
+});
+Object.freeze([]);
+/**
+* Creates a function capable of locating metadata associated with a type.
+* @returns A metadata locator function.
+* @internal
+*/
+function createMetadataLocator() {
+	const metadataLookup = /* @__PURE__ */ new WeakMap();
+	return function(target) {
+		let metadata = metadataLookup.get(target);
+		if (metadata === void 0) {
+			let currentTarget = Reflect.getPrototypeOf(target);
+			while (metadata === void 0 && currentTarget !== null) {
+				metadata = metadataLookup.get(currentTarget);
+				currentTarget = Reflect.getPrototypeOf(currentTarget);
+			}
+			metadata = metadata === void 0 ? [] : metadata.slice(0);
+			metadataLookup.set(target, metadata);
+		}
+		return metadata;
+	};
+}
+/**
+* Makes a type noop for JSON serialization.
+* @param type - The type to make noop for JSON serialization.
+* @internal
+*/
+function makeSerializationNoop(type) {
+	type.prototype.toJSON = noop;
+}
+Object.freeze({
+	/**
+	* Not aspected.
+	*/
+	none: 0,
+	/**
+	* An attribute.
+	*/
+	attribute: 1,
+	/**
+	* A boolean attribute.
+	*/
+	booleanAttribute: 2,
+	/**
+	* A property.
+	*/
+	property: 3,
+	/**
+	* Content
+	*/
+	content: 4,
+	/**
+	* A token list.
+	*/
+	tokenList: 5,
+	/**
+	* An event.
+	*/
+	event: 6
+});
+var createHTML = (html) => html;
+var fastTrustedType = globalThis.trustedTypes ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML }) : { createHTML };
+var defaultPolicy = Object.freeze({
+	createHTML(value) {
+		return fastTrustedType.createHTML(value);
+	},
+	protect(tagName, aspect, aspectName, sink) {
+		return sink;
+	}
+});
+var fastPolicy = defaultPolicy;
+/**
+* Common DOM APIs.
+* @public
+*/
+var DOM = Object.freeze({
+	/**
+	* Gets the dom policy used by the templating system.
+	*/
+	get policy() {
+		return defaultPolicy;
+	},
+	/**
+	* Sets the dom policy used by the templating system.
+	* @param policy - The policy to set.
+	* @remarks
+	* This API can only be called once, for security reasons. It should be
+	* called by the application developer at the start of their program.
+	*/
+	setPolicy(value) {
+		if (defaultPolicy !== fastPolicy) throw FAST.error(1201);
+		defaultPolicy = value;
+	},
+	/**
+	* Sets an attribute value on an element.
+	* @param element - The element to set the attribute value on.
+	* @param attributeName - The attribute name to set.
+	* @param value - The value of the attribute to set.
+	* @remarks
+	* If the value is `null` or `undefined`, the attribute is removed, otherwise
+	* it is set to the provided value using the standard `setAttribute` API.
+	*/
+	setAttribute(element, attributeName, value) {
+		value === null || value === void 0 ? element.removeAttribute(attributeName) : element.setAttribute(attributeName, value);
+	},
+	/**
+	* Sets a boolean attribute value.
+	* @param element - The element to set the boolean attribute value on.
+	* @param attributeName - The attribute name to set.
+	* @param value - The value of the attribute to set.
+	* @remarks
+	* If the value is true, the attribute is added; otherwise it is removed.
+	*/
+	setBooleanAttribute(element, attributeName, value) {
+		value ? element.setAttribute(attributeName, "") : element.removeAttribute(attributeName);
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/observation/update-queue.js
+/**
+* The default UpdateQueue.
+* @public
+*/
+var Updates$1 = FAST.getById(KernelServiceId.updateQueue, () => {
+	const tasks = [];
+	const pendingErrors = [];
+	const rAF = globalThis.requestAnimationFrame;
+	let updateAsync = true;
+	function throwFirstError() {
+		if (pendingErrors.length) throw pendingErrors.shift();
+	}
+	function tryRunTask(task) {
+		try {
+			task.call();
+		} catch (error) {
+			if (updateAsync) {
+				pendingErrors.push(error);
+				setTimeout(throwFirstError, 0);
+			} else {
+				tasks.length = 0;
+				throw error;
+			}
+		}
+	}
+	function process() {
+		const capacity = 1024;
+		let index = 0;
+		while (index < tasks.length) {
+			tryRunTask(tasks[index]);
+			index++;
+			if (index > capacity) {
+				for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) tasks[scan] = tasks[scan + index];
+				tasks.length -= index;
+				index = 0;
+			}
+		}
+		tasks.length = 0;
+	}
+	function enqueue(callable) {
+		tasks.push(callable);
+		if (tasks.length < 2) updateAsync ? rAF(process) : process();
+	}
+	return Object.freeze({
+		enqueue,
+		next: () => new Promise(enqueue),
+		process,
+		setMode: (isAsync) => updateAsync = isAsync
+	});
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/observation/notifier.js
+/**
+* An implementation of {@link Notifier} that efficiently keeps track of
+* subscribers interested in a specific change notification on an
+* observable subject.
+*
+* @remarks
+* This set is optimized for the most common scenario of 1 or 2 subscribers.
+* With this in mind, it can store a subscriber in an internal field, allowing it to avoid Array#push operations.
+* If the set ever exceeds two subscribers, it upgrades to an array automatically.
+* @public
+*/
+var SubscriberSet = class {
+	/**
+	* Creates an instance of SubscriberSet for the specified subject.
+	* @param subject - The subject that subscribers will receive notifications from.
+	* @param initialSubscriber - An initial subscriber to changes.
+	*/
+	constructor(subject, initialSubscriber) {
+		this.sub1 = void 0;
+		this.sub2 = void 0;
+		this.spillover = void 0;
+		this.subject = subject;
+		this.sub1 = initialSubscriber;
+	}
+	/**
+	* Checks whether the provided subscriber has been added to this set.
+	* @param subscriber - The subscriber to test for inclusion in this set.
+	*/
+	has(subscriber) {
+		return this.spillover === void 0 ? this.sub1 === subscriber || this.sub2 === subscriber : this.spillover.indexOf(subscriber) !== -1;
+	}
+	/**
+	* Subscribes to notification of changes in an object's state.
+	* @param subscriber - The object that is subscribing for change notification.
+	*/
+	subscribe(subscriber) {
+		const spillover = this.spillover;
+		if (spillover === void 0) {
+			if (this.has(subscriber)) return;
+			if (this.sub1 === void 0) {
+				this.sub1 = subscriber;
+				return;
+			}
+			if (this.sub2 === void 0) {
+				this.sub2 = subscriber;
+				return;
+			}
+			this.spillover = [
+				this.sub1,
+				this.sub2,
+				subscriber
+			];
+			this.sub1 = void 0;
+			this.sub2 = void 0;
+		} else if (spillover.indexOf(subscriber) === -1) spillover.push(subscriber);
+	}
+	/**
+	* Unsubscribes from notification of changes in an object's state.
+	* @param subscriber - The object that is unsubscribing from change notification.
+	*/
+	unsubscribe(subscriber) {
+		const spillover = this.spillover;
+		if (spillover === void 0) {
+			if (this.sub1 === subscriber) this.sub1 = void 0;
+			else if (this.sub2 === subscriber) this.sub2 = void 0;
+		} else {
+			const index = spillover.indexOf(subscriber);
+			if (index !== -1) spillover.splice(index, 1);
+		}
+	}
+	/**
+	* Notifies all subscribers.
+	* @param args - Data passed along to subscribers during notification.
+	*/
+	notify(args) {
+		const spillover = this.spillover;
+		const subject = this.subject;
+		if (spillover === void 0) {
+			const sub1 = this.sub1;
+			const sub2 = this.sub2;
+			if (sub1 !== void 0) sub1.handleChange(subject, args);
+			if (sub2 !== void 0) sub2.handleChange(subject, args);
+		} else for (let i = 0, ii = spillover.length; i < ii; ++i) spillover[i].handleChange(subject, args);
+	}
+};
+/**
+* An implementation of Notifier that allows subscribers to be notified
+* of individual property changes on an object.
+* @public
+*/
+var PropertyChangeNotifier = class {
+	/**
+	* Creates an instance of PropertyChangeNotifier for the specified subject.
+	* @param subject - The object that subscribers will receive notifications for.
+	*/
+	constructor(subject) {
+		this.subscribers = {};
+		this.subjectSubscribers = null;
+		this.subject = subject;
+	}
+	/**
+	* Notifies all subscribers, based on the specified property.
+	* @param propertyName - The property name, passed along to subscribers during notification.
+	*/
+	notify(propertyName) {
+		var _a, _b;
+		(_a = this.subscribers[propertyName]) === null || _a === void 0 || _a.notify(propertyName);
+		(_b = this.subjectSubscribers) === null || _b === void 0 || _b.notify(propertyName);
+	}
+	/**
+	* Subscribes to notification of changes in an object's state.
+	* @param subscriber - The object that is subscribing for change notification.
+	* @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
+	*/
+	subscribe(subscriber, propertyToWatch) {
+		var _a, _b;
+		let subscribers;
+		if (propertyToWatch) subscribers = (_a = this.subscribers[propertyToWatch]) !== null && _a !== void 0 ? _a : this.subscribers[propertyToWatch] = new SubscriberSet(this.subject);
+		else subscribers = (_b = this.subjectSubscribers) !== null && _b !== void 0 ? _b : this.subjectSubscribers = new SubscriberSet(this.subject);
+		subscribers.subscribe(subscriber);
+	}
+	/**
+	* Unsubscribes from notification of changes in an object's state.
+	* @param subscriber - The object that is unsubscribing from change notification.
+	* @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
+	*/
+	unsubscribe(subscriber, propertyToUnwatch) {
+		var _a, _b;
+		if (propertyToUnwatch) (_a = this.subscribers[propertyToUnwatch]) === null || _a === void 0 || _a.unsubscribe(subscriber);
+		else (_b = this.subjectSubscribers) === null || _b === void 0 || _b.unsubscribe(subscriber);
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/observation/observable.js
+/**
+* Describes how the source's lifetime relates to its controller's lifetime.
+* @public
+*/
+var SourceLifetime = Object.freeze({
+	/**
+	* The source to controller lifetime relationship is unknown.
+	*/
+	unknown: void 0,
+	/**
+	* The source and controller lifetimes are coupled to one another.
+	* They can/will be GC'd together.
+	*/
+	coupled: 1
+});
+FAST.getById(KernelServiceId.observable, () => {
+	const queueUpdate = Updates$1.enqueue;
+	const volatileRegex = /(:|&&|\|\||if|\?\.)/;
+	const notifierLookup = /* @__PURE__ */ new WeakMap();
+	let watcher = void 0;
+	let createArrayObserver = (array) => {
+		throw FAST.error(1101);
+	};
+	function getNotifier(source) {
+		var _a;
+		let found = (_a = source.$fastController) !== null && _a !== void 0 ? _a : notifierLookup.get(source);
+		if (found === void 0) Array.isArray(source) ? found = createArrayObserver(source) : notifierLookup.set(source, found = new PropertyChangeNotifier(source));
+		return found;
+	}
+	const getAccessors = createMetadataLocator();
+	class DefaultObservableAccessor {
+		constructor(name) {
+			this.name = name;
+			this.field = `_${name}`;
+			this.callback = `${name}Changed`;
+		}
+		getValue(source) {
+			if (watcher !== void 0) watcher.watch(source, this.name);
+			return source[this.field];
+		}
+		setValue(source, newValue) {
+			const field = this.field;
+			const oldValue = source[field];
+			if (oldValue !== newValue) {
+				source[field] = newValue;
+				const callback = source[this.callback];
+				if (isFunction(callback)) callback.call(source, oldValue, newValue);
+				getNotifier(source).notify(this.name);
+			}
+		}
+	}
+	class ExpressionNotifierImplementation extends SubscriberSet {
+		constructor(expression, initialSubscriber, isVolatileBinding = false) {
+			super(expression, initialSubscriber);
+			this.expression = expression;
+			this.isVolatileBinding = isVolatileBinding;
+			this.needsRefresh = true;
+			this.needsQueue = true;
+			this.isAsync = true;
+			this.first = this;
+			this.last = null;
+			this.propertySource = void 0;
+			this.propertyName = void 0;
+			this.notifier = void 0;
+			this.next = void 0;
+		}
+		setMode(isAsync) {
+			this.isAsync = this.needsQueue = isAsync;
+		}
+		bind(controller) {
+			this.controller = controller;
+			const value = this.observe(controller.source, controller.context);
+			if (!controller.isBound && this.requiresUnbind(controller)) controller.onUnbind(this);
+			return value;
+		}
+		requiresUnbind(controller) {
+			return controller.sourceLifetime !== SourceLifetime.coupled || this.first !== this.last || this.first.propertySource !== controller.source;
+		}
+		unbind(controller) {
+			this.dispose();
+		}
+		observe(source, context) {
+			if (this.needsRefresh && this.last !== null) this.dispose();
+			const previousWatcher = watcher;
+			watcher = this.needsRefresh ? this : void 0;
+			this.needsRefresh = this.isVolatileBinding;
+			let result;
+			try {
+				result = this.expression(source, context);
+			} finally {
+				watcher = previousWatcher;
+			}
+			return result;
+		}
+		disconnect() {
+			this.dispose();
+		}
+		dispose() {
+			if (this.last !== null) {
+				let current = this.first;
+				while (current !== void 0) {
+					current.notifier.unsubscribe(this, current.propertyName);
+					current = current.next;
+				}
+				this.last = null;
+				this.needsRefresh = this.needsQueue = this.isAsync;
+			}
+		}
+		watch(propertySource, propertyName) {
+			const prev = this.last;
+			const notifier = getNotifier(propertySource);
+			const current = prev === null ? this.first : {};
+			current.propertySource = propertySource;
+			current.propertyName = propertyName;
+			current.notifier = notifier;
+			notifier.subscribe(this, propertyName);
+			if (prev !== null) {
+				if (!this.needsRefresh) {
+					let prevValue;
+					watcher = void 0;
+					prevValue = prev.propertySource[prev.propertyName];
+					watcher = this;
+					if (propertySource === prevValue) this.needsRefresh = true;
+				}
+				prev.next = current;
+			}
+			this.last = current;
+		}
+		handleChange() {
+			if (this.needsQueue) {
+				this.needsQueue = false;
+				queueUpdate(this);
+			} else if (!this.isAsync) this.call();
+		}
+		call() {
+			if (this.last !== null) {
+				this.needsQueue = this.isAsync;
+				this.notify(this);
+			}
+		}
+		*records() {
+			let next = this.first;
+			while (next !== void 0) {
+				yield next;
+				next = next.next;
+			}
+		}
+	}
+	makeSerializationNoop(ExpressionNotifierImplementation);
+	return Object.freeze({
+		/**
+		* @internal
+		* @param factory - The factory used to create array observers.
+		*/
+		setArrayObserverFactory(factory) {
+			createArrayObserver = factory;
+		},
+		/**
+		* Gets a notifier for an object or Array.
+		* @param source - The object or Array to get the notifier for.
+		*/
+		getNotifier,
+		/**
+		* Records a property change for a source object.
+		* @param source - The object to record the change against.
+		* @param propertyName - The property to track as changed.
+		*/
+		track(source, propertyName) {
+			watcher && watcher.watch(source, propertyName);
+		},
+		/**
+		* Notifies watchers that the currently executing property getter or function is volatile
+		* with respect to its observable dependencies.
+		*/
+		trackVolatile() {
+			watcher && (watcher.needsRefresh = true);
+		},
+		/**
+		* Notifies subscribers of a source object of changes.
+		* @param source - the object to notify of changes.
+		* @param args - The change args to pass to subscribers.
+		*/
+		notify(source, args) {
+			getNotifier(source).notify(args);
+		},
+		/**
+		* Defines an observable property on an object or prototype.
+		* @param target - The target object to define the observable on.
+		* @param nameOrAccessor - The name of the property to define as observable;
+		* or a custom accessor that specifies the property name and accessor implementation.
+		*/
+		defineProperty(target, nameOrAccessor) {
+			if (isString(nameOrAccessor)) nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+			getAccessors(target).push(nameOrAccessor);
+			Reflect.defineProperty(target, nameOrAccessor.name, {
+				enumerable: true,
+				get() {
+					return nameOrAccessor.getValue(this);
+				},
+				set(newValue) {
+					nameOrAccessor.setValue(this, newValue);
+				}
+			});
+		},
+		/**
+		* Finds all the observable accessors defined on the target,
+		* including its prototype chain.
+		* @param target - The target object to search for accessor on.
+		*/
+		getAccessors,
+		/**
+		* Creates a {@link ExpressionNotifier} that can watch the
+		* provided {@link Expression} for changes.
+		* @param expression - The binding to observe.
+		* @param initialSubscriber - An initial subscriber to changes in the binding value.
+		* @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+		*/
+		binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+			return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
+		},
+		/**
+		* Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
+		* on every evaluation of the value.
+		* @param expression - The binding to inspect.
+		*/
+		isVolatileBinding(expression) {
+			return volatileRegex.test(expression.toString());
+		}
+	});
+});
+var contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
+	let current = null;
+	return {
+		get() {
+			return current;
+		},
+		set(event) {
+			current = event;
+		}
+	};
+});
+/**
+* Provides additional contextual information available to behaviors and expressions.
+* @public
+*/
+var ExecutionContext = Object.freeze({
+	/**
+	* A default execution context.
+	*/
+	default: {
+		index: 0,
+		length: 0,
+		get event() {
+			return ExecutionContext.getEvent();
+		},
+		eventDetail() {
+			return this.event.detail;
+		},
+		eventTarget() {
+			return this.event.target;
+		}
+	},
+	/**
+	* Gets the current event.
+	* @returns An event object.
+	*/
+	getEvent() {
+		return contextEvent.get();
+	},
+	/**
+	* Sets the current event.
+	* @param event - An event object.
+	*/
+	setEvent(event) {
+		contextEvent.set(event);
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
+var marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
+var interpolationStart = `${marker}{`;
+var interpolationEnd = `}${marker}`;
+var interpolationEndLength = interpolationEnd.length;
+var id = 0;
+/** @internal */
+var nextId = () => `${marker}-${++id}`;
+Object.freeze({
+	/**
+	* Creates a placeholder string suitable for marking out a location *within*
+	* an attribute value or HTML content.
+	* @param index - The directive index to create the placeholder for.
+	* @remarks
+	* Used internally by binding directives.
+	*/
+	interpolation: (id) => `${interpolationStart}${id}${interpolationEnd}`,
+	/**
+	* Creates a placeholder that manifests itself as an attribute on an
+	* element.
+	* @param attributeName - The name of the custom attribute.
+	* @param index - The directive index to create the placeholder for.
+	* @remarks
+	* Used internally by attribute directives such as `ref`, `slotted`, and `children`.
+	*/
+	attribute: (id) => `${nextId()}="${interpolationStart}${id}${interpolationEnd}"`,
+	/**
+	* Creates a placeholder that manifests itself as a marker within the DOM structure.
+	* @param index - The directive index to create the placeholder for.
+	* @remarks
+	* Used internally by structural directives such as `repeat`.
+	*/
+	comment: (id) => `<!--${interpolationStart}${id}${interpolationEnd}-->`
+});
+Object.freeze({ 
+/**
+* Parses text content or HTML attribute content, separating out the static strings
+* from the directives.
+* @param value - The content or attribute string to parse.
+* @param factories - A list of directives to search for in the string.
+* @returns A heterogeneous array of static strings interspersed with
+* directives or null if no directives are found in the string.
+*/
+parse(value, factories) {
+	const parts = value.split(interpolationStart);
+	if (parts.length === 1) return null;
+	const result = [];
+	for (let i = 0, ii = parts.length; i < ii; ++i) {
+		const current = parts[i];
+		const index = current.indexOf(interpolationEnd);
+		let literal;
+		if (index === -1) literal = current;
+		else {
+			const factoryId = current.substring(0, index);
+			result.push(factories[factoryId]);
+			literal = current.substring(index + interpolationEndLength);
+		}
+		if (literal !== "") result.push(literal);
+	}
+	return result;
+} });
+//#endregion
+//#region ../../node_modules/.pnpm/@microsoft+fast-element@2.8.3/node_modules/@microsoft/fast-element/dist/esm/utilities.js
+/**
+* Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+* control ViewBehaviors.
+* @public
+*/
+var ViewBehaviorOrchestrator = Object.freeze({ 
+/**
+* Creates a ViewBehaviorOrchestrator.
+* @param source - The source to to associate behaviors with.
+* @returns A ViewBehaviorOrchestrator.
+*/
+create(source) {
+	const behaviors = [];
+	const targets = {};
+	let unbindables = null;
+	let isConnected = false;
+	return {
+		source,
+		context: ExecutionContext.default,
+		targets,
+		get isBound() {
+			return isConnected;
+		},
+		addBehaviorFactory(factory, target) {
+			var _a, _b, _c, _d;
+			const compiled = factory;
+			compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
+			compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
+			compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
+			compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
+			this.addTarget(compiled.targetNodeId, target);
+			this.addBehavior(compiled.createBehavior());
+		},
+		addTarget(nodeId, target) {
+			targets[nodeId] = target;
+		},
+		addBehavior(behavior) {
+			behaviors.push(behavior);
+			if (isConnected) behavior.bind(this);
+		},
+		onUnbind(unbindable) {
+			if (unbindables === null) unbindables = [];
+			unbindables.push(unbindable);
+		},
+		connectedCallback(controller) {
+			if (!isConnected) {
+				isConnected = true;
+				behaviors.forEach((x) => x.bind(this));
+			}
+		},
+		disconnectedCallback(controller) {
+			if (isConnected) {
+				isConnected = false;
+				if (unbindables !== null) unbindables.forEach((x) => x.unbind(this));
+			}
+		}
+	};
+} });
+//#endregion
+//#region src/lib/data-grid/data-grid.ts
+var DataGridSelectionMode = {
+	none: "none",
+	singleRow: "single-row",
+	multiRow: "multi-row",
+	singleCell: "single-cell",
+	multiCell: "multi-cell"
+};
+/**
+* @public
+* @component data-grid
+* @slot - Default slot.
+* @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
+	*/
+	static generateTemplateColumns(columnDefinitions) {
+		let templateColumns = "";
+		columnDefinitions.forEach((_) => {
+			templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}1fr`;
+		});
+		return templateColumns;
+	}
+	/**
+	* @internal
+	*/
+	noTabbingChanged() {
+		if (this.$fastController.isConnected) this.#setTabIndex();
+	}
+	#setTabIndex() {
+		this.setAttribute("tabIndex", this.noTabbing || this.contains(document.activeElement) ? "-1" : "0");
+	}
+	/**
+	* @internal
+	*/
+	generateHeaderChanged() {
+		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
+	}
+	/**
+	* @internal
+	*/
+	gridTemplateColumnsChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			this.updateRowIndexes();
+			if (this.fixedColumns && this.fixedColumns > 0) this.applyFixedColumns();
+		}
+	}
+	/**
+	* @internal
+	*/
+	rowsDataChanged() {
+		if (this.columnDefinitions === null && this.rowsData.length > 0) this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
+		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
+	}
+	/**
+	* @internal
+	*/
+	columnDefinitionsChanged() {
+		if (this.columnDefinitions === null) {
+			this.generatedGridTemplateColumns = "";
+			return;
+		}
+		this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			this.columnDefinitionsStale = true;
+			this.queueRowIndexUpdate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	headerCellItemTemplateChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			if (this.generatedHeader !== null) this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
+		}
+	}
+	/**
+	* @internal
+	*/
+	focusRowIndexChanged() {
+		if (this.$fastController.isConnected) this.queueFocusUpdate();
+	}
+	/**
+	* @internal
+	*/
+	focusColumnIndexChanged() {
+		if (this.$fastController.isConnected) this.queueFocusUpdate();
+	}
+	/**
+	* @internal
+	*/
+	fixedColumnsChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			this.applyFixedColumns();
+			this.setupResizeObserver();
+		}
+	}
+	/**
+	* @internal
+	*/
+	setupResizeObserver() {
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = void 0;
+		}
+		if (typeof ResizeObserver !== "undefined" && this.fixedColumns && this.fixedColumns > 0) {
+			this.resizeObserver = new ResizeObserver(() => {
+				this.applyFixedColumns();
+			});
+			this.resizeObserver.observe(this);
+		}
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		/* v8 ignore else -- @preserve */
+		if (this.rowItemTemplate === void 0) this.rowItemTemplate = this.defaultRowItemTemplate;
+		/* v8 ignore else -- @preserve */
+		if (this.behaviorOrchestrator === null) {
+			this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
+			this.$fastController.addBehavior(this.behaviorOrchestrator);
+			this.behaviorOrchestrator.addBehaviorFactory(new _microsoft_fast_element.RepeatDirective((0, _microsoft_fast_element.normalizeBinding)((x) => x.rowsData), (0, _microsoft_fast_element.normalizeBinding)((x) => x.rowItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
+		}
+		this.toggleGeneratedHeader();
+		this.addEventListener("row-focused", this.handleRowFocus);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocus, this.handleFocus);
+		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusOut);
+		this.observer = new MutationObserver(this.onChildListChange);
+		this.observer.observe(this, { childList: true });
+		this.setupResizeObserver();
+		_microsoft_fast_element.Updates.enqueue(this.queueRowIndexUpdate);
+		this.#setTabIndex();
+		_microsoft_fast_element.Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("row-focused", this.handleRowFocus);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventFocus, this.handleFocus);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusOut);
+		this.observer.disconnect();
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = void 0;
+		}
+		this.generatedHeader = null;
+		_microsoft_fast_element.Observable.getNotifier(this).unsubscribe(this.#changeHandler, "columnDefinitions");
+	}
+	/**
+	* @internal
+	*/
+	handleRowFocus(e) {
+		this.isUpdatingFocus = true;
+		const focusRow = e.target;
+		this.focusRowIndex = this.rowElements.indexOf(focusRow);
+		this.focusColumnIndex = focusRow.focusColumnIndex;
+		this.setAttribute("tabIndex", "-1");
+		this.isUpdatingFocus = false;
+	}
+	/**
+	* @internal
+	*/
+	handleFocus(_) {
+		this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+	}
+	/**
+	* @internal
+	*/
+	handleFocusOut(e) {
+		if (e.relatedTarget === null || !this.contains(e.relatedTarget)) this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
+	}
+	/**
+	* @internal
+	*/
+	handleKeydown(e) {
+		if (e.defaultPrevented) return;
+		let newFocusRowIndex;
+		const maxIndex = this.rowElements.length - 1;
+		const currentGridBottom = this.offsetHeight + this.scrollTop;
+		const lastRow = this.rowElements[maxIndex];
+		switch (e.key) {
+			case _microsoft_fast_web_utilities.keyArrowUp:
+				e.preventDefault();
+				this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
+				break;
+			case _microsoft_fast_web_utilities.keyArrowDown:
+				e.preventDefault();
+				this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
+				break;
+			case _microsoft_fast_web_utilities.keyPageUp:
+				e.preventDefault();
+				if (this.rowElements.length === 0) {
+					this.focusOnCell(0, 0, false);
+					break;
+				}
+				if (this.focusRowIndex === 0) {
+					this.focusOnCell(0, this.focusColumnIndex, false);
+					return;
+				}
+				newFocusRowIndex = this.focusRowIndex - 1;
+				for (; newFocusRowIndex >= 0; newFocusRowIndex--) {
+					const thisRow = this.rowElements[newFocusRowIndex];
+					if (thisRow.offsetTop < this.scrollTop) {
+						this.scrollTop = thisRow.offsetTop + thisRow.clientHeight - this.clientHeight;
+						break;
+					}
+				}
+				this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+				break;
+			case _microsoft_fast_web_utilities.keyPageDown:
+				e.preventDefault();
+				if (this.rowElements.length === 0) {
+					this.focusOnCell(0, 0, false);
+					break;
+				}
+				if (this.focusRowIndex >= maxIndex || lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
+					this.focusOnCell(maxIndex, this.focusColumnIndex, false);
+					return;
+				}
+				newFocusRowIndex = this.focusRowIndex + 1;
+				for (; newFocusRowIndex <= maxIndex; newFocusRowIndex++) {
+					const thisRow = this.rowElements[newFocusRowIndex];
+					if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
+						let stickyHeaderOffset = 0;
+						if (this.generateHeader === require_data_grid_options.GenerateHeaderOptions.sticky && this.generatedHeader !== null) stickyHeaderOffset = this.generatedHeader.clientHeight;
+						this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
+						break;
+					}
+				}
+				this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+				break;
+			case _microsoft_fast_web_utilities.keyHome:
+				/* v8 ignore else -- @preserve */
+				if (e.ctrlKey) {
+					e.preventDefault();
+					this.focusOnCell(0, 0, true);
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyEnd:
+				/* v8 ignore else -- @preserve */
+				if (e.ctrlKey && this.columnDefinitions !== null) {
+					e.preventDefault();
+					this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
+				}
+				break;
+		}
+	}
+	queueFocusUpdate() {
+		if (this.isUpdatingFocus && this.contains(document.activeElement)) return;
+		if (this.pendingFocusUpdate === false) {
+			this.pendingFocusUpdate = true;
+			_microsoft_fast_element.Updates.enqueue(() => this.updateFocus());
+		}
+	}
+	updateFocus() {
+		this.pendingFocusUpdate = false;
+		this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+	}
+	toggleGeneratedHeader() {
+		if (this.generatedHeader !== null) {
+			this.removeChild(this.generatedHeader);
+			this.generatedHeader = null;
+		}
+		if (this.generateHeader !== require_data_grid_options.GenerateHeaderOptions.none && this.columnDefinitions !== null) {
+			const generatedHeaderElement = document.createElement(this.rowElementTag);
+			this.generatedHeader = generatedHeaderElement;
+			this.generatedHeader.columnDefinitions = this.columnDefinitions;
+			this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
+			this.generatedHeader.rowType = this.generateHeader === require_data_grid_options.GenerateHeaderOptions.sticky ? require_data_grid_options.DataGridRowTypes.stickyHeader : require_data_grid_options.DataGridRowTypes.header;
+			/* v8 ignore else -- @preserve */
+			if (this.firstChild !== null) this.insertBefore(generatedHeaderElement, this.firstChild);
+			return;
+		}
+	}
+	/**
+	*
+	*
+	* @internal
+	*/
+	slottedRowElementsChanged(_oldValue, _newValue) {
+		this._resetSelection();
+	}
+	get #selectedRows() {
+		return this.rowElements.filter((row) => row.selected);
+	}
+	get #selectedCells() {
+		return this.rowElements.reduce((acc, row) => {
+			const selectedCells = Array.from(row.children).filter((cell) => cell.selected);
+			return acc.concat(selectedCells);
+		}, []);
+	}
+	/**
+	* @internal
+	*/
+	selectionModeChanged(oldValue) {
+		if (oldValue === void 0) {
+			_microsoft_fast_element.Updates.enqueue(this._resetSelection);
+			return;
+		}
+		this._resetSelection(true);
+	}
+	#handleKeypress;
+	#handleClick;
+	#handleCellSelection;
+	#handleRowSelection;
+	constructor() {
+		super();
+		this.noTabbing = false;
+		this.generateHeader = require_data_grid_options.GenerateHeaderOptions.default;
+		this.rowsData = [];
+		this.columnDefinitions = null;
+		this.focusRowIndex = 0;
+		this.focusColumnIndex = 0;
+		this.fixedColumnsPositions = [];
+		this.behaviorOrchestrator = null;
+		this.generatedHeader = null;
+		this.isUpdatingFocus = false;
+		this.pendingFocusUpdate = false;
+		this.rowindexUpdateQueued = false;
+		this.columnDefinitionsStale = true;
+		this.generatedGridTemplateColumns = "";
+		this.focusOnCell = (rowIndex, columnIndex, scrollIntoView) => {
+			if (this.rowElements.length === 0) {
+				this.focusRowIndex = 0;
+				this.focusColumnIndex = 0;
+				return;
+			}
+			const focusRowIndex = Math.max(0, Math.min(this.rowElements.length - 1, rowIndex));
+			const cells = this.rowElements[focusRowIndex].querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [role=\"rowheader\"], [data-vvd-component=\"data-grid-cell\"]");
+			const focusTarget = cells[Math.max(0, Math.min(cells.length - 1, columnIndex))];
+			if (scrollIntoView && this.scrollHeight !== this.clientHeight && (focusRowIndex < this.focusRowIndex && this.scrollTop > 0 || focusRowIndex > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight)) focusTarget.scrollIntoView({
+				block: "center",
+				inline: "center"
+			});
+			focusTarget.focus();
+		};
+		this.onChildListChange = (mutations, _) => {
+			/* v8 ignore else -- @preserve */
+			if (mutations && mutations.length) {
+				mutations.forEach((mutation) => {
+					mutation.addedNodes.forEach((newNode) => {
+						if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) newNode.columnDefinitions = this.columnDefinitions;
+					});
+				});
+				this.queueRowIndexUpdate();
+			}
+		};
+		this.queueRowIndexUpdate = () => {
+			if (!this.rowindexUpdateQueued) {
+				this.rowindexUpdateQueued = true;
+				_microsoft_fast_element.Updates.enqueue(this.updateRowIndexes);
+			}
+		};
+		this.updateRowIndexes = () => {
+			let newGridTemplateColumns = this.gridTemplateColumns;
+			if (newGridTemplateColumns === void 0) {
+				if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
+					const firstRow = this.rowElements[0];
+					this.generatedGridTemplateColumns = new Array(firstRow.cellElements.length).fill("1fr").join(" ");
+				}
+				newGridTemplateColumns = this.generatedGridTemplateColumns;
+			}
+			this.rowElements.forEach((element, index) => {
+				const thisRow = element;
+				thisRow.rowIndex = index;
+				thisRow.gridTemplateColumns = newGridTemplateColumns;
+				if (this.columnDefinitionsStale) thisRow.columnDefinitions = this.columnDefinitions;
+			});
+			this.rowindexUpdateQueued = false;
+			this.columnDefinitionsStale = false;
+		};
+		this.#handleKeypress = (e) => {
+			if (e.key === "Enter" || e.key === " ") this.#handleClick(e);
+		};
+		this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
+			if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default") return;
+			if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+				this.#handleCellSelection({
+					target,
+					ctrlKey,
+					shiftKey,
+					metaKey
+				});
+				return;
+			}
+			if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) this.#handleRowSelection({
+				target,
+				ctrlKey,
+				shiftKey,
+				metaKey
+			});
+		};
+		this.#handleCellSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+			const cell = target;
+			if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) cell.selected = !this.#selectedCells.includes(cell);
+			else {
+				const cacheTargetSelection = cell.selected;
+				this._resetSelection(true);
+				cell.selected = !cacheTargetSelection;
+			}
+		};
+		this.#handleRowSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+			const row = target.parentNode;
+			if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) row.selected = !this.#selectedRows.includes(row);
+			else {
+				const cacheTargetSelection = row.selected;
+				this._resetSelection(true);
+				row.selected = !cacheTargetSelection;
+			}
+		};
+		this.#changeHandler = { handleChange(dataGrid, propertyName) {
+			/* v8 ignore else -- @preserve */
+			if (propertyName === "columnDefinitions") {
+				/* v8 ignore else -- @preserve */
+				if (dataGrid.$fastController.isConnected) dataGrid.toggleGeneratedHeader();
+			}
+		} };
+		this._resetSelection = (clear = false) => {
+			const cells = Array.from(this.querySelectorAll("[role=\"gridcell\"], [cell-type=\"default\"]"));
+			const rows = Array.from(this.querySelectorAll("[role=\"row\"], [row-type=\"default\"]"));
+			if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+				for (const cell of cells) {
+					cell._selectable = true;
+					cell.selected = clear ? false : cell.selected || false;
+				}
+				for (const row of rows) {
+					row._selectable = false;
+					row.selected = false;
+				}
+			}
+			if (this.selectionMode === DataGridSelectionMode.none) for (const element of [...cells, ...rows]) {
+				element._selectable = false;
+				element.selected = false;
+			}
+			if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+				for (const cell of cells) {
+					cell._selectable = false;
+					cell.selected = false;
+				}
+				for (const row of rows) {
+					row._selectable = true;
+					row.selected = clear ? false : row.selected || false;
+				}
+			}
+		};
+		this.addEventListener("click", this.#handleClick);
+		this.addEventListener("keydown", this.#handleKeypress);
+	}
+	#changeHandler;
+	static generateColumns(rowData) {
+		return Object.keys(rowData).map((property, index) => {
+			return {
+				columnDataKey: property,
+				gridColumn: `${index}`
+			};
+		});
+	}
+	/**
+	* @internal
+	*/
+	applyFixedColumns() {
+		if (!this.fixedColumns || this.fixedColumns <= 0) {
+			this.clearFixedColumns();
+			return;
+		}
+		this.calculateFixedColumnPositions();
+		this.applyFixedColumnStyling();
+	}
+	/**
+	* Applies fixed columns styling using cached positions
+	* @internal
+	*/
+	applyFixedColumnStyling() {
+		this.rowElements.forEach((row) => {
+			const cells = row.querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [cell-type=\"default\"], [cell-type=\"columnheader\"]");
+			this.fixedColumnsPositions.forEach((position, index) => {
+				/* v8 ignore else -- @preserve */
+				if (index < cells.length) {
+					const gridCell = cells[index];
+					/* v8 ignore else -- @preserve */
+					if (typeof gridCell.setFixedPosition === "function") gridCell.setFixedPosition(`${position}px`);
+				}
+			});
+		});
+	}
+	/**
+	* Calculates and caches fixed columns positions based on current layout
+	* @internal
+	*/
+	calculateFixedColumnPositions() {
+		this.fixedColumnsPositions = [];
+		if (this.rowElements.length === 0) return;
+		const cells = this.rowElements[0].querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [cell-type=\"default\"], [cell-type=\"columnheader\"]");
+		let accumulator = 0;
+		for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
+			this.fixedColumnsPositions.push(accumulator);
+			accumulator += cells[i].offsetWidth;
+		}
+	}
+	/**
+	* Clears all fixed columns state and styling
+	* @internal
+	*/
+	clearFixedColumns() {
+		if (this.rowElements.length === 0) {
+			this.fixedColumnsPositions = [];
+			return;
+		}
+		this.rowElements.forEach((row) => {
+			const cells = row.querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [cell-type=\"default\"], [cell-type=\"columnheader\"]");
+			this.fixedColumnsPositions.forEach((_, index) => {
+				/* v8 ignore else -- @preserve */
+				if (index < cells.length) {
+					const gridCell = cells[index];
+					/* v8 ignore else -- @preserve */
+					if (typeof gridCell.setFixedPosition === "function") gridCell.setFixedPosition(void 0);
+				}
+			});
+		});
+		this.fixedColumnsPositions = [];
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "no-tabbing",
+	mode: "boolean"
+})], DataGrid.prototype, "noTabbing", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "generate-header" })], DataGrid.prototype, "generateHeader", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-template-columns" })], DataGrid.prototype, "gridTemplateColumns", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "rowsData", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "columnDefinitions", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "rowItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "cellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "headerCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "focusRowIndex", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "focusColumnIndex", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "fixed-columns",
+	converter: _microsoft_fast_element.nullableNumberConverter
+})], DataGrid.prototype, "fixedColumns", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "defaultRowItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "rowElementTag", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "rowElements", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "slottedRowElements", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "selection-mode" })], DataGrid.prototype, "selectionMode", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid-row.ts
+/**
+* @public
+* @component data-grid-row
+* @slot - Default slot.
+* @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
+* @event {CustomEvent<HTMLElement>} row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+*/
+var DataGridRow = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.rowType = require_data_grid_options.DataGridRowTypes.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 = false;
+		this.selected = false;
+	}
+	/**
+	* @internal
+	*/
+	gridTemplateColumnsChanged() {
+		if (this.$fastController.isConnected) this.updateRowStyle();
+	}
+	/**
+	* @internal
+	*/
+	rowTypeChanged() {
+		if (this.$fastController.isConnected) this.updateItemTemplate();
+	}
+	/**
+	* @internal
+	*/
+	cellItemTemplateChanged() {
+		this.updateItemTemplate();
+	}
+	/**
+	* @internal
+	*/
+	headerCellItemTemplateChanged() {
+		this.updateItemTemplate();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		/* v8 ignore else -- @preserve */
+		if (this.behaviorOrchestrator === null) {
+			this.updateItemTemplate();
+			this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
+			this.$fastController.addBehavior(this.behaviorOrchestrator);
+			this.behaviorOrchestrator.addBehaviorFactory(new _microsoft_fast_element.RepeatDirective((0, _microsoft_fast_element.normalizeBinding)((x) => x.columnDefinitions), (0, _microsoft_fast_element.normalizeBinding)((x) => x.activeCellItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
+		}
+		this.addEventListener("cell-focused", this.handleCellFocus);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.updateRowStyle();
+	}
+	/**
+	* @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
+	*/
+	handleFocusout(_) {
+		/* v8 ignore else -- @preserve */
+		if (!this.contains(document.activeElement)) this.focusColumnIndex = 0;
+	}
+	/**
+	* @internal
+	*/
+	handleCellFocus(e) {
+		this.focusColumnIndex = this.cellElements.indexOf(e.target);
+		this.$emit("row-focused", this);
+	}
+	/**
+	* @internal
+	*/
+	handleKeydown(e) {
+		if (e.defaultPrevented) return;
+		let newFocusColumnIndex = 0;
+		switch (e.key) {
+			case require_key_codes.keyArrowLeft:
+				newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+				this.cellElements[newFocusColumnIndex].focus();
+				e.preventDefault();
+				break;
+			case require_key_codes.keyArrowRight:
+				newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+				this.cellElements[newFocusColumnIndex].focus();
+				e.preventDefault();
+				break;
+			case _microsoft_fast_web_utilities.keyHome:
+				if (!e.ctrlKey) {
+					this.cellElements[0].focus();
+					e.preventDefault();
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyEnd:
+				if (!e.ctrlKey) {
+					this.cellElements[this.cellElements.length - 1].focus();
+					e.preventDefault();
+				}
+				break;
+		}
+	}
+	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
+	*/
+	ariaSelectedChanged(oldValue, newValue) {
+		super.ariaSelectedChanged(oldValue, newValue);
+		this._selectable = newValue !== null;
+		this.selected = newValue === "true";
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-template-columns" })], DataGridRow.prototype, "gridTemplateColumns", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "row-type" })], DataGridRow.prototype, "rowType", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "rowData", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "columnDefinitions", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "cellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "headerCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "rowIndex", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "activeCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "defaultCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "defaultHeaderCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "cellElements", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "_selectable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], DataGridRow.prototype, "selected", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid.template.ts
+function createRowItemTemplate(context) {
+	const rowTag = context.tagFor(DataGridRow);
+	return _microsoft_fast_element.html`
+    <${rowTag}
+        :rowData="${(x) => x}"
+        :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
+    ></${rowTag}>
+`;
+}
+function getMultiSelectAriaState(x) {
+	return x.selectionMode === void 0 || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes("multi") ? "true" : "false";
+}
+function setHeaderRow(x) {
+	if (x.columnDefinitions === null) {
+		const headerRow = x.querySelector("[cell-type=\"columnheader\"]")?.parentElement;
+		if (x.generateHeader === require_data_grid_options.GenerateHeaderOptions.default && (headerRow?.getAttribute("row-type") === require_data_grid_options.DataGridRowTypes.header || headerRow?.getAttribute("row-type") === require_data_grid_options.DataGridRowTypes.stickyHeader)) return;
+		if (headerRow) {
+			const rowType = x.generateHeader === require_data_grid_options.GenerateHeaderOptions.sticky ? require_data_grid_options.DataGridRowTypes.stickyHeader : require_data_grid_options.DataGridRowTypes.header;
+			headerRow.setAttribute("row-type", rowType);
+		}
+	}
+}
+function handleColumnSort(_, { event }) {
+	event.stopPropagation();
+}
+var DataGridTemplate = (context) => {
+	const rowItemTemplate = createRowItemTemplate(context);
+	const rowTag = context.tagFor(DataGridRow, true);
+	return _microsoft_fast_element.html`
+		<template
+			aria-multiselectable="${getMultiSelectAriaState}"
+			role="grid"
+			tabindex="0"
+			@sort="${handleColumnSort}"
+			:rowElementTag="${() => rowTag}"
+			:defaultRowItemTemplate="${rowItemTemplate}"
+			${(0, _microsoft_fast_element.children)({
+		property: "rowElements",
+		filter: (0, _microsoft_fast_element.elements)("[role=row],[data-vvd-component=data-grid-row]")
+	})}
+		>
+			<div class="base">
+				${setHeaderRow}
+				<slot ${(0, _microsoft_fast_element.slotted)("slottedRowElements")}></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/data-grid/data-grid-cell.ts
+var defaultCellContentsTemplate = _microsoft_fast_element.html`
+	<template>
+		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
+	</template>
+`;
+var defaultHeaderCellContentsTemplate = _microsoft_fast_element.html`
+	<template>
+		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
+	</template>
+`;
+/**
+* @public
+* @component data-grid-cell
+* @slot - Default slot.
+* @slot action-items - Add action items to the cell using this slot.
+* @event {CustomEvent<{columnDataKey: string, ariaSort: string | null, sortDirection: string | null}>} sort - Event that fires when a sortable column header is clicked
+* @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+*/
+var DataGridCell = class extends require_localized.Localized(require_host_semantics.HostSemantics(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.cellType = require_data_grid_options.DataGridCellTypes.default;
+		this.rowData = null;
+		this.columnDefinition = null;
+		this.isActiveCell = false;
+		this.customCellView = null;
+		this.updateCellStyle = () => {
+			if (this.gridColumn && !this.gridColumn.includes("undefined")) this.style.gridColumn = this.gridColumn;
+			else this.style.removeProperty("grid-column");
+		};
+		this._selectable = false;
+		this.selected = false;
+		this.ariaSelected = null;
+		this.ariaSort = null;
+	}
+	/**
+	* @internal
+	*/
+	cellTypeChanged() {
+		if (this.$fastController.isConnected) this.updateCellView();
+	}
+	/**
+	* @internal
+	*/
+	gridColumnChanged() {
+		if (this.$fastController.isConnected) this.updateCellStyle();
+	}
+	/**
+	* @internal
+	*/
+	columnDefinitionChanged(_oldValue, _newValue) {
+		if (this.$fastController.isConnected) this.updateCellView();
+	}
+	/**
+	* Updates the fixed column style
+	* @internal
+	*/
+	updateFixedStyle() {
+		if (this.fixedPosition !== void 0) {
+			this.setAttribute("data-fixed", "");
+			this.style.left = this.fixedPosition;
+		} else {
+			this.removeAttribute("data-fixed");
+			this.style.removeProperty("left");
+		}
+	}
+	/**
+	* Sets the fixed state and position for this cell
+	* @internal
+	*/
+	setFixedPosition(position) {
+		this.fixedPosition = position;
+		this.updateFixedStyle();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`;
+		this.updateCellView();
+		this.updateCellStyle();
+		this.updateFixedStyle();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.disconnectCellView();
+	}
+	/**
+	* @internal
+	*/
+	handleFocusin(_) {
+		this.shadowRoot.querySelector(".base").classList.add("active");
+		if (this.isActiveCell) return;
+		this.isActiveCell = true;
+		switch (this.cellType) {
+			case require_data_grid_options.DataGridCellTypes.columnHeader:
+				if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
+					const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+					/* v8 ignore else -- @preserve */
+					if (focusTarget !== null) focusTarget.focus();
+				}
+				break;
+			default:
+				if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
+					const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+					/* v8 ignore else -- @preserve */
+					if (focusTarget !== null) focusTarget.focus();
+				}
+				break;
+		}
+		this.$emit("cell-focused", this);
+	}
+	/**
+	* @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
+	*/
+	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) {
+			case _microsoft_fast_web_utilities.keyEnter:
+			case _microsoft_fast_web_utilities.keyFunction2:
+				if (this.contains(document.activeElement) && document.activeElement !== this) return;
+				switch (this.cellType) {
+					case require_data_grid_options.DataGridCellTypes.columnHeader:
+						if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
+							const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+							/* v8 ignore else -- @preserve */
+							if (focusTarget !== null) focusTarget.focus();
+							e.preventDefault();
+						}
+						break;
+					default:
+						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+							const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+							/* v8 ignore else -- @preserve */
+							if (focusTarget !== null) focusTarget.focus();
+							e.preventDefault();
+						}
+						break;
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyEscape:
+				/* v8 ignore else -- @preserve */
+				if (this.contains(document.activeElement) && document.activeElement !== this) {
+					this.focus();
+					e.preventDefault();
+				}
+				break;
+		}
+	}
+	updateCellView() {
+		this.disconnectCellView();
+		if (this.columnDefinition === null) return;
+		switch (this.cellType) {
+			case require_data_grid_options.DataGridCellTypes.columnHeader:
+				if (this.columnDefinition.headerCellTemplate !== void 0) this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
+				else this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
+				break;
+			case require_data_grid_options.DataGridCellTypes.rowHeader:
+			case require_data_grid_options.DataGridCellTypes.default:
+				if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+				else this.customCellView = defaultCellContentsTemplate.render(this, this);
+				break;
+		}
+		if (!this.columnDefinition?.sortable) this.sortDirection = void 0;
+		else if (this.columnDefinition.sortDirection) this.sortDirection = this.columnDefinition.sortDirection;
+		else this.sortDirection = require_data_grid_options.DataGridCellSortStates.none;
+	}
+	disconnectCellView() {
+		if (this.customCellView !== null) {
+			this.customCellView.dispose();
+			this.customCellView = null;
+		}
+	}
+	/**
+	* @internal
+	*/
+	ariaSelectedChanged(prevValue, newValue) {
+		super.ariaSelectedChanged(prevValue, newValue);
+		this._selectable = newValue !== null;
+		this.selected = newValue === "true";
+	}
+	/**
+	* @internal
+	*/
+	ariaSortChanged(oldValue, newValue) {
+		super.ariaSortChanged(oldValue, newValue);
+		if (newValue === null) {
+			this.sortDirection = void 0;
+			return;
+		}
+		this.sortDirection = newValue;
+	}
+	#getColumnDataKey() {
+		return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
+	}
+	/**
+	* @internal
+	*/
+	_handleInteraction() {
+		const isHeaderCell = this.cellType === "columnheader";
+		if (isHeaderCell && this.sortDirection !== void 0) this.$emit("sort", {
+			columnDataKey: this.#getColumnDataKey(),
+			sortDirection: this.sortDirection
+		});
+		if (!(isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue)) this.$emit("cell-click", {
+			cell: this,
+			row: this.parentElement,
+			isHeaderCell,
+			columnDataKey: this.#getColumnDataKey()
+		});
+		return true;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "cell-type" })], DataGridCell.prototype, "cellType", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-column" })], DataGridCell.prototype, "gridColumn", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "rowData", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "columnDefinition", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "_selectable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], DataGridCell.prototype, "selected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "sort-direction" })], DataGridCell.prototype, "sortDirection", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "_actionItemsSlottedContent", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid-row.template.ts
+function calculateAriaSelectedValue$1(x) {
+	if (x._selectable && x.selected) return "true";
+	if (x._selectable && !x.selected) return "false";
+	return null;
+}
+function createCellItemTemplate(context) {
+	const cellTag = context.tagFor(DataGridCell);
+	return _microsoft_fast_element.html`
+    <${cellTag}
+        cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
+        grid-column="${(_, c) => c.index + 1}"
+        :rowData="${(_, c) => c.parent.rowData}"
+        :columnDefinition="${(x) => x}"
+				selected="${(_, c) => c.parent.ariaSelected === "true" ? true : null}"
+    ></${cellTag}>
+`;
+}
+function createHeaderCellItemTemplate(context) {
+	const cellTag = context.tagFor(DataGridCell);
+	return _microsoft_fast_element.html`
+    <${cellTag}
+        cell-type="columnheader"
+        grid-column="${(_, c) => c.index + 1}"
+        :columnDefinition="${(x) => x}"
+    ></${cellTag}>
+`;
+}
+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({
+		role: "row",
+		ariaSelected: calculateAriaSelectedValue$1
+	})}
+			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
+			:defaultCellItemTemplate="${cellItemTemplate}"
+			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+			${(0, _microsoft_fast_element.children)({
+		property: "cellElements",
+		filter: (0, _microsoft_fast_element.elements)("[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],[data-vvd-component=\"data-grid-cell\"]")
+	})}
+		>
+			<div
+				class="${getBaseClasses}"
+				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
+			>
+				<slot ${(0, _microsoft_fast_element.slotted)("slottedCellElements")}></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/data-grid/data-grid-cell.template.ts
+function shouldShowSortIcons(x) {
+	return x.cellType === "columnheader" && x.sortDirection !== void 0 && x.sortDirection !== require_data_grid_options.DataGridCellSortStates.other;
+}
+function getSortIcon(x) {
+	if (x.sortDirection === require_data_grid_options.DataGridCellSortStates.ascending) return "sort-asc-solid";
+	if (x.sortDirection === require_data_grid_options.DataGridCellSortStates.descending) return "sort-desc-solid";
+	return "sort-solid";
+}
+function calculateAriaSelectedValue(x) {
+	if (x._selectable && x.selected) return "true";
+	if (x._selectable && !x.selected) return "false";
+	return null;
+}
+function renderSortIcons(c) {
+	const iconTag = c.tagFor(require_definition$1.Icon);
+	return _microsoft_fast_element.html`
+		${(0, _microsoft_fast_element.when)(shouldShowSortIcons, _microsoft_fast_element.html`
+				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
+			`)}
+	`;
+}
+function shouldAnnounceSortState(x) {
+	return x.cellType === require_data_grid_options.DataGridCellTypes.columnHeader && x.sortDirection !== void 0;
+}
+function getSortStateKey(x) {
+	return x.sortDirection ?? require_data_grid_options.DataGridCellSortStates.none;
+}
+function getLocalizedSortStatus(x) {
+	const direction = getSortStateKey(x);
+	return x.locale.dataGrid.cell.sortStatus?.[direction];
+}
+function getLocalizedSortInstruction(x) {
+	const direction = getSortStateKey(x);
+	return x.locale.dataGrid.cell.sortInstruction?.[direction];
+}
+function getSortAnnouncement(x) {
+	return [getLocalizedSortStatus(x), getLocalizedSortInstruction(x)].filter((part) => !!part).join(" ").trim();
+}
+function handleKeyDown(x, e) {
+	if (e.key === _microsoft_fast_web_utilities.keyEnter || e.key === _microsoft_fast_web_utilities.keySpace) {
+		if (e.target.closest("[slot=\"action-items\"]")) return true;
+		x._handleInteraction();
+	}
+	return true;
+}
+function handleClick(x, e) {
+	if (e.target.closest("[slot=\"action-items\"]")) return true;
+	x._handleInteraction();
+	return true;
+}
+var DataGridCellTemplate = (context) => {
+	const visuallyHiddenTagName = context.tagFor(require_definition.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"
+			${require_host_semantics.applyHostSemantics({
+		role: (x) => require_data_grid_options.DataGridCellRole[x.cellType] ?? require_data_grid_options.DataGridCellRole.default,
+		ariaSelected: calculateAriaSelectedValue,
+		ariaSort: (x) => x.sortDirection ?? null
+	})}
+			@click="${(x, c) => handleClick(x, c.event)}"
+			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
+		>
+			<div class="${getBaseClasses}">
+				<div
+					class="content"
+					role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
+				>
+					${(x) => x.selected ? _microsoft_fast_element.html`<${visuallyHiddenTagName}
+								data-announcement="selection"
+							>
+								${(x) => x.locale.dataGrid.cell.selected}
+							</${visuallyHiddenTagName}>` : null}
+					<slot></slot>
+					${(0, _microsoft_fast_element.when)(shouldShowSortIcons, _microsoft_fast_element.html`<${visuallyHiddenTagName}
+							data-announcement="button-role"
+						>
+							${(x) => x.locale.dataGrid.cell.button}
+						</${visuallyHiddenTagName}>
+						`)}
+					${(0, _microsoft_fast_element.when)(shouldAnnounceSortState, _microsoft_fast_element.html`<${visuallyHiddenTagName}
+							aria-live="polite"
+							data-announcement="sort-state"
+						>
+							${getSortAnnouncement}
+						</${visuallyHiddenTagName}>`)}
+					${(_) => renderSortIcons(context)}
+				</div>
+				<slot
+					name="action-items"
+					${(0, _microsoft_fast_element.slotted)("_actionItemsSlottedContent")}
+				></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/data-grid/definition.ts
+/**
+* @internal
+*/
+var dataGridCellDefinition = require_vivid_element.defineVividComponent("data-grid-cell", DataGridCell, DataGridCellTemplate, [require_definition$1.iconDefinition, require_definition.visuallyHiddenDefinition], { styles: data_grid_cell_default });
+/**
+* @internal
+*/
+var dataGridRowDefinition = require_vivid_element.defineVividComponent("data-grid-row", DataGridRow, DataGridRowTemplate, [dataGridCellDefinition], { styles: data_grid_row_default });
 /**
 * @internal
 */
-var dividerDefinition = require_vivid_element.defineVividComponent("divider", require_divider.Divider, DividerTemplate, [], { styles: divider_default });
+var dataGridDefinition = require_vivid_element.defineVividComponent("data-grid", DataGrid, DataGridTemplate, [dataGridRowDefinition], { styles: data_grid_default });
 /**
-* Registers the divider elements with the design system.
+* Registers the data-grid element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDivider = require_vivid_element.createRegisterFunction(dividerDefinition);
+var registerDataGrid = require_vivid_element.createRegisterFunction(dataGridDefinition);
 //#endregion
-Object.defineProperty(exports, "dividerDefinition", {
+Object.defineProperty(exports, "DataGrid", {
+	enumerable: true,
+	get: function() {
+		return DataGrid;
+	}
+});
+Object.defineProperty(exports, "DataGridCell", {
+	enumerable: true,
+	get: function() {
+		return DataGridCell;
+	}
+});
+Object.defineProperty(exports, "DataGridRow", {
+	enumerable: true,
+	get: function() {
+		return DataGridRow;
+	}
+});
+Object.defineProperty(exports, "dataGridCellDefinition", {
+	enumerable: true,
+	get: function() {
+		return dataGridCellDefinition;
+	}
+});
+Object.defineProperty(exports, "dataGridDefinition", {
+	enumerable: true,
+	get: function() {
+		return dataGridDefinition;
+	}
+});
+Object.defineProperty(exports, "dataGridRowDefinition", {
 	enumerable: true,
 	get: function() {
-		return dividerDefinition;
+		return dataGridRowDefinition;
 	}
 });
-Object.defineProperty(exports, "registerDivider", {
+Object.defineProperty(exports, "registerDataGrid", {
 	enumerable: true,
 	get: function() {
-		return registerDivider;
+		return registerDataGrid;
 	}
 });