@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition74.js

@@ -1,38 +1,330 @@
 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 __decorate } from "./decorate.js";
+import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
+import { n as tabPanelDefinition } from "./definition71.js";
+import { n as tabDefinition, r as Tab } from "./definition72.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}}";
 //#endregion
-//#region src/lib/tag-group/tag-group.ts
+//#region src/lib/tabs/tabs.ts
+var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
+var TabsGutters = {
+	None: "none",
+	Small: "small"
+};
+var TabsOrientation = {
+	vertical: "vertical",
+	horizontal: "horizontal"
+};
+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]);
 /**
 * @public
-* @component tag-group
-* @slot - The content of the tag-group.
+* @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
 */
-var TagGroup = class extends DelegatesAria(VividElement) {};
+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;
+	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);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver.disconnect();
+	}
+	get #tabListWrapper() {
+		return this.shadowRoot.querySelector(".tablist-wrapper");
+	}
+	get #tabListScrollWrapper() {
+		return this.tablist.parentElement;
+	}
+	#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"
+		});
+	}
+};
+__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);
 //#endregion
-//#region src/lib/tag-group/tag-group.template.ts
-var getClasses = (_) => classNames("base");
+//#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;
+	}
+	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);
+}
 //#endregion
-//#region src/lib/tag-group/definition.ts
+//#region src/lib/tabs/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 });
 /**
-* @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.
+* Registers the tabs elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTagGroup = createRegisterFunction(tagGroupDefinition);
+var registerTabs = createRegisterFunction(tabsDefinition);
 //#endregion
-export { tagGroupDefinition as n, TagGroup as r, registerTagGroup as t };
+export { TabsGutters as i, tabsDefinition as n, Tabs as r, registerTabs as t };

package/unbundled/definition75.cjs

@@ -1,156 +1,55 @@
 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_affix = require("./affix.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
-const require_localized = require("./localized.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/tag/tag.ts
+//#region src/lib/tag-group/tag-group.scss?inline
+var tag_group_default = ".base{flex-wrap:wrap;gap:8px;display:flex}";
+//#endregion
+//#region src/lib/tag-group/tag-group.ts
 /**
 * @public
-* @component tag
-* @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<undefined>} selected-change - Fires when the selected state changes
-* @event {CustomEvent<undefined>} removed - Fires when the tag is removed
-* @testSelector byLabel byLabel
-* @testAction click click #base
-* @testAction remove click #dismissButton
-* @testAction select toggleTag true
-* @testAction unselect toggleTag false
-* @testQuery selected selected true
-* @testQuery unselected selected false
-* @testQuery disabled disabled true
-* @testQuery !disabled disabled false
-* @testRef base shadow .base
-* @testRef dismissButton shadow .dismiss-button
+* @component tag-group
+* @slot - The content of the tag-group.
 */
-var Tag = class extends require_localized.Localized(require_delegates_aria.DelegatesAria(require_affix.AffixIcon(require_vivid_element.VividElement))) {
-	constructor(..._args) {
-		super(..._args);
-		this.removable = false;
-		this.disabled = false;
-		this.selectable = false;
-		this.selected = false;
-		this.#select = () => {
-			if (!this.selectable || this.disabled) return;
-			this.selected = !this.selected;
-			this.$emit("selected-change");
-		};
-	}
-	remove() {
-		if (!this.removable || this.selectable) return;
-		this.$emit("removed");
-		this.parentElement?.removeChild(this);
-	}
-	#select;
-	/**
-	* @internal
-	*/
-	handleKeydown(e) {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			this.#select();
-		}
-		if (e.key === "Delete" || e.key === "Backspace") {
-			e.preventDefault();
-			this.remove();
-		}
-		return true;
-	}
-	/**
-	* @internal
-	*/
-	handleClick() {
-		this.#select();
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "shape", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Tag.prototype, "label", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "removable", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "disabled", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "selectable", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tag.prototype, "selected", void 0);
+var TagGroup = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {};
 //#endregion
-//#region src/lib/tag/tag.scss?inline
-var tag_default = ".base.connotation-cta{--_connotation-color-primary:var(--vvd-tag-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-tag-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-tag-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-tag-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-tag-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-tag-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-tag-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tag-cta-faint,var(--vvd-color-cta-50));--_connotation-color-dim:var(--vvd-tag-cta-dim,var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary:var(--vvd-tag-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-tag-success-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-tag-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-tag-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-tag-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-tag-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-tag-success-firm-all,var(--vvd-color-success-600));--_connotation-color-faint:var(--vvd-tag-success-faint,var(--vvd-color-success-50));--_connotation-color-dim:var(--vvd-tag-success-dim,var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-tag-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-tag-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-tag-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-tag-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-tag-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-tag-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-tag-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-faint:var(--vvd-tag-alert-faint,var(--vvd-color-alert-50));--_connotation-color-dim:var(--vvd-tag-alert-dim,var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-tag-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-tag-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-tag-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-tag-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-tag-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-tag-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-firm:var(--vvd-tag-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-tag-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-faint:var(--vvd-tag-warning-faint,var(--vvd-color-warning-50));--_connotation-color-dim:var(--vvd-tag-warning-dim,var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary:var(--vvd-tag-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-tag-information-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-tag-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-tag-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-tag-information-fierce,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-tag-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-tag-information-firm-all,var(--vvd-color-information-600));--_connotation-color-faint:var(--vvd-tag-information-faint,var(--vvd-color-information-50));--_connotation-color-dim:var(--vvd-tag-information-dim,var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-tag-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-tag-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-tag-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-tag-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-tag-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-tag-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-tag-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-faint:var(--vvd-tag-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-dim:var(--vvd-tag-announcement-dim,var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-tag-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tag-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-tag-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-tag-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-tag-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-tag-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-tag-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-tag-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-tag-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base:disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--vvd-color-canvas);--_appearance-color-fill:var(--_connotation-color-firm);--_appearance-color-outline:transparent}.base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base: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))}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-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))}";
+//#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/tag.template.ts
-var getClasses = ({ connotation, appearance, shape, disabled, selectable, removable, selected }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", disabled], ["selectable", selectable], ["selected", selectable && selected], ["removable", removable && !selectable], [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
-function renderDismissButton(iconTag) {
-	return _microsoft_fast_element.html`
-	<button
-		class="dismiss-button"
-		aria-label="${(x) => x.locale.tag.remove(x.label)}"
-		?disabled="${(x) => x.disabled}"
-		@click="${(x) => x.remove()}">
-		<${iconTag} name="close-line"></${iconTag}>
-	</button>`;
-}
-var tagTemplate = (context) => {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	const iconTag = context.tagFor(require_definition.Icon);
-	const content = _microsoft_fast_element.html`
-		${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-		${(0, _microsoft_fast_element.when)((x) => x.label, (x) => _microsoft_fast_element.html`<span class="label">${x.label}</span>`)}
-		${(0, _microsoft_fast_element.when)((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
-		${(0, _microsoft_fast_element.when)((x) => x.selectable && x.selected, _microsoft_fast_element.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`)}
-	`;
-	return _microsoft_fast_element.html`
-		${(0, _microsoft_fast_element.when)((x) => x.selectable, _microsoft_fast_element.html`<button
-				class="${getClasses}"
-				${require_delegates_aria.delegateAria({ ariaPressed: (x) => x.selected })}
-				?disabled="${(x) => x.disabled}"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				@click="${(x) => x.handleClick()}"
-			>
-				${content}
-			</button>`)}
-		${(0, _microsoft_fast_element.when)((x) => !x.selectable, _microsoft_fast_element.html`<span
-				class="${getClasses}"
-				${require_delegates_aria.delegateAria()}
-				tabindex="${(x) => x.disabled || x.removable ? null : 0}"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				@click="${(x) => x.handleClick()}"
-			>
-				${content}
-			</span>`)}
-	`;
-};
-//#endregion
-//#region src/lib/tag/definition.ts
-/**
-* @internal
-*/
-var tagDefinition = require_vivid_element.defineVividComponent("tag", Tag, tagTemplate, [require_definition.iconDefinition], {
-	styles: tag_default,
-	shadowOptions: { delegatesFocus: true }
-});
+//#region src/lib/tag-group/definition.ts
+/** @internal */
+var tagGroupDefinition = require_vivid_element.defineVividComponent("tag-group", TagGroup, TagGroupTemplate, [], { styles: tag_group_default });
 /**
-* Registers the tag elements with the design system.
+* Registers the tag-group element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTag = require_vivid_element.createRegisterFunction(tagDefinition);
+var registerTagGroup = require_vivid_element.createRegisterFunction(tagGroupDefinition);
 //#endregion
-Object.defineProperty(exports, "Tag", {
+Object.defineProperty(exports, "TagGroup", {
 	enumerable: true,
 	get: function() {
-		return Tag;
+		return TagGroup;
 	}
 });
-Object.defineProperty(exports, "registerTag", {
+Object.defineProperty(exports, "registerTagGroup", {
 	enumerable: true,
 	get: function() {
-		return registerTag;
+		return registerTagGroup;
 	}
 });
-Object.defineProperty(exports, "tagDefinition", {
+Object.defineProperty(exports, "tagGroupDefinition", {
 	enumerable: true,
 	get: function() {
-		return tagDefinition;
+		return tagGroupDefinition;
 	}
 });