@vonage/vivid 5.23.1 → 5.24.0

package/unbundled/definition34.js

@@ -1,1967 +1,97 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.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 { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition22.js";
-import { a as GenerateHeaderOptions, i as DataGridRowTypes, n as DataGridCellSortStates, r as DataGridCellTypes, t as DataGridCellRole } from "./data-grid.options.js";
-import { Observable, RepeatDirective, Updates, attr, children, elements, html, normalizeBinding, nullableNumberConverter, observable, slotted, when } from "@microsoft/fast-element";
-import { classNames, eventFocus, eventFocusIn, eventFocusOut, eventKeyDown, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyFunction2, keyHome, keyPageDown, keyPageUp, keySpace } from "@microsoft/fast-web-utilities";
-//#region src/lib/data-grid/data-grid.scss?inline
-var data_grid_default = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}";
+import { t as getFlagIconName } from "./utils.js";
+import { attr, html, observable, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/flag/flag.scss?inline
+var flag_default = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin: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.10.4/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;
-}
-/**
-* Warning and error messages.
-* @internal
-*/
-var Message;
-(function(Message) {
-	Message[Message["needsArrayObservation"] = 1101] = "needsArrayObservation";
-	Message[Message["onlySetDOMPolicyOnce"] = 1201] = "onlySetDOMPolicyOnce";
-	Message[Message["bindingInnerHTMLRequiresTrustedTypes"] = 1202] = "bindingInnerHTMLRequiresTrustedTypes";
-	Message[Message["twoWayBindingRequiresObservables"] = 1203] = "twoWayBindingRequiresObservables";
-	Message[Message["hostBindingWithoutHost"] = 1204] = "hostBindingWithoutHost";
-	Message[Message["unsupportedBindingBehavior"] = 1205] = "unsupportedBindingBehavior";
-	Message[Message["directCallToHTMLTagNotAllowed"] = 1206] = "directCallToHTMLTagNotAllowed";
-	Message[Message["onlySetTemplatePolicyOnce"] = 1207] = "onlySetTemplatePolicyOnce";
-	Message[Message["cannotSetTemplatePolicyAfterCompilation"] = 1208] = "cannotSetTemplatePolicyAfterCompilation";
-	Message[Message["blockedByDOMPolicy"] = 1209] = "blockedByDOMPolicy";
-	Message[Message["missingElementDefinition"] = 1401] = "missingElementDefinition";
-	Message[Message["noRegistrationForContext"] = 1501] = "noRegistrationForContext";
-	Message[Message["noFactoryForResolver"] = 1502] = "noFactoryForResolver";
-	Message[Message["invalidResolverStrategy"] = 1503] = "invalidResolverStrategy";
-	Message[Message["cannotAutoregisterDependency"] = 1504] = "cannotAutoregisterDependency";
-	Message[Message["cannotResolveKey"] = 1505] = "cannotResolveKey";
-	Message[Message["cannotConstructNativeFunction"] = 1506] = "cannotConstructNativeFunction";
-	Message[Message["cannotJITRegisterNonConstructor"] = 1507] = "cannotJITRegisterNonConstructor";
-	Message[Message["cannotJITRegisterIntrinsic"] = 1508] = "cannotJITRegisterIntrinsic";
-	Message[Message["cannotJITRegisterInterface"] = 1509] = "cannotJITRegisterInterface";
-	Message[Message["invalidResolver"] = 1510] = "invalidResolver";
-	Message[Message["invalidKey"] = 1511] = "invalidKey";
-	Message[Message["noDefaultResolver"] = 1512] = "noDefaultResolver";
-	Message[Message["cyclicDependency"] = 1513] = "cyclicDependency";
-	Message[Message["connectUpdateRequiresController"] = 1514] = "connectUpdateRequiresController";
-})(Message || (Message = {}));
-/**
-* 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.10.4/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.10.4/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$1 = 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(Message.onlySetDOMPolicyOnce);
-		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.10.4/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.10.4/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.10.4/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(Message.needsArrayObservation);
-	};
-	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$1 = Object.freeze({
-	/**
-	* A default execution context.
-	*/
-	default: {
-		index: 0,
-		length: 0,
-		get event() {
-			return ExecutionContext$1.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.10.4/node_modules/@microsoft/fast-element/dist/esm/templating/markup.js
-/**
-* A unique per-session random marker string used to create placeholder tokens in HTML.
-* Bindings embedded in template literals are replaced with interpolation markers
-* of the form `fast-xxxxxx{id}fast-xxxxxx` so the compiler can later locate them in the
-* parsed DOM and associate each marker with its ViewBehaviorFactory.
-*/
-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.10.4/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$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));
-			}
-		},
-		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"
-};
+//#region src/lib/flag/flag.ts
+var PLACEHOLDER_DELAY = 500;
+var PLACEHOLDER_TIMEOUT = 2e3;
 /**
 * @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
+* @component flag
+* @testQuery code code
 */
-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");
-	}
-	/** @internal */
-	disconnectedCallback() {
-		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) {
-			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() {
-		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);
+var Flag = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.flagLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
+	}
+	#currentRequestId;
+	#abortController;
+	/** @internal */
+	async codeChanged() {
+		const requestId = ++this.#currentRequestId;
+		if (this.#abortController) this.#abortController.abort();
+		this.#abortController = new AbortController();
+		const iconName = getFlagIconName(this.code);
+		if (!iconName) {
+			this._svg = "";
+			this.flagLoaded = true;
 			return;
 		}
-		this._resetSelection(true);
-	}
-	#handleKeypress;
-	#handleClick;
-	#handleCellSelection;
-	#handleRowSelection;
-	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.#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) {
+		this._svg = void 0;
+		this.flagLoaded = false;
+		let timeout = setTimeout(() => {
 			/* 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];
+			if (this.#currentRequestId === requestId) {
+				this._svg = PLACEHOLDER_ICON;
+				timeout = setTimeout(() => {
 					/* 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 = [];
-	}
-};
-__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();
-	}
-	/** @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();
-	}
-	/** @internal */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("cell-focused", this.handleCellFocus);
-		this.removeEventListener(eventFocusOut, this.handleFocusout);
-		this.removeEventListener(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;
-		switch (e.key) {
-			case keyArrowLeft$1: {
-				const newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
-				this.cellElements[newFocusColumnIndex].focus();
-				e.preventDefault();
-				break;
+					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
+				}, PLACEHOLDER_TIMEOUT);
 			}
-			case keyArrowRight$1: {
-				const newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
-				this.cellElements[newFocusColumnIndex].focus();
-				e.preventDefault();
-				break;
+		}, PLACEHOLDER_DELAY);
+		try {
+			const svg = await resolveIcon(iconName, this.#abortController.signal);
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) this._svg = svg;
+		} catch {
+			if (this.#currentRequestId === requestId) this._svg = void 0;
+		} finally {
+			if (this.#currentRequestId === requestId) {
+				clearTimeout(timeout);
+				this.flagLoaded = true;
 			}
-			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;
 		}
 	}
-	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);
-//#endregion
-//#region src/lib/data-grid/data-grid.template.ts
-function createRowItemTemplate(context) {
-	const rowTag = context.tagFor(DataGridRow);
+__decorate([attr], Flag.prototype, "code", void 0);
+__decorate([attr], Flag.prototype, "label", void 0);
+__decorate([attr({ converter: numberConverter })], Flag.prototype, "size", void 0);
+__decorate([observable], Flag.prototype, "_svg", void 0);
+__decorate([observable], Flag.prototype, "flagLoaded", void 0);
+//#endregion
+//#region src/lib/flag/flag.template.ts
+var flagTemplate = (context) => {
+	const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
 	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]")
-	})}
+		<figure
+			class="${(x) => classNames("control", [`size-${x.size}`, typeof x.size === "number"])}"
+			?aria-hidden="${(x) => isDecorative(x)}"
+			?aria-busy="${(x) => !x?.flagLoaded}"
 		>
-			<div class="base">
-				${setHeaderRow}
-				<slot ${slotted("slottedRowElements")}></slot>
-			</div>
-		</template>
+			${when((x) => x?.flagLoaded && x?._svg, (x) => html`${html.partial(x._svg)}`)}
+			<${visuallyHiddenTag} class="label">${(x) => x?.label}</${visuallyHiddenTag}>
+		</figure>
 	`;
 };
 //#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);
-	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="${(x) => classNames("base", ["selected", !!x.selected])}"
-				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);
-	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="${(x) => classNames("base", ["selected", x.selected], ["has-action-items", Boolean(x._actionItemsSlottedContent?.length)])}"
-			>
-				<div
-					class="content"
-					role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
-				>
-					${(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>
-	`;
-};
-//#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/flag/definition.ts
 /** @internal */
-var dataGridDefinition = defineVividComponent("data-grid", DataGrid, DataGridTemplate, [dataGridRowDefinition], { styles: data_grid_default });
+var flagDefinition = defineVividComponent("flag", Flag, flagTemplate, [visuallyHiddenDefinition], { styles: flag_default });
 /**
-* Registers the data-grid element with the design system.
+* Registers the flag component & its prerequisite components with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerDataGrid = createRegisterFunction(dataGridDefinition);
+var registerFlag = createRegisterFunction(flagDefinition);
 //#endregion
-export { DataGridCell as a, registerDataGrid as i, dataGridDefinition as n, DataGridRow as o, dataGridRowDefinition as r, DataGrid as s, dataGridCellDefinition as t };
+export { registerFlag as n, Flag as r, flagDefinition as t };