@vonage/vivid 5.17.0 → 5.19.0

package/unbundled/definition33.js

@@ -1,256 +1,102 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
+import { n as visuallyHiddenDefinition, r as VisuallyHidden } 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 DelegatesAria } from "./delegates-aria.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { t as DataGridCellRole } from "./data-grid.options.js";
-import { attr, html } from "@microsoft/fast-element";
-//#region src/lib/table/table.scss?inline
-var table_default = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--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}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}";
-//#endregion
-//#region src/lib/table/table-sorting-button.scss?inline
-var table_sorting_button_default = "button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button:focus-visible{--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))}";
-//#endregion
-//#region src/lib/table/table-head.scss?inline
-var table_head_default = ":host{display:table-header-group}";
-//#endregion
-//#region src/lib/table/table-body.scss?inline
-var table_body_default = ":host{display:table-row-group}";
-//#endregion
-//#region src/lib/table/table-row.scss?inline
-var table_row_default = ":host{display:table-row}@media (hover:hover){:host:hover{background-color:var(--vvd-color-neutral-200)}}:host[selected]{background-color:var(--_appearance-color-fill)}.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:contents}";
-//#endregion
-//#region src/lib/table/table-header-cell.scss?inline
-var table_header_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.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))}:host: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))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.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){:host.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}}:host.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}:host{--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap}:host([role=columnheader]){border-bottom-color:var(--vvd-color-canvas-text)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));padding:0;flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}: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))}slot{text-overflow:ellipsis;inline-size:100%;white-space:var(--table-cell-white-space,var(--_table-cell-default-white-space));flex:none;display:block;overflow:hidden}";
-//#endregion
-//#region src/lib/table/table-cell.scss?inline
-var table_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.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))}:host: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))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.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){:host.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}}:host.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}:host:not([cell-type=columnheader]){--_table-cell-default-block-size:100%;--_table-cell-default-white-space:normal}:host[selected]{background-color:var(--_appearance-color-fill)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;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));flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}: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))}slot{flex:none;inline-size:100%;display:block}";
-//#endregion
-//#region src/lib/table/table.ts
-/**
-* @public
-* @component table
-* @slot - Default slot.
-*/
-var Table = class extends VividElement {};
-//#endregion
-//#region src/lib/table/table.template.ts
-var TableTemplate = (context) => {
-	return html`
-		<template role="table">
-			<div part="inner-container" class="table-inner-container">
-				<div part="content" class="table-content">
-					<slot></slot>
-				</div>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-head.ts
-var tableHeadName = "table-head";
-/**
-* @public
-* @component table-head
-* @slot - Default slot.
-*/
-var TableHead = class extends VividElement {};
-//#endregion
-//#region src/lib/table/table-head.template.ts
-var TableHeadTemplate = (context) => {
-	return html`
-		<template>
-			<slot></slot>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-body.ts
-/**
-* @public
-* @component table-body
-* @slot - Default slot.
-*/
-var TableBody = class extends VividElement {};
-//#endregion
-//#region src/lib/table/table-body.template.ts
-var TableBodyTemplate = (context) => {
-	return html`
-		<template>
-			<slot></slot>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-row.ts
-/**
-* @public
-* @component table-row
-* @slot - Default slot.
-*/
-var TableRow = class extends HostSemantics(VividElement) {};
-//#endregion
-//#region src/lib/table/table-row.template.ts
-var TableRowTemplate = (context) => {
-	return html`
-		<template
-			${applyHostSemantics({ role: "row" })}
-		>
-			<div class="base">
-				<slot></slot>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-header-cell.ts
-/**
-* @public
-* @component table-header-cell
-* @slot - Default slot.
-* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
-*/
-var TableHeaderCell = class extends HostSemantics(VividElement) {
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("sort", this.#sortHandler);
-	}
-	#sortHandler(event) {
-		const direction = event.detail;
-		if (direction === "asc") this.setAttribute("aria-sort", "ascending");
-		else if (direction === "desc") this.setAttribute("aria-sort", "descending");
-		else if (direction === "none") this.setAttribute("aria-sort", "none");
-		else this.removeAttribute("aria-sort");
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("sort", this.#sortHandler);
-	}
-};
-//#endregion
-//#region src/lib/table/table-header-cell.template.ts
-var TableHeaderCellTemplate = (context) => {
-	const tableHeadTag = context.tagForNonDependency(tableHeadName);
-	return html`
-		<template
-			${applyHostSemantics({ role: (x) => x.closest(tableHeadTag) !== null ? DataGridCellRole.columnheader : DataGridCellRole.rowheader })}
-		>
-			<div class="base">
-				<slot></slot>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-cell.ts
+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/flag/flag.ts
+var PLACEHOLDER_DELAY = 500;
+var PLACEHOLDER_TIMEOUT = 2e3;
 /**
 * @public
-* @component table-cell
-* @slot - Default slot.
-* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+* @component flag
+* @testQuery code code
 */
-var TableCell = class extends HostSemantics(VividElement) {};
-//#endregion
-//#region src/lib/table/table-cell.template.ts
-var TableCellTemplate = (context) => {
-	return html`
-		<template
-			${applyHostSemantics({ role: () => "cell" })}
-		>
-			<div class="base">
-				<slot></slot>
-			</div>
-		</template>
-	`;
-};
-//#endregion
-//#region src/lib/table/table-sorting-button.ts
-/**
-* @public
-* @component table-sorting-button
-* @slot - Default slot.
-* @event {CustomEvent<undefined>} sort - Emitted when sorting button is clicked.
-*/
-var TableSortingButton = class extends DelegatesAria(VividElement) {
-	get #nextDirection() {
-		if (!this.direction || this.direction === "none") return "asc";
-		else if (this.direction === "asc") return "desc";
-		else return "none";
+var Flag = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.flagLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
 	}
-	toggleSort() {
-		if (!this.$emit("sort", this.#nextDirection)) return;
-		this.direction = this.#nextDirection;
-		this.dispatchEvent(new CustomEvent("sort", {
-			detail: this.direction,
-			bubbles: true,
-			composed: true
-		}));
+	#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._svg = void 0;
+		this.flagLoaded = false;
+		let timeout = setTimeout(() => {
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) {
+				this._svg = PLACEHOLDER_ICON;
+				timeout = setTimeout(() => {
+					/* v8 ignore else -- @preserve */
+					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
+				}, PLACEHOLDER_TIMEOUT);
+			}
+		}, 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;
+			}
+		}
 	}
 };
-__decorate([attr], TableSortingButton.prototype, "direction", void 0);
-//#endregion
-//#region src/lib/table/table-sorting-button.template.ts
-var TableSortingButtonTemplate = (context) => {
-	const iconTag = context.tagFor(Icon);
+__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 getClasses = ({ size }) => classNames("control", [`size-${size}`, typeof size === "number"]);
+var flagTemplate = (context) => {
+	const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+	const isDecorative = (x) => !x.label || x.label.trim().length === 0;
 	return html`
-		<template
-			@click="${(x) => x.toggleSort()}"
-			${applyHostSemantics({ role: "button" })}
+		<figure
+			class="${getClasses}"
+			?aria-hidden="${(x) => isDecorative(x)}"
+			?aria-busy="${(x) => !x?.flagLoaded}"
 		>
-			<button>
-				${(x) => {
-		switch (x.direction) {
-			case "asc": return html`<${iconTag} name="sort-asc-line"></${iconTag}>`;
-			case "desc": return html`<${iconTag} name="sort-desc-line"></${iconTag}>`;
-			default: return html`<${iconTag} name="sort-line"></${iconTag}>`;
-		}
-	}}
-			</button>
-		</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/table/definition.ts
-/**
-* @internal
-*/
-var tableCellDefinition = defineVividComponent("table-cell", TableCell, TableCellTemplate, [], { styles: table_cell_default });
-/**
-* @internal
-*/
-var tableHeaderCellDefinition = defineVividComponent("table-header-cell", TableHeaderCell, TableHeaderCellTemplate, [], { styles: table_header_cell_default });
-/**
-* @internal
-*/
-var tableRowDefinition = defineVividComponent("table-row", TableRow, TableRowTemplate, [], { styles: table_row_default });
-/**
-* @internal
-*/
-var tableBodyDefinition = defineVividComponent("table-body", TableBody, TableBodyTemplate, [], { styles: table_body_default });
-/**
-* @internal
-*/
-var tableHeadDefinition = defineVividComponent("table-head", TableHead, TableHeadTemplate, [], { styles: table_head_default });
-/**
-* @internal
-*/
-var tableSortingButtonDefinition = defineVividComponent("table-sorting-button", TableSortingButton, TableSortingButtonTemplate, [iconDefinition], { styles: table_sorting_button_default });
+//#region src/lib/flag/definition.ts
 /**
 * @internal
 */
-var tableDefinition = defineVividComponent("table", Table, TableTemplate, [
-	tableCellDefinition,
-	tableHeaderCellDefinition,
-	tableRowDefinition,
-	tableHeadDefinition,
-	tableBodyDefinition,
-	tableSortingButtonDefinition
-], { styles: table_default });
+var flagDefinition = defineVividComponent("flag", Flag, flagTemplate, [visuallyHiddenDefinition], { styles: flag_default });
 /**
-* Registers the table 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 registerTable = createRegisterFunction(tableDefinition);
+var registerFlag = createRegisterFunction(flagDefinition);
 //#endregion
-export { tableHeadDefinition as a, tableSortingButtonDefinition as c, TableHeaderCell as d, TableRow as f, Table as h, tableDefinition as i, TableSortingButton as l, TableHead as m, tableBodyDefinition as n, tableHeaderCellDefinition as o, TableBody as p, tableCellDefinition as r, tableRowDefinition as s, registerTable as t, TableCell as u };
+export { registerFlag as n, Flag as r, flagDefinition as t };