@vonage/vivid 5.17.0 → 5.18.0

package/unbundled/definition32.js

@@ -1,1866 +1,262 @@
 import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as Localized } from "./localized.js";
-import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { a as GenerateHeaderOptions, i as DataGridRowTypes, n as DataGridCellSortStates, r as DataGridCellTypes, t as DataGridCellRole } from "./data-grid.options.js";
-import { Observable, RepeatDirective, Updates, attr, children, elements, html, normalizeBinding, nullableNumberConverter, observable, slotted, when } from "@microsoft/fast-element";
-import { classNames, eventFocus, eventFocusIn, eventFocusOut, eventKeyDown, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyFunction2, keyHome, keyPageDown, keyPageUp, keySpace } from "@microsoft/fast-web-utilities";
-//#region src/lib/data-grid/data-grid.scss?inline
-var data_grid_default = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}";
+import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { r as Badge, t as badgeDefinition } from "./definition16.js";
+import { r as Country, t as countryDefinition } from "./definition31.js";
+import { n as countries } from "./utils.js";
+import { html, observable, ref, when } from "@microsoft/fast-element";
+//#region src/lib/country-group/country-group.scss?inline
+var country_group_default = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}";
 //#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));
+//#region src/lib/country-group/country-group.ts
+var FULLY_VISIBLE_INTERSECTION_RATIO = .99;
 /**
-* The FAST global.
 * @public
+* @component country-group
+* @slot default - One or more `vwc-country` elements (Country only).
 */
-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);
+var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.lastVisibleIndex = 0;
+		this.computedAriaLabel = null;
+		this.popupOpen = false;
+	}
+	get overflowCount() {
+		return Math.max(0, this.items.length - this.lastVisibleIndex);
+	}
+	#observer = null;
+	#visibleMap = /* @__PURE__ */ new Map();
+	#candidateVisible = -1;
+	#candidateStreak = 0;
+	#countryNameForCode(code) {
+		if (!code) return "";
+		return countries.find((c) => c.code.toUpperCase() === code.toUpperCase())?.label ?? "";
+	}
+	#applyLayout(visibleCount, mode) {
+		for (let i = 0; i < this.items.length; i++) {
+			const el = this.items[i];
+			el.style.order = `${i < visibleCount ? i : i + 1}`;
+			if (i < visibleCount) {
+				el.setAttribute("data-visible", "true");
+				el.style.display = "";
+				el.style.position = "";
+				el.style.inset = "";
+				el.style.visibility = "";
+				el.style.pointerEvents = "";
+				continue;
 			}
-			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({
-	none: 0,
-	attribute: 1,
-	booleanAttribute: 2,
-	property: 3,
-	content: 4,
-	tokenList: 5,
-	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$1 = Object.freeze({
-	get policy() {
-		return defaultPolicy;
-	},
-	setPolicy(value) {
-		if (defaultPolicy !== fastPolicy) throw FAST.error(1201);
-		defaultPolicy = value;
-	},
-	setAttribute(element, attributeName, value) {
-		value === null || value === void 0 ? element.removeAttribute(attributeName) : element.setAttribute(attributeName, value);
-	},
-	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);
+			el.setAttribute("data-visible", "false");
+			el.style.display = "";
+			el.style.pointerEvents = "none";
+			if (mode === "final") {
+				el.style.position = "absolute";
+				el.style.inset = "0 auto auto 0";
+				el.style.visibility = "hidden";
 			} 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({
-	unknown: void 0,
-	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({
-		setArrayObserverFactory(factory) {
-			createArrayObserver = factory;
-		},
-		getNotifier,
-		track(source, propertyName) {
-			watcher && watcher.watch(source, propertyName);
-		},
-		trackVolatile() {
-			watcher && (watcher.needsRefresh = true);
-		},
-		notify(source, args) {
-			getNotifier(source).notify(args);
-		},
-		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);
-				}
-			});
-		},
-		getAccessors,
-		binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
-			return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
-		},
-		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$1 = Object.freeze({
-	default: {
-		index: 0,
-		length: 0,
-		get event() {
-			return ExecutionContext$1.getEvent();
-		},
-		eventDetail() {
-			return this.event.detail;
-		},
-		eventTarget() {
-			return this.event.target;
-		}
-	},
-	getEvent() {
-		return contextEvent.get();
-	},
-	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({
-	interpolation: (id) => `${interpolationStart}${id}${interpolationEnd}`,
-	attribute: (id) => `${nextId()}="${interpolationStart}${id}${interpolationEnd}"`,
-	comment: (id) => `<!--${interpolationStart}${id}${interpolationEnd}-->`
-});
-Object.freeze({ 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({ create(source) {
-	const behaviors = [];
-	const targets = {};
-	let unbindables = null;
-	let isConnected = false;
-	return {
-		source,
-		context: ExecutionContext$1.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$1.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));
+				el.style.position = "";
+				el.style.inset = "";
+				el.style.visibility = "hidden";
 			}
-		},
-		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 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 RepeatDirective(normalizeBinding((x) => x.rowsData), normalizeBinding((x) => x.rowItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
-		}
-		this.toggleGeneratedHeader();
-		this.addEventListener("row-focused", this.handleRowFocus);
-		this.addEventListener(eventFocus, this.handleFocus);
-		this.addEventListener(eventKeyDown, this.handleKeydown);
-		this.addEventListener(eventFocusOut, this.handleFocusOut);
-		this.observer = new MutationObserver(this.onChildListChange);
-		this.observer.observe(this, { childList: true });
-		this.setupResizeObserver();
-		Updates.enqueue(this.queueRowIndexUpdate);
-		this.#setTabIndex();
-		Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
+		this.#syncFromSlot();
+		this.#updateAriaLabel();
+		this.slotEl?.addEventListener("slotchange", this.#onSlotChange);
+		this.#ensureObserver();
+		this.#requestFit();
 	}
-	/**
-	* @internal
-	*/
 	disconnectedCallback() {
+		this.slotEl?.removeEventListener("slotchange", this.#onSlotChange);
+		this.#observer?.disconnect();
+		this.#observer = null;
+		this.#visibleMap.clear();
+		this.#candidateVisible = -1;
+		this.#candidateStreak = 0;
 		super.disconnectedCallback();
-		this.removeEventListener("row-focused", this.handleRowFocus);
-		this.removeEventListener(eventFocus, this.handleFocus);
-		this.removeEventListener(eventKeyDown, this.handleKeydown);
-		this.removeEventListener(eventFocusOut, this.handleFocusOut);
-		this.observer.disconnect();
-		if (this.resizeObserver) {
-			this.resizeObserver.disconnect();
-			this.resizeObserver = void 0;
-		}
-		this.generatedHeader = null;
-		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 keyArrowUp:
-				e.preventDefault();
-				this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
-				break;
-			case keyArrowDown:
-				e.preventDefault();
-				this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
-				break;
-			case 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 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 === GenerateHeaderOptions.sticky && this.generatedHeader !== null) stickyHeaderOffset = this.generatedHeader.clientHeight;
-						this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
-						break;
-					}
-				}
-				this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
-				break;
-			case keyHome:
-				/* v8 ignore else -- @preserve */
-				if (e.ctrlKey) {
-					e.preventDefault();
-					this.focusOnCell(0, 0, true);
-				}
-				break;
-			case 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;
-			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 !== 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 === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : 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) {
-			Updates.enqueue(this._resetSelection);
-			return;
-		}
-		this._resetSelection(true);
-	}
-	#handleKeypress = (e) => {
-		if (e.key === "Enter" || e.key === " ") this.#handleClick(e);
+	#onSlotChange = () => {
+		this.#syncFromSlot();
+		this.#updateAriaLabel();
+		this.#requestFit();
 	};
-	#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
+	#ensureObserver() {
+		if (this.#observer) return;
+		this.#observer = new IntersectionObserver(this.#handleIntersection, {
+			root: this,
+			threshold: [FULLY_VISIBLE_INTERSECTION_RATIO]
 		});
+	}
+	#requestFit() {
+		this.#prepareForFit();
+		this.#observeAll();
+	}
+	#observeAll() {
+		const observer = this.#observer;
+		observer.disconnect();
+		for (const el of this.items) observer.observe(el);
+		if (this.badgeEl && this.overflowCount > 0) observer.observe(this.badgeEl);
+	}
+	#syncFromSlot() {
+		this.items = this.slotEl.assignedElements({ flatten: true }).filter((n) => n instanceof Country);
+		this.#visibleMap.clear();
+		for (const el of this.items) this.#visibleMap.set(el, true);
+		this.lastVisibleIndex = this.items.length;
+		this.#applyLayout(this.lastVisibleIndex, "final");
+	}
+	#updateAriaLabel() {
+		const prefix = this.locale.countryGroup.ariaLabelPrefix;
+		const names = [];
+		for (const el of this.items) {
+			const label = (el.getAttribute("label") ?? "").trim();
+			const code = (el.getAttribute("code") ?? "").trim();
+			const fullName = this.#countryNameForCode(code);
+			const value = label || fullName || code;
+			if (value) names.push(value);
+		}
+		const joined = names.join(", ");
+		this.computedAriaLabel = joined ? `${prefix} ${joined}` : prefix;
+	}
+	#handleIntersection = (entries) => {
+		for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
+		this.#requestFit();
+		let firstHidden = -1;
+		for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
+			firstHidden = i;
+			break;
+		}
+		let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
+		if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
+		if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
+		this.#proposeVisibleCount(nextVisible);
 	};
-	#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;
-		}
-	};
-	#handleRowSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
-		const row = target.parentNode;
-		if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) row.selected = !this.#selectedRows.includes(row);
+	#proposeVisibleCount(nextVisible) {
+		if (this.#candidateVisible === nextVisible) this.#candidateStreak++;
 		else {
-			const cacheTargetSelection = row.selected;
-			this._resetSelection(true);
-			row.selected = !cacheTargetSelection;
-		}
-	};
-	constructor() {
-		super();
-		this.noTabbing = false;
-		this.generateHeader = 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;
-				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._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 = { handleChange(dataGrid, propertyName) {
-		/* v8 ignore else -- @preserve */
-		if (propertyName === "columnDefinitions") {
-			/* v8 ignore else -- @preserve */
-			if (dataGrid.$fastController.isConnected) dataGrid.toggleGeneratedHeader();
-		}
-	} };
-	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.#candidateVisible = nextVisible;
+			this.#candidateStreak = 1;
 		}
-		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 = [];
-	}
-};
-__decorate([attr({
-	attribute: "no-tabbing",
-	mode: "boolean"
-})], DataGrid.prototype, "noTabbing", void 0);
-__decorate([attr({ attribute: "generate-header" })], DataGrid.prototype, "generateHeader", void 0);
-__decorate([attr({ attribute: "grid-template-columns" })], DataGrid.prototype, "gridTemplateColumns", void 0);
-__decorate([observable], DataGrid.prototype, "rowsData", void 0);
-__decorate([observable], DataGrid.prototype, "columnDefinitions", void 0);
-__decorate([observable], DataGrid.prototype, "rowItemTemplate", void 0);
-__decorate([observable], DataGrid.prototype, "cellItemTemplate", void 0);
-__decorate([observable], DataGrid.prototype, "headerCellItemTemplate", void 0);
-__decorate([observable], DataGrid.prototype, "focusRowIndex", void 0);
-__decorate([observable], DataGrid.prototype, "focusColumnIndex", void 0);
-__decorate([attr({
-	attribute: "fixed-columns",
-	converter: nullableNumberConverter
-})], DataGrid.prototype, "fixedColumns", void 0);
-__decorate([observable], DataGrid.prototype, "defaultRowItemTemplate", void 0);
-__decorate([observable], DataGrid.prototype, "rowElementTag", void 0);
-__decorate([observable], DataGrid.prototype, "rowElements", void 0);
-__decorate([observable], DataGrid.prototype, "slottedRowElements", void 0);
-__decorate([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 HostSemantics(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.rowType = 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();
+		if (this.#candidateStreak < 2) return;
+		if (this.lastVisibleIndex === nextVisible) return;
+		this.lastVisibleIndex = this.#candidateVisible;
+		this.#applyLayout(this.lastVisibleIndex, "final");
+		if (this.overflowCount === 0) this.popupOpen = false;
+		this.fillOverflowGrid();
 	}
-	/**
-	* @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 RepeatDirective(normalizeBinding((x) => x.columnDefinitions), normalizeBinding((x) => x.activeCellItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
-		}
-		this.addEventListener("cell-focused", this.handleCellFocus);
-		this.addEventListener(eventFocusOut, this.handleFocusout);
-		this.addEventListener(eventKeyDown, this.handleKeydown);
-		this.updateRowStyle();
+	#prepareForFit() {
+		this.#applyLayout(this.lastVisibleIndex, "fit");
 	}
 	/**
 	* @internal
 	*/
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("cell-focused", this.handleCellFocus);
-		this.removeEventListener(eventFocusOut, this.handleFocusout);
-		this.removeEventListener(eventKeyDown, this.handleKeydown);
+	handleMouseEnter() {
+		this.popupOpen = true;
 	}
 	/**
 	* @internal
 	*/
-	handleFocusout(_) {
-		/* v8 ignore else -- @preserve */
-		if (!this.contains(document.activeElement)) this.focusColumnIndex = 0;
+	handleMouseLeave() {
+		this.popupOpen = false;
 	}
 	/**
 	* @internal
 	*/
-	handleCellFocus(e) {
-		this.focusColumnIndex = this.cellElements.indexOf(e.target);
-		this.$emit("row-focused", this);
+	popupOpenChanged(oldValue) {
+		if (oldValue === void 0) return;
+		if (this.popupOpen) this.fillOverflowGrid();
 	}
 	/**
 	* @internal
 	*/
-	handleKeydown(e) {
-		if (e.defaultPrevented) return;
-		let newFocusColumnIndex = 0;
-		switch (e.key) {
-			case keyArrowLeft$1:
-				newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
-				this.cellElements[newFocusColumnIndex].focus();
-				e.preventDefault();
-				break;
-			case keyArrowRight$1:
-				newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
-				this.cellElements[newFocusColumnIndex].focus();
-				e.preventDefault();
-				break;
-			case keyHome:
-				if (!e.ctrlKey) {
-					this.cellElements[0].focus();
-					e.preventDefault();
-				}
-				break;
-			case keyEnd:
-				if (!e.ctrlKey) {
-					this.cellElements[this.cellElements.length - 1].focus();
-					e.preventDefault();
-				}
-				break;
+	fillOverflowGrid() {
+		if (!this.overflowGridEl) return;
+		if (this.overflowCount === 0) return;
+		this.overflowGridEl.replaceChildren();
+		const overflowed = this.items.slice(this.lastVisibleIndex);
+		for (const it of overflowed) {
+			const clone = it.cloneNode(true);
+			clone.setAttribute("aria-hidden", "true");
+			clone.removeAttribute("style");
+			this.overflowGridEl.appendChild(clone);
 		}
 	}
-	updateItemTemplate() {
-		this.activeCellItemTemplate = this.rowType === DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === DataGridRowTypes.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
-	}
-	/**
-	* @internal
-	*/
-	ariaSelectedChanged(oldValue, newValue) {
-		super.ariaSelectedChanged(oldValue, newValue);
-		this._selectable = newValue !== null;
-		this.selected = newValue === "true";
-	}
 };
-__decorate([attr({ attribute: "grid-template-columns" })], DataGridRow.prototype, "gridTemplateColumns", void 0);
-__decorate([attr({ attribute: "row-type" })], DataGridRow.prototype, "rowType", void 0);
-__decorate([observable], DataGridRow.prototype, "rowData", void 0);
-__decorate([observable], DataGridRow.prototype, "columnDefinitions", void 0);
-__decorate([observable], DataGridRow.prototype, "cellItemTemplate", void 0);
-__decorate([observable], DataGridRow.prototype, "headerCellItemTemplate", void 0);
-__decorate([observable], DataGridRow.prototype, "rowIndex", void 0);
-__decorate([observable], DataGridRow.prototype, "activeCellItemTemplate", void 0);
-__decorate([observable], DataGridRow.prototype, "defaultCellItemTemplate", void 0);
-__decorate([observable], DataGridRow.prototype, "defaultHeaderCellItemTemplate", void 0);
-__decorate([observable], DataGridRow.prototype, "cellElements", void 0);
-__decorate([observable], DataGridRow.prototype, "_selectable", void 0);
-__decorate([attr({ mode: "boolean" })], DataGridRow.prototype, "selected", void 0);
+__decorate([observable], CountryGroup.prototype, "items", void 0);
+__decorate([observable], CountryGroup.prototype, "lastVisibleIndex", void 0);
+__decorate([observable], CountryGroup.prototype, "computedAriaLabel", void 0);
+__decorate([observable], CountryGroup.prototype, "popupOpen", void 0);
 //#endregion
-//#region src/lib/data-grid/data-grid.template.ts
-function createRowItemTemplate(context) {
-	const rowTag = context.tagFor(DataGridRow);
+//#region src/lib/country-group/country-group.template.ts
+var CountryGroupTemplate = (context) => {
+	const badgeTag = context.tagFor(Badge);
+	const popupTag = context.tagFor(Popup);
 	return 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 === GenerateHeaderOptions.default && (headerRow?.getAttribute("row-type") === DataGridRowTypes.header || headerRow?.getAttribute("row-type") === DataGridRowTypes.stickyHeader)) return;
-		if (headerRow) {
-			const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : 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 html`
-		<template
-			aria-multiselectable="${getMultiSelectAriaState}"
-			role="grid"
-			tabindex="0"
-			@sort="${handleColumnSort}"
-			:rowElementTag="${() => rowTag}"
-			:defaultRowItemTemplate="${rowItemTemplate}"
-			${children({
-		property: "rowElements",
-		filter: elements("[role=row],[data-vvd-component=data-grid-row]")
+		<div
+			class="container"
+			${delegateAria({
+		role: "group",
+		ariaLabel: (x) => x.ariaLabel || x.computedAriaLabel
 	})}
 		>
-			<div class="base">
-				${setHeaderRow}
-				<slot ${slotted("slottedRowElements")}></slot>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/data-grid/data-grid-cell.ts
-var defaultCellContentsTemplate = html`
-	<template>
-		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
-	</template>
-`;
-var defaultHeaderCellContentsTemplate = 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 Localized(HostSemantics(VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.cellType = 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(eventFocusIn, this.handleFocusin);
-		this.addEventListener(eventFocusOut, this.handleFocusout);
-		this.addEventListener(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(eventFocusIn, this.handleFocusin);
-		this.removeEventListener(eventFocusOut, this.handleFocusout);
-		this.removeEventListener(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 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 === DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) return;
-		switch (e.key) {
-			case keyEnter:
-			case keyFunction2:
-				if (this.contains(document.activeElement) && document.activeElement !== this) return;
-				switch (this.cellType) {
-					case 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 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 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 DataGridCellTypes.rowHeader:
-			case 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 = 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;
-	}
-};
-__decorate([attr({ attribute: "cell-type" })], DataGridCell.prototype, "cellType", void 0);
-__decorate([attr({ attribute: "grid-column" })], DataGridCell.prototype, "gridColumn", void 0);
-__decorate([observable], DataGridCell.prototype, "rowData", void 0);
-__decorate([observable], DataGridCell.prototype, "columnDefinition", void 0);
-__decorate([observable], DataGridCell.prototype, "_selectable", void 0);
-__decorate([attr({ mode: "boolean" })], DataGridCell.prototype, "selected", void 0);
-__decorate([attr({ attribute: "sort-direction" })], DataGridCell.prototype, "sortDirection", void 0);
-__decorate([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 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 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) => classNames("base", ["selected", !!x.selected]);
-	return html`
-		<template
-			${applyHostSemantics({
-		role: "row",
-		ariaSelected: calculateAriaSelectedValue$1
-	})}
-			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
-			:defaultCellItemTemplate="${cellItemTemplate}"
-			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-			${children({
-		property: "cellElements",
-		filter: 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 ${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 !== DataGridCellSortStates.other;
-}
-function getSortIcon(x) {
-	if (x.sortDirection === DataGridCellSortStates.ascending) return "sort-asc-solid";
-	if (x.sortDirection === 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(Icon);
-	return html`
-		${when(shouldShowSortIcons, html`
-				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
-			`)}
-	`;
-}
-function shouldAnnounceSortState(x) {
-	return x.cellType === DataGridCellTypes.columnHeader && x.sortDirection !== void 0;
-}
-function getSortStateKey(x) {
-	return x.sortDirection ?? 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 === keyEnter || e.key === 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(VisuallyHidden);
-	const getBaseClasses = ({ selected, _actionItemsSlottedContent }) => classNames("base", ["selected", !!selected], ["has-action-items", Boolean(_actionItemsSlottedContent?.length)]);
-	return html`
-		<template
-			tabindex="-1"
-			${applyHostSemantics({
-		role: (x) => DataGridCellRole[x.cellType] ?? 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}"
+			<slot ${ref("slotEl")}></slot>
+			${when((x) => x.overflowCount > 0, html`
+					<div
+						class="overflow-wrap"
+						${ref("overflowWrapEl")}
+						style="order: ${(x) => x.lastVisibleIndex};"
+						@mouseenter="${(x) => x.handleMouseEnter()}"
+						@mouseleave="${(x) => x.handleMouseLeave()}"
+					>
+						<${badgeTag}
+							${ref("badgeEl")}
+							connotation="cta"
+							appearance="duotone"
+							shape="pill"
+							text="${(x) => "+" + x.overflowCount}"
+						></${badgeTag}>
+					</div>
+				`)}
+		</div>
+
+		${when((x) => x.overflowCount > 0, html`
+				<${popupTag}
+					strategy="fixed"
+					placement="top"
+					alternate
+					arrow
+					:anchor="${(x) => x.overflowWrapEl}"
+					:open="${(x) => x.popupOpen}"
+					exportparts="vvd-theme-alternate"
 				>
-					${(x) => x.selected ? html`<${visuallyHiddenTagName}
-								data-announcement="selection"
-							>
-								${(x) => x.locale.dataGrid.cell.selected}
-							</${visuallyHiddenTagName}>` : null}
-					<slot></slot>
-					${when(shouldShowSortIcons, html`<${visuallyHiddenTagName}
-							data-announcement="button-role"
-						>
-							${(x) => x.locale.dataGrid.cell.button}
-						</${visuallyHiddenTagName}>
-						`)}
-					${when(shouldAnnounceSortState, html`<${visuallyHiddenTagName}
-							aria-live="polite"
-							data-announcement="sort-state"
-						>
-							${getSortAnnouncement}
-						</${visuallyHiddenTagName}>`)}
-					${(_) => renderSortIcons(context)}
-				</div>
-				<slot
-					name="action-items"
-					${slotted("_actionItemsSlottedContent")}
-				></slot>
-			</div>
-		</template>
+					<div
+						class="overflow-grid"
+						${ref("overflowGridEl")}
+						aria-hidden="true"
+					></div>
+				</${popupTag}>
+			`)}
 	`;
 };
 //#endregion
-//#region src/lib/data-grid/definition.ts
-/**
-* @internal
-*/
-var dataGridCellDefinition = defineVividComponent("data-grid-cell", DataGridCell, DataGridCellTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: data_grid_cell_default });
-/**
-* @internal
-*/
-var dataGridRowDefinition = defineVividComponent("data-grid-row", DataGridRow, DataGridRowTemplate, [dataGridCellDefinition], { styles: data_grid_row_default });
+//#region src/lib/country-group/definition.ts
 /**
 * @internal
 */
-var dataGridDefinition = defineVividComponent("data-grid", DataGrid, DataGridTemplate, [dataGridRowDefinition], { styles: data_grid_default });
+var countryGroupDefinition = defineVividComponent("country-group", CountryGroup, CountryGroupTemplate, [
+	countryDefinition,
+	badgeDefinition,
+	popupDefinition
+], { styles: country_group_default });
 /**
-* Registers the data-grid element with the design system.
+* Registers the country-group element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDataGrid = createRegisterFunction(dataGridDefinition);
+var registerCountryGroup = createRegisterFunction(countryGroupDefinition);
 //#endregion
-export { DataGridCell as a, registerDataGrid as i, dataGridDefinition as n, DataGridRow as o, dataGridRowDefinition as r, DataGrid as s, dataGridCellDefinition as t };
+export { registerCountryGroup as n, CountryGroup as r, countryGroupDefinition as t };