@vonage/vivid 5.25.0 → 5.28.0

package/unbundled/definition75.js

@@ -1,330 +1,258 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
-import { n as tabPanelDefinition } from "./definition72.js";
-import { n as tabDefinition, r as Tab } from "./definition73.js";
-import { Updates, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
-import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, limit, uniqueId } from "@microsoft/fast-web-utilities";
-//#region src/lib/tabs/tabs.scss?inline
-var tabs_default = ":host{display:block}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-firm:var(--vvd-tabs-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm:var(--vvd-tabs-accent-firm,var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--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}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--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;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}@media (prefers-reduced-motion:reduce){.activeIndicatorTransition{transition-duration:.01ms}}";
+import { t as Icon } from "./icon.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.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/tabs/tabs.ts
-var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-var TabsGutters = {
-	None: "none",
-	Small: "small"
+//#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>
+	`;
 };
-var TabsOrientation = {
-	vertical: "vertical",
-	horizontal: "horizontal"
+//#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 VividElement {};
+//#endregion
+//#region src/lib/table/table-head.template.ts
+var TableHeadTemplate = () => {
+	return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
 };
-var oppositeOrientation = (orientation) => orientation === TabsOrientation.horizontal ? TabsOrientation.vertical : TabsOrientation.horizontal;
-var gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
-var translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
-var offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-var isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
-var arrayShallowEquals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+//#endregion
+//#region src/lib/table/table-body.ts
 /**
 * @public
-* @component tabs
-* @slot - Default slot for tab and tab-panel elements.
-* @slot action-items - Slot for action items such as buttons or controls.
-* @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+* @component table-body
+* @slot - Holds Table Row elements that make up the table's data.
 */
-var Tabs = class extends VividElement {
-	constructor(..._args) {
-		super(..._args);
-		this.orientation = TabsOrientation.horizontal;
-		this.tabs = [];
-		this.tabpanels = [];
-		this.#isTabsChangeQueued = false;
-		this.#lastActiveId = void 0;
-		this.#onTabClick = (event) => {
-			const selectedTab = event.currentTarget;
-			if (this._validTabs.includes(selectedTab)) this.#setActiveTabDueToUserInteraction(selectedTab);
-		};
-		this.#onTabKeyDown = (event) => {
-			const tabs = this._validTabs;
-			const activeTab = this.activetab;
-			if (!activeTab) return;
-			const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [keyArrowLeft$1, keyArrowRight$1] : [keyArrowUp, keyArrowDown];
-			const keyToNextTab = {
-				[arrowKeyPrev]: () => tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length],
-				[arrowKeyNext]: () => tabs[(tabs.indexOf(activeTab) + 1) % tabs.length],
-				[keyHome]: () => tabs[0],
-				[keyEnd]: () => tabs[tabs.length - 1]
-			};
-			if (keyToNextTab[event.key]) {
-				event.preventDefault();
-				this.#setActiveTabDueToUserInteraction(keyToNextTab[event.key]());
-			}
-		};
-		this.#isTransitioningTransform = false;
-		this.scrollablePanel = false;
-		this._actionItemsSlottedContent = [];
-		this.activeindicator = true;
-	}
-	/** @internal */
-	orientationChanged() {
-		this._registerTabsChange();
-		if (this.$fastController.isConnected) Updates.enqueue(() => this.#moveActiveIndicator(false));
-	}
-	/** @internal */
-	tabsChanged() {
-		for (const tab of this.tabs) {
-			if (!tab.id) tab.id = `tab-${uniqueId()}`;
-			tab.addEventListener("click", this.#onTabClick);
-			tab.addEventListener("keydown", this.#onTabKeyDown);
-		}
-		this._registerTabsChange();
-	}
-	/** @internal */
-	tabpanelsChanged() {
-		for (const panel of this.tabpanels) if (!panel.id) panel.id = `panel-${uniqueId()}`;
-		this._registerTabsChange();
-	}
-	#areSlotsSynced() {
-		return arrayShallowEquals(this.tabs, this._tabsSlot.assignedNodes()) && arrayShallowEquals(this.tabpanels, this._tabPanelsSlot.assignedNodes());
-	}
-	/** Tabs that are paired with a tabpanel. Ignore any excess tabs or panels. */
-	get _pairedTabs() {
-		return this.tabs.slice(0, Math.min(this.tabs.length, this.tabpanels.length));
-	}
-	/** Tabs that are eligible to become active. */
-	get _validTabs() {
-		return this._pairedTabs.filter(isFocusableElement);
-	}
-	/** @internal */
-	activeidChanged() {
-		this._registerTabsChange();
-	}
-	/** A reference to the active tab */
-	get activetab() {
-		return this._validTabs.find((tab) => tab.id === this.activeid) ?? null;
-	}
-	#setActiveTabDueToUserInteraction(tab) {
-		this.activeid = tab.id;
-		tab.focus();
-		this.$emit("change", tab);
-	}
-	#isTabsChangeQueued;
-	/**
-	* Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and
-	* active id are updated at the same time.
-	*/
-	_registerTabsChange() {
-		if (this.#isTabsChangeQueued) return;
-		this.#isTabsChangeQueued = true;
-		window.queueMicrotask(() => {
-			if (this.$fastController.isConnected && this.#areSlotsSynced()) this.#handleTabsChange();
-			this.#isTabsChangeQueued = false;
-		});
-	}
-	#lastActiveId;
-	#handleTabsChange() {
-		const validTabs = this._validTabs;
-		let newActiveId = this.activeid;
-		if (!validTabs.length || newActiveId && !validTabs.find((t) => t.id === newActiveId)) newActiveId = void 0;
-		if (!newActiveId && validTabs.length) newActiveId = validTabs[0].id;
-		if (this.activeid !== newActiveId) {
-			this.activeid = newActiveId;
-			this.$emit("change", this.activetab);
-		}
-		this.#updateSlottedChildren();
-		if (this.activeid !== this.#lastActiveId) {
-			if (this.activetab) {
-				const shouldAnimate = this.#lastActiveId !== void 0;
-				this.#scrollToTab(this.activetab, shouldAnimate);
-				this.#moveActiveIndicator(shouldAnimate);
-			}
-			this.#lastActiveId = this.activeid;
-		} else this.#moveActiveIndicator(this.#isTransitioningTransform);
-	}
-	/** Updates the tabs and their panels according to the current state of the component. */
-	#updateSlottedChildren() {
-		for (const [index, tab] of this._pairedTabs.entries()) {
-			const panel = this.tabpanels[index];
-			const isActiveTab = tab.id === this.activeid;
-			/* v8 ignore else -- @preserve */
-			if (tab instanceof Tab) tab.active = isActiveTab;
-			tab.setAttribute("aria-controls", panel.id);
-			tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
-			if (isActiveTab && this.connotation) tab.setAttribute("connotation", this.connotation);
-			else tab.removeAttribute("connotation");
-			tab.classList.toggle("vertical", this.orientation === TabsOrientation.vertical);
-			tab.style[gridProperty(oppositeOrientation(this.orientation))] = "";
-			tab.style[gridProperty(this.orientation)] = `${index + 1}`;
-			panel.setAttribute("aria-labelledby", tab.id);
-			panel.hidden = !isActiveTab;
-		}
-	}
-	#onTabClick;
-	#onTabKeyDown;
-	/**
-	* Adjusts the active index by numerical increments.
-	* Only enabled tabs are considered.
-	*/
-	adjust(adjustment) {
-		const focusableTabs = this._validTabs;
-		const currentActiveTabIndex = focusableTabs.findIndex((t) => t.id === this.activeid);
-		if (currentActiveTabIndex === -1) return;
-		const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
-		this.#setActiveTabDueToUserInteraction(focusableTabs[nextTabIndex]);
-	}
-	#isTransitioningTransform;
-	/** @internal */
-	_onActiveIndicatorTransitionend(event) {
-		/* v8 ignore else -- @preserve */
-		if (event.propertyName === "transform") this.#isTransitioningTransform = false;
-	}
-	#cancelAnimationIfNeeded() {
-		this.#isTransitioningTransform = false;
-		this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-	}
-	#moveActiveIndicator(shouldAnimate) {
-		const activeTabIndex = this._pairedTabs.findIndex((tab) => tab.id === this.activeid);
-		if (activeTabIndex === -1) return;
-		const indicatorEl = this.activeIndicatorRef;
-		const currentOffset = indicatorEl[offsetProperty(this.orientation)];
-		indicatorEl.style[gridProperty(this.orientation)] = `${activeTabIndex + 1}`;
-		const targetOffset = indicatorEl[offsetProperty(this.orientation)];
-		indicatorEl.style[gridProperty(this.orientation)] = "";
-		const relativeOffset = targetOffset - currentOffset;
-		const currentTransform = indicatorEl.style.transform;
-		const targetTransform = `${translateProperty(this.orientation)}(${relativeOffset}px)`;
-		if (shouldAnimate) {
-			indicatorEl.classList.add("activeIndicatorTransition");
-			if (currentTransform !== targetTransform) this.#isTransitioningTransform = true;
-		} else this.#cancelAnimationIfNeeded();
-		indicatorEl.style.transform = targetTransform;
-		indicatorEl.style.setProperty(ACTIVE_TAB_WIDTH, `${this.tabs[activeTabIndex].getBoundingClientRect().width}px`);
-	}
-	/** @internal */
-	connotationChanged() {
-		this._registerTabsChange();
-	}
-	#updateScrollStatus() {
-		this.#tabListScrollWrapper.dispatchEvent(new Event("scroll"));
-	}
-	#resizeObserver;
+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._registerTabsChange();
-		requestAnimationFrame(() => this.#updateScrollStatus());
-		this.#resizeObserver = new ResizeObserver(() => {
-			this.#moveActiveIndicator(this.#isTransitioningTransform);
-			this.#updateScrollStatus();
-		});
-		this.#resizeObserver.observe(this.#tabListScrollWrapper);
-		this.#resizeObserver.observe(this.tablist);
+		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.#resizeObserver.disconnect();
+		this.removeEventListener("sort", this.#sortHandler);
 	}
-	get #tabListWrapper() {
-		return this.shadowRoot.querySelector(".tablist-wrapper");
-	}
-	get #tabListScrollWrapper() {
-		return this.tablist.parentElement;
+};
+//#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 Localized(DelegatesAria(VividElement)) {
+	get #nextDirection() {
+		if (!this.direction || this.direction === "none") return "asc";
+		else if (this.direction === "asc") return "desc";
+		else return "none";
 	}
-	#scrollToTab(tab, shouldAnimate = true) {
-		const index = this.tabs.findIndex((t) => t === tab);
-		let left = 0;
-		let top = 0;
-		if (this.orientation === TabsOrientation.vertical) {
-			if (index === this.tabs.length - 1) top = this.#tabListWrapper.scrollHeight;
-			if (index > 0 && index < this.tabs.length - 1) top = tab.offsetTop - this.#tabListWrapper.offsetHeight / 2 + tab.offsetHeight / 2;
-		} else {
-			if (index === this.tabs.length - 1) left = this.#tabListWrapper.scrollWidth;
-			if (index > 0 && index < this.tabs.length - 1) left = tab.offsetLeft - this.#tabListWrapper.offsetWidth / 2 + tab.offsetWidth / 2;
-		}
-		this.#tabListWrapper.scrollTo({
-			top,
-			left,
-			behavior: shouldAnimate ? "smooth" : "instant"
-		});
+	/** 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], Tabs.prototype, "orientation", void 0);
-__decorate([observable], Tabs.prototype, "tabs", void 0);
-__decorate([observable], Tabs.prototype, "tabpanels", void 0);
-__decorate([attr], Tabs.prototype, "activeid", void 0);
-__decorate([observable], Tabs.prototype, "activeIndicatorRef", void 0);
-__decorate([observable], Tabs.prototype, "tablist", void 0);
-__decorate([attr], Tabs.prototype, "connotation", void 0);
-__decorate([attr], Tabs.prototype, "gutters", void 0);
-__decorate([attr({
-	mode: "boolean",
-	attribute: "scrollable-panel"
-})], Tabs.prototype, "scrollablePanel", void 0);
-__decorate([attr({ attribute: "tabs-layout" })], Tabs.prototype, "tabsLayout", void 0);
-__decorate([observable], Tabs.prototype, "_actionItemsSlottedContent", void 0);
-__decorate([attr({ mode: "boolean" })], Tabs.prototype, "activeindicator", void 0);
+__decorate([attr], TableSortingButton.prototype, "direction", void 0);
 //#endregion
-//#region src/lib/tabs/tabs.template.ts
-function setNoScrollState(scrollShadow, scrollWrapper) {
-	if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
-		scrollShadow.classList.toggle("start-scroll", false);
-		scrollShadow.classList.toggle("end-scroll", false);
-		return true;
+//#region src/lib/table/table-sorting-button.template.ts
+var getSortStateKey = (x) => {
+	switch (x.direction) {
+		case "asc": return "ascending";
+		case "desc": return "descending";
+		default: return "none";
 	}
-	return false;
-}
-function addStartShadow(scrollShadow, scrollWrapper) {
-	scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
-}
-function addEndShadow(scrollShadow, scrollWrapper) {
-	scrollShadow.classList.toggle("end-scroll", scrollWrapper.scrollLeft + 1 < scrollWrapper.scrollWidth - scrollWrapper.clientWidth);
-}
-function setShadowWhenScrollTabs(_, { event }) {
-	const scrollWrapper = event.currentTarget;
-	const scrollShadow = scrollWrapper.parentElement;
-	if (setNoScrollState(scrollShadow, scrollWrapper)) return;
-	addStartShadow(scrollShadow, scrollWrapper);
-	addEndShadow(scrollShadow, scrollWrapper);
-}
+};
+var getSortAnnouncement = (x) => {
+	const key = getSortStateKey(x);
+	const { sortStatus, sortInstruction } = x.locale.tableSortingButton;
+	return `${sortStatus[key]} ${sortInstruction[key]}`;
+};
+var TableSortingButtonTemplate = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return html`
+		<template @click="${(x) => x.toggleSort()}">
+			<button
+				type="button"
+				${delegateAria({ ariaLabel: (x) => x.ariaLabel || getSortAnnouncement(x) })}
+			>
+				${(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/tabs/definition.ts
+//#region src/lib/table/definition.ts
 /** @internal */
-var tabsDefinition = defineVividComponent("tabs", Tabs, html`
-	<template>
-		<div
-			class="${(x) => classNames("base", `layout-${x.tabsLayout ?? "align-start"}`, [`connotation-${x.connotation}`, Boolean(x.connotation)], [`orientation-${x.orientation}`, Boolean(x.orientation)], `gutters-${x.gutters ?? "small"}`, ["scroll", x.scrollablePanel], ["has-action-items", Boolean(x._actionItemsSlottedContent.length)])}"
-		>
-			<div class="tabs">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${ref("tablist")}>
-							<slot name="tab" ${ref("_tabsSlot")} ${slotted("tabs")}></slot>
-							<div
-								${ref("activeIndicatorRef")}
-								class="active-indicator"
-								@transitionend="${(x, c) => x._onActiveIndicatorTransitionend(c.event)}"
-							></div>
-						</div>
-					</div>
-				</div>
-				<slot
-					name="action-items"
-					${slotted("_actionItemsSlottedContent")}
-				></slot>
-			</div>
-			<div class="tabpanel" part="tab-panel">
-				<slot
-					name="tabpanel"
-					${ref("_tabPanelsSlot")}
-					${slotted("tabpanels")}
-				></slot>
-			</div>
-		</div>
-	</template>
-`, [tabDefinition, tabPanelDefinition], { styles: tabs_default });
+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 });
+/** @internal */
+var tableDefinition = defineVividComponent("table", Table, TableTemplate, [
+	tableCellDefinition,
+	tableHeaderCellDefinition,
+	tableRowDefinition,
+	tableHeadDefinition,
+	tableBodyDefinition,
+	tableSortingButtonDefinition
+], { styles: table_default });
 /**
-* Registers the tabs elements with the design system.
+* Registers the table element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTabs = createRegisterFunction(tabsDefinition);
+var registerTable = createRegisterFunction(tableDefinition);
 //#endregion
-export { TabsGutters as i, tabsDefinition as n, Tabs as r, registerTabs 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 };