@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition54.js

@@ -1,34 +1,455 @@
-import { V as VividElement, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
+import { T as Tab, t as tabDefinition } from './definition53.js';
+import { t as tabPanelDefinition } from './definition52.js';
+import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { i as keyArrowLeft, h as keyArrowRight, e as keyArrowUp, f as keyArrowDown, d as keyEnd, g as keyHome } from './key-codes.js';
+import { u as uniqueId } from './strings.js';
+import { l as limit } from './numbers.js';
 import { c as classNames } from './class-names.js';
+import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
 
-const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
+const styles = ":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;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.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{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.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);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.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%)}.tablist-wrapper{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{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.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{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}";
 
-class TagGroup extends DelegatesAria(VividElement) {
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
+const TabsGutters = {
+  None: "none",
+  Small: "small"
+};
+const TabsOrientation = {
+  vertical: "vertical",
+  horizontal: "horizontal"
+};
+const oppositeOrientation = (orientation) => orientation === TabsOrientation.horizontal ? TabsOrientation.vertical : TabsOrientation.horizontal;
+const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
+const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
+const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
+const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("hidden");
+class Tabs extends VividElement {
+  constructor() {
+    super(...arguments);
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    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, keyArrowRight] : [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 = [];
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.activeindicator = true;
+  }
+  /**
+   * @internal
+   */
+  orientationChanged() {
+    this._registerTabsChange();
+    if (this.$fastController.isConnected) {
+      DOM.queueUpdate(() => 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();
+  }
+  /**
+   * 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
+   * @public
+   */
+  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.#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;
+      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.
+   * @public
+   * @remarks
+   */
+  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) {
+    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"
+    });
+  }
 }
+__decorateClass([
+  attr
+], Tabs.prototype, "orientation");
+__decorateClass([
+  observable
+], Tabs.prototype, "tabs");
+__decorateClass([
+  observable
+], Tabs.prototype, "tabpanels");
+__decorateClass([
+  attr
+], Tabs.prototype, "activeid");
+__decorateClass([
+  observable
+], Tabs.prototype, "activeIndicatorRef");
+__decorateClass([
+  observable
+], Tabs.prototype, "tablist");
+__decorateClass([
+  attr
+], Tabs.prototype, "connotation");
+__decorateClass([
+  attr
+], Tabs.prototype, "gutters");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "scrollable-panel" })
+], Tabs.prototype, "scrollablePanel");
+__decorateClass([
+  attr({ attribute: "tabs-layout" })
+], Tabs.prototype, "tabsLayout");
+__decorateClass([
+  observable
+], Tabs.prototype, "_actionItemsSlottedContent");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tabs.prototype, "activeindicator");
 
-const getClasses = (_) => classNames("base");
-const TagGroupTemplate = html`
-	<div
-		class="${getClasses}"
-		${delegateAria({
-  role: "listbox",
-  ariaOrientation: "horizontal"
-})}
-	>
-		<slot></slot>
-	</div>
+const getClasses = ({
+  connotation,
+  orientation,
+  gutters,
+  scrollablePanel,
+  tabsLayout,
+  _actionItemsSlottedContent
+}) => classNames(
+  "base",
+  `layout-${tabsLayout ?? "align-start"}`,
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`orientation-${orientation}`, Boolean(orientation)],
+  `gutters-${gutters ?? "small"}`,
+  ["scroll", Boolean(scrollablePanel)],
+  ["has-action-items", Boolean(_actionItemsSlottedContent.length)]
+);
+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);
+}
+const TabsTemplate = html`
+	<template>
+		<div class="${getClasses}">
+			<div class="tabs">
+				<div class="scroll-shadow">
+					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
+						<div class="tablist" role="tablist" ${ref("tablist")}>
+							<slot name="tab" ${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" ${slotted("tabpanels")}></slot>
+			</div>
+		</div>
+	</template>
 `;
 
-const tagGroupDefinition = defineVividComponent(
-  "tag-group",
-  TagGroup,
-  TagGroupTemplate,
-  [],
+const tabsDefinition = defineVividComponent(
+  "tabs",
+  Tabs,
+  TabsTemplate,
+  [tabDefinition, tabPanelDefinition],
   {
     styles
   }
 );
-const registerTagGroup = createRegisterFunction(tagGroupDefinition);
+const registerTabs = createRegisterFunction(tabsDefinition);
 
-export { TagGroup as T, registerTagGroup as r, tagGroupDefinition as t };
+export { Tabs as T, TabsGutters as a, registerTabs as r, tabsDefinition as t };

package/shared/definition55.cjs

@@ -1,152 +1,38 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
-const affix = require('./affix.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Tag extends delegatesAria.DelegatesAria(affix.AffixIcon(vividElement.VividElement)) {
-  constructor() {
-    super(...arguments);
-    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 && this.parentElement.removeChild(this);
-  }
-  #select;
-  handleKeydown(e) {
-    if (e.key === "Enter") {
-      this.#select();
-    }
-    if (e.key === "Delete" || e.key === "Backspace") {
-      this.remove();
-    }
-    return true;
-  }
-  handleClick() {
-    this.#select();
-  }
-}
-__decorateClass([
-  vividElement.attr
-], Tag.prototype, "connotation");
-__decorateClass([
-  vividElement.attr
-], Tag.prototype, "shape");
-__decorateClass([
-  vividElement.attr
-], Tag.prototype, "appearance");
-__decorateClass([
-  vividElement.attr
-], Tag.prototype, "label");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tag.prototype, "removable");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tag.prototype, "disabled");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tag.prototype, "selectable");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tag.prototype, "selected");
-
-const styles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_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-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:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_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-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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.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{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;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);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.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(--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}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}";
+const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
 
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  selectable,
-  removable,
-  selected
-}) => classNames.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 vividElement.html`
-	<span
-		aria-hidden="true"
-		class="dismiss-button"
-		@click="${(x) => x.remove()}">
-		<${iconTag} name="close-line"></${iconTag}>
-	</span>`;
+class TagGroup extends delegatesAria.DelegatesAria(vividElement.VividElement) {
 }
-const tagTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(definition.Icon);
-  return vividElement.html` <span
+
+const getClasses = (_) => classNames.classNames("base");
+const TagGroupTemplate = vividElement.html`
+	<div
 		class="${getClasses}"
 		${delegatesAria.delegateAria({
-    role: "option",
-    ariaDisabled: (x) => x.disabled,
-    ariaSelected: (x) => x.selectable
-  })}
-		tabindex="${(x) => x.disabled ? null : 0}"
-		@keydown="${(x, c) => x.handleKeydown(c.event)}"
-		@click="${(x) => x.handleClick()}"
+  role: "listbox",
+  ariaOrientation: "horizontal"
+})}
 	>
-		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-		${when.when(
-    (x) => x.label,
-    (x) => vividElement.html`<span class="label">${x.label}</span>`
-  )}
-		${when.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
-		${when.when(
-    (x) => x.selectable && x.selected,
-    vividElement.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
-  )}
-	</span>`;
-};
+		<slot></slot>
+	</div>
+`;
 
-const tagDefinition = vividElement.defineVividComponent(
-  "tag",
-  Tag,
-  tagTemplate,
-  [definition.iconDefinition],
+const tagGroupDefinition = vividElement.defineVividComponent(
+  "tag-group",
+  TagGroup,
+  TagGroupTemplate,
+  [],
   {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
+    styles
   }
 );
-const registerTag = vividElement.createRegisterFunction(tagDefinition);
+const registerTagGroup = vividElement.createRegisterFunction(tagGroupDefinition);
 
-exports.Tag = Tag;
-exports.registerTag = registerTag;
-exports.tagDefinition = tagDefinition;
+exports.TagGroup = TagGroup;
+exports.registerTagGroup = registerTagGroup;
+exports.tagGroupDefinition = tagGroupDefinition;