@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition75.cjs

@@ -1,55 +1,334 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_data_grid_options = require("./data-grid.options.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/tag-group/tag-group.scss?inline
-var tag_group_default = ".base{flex-wrap:wrap;gap:8px;display:flex}";
+//#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/tag-group/tag-group.ts
+//#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{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;--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap;display:table-cell}: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: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 tag-group
-* @slot - The content of the tag-group.
-*/
-var TagGroup = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {};
-//#endregion
-//#region src/lib/tag-group/tag-group.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base");
-var TagGroupTemplate = _microsoft_fast_element.html`
-	<div
-		class="${getClasses}"
-		${require_delegates_aria.delegateAria({ role: "group" })}
-	>
-		<slot></slot>
-	</div>
-`;
-//#endregion
-//#region src/lib/tag-group/definition.ts
+* @component table
+* @slot - Holds Table Head and Table Body elements.
+*/
+var Table = class extends require_vivid_element.VividElement {};
+//#endregion
+//#region src/lib/table/table.template.ts
+var TableTemplate = () => {
+	return _microsoft_fast_element.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 - Holds Table Row elements that make up the table's header.
+*/
+var TableHead = class extends require_vivid_element.VividElement {};
+//#endregion
+//#region src/lib/table/table-head.template.ts
+var TableHeadTemplate = () => {
+	return _microsoft_fast_element.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-body.ts
+/**
+* @public
+* @component table-body
+* @slot - Holds Table Row elements that make up the table's data.
+*/
+var TableBody = class extends require_vivid_element.VividElement {};
+//#endregion
+//#region src/lib/table/table-body.template.ts
+var TableBodyTemplate = () => {
+	return _microsoft_fast_element.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-row.ts
+/**
+* @public
+* @component table-row
+* @slot - Holds Table Cell and Table Header Cell elements.
+*/
+var TableRow = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
+//#endregion
+//#region src/lib/table/table-row.template.ts
+var TableRowTemplate = () => {
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({ role: "row" })}
+		>
+			<div class="base connotation-accent appearance-listitem with-idle">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-header-cell.ts
+/**
+* @public
+* @component table-header-cell
+* @slot - Holds the header cell's content.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableHeaderCell = class extends require_host_semantics.HostSemantics(require_vivid_element.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 _microsoft_fast_element.html`
+		<template
+			class="connotation-accent appearance-listitem with-idle"
+			${require_host_semantics.applyHostSemantics({ role: (x) => x.closest(tableHeadTag) !== null ? require_data_grid_options.DataGridCellRole.columnheader : require_data_grid_options.DataGridCellRole.rowheader })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-cell.ts
+/**
+* @public
+* @component table-cell
+* @slot - Holds the cell's content.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableCell = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
+//#endregion
+//#region src/lib/table/table-cell.template.ts
+var TableCellTemplate = () => {
+	return _microsoft_fast_element.html`
+		<template
+			class="connotation-accent appearance-listitem with-idle"
+			${require_host_semantics.applyHostSemantics({ role: () => "cell" })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-sorting-button.ts
+/**
+* @public
+* @component table-sorting-button
+* @event {CustomEvent<undefined>} sort - Emitted when sorting button is clicked.
+*/
+var TableSortingButton = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
+	get #nextDirection() {
+		if (!this.direction || this.direction === "none") return "asc";
+		else if (this.direction === "asc") return "desc";
+		else return "none";
+	}
+	/** Toggles the sort direction and emits the `sort` event. */
+	toggleSort() {
+		if (!this.$emit("sort", this.#nextDirection)) return;
+		this.direction = this.#nextDirection;
+		this.dispatchEvent(new CustomEvent("sort", {
+			detail: this.direction,
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], TableSortingButton.prototype, "direction", void 0);
+//#endregion
+//#region src/lib/table/table-sorting-button.template.ts
+var TableSortingButtonTemplate = (context) => {
+	const iconTag = context.tagFor(require_icon.Icon);
+	return _microsoft_fast_element.html`
+		<template
+			@click="${(x) => x.toggleSort()}"
+			${require_host_semantics.applyHostSemantics({ role: "button" })}
+		>
+			<button>
+				${(x) => {
+		switch (x.direction) {
+			case "asc": return _microsoft_fast_element.html`<${iconTag} name="sort-asc-line"></${iconTag}>`;
+			case "desc": return _microsoft_fast_element.html`<${iconTag} name="sort-desc-line"></${iconTag}>`;
+			default: return _microsoft_fast_element.html`<${iconTag} name="sort-line"></${iconTag}>`;
+		}
+	}}
+			</button>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/definition.ts
+/** @internal */
+var tableCellDefinition = require_vivid_element.defineVividComponent("table-cell", TableCell, TableCellTemplate, [], { styles: table_cell_default });
+/** @internal */
+var tableHeaderCellDefinition = require_vivid_element.defineVividComponent("table-header-cell", TableHeaderCell, TableHeaderCellTemplate, [], { styles: table_header_cell_default });
+/** @internal */
+var tableRowDefinition = require_vivid_element.defineVividComponent("table-row", TableRow, TableRowTemplate, [], { styles: table_row_default });
+/** @internal */
+var tableBodyDefinition = require_vivid_element.defineVividComponent("table-body", TableBody, TableBodyTemplate, [], { styles: table_body_default });
+/** @internal */
+var tableHeadDefinition = require_vivid_element.defineVividComponent("table-head", TableHead, TableHeadTemplate, [], { styles: table_head_default });
 /** @internal */
-var tagGroupDefinition = require_vivid_element.defineVividComponent("tag-group", TagGroup, TagGroupTemplate, [], { styles: tag_group_default });
+var tableSortingButtonDefinition = require_vivid_element.defineVividComponent("table-sorting-button", TableSortingButton, TableSortingButtonTemplate, [require_definition.iconDefinition], { styles: table_sorting_button_default });
+/** @internal */
+var tableDefinition = require_vivid_element.defineVividComponent("table", Table, TableTemplate, [
+	tableCellDefinition,
+	tableHeaderCellDefinition,
+	tableRowDefinition,
+	tableHeadDefinition,
+	tableBodyDefinition,
+	tableSortingButtonDefinition
+], { styles: table_default });
 /**
-* Registers the tag-group element with the design system.
+* Registers the table element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTagGroup = require_vivid_element.createRegisterFunction(tagGroupDefinition);
+var registerTable = require_vivid_element.createRegisterFunction(tableDefinition);
 //#endregion
-Object.defineProperty(exports, "TagGroup", {
+Object.defineProperty(exports, "Table", {
+	enumerable: true,
+	get: function() {
+		return Table;
+	}
+});
+Object.defineProperty(exports, "TableBody", {
+	enumerable: true,
+	get: function() {
+		return TableBody;
+	}
+});
+Object.defineProperty(exports, "TableCell", {
+	enumerable: true,
+	get: function() {
+		return TableCell;
+	}
+});
+Object.defineProperty(exports, "TableHead", {
+	enumerable: true,
+	get: function() {
+		return TableHead;
+	}
+});
+Object.defineProperty(exports, "TableHeaderCell", {
+	enumerable: true,
+	get: function() {
+		return TableHeaderCell;
+	}
+});
+Object.defineProperty(exports, "TableRow", {
+	enumerable: true,
+	get: function() {
+		return TableRow;
+	}
+});
+Object.defineProperty(exports, "TableSortingButton", {
+	enumerable: true,
+	get: function() {
+		return TableSortingButton;
+	}
+});
+Object.defineProperty(exports, "registerTable", {
+	enumerable: true,
+	get: function() {
+		return registerTable;
+	}
+});
+Object.defineProperty(exports, "tableBodyDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableBodyDefinition;
+	}
+});
+Object.defineProperty(exports, "tableCellDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableCellDefinition;
+	}
+});
+Object.defineProperty(exports, "tableDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableDefinition;
+	}
+});
+Object.defineProperty(exports, "tableHeadDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableHeadDefinition;
+	}
+});
+Object.defineProperty(exports, "tableHeaderCellDefinition", {
 	enumerable: true,
 	get: function() {
-		return TagGroup;
+		return tableHeaderCellDefinition;
 	}
 });
-Object.defineProperty(exports, "registerTagGroup", {
+Object.defineProperty(exports, "tableRowDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerTagGroup;
+		return tableRowDefinition;
 	}
 });
-Object.defineProperty(exports, "tagGroupDefinition", {
+Object.defineProperty(exports, "tableSortingButtonDefinition", {
 	enumerable: true,
 	get: function() {
-		return tagGroupDefinition;
+		return tableSortingButtonDefinition;
 	}
 });

package/unbundled/definition75.js

@@ -1,36 +1,245 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { html } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/tag-group/tag-group.scss?inline
-var tag_group_default = ".base{flex-wrap:wrap;gap:8px;display:flex}";
+import { t as iconDefinition } from "./definition.js";
+import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.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/tag-group/tag-group.ts
+//#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{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;--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap;display:table-cell}: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: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 - Holds Table Head and Table Body elements.
+*/
+var Table = class extends VividElement {};
+//#endregion
+//#region src/lib/table/table.template.ts
+var TableTemplate = () => {
+	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 tag-group
-* @slot - The content of the tag-group.
+* @component table-head
+* @slot - Holds Table Row elements that make up the table's header.
 */
-var TagGroup = class extends DelegatesAria(VividElement) {};
+var TableHead = class extends VividElement {};
 //#endregion
-//#region src/lib/tag-group/tag-group.template.ts
-var getClasses = (_) => classNames("base");
+//#region src/lib/table/table-head.template.ts
+var TableHeadTemplate = () => {
+	return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
 //#endregion
-//#region src/lib/tag-group/definition.ts
+//#region src/lib/table/table-body.ts
+/**
+* @public
+* @component table-body
+* @slot - Holds Table Row elements that make up the table's data.
+*/
+var TableBody = class extends VividElement {};
+//#endregion
+//#region src/lib/table/table-body.template.ts
+var TableBodyTemplate = () => {
+	return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-row.ts
+/**
+* @public
+* @component table-row
+* @slot - Holds Table Cell and Table Header Cell elements.
+*/
+var TableRow = class extends HostSemantics(VividElement) {};
+//#endregion
+//#region src/lib/table/table-row.template.ts
+var TableRowTemplate = () => {
+	return html`
+		<template
+			${applyHostSemantics({ role: "row" })}
+		>
+			<div class="base connotation-accent appearance-listitem with-idle">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-header-cell.ts
+/**
+* @public
+* @component table-header-cell
+* @slot - Holds the header cell's content.
+* @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
+			class="connotation-accent appearance-listitem with-idle"
+			${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
+/**
+* @public
+* @component table-cell
+* @slot - Holds the cell's content.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableCell = class extends HostSemantics(VividElement) {};
+//#endregion
+//#region src/lib/table/table-cell.template.ts
+var TableCellTemplate = () => {
+	return html`
+		<template
+			class="connotation-accent appearance-listitem with-idle"
+			${applyHostSemantics({ role: () => "cell" })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-sorting-button.ts
+/**
+* @public
+* @component table-sorting-button
+* @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";
+	}
+	/** Toggles the sort direction and emits the `sort` event. */
+	toggleSort() {
+		if (!this.$emit("sort", this.#nextDirection)) return;
+		this.direction = this.#nextDirection;
+		this.dispatchEvent(new CustomEvent("sort", {
+			detail: this.direction,
+			bubbles: true,
+			composed: 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);
+	return html`
+		<template
+			@click="${(x) => x.toggleSort()}"
+			${applyHostSemantics({ role: "button" })}
+		>
+			<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>
+	`;
+};
+//#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 tagGroupDefinition = defineVividComponent("tag-group", TagGroup, html`
-	<div
-		class="${getClasses}"
-		${delegateAria({ role: "group" })}
-	>
-		<slot></slot>
-	</div>
-`, [], { styles: tag_group_default });
-/**
-* Registers the tag-group element with the design system.
+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 });
+/** @internal */
+var tableDefinition = defineVividComponent("table", Table, TableTemplate, [
+	tableCellDefinition,
+	tableHeaderCellDefinition,
+	tableRowDefinition,
+	tableHeadDefinition,
+	tableBodyDefinition,
+	tableSortingButtonDefinition
+], { styles: table_default });
+/**
+* Registers the table element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTagGroup = createRegisterFunction(tagGroupDefinition);
+var registerTable = createRegisterFunction(tableDefinition);
 //#endregion
-export { tagGroupDefinition as n, TagGroup as r, registerTagGroup as t };
+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 };