@vonage/vivid 4.31.0 → 5.1.0

package/tabs/index.js

@@ -1,3 +1,321 @@
-import { r as registerTabs } from '../shared/definition54.js';
-
-registerTabs();
+import { T as x, t as k } from "../bundled/definition20.js";
+import { t as T } from "../bundled/definition21.js";
+import { V as _, D as z, a as b, o as d, h as C, c as I, d as A } from "../bundled/vivid-element.js";
+import { h as $, g as S, c as L, b as E, k as P, a as O } from "../bundled/key-codes.js";
+import { u } from "../bundled/strings.js";
+import { l as D } from "../bundled/numbers.js";
+import { c as R } from "../bundled/class-names.js";
+import { r as h } from "../bundled/ref.js";
+import { s as p } from "../bundled/slotted.js";
+const W = ':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}';
+var N = Object.defineProperty, n = (i, t, a, e) => {
+  for (var s = void 0, o = i.length - 1, c; o >= 0; o--)
+    (c = i[o]) && (s = c(t, a, s) || s);
+  return s && N(t, a, s), s;
+};
+const q = "--_tabs-active-tab-inline-size", l = {
+  vertical: "vertical",
+  horizontal: "horizontal"
+}, B = (i) => i === l.horizontal ? l.vertical : l.horizontal, v = (i) => i === l.horizontal ? "gridColumn" : "gridRow", H = (i) => i === l.horizontal ? "translateX" : "translateY", g = (i) => i === l.horizontal ? "offsetLeft" : "offsetTop", j = (i) => i.getAttribute("aria-disabled") !== "true" && !i.disabled && !i.hasAttribute("hidden"), m = (i, t) => i.length === t.length && i.every((a, e) => a === t[e]);
+class r extends _ {
+  constructor() {
+    super(...arguments), this.orientation = l.horizontal, this.tabs = [], this.tabpanels = [], this.#e = !1, this.#i = void 0, this.#n = (t) => {
+      const a = t.currentTarget;
+      this._validTabs.includes(a) && this.#r(a);
+    }, this.#l = (t) => {
+      const a = this._validTabs, e = this.activetab;
+      if (!e)
+        return;
+      const [s, o] = this.orientation === l.horizontal ? [$, S] : [L, E], c = {
+        [s]: () => a[(a.indexOf(e) - 1 + a.length) % a.length],
+        [o]: () => a[(a.indexOf(e) + 1) % a.length],
+        [O]: () => a[0],
+        [P]: () => a[a.length - 1]
+      };
+      c[t.key] && (t.preventDefault(), this.#r(c[t.key]()));
+    }, this.#t = !1, this.scrollablePanel = !1, this._actionItemsSlottedContent = [], this.activeindicator = !0;
+  }
+  /**
+   * @internal
+   */
+  orientationChanged() {
+    this._registerTabsChange(), this.$fastController.isConnected && z.queueUpdate(() => this.#s(!1));
+  }
+  /**
+   * @internal
+   */
+  tabsChanged() {
+    for (const t of this.tabs)
+      t.id || (t.id = `tab-${u()}`), t.addEventListener("click", this.#n), t.addEventListener("keydown", this.#l);
+    this._registerTabsChange();
+  }
+  /**
+   * @internal
+   */
+  tabpanelsChanged() {
+    for (const t of this.tabpanels)
+      t.id || (t.id = `panel-${u()}`);
+    this._registerTabsChange();
+  }
+  #d() {
+    return m(this.tabs, this._tabsSlot.assignedNodes()) && m(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(j);
+  }
+  /**
+   * @internal
+   */
+  activeidChanged() {
+    this._registerTabsChange();
+  }
+  /**
+   * A reference to the active tab
+   * @public
+   */
+  get activetab() {
+    return this._validTabs.find((t) => t.id === this.activeid) ?? null;
+  }
+  #r(t) {
+    this.activeid = t.id, t.focus(), this.$emit("change", t);
+  }
+  #e;
+  /**
+   * 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() {
+    this.#e || (this.#e = !0, window.queueMicrotask(() => {
+      this.$fastController.isConnected && this.#d() && this.#h(), this.#e = !1;
+    }));
+  }
+  #i;
+  #h() {
+    const t = this._validTabs;
+    let a = this.activeid;
+    if ((!t.length || a && !t.find((e) => e.id === a)) && (a = void 0), !a && t.length && (a = t[0].id), this.activeid !== a && (this.activeid = a, this.$emit("change", this.activetab)), this.#v(), this.activeid !== this.#i) {
+      if (this.activetab) {
+        const e = this.#i !== void 0;
+        this.#f(this.activetab, e), this.#s(e);
+      }
+      this.#i = this.activeid;
+    } else
+      this.#s(this.#t);
+  }
+  /**
+   * Updates the tabs and their panels according to the current state of the component.
+   */
+  #v() {
+    for (const [t, a] of this._pairedTabs.entries()) {
+      const e = this.tabpanels[t], s = a.id === this.activeid;
+      a instanceof x && (a.active = s), a.setAttribute("aria-controls", e.id), a.setAttribute("tabindex", s ? "0" : "-1"), s && this.connotation ? a.setAttribute("connotation", this.connotation) : a.removeAttribute("connotation"), a.classList.toggle(
+        "vertical",
+        this.orientation === l.vertical
+      ), a.style[v(B(this.orientation))] = "", a.style[v(this.orientation)] = `${t + 1}`, e.setAttribute("aria-labelledby", a.id), e.hidden = !s;
+    }
+  }
+  #n;
+  #l;
+  /**
+   * Adjusts the active index by numerical increments.
+   * Only enabled tabs are considered.
+   * @public
+   * @remarks
+   */
+  adjust(t) {
+    const a = this._validTabs, e = a.findIndex(
+      (o) => o.id === this.activeid
+    );
+    if (e === -1)
+      return;
+    const s = D(
+      0,
+      a.length - 1,
+      e + t
+    );
+    this.#r(a[s]);
+  }
+  #t;
+  /**
+   * @internal
+   */
+  _onActiveIndicatorTransitionend(t) {
+    t.propertyName === "transform" && (this.#t = !1);
+  }
+  #p() {
+    this.#t = !1, this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+  }
+  #s(t) {
+    const a = this._pairedTabs.findIndex(
+      (y) => y.id === this.activeid
+    );
+    if (a === -1)
+      return;
+    const e = this.activeIndicatorRef, s = e[g(this.orientation)];
+    e.style[v(this.orientation)] = `${a + 1}`;
+    const o = e[g(this.orientation)];
+    e.style[v(this.orientation)] = "";
+    const c = o - s, w = e.style.transform, f = `${H(
+      this.orientation
+    )}(${c}px)`;
+    t ? (e.classList.add("activeIndicatorTransition"), w !== f && (this.#t = !0)) : this.#p(), e.style.transform = f, e.style.setProperty(
+      q,
+      this.tabs[a].getBoundingClientRect().width + "px"
+    );
+  }
+  /**
+   * @internal
+   */
+  connotationChanged() {
+    this._registerTabsChange();
+  }
+  #c() {
+    this.#b.dispatchEvent(new Event("scroll"));
+  }
+  #o;
+  connectedCallback() {
+    super.connectedCallback(), this._registerTabsChange(), requestAnimationFrame(() => this.#c()), this.#o = new ResizeObserver(() => {
+      this.#s(this.#t), this.#c();
+    }), this.#o.observe(this.#b), this.#o.observe(this.tablist);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#o.disconnect();
+  }
+  get #a() {
+    return this.shadowRoot.querySelector(".tablist-wrapper");
+  }
+  get #b() {
+    return this.tablist.parentElement;
+  }
+  #f(t, a = !0) {
+    const e = this.tabs.findIndex((c) => c === t);
+    let s = 0, o = 0;
+    this.orientation === l.vertical ? (e === this.tabs.length - 1 && (o = this.#a.scrollHeight), e > 0 && e < this.tabs.length - 1 && (o = t.offsetTop - this.#a.offsetHeight / 2 + t.offsetHeight / 2)) : (e === this.tabs.length - 1 && (s = this.#a.scrollWidth), e > 0 && e < this.tabs.length - 1 && (s = t.offsetLeft - this.#a.offsetWidth / 2 + t.offsetWidth / 2)), this.#a.scrollTo({
+      top: o,
+      left: s,
+      behavior: a ? "smooth" : "instant"
+    });
+  }
+}
+n([
+  b
+], r.prototype, "orientation");
+n([
+  d
+], r.prototype, "tabs");
+n([
+  d
+], r.prototype, "tabpanels");
+n([
+  b
+], r.prototype, "activeid");
+n([
+  d
+], r.prototype, "activeIndicatorRef");
+n([
+  d
+], r.prototype, "tablist");
+n([
+  b
+], r.prototype, "connotation");
+n([
+  b
+], r.prototype, "gutters");
+n([
+  b({ mode: "boolean", attribute: "scrollable-panel" })
+], r.prototype, "scrollablePanel");
+n([
+  b({ attribute: "tabs-layout" })
+], r.prototype, "tabsLayout");
+n([
+  d
+], r.prototype, "_actionItemsSlottedContent");
+n([
+  b({ mode: "boolean" })
+], r.prototype, "activeindicator");
+const V = ({
+  connotation: i,
+  orientation: t,
+  gutters: a,
+  scrollablePanel: e,
+  tabsLayout: s,
+  _actionItemsSlottedContent: o
+}) => R(
+  "base",
+  `layout-${s ?? "align-start"}`,
+  [`connotation-${i}`, !!i],
+  [`orientation-${t}`, !!t],
+  `gutters-${a ?? "small"}`,
+  ["scroll", !!e],
+  ["has-action-items", !!o.length]
+);
+function F(i, t) {
+  return t.scrollWidth <= t.clientWidth ? (i.classList.toggle("start-scroll", !1), i.classList.toggle("end-scroll", !1), !0) : !1;
+}
+function K(i, t) {
+  i.classList.toggle("start-scroll", t.scrollLeft > 0);
+}
+function M(i, t) {
+  i.classList.toggle(
+    "end-scroll",
+    t.scrollLeft + 1 < t.scrollWidth - t.clientWidth
+  );
+}
+function U(i, { event: t }) {
+  const a = t.currentTarget, e = a.parentElement;
+  F(e, a) || (K(e, a), M(e, a));
+}
+const Q = C`
+	<template>
+		<div class="${V}">
+			<div class="tabs">
+				<div class="scroll-shadow">
+					<div class="tablist-wrapper" @scroll="${U}">
+						<div class="tablist" role="tablist" ${h("tablist")}>
+							<slot name="tab" ${h("_tabsSlot")} ${p("tabs")}></slot>
+							<div
+								${h("activeIndicatorRef")}
+								class="active-indicator"
+								@transitionend="${(i, t) => i._onActiveIndicatorTransitionend(
+  t.event
+)}"
+							></div>
+						</div>
+					</div>
+				</div>
+				<slot
+					name="action-items"
+					${p("_actionItemsSlottedContent")}
+				></slot>
+			</div>
+			<div class="tabpanel" part="tab-panel">
+				<slot
+					name="tabpanel"
+					${h("_tabPanelsSlot")}
+					${p("tabpanels")}
+				></slot>
+			</div>
+		</div>
+	</template>
+`, X = A(
+  "tabs",
+  r,
+  Q,
+  [k, T],
+  {
+    styles: W
+  }
+), Y = I(X);
+Y();

package/tag/definition.cjs

@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const affix = require('../unbundled/affix.cjs');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+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 localized.Localized(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([
+  fastElement.attr
+], Tag.prototype, "connotation");
+__decorateClass([
+  fastElement.attr
+], Tag.prototype, "shape");
+__decorateClass([
+  fastElement.attr
+], Tag.prototype, "appearance");
+__decorateClass([
+  fastElement.attr
+], Tag.prototype, "label");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Tag.prototype, "removable");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Tag.prototype, "disabled");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Tag.prototype, "selectable");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Tag.prototype, "selected");
+
+const styles = ".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:not(.connotation-cta){--_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-faint);--_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-faint);--_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-dim);--_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-dim);--_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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_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{--_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-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_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*(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;padding-inline:8px 1px}.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{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus{--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))}";
+
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  selectable,
+  removable,
+  selected
+}) => fastWebUtilities.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 fastElement.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>`;
+}
+const tagTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html` <span
+		class="${getClasses}"
+		${delegatesAria.delegateAria({
+    role: "option",
+    ariaDisabled: (x) => x.disabled,
+    ariaSelected: (x) => x.selected && x.selectable
+  })}
+		tabindex="${(x) => x.disabled || x.removable ? null : 0}"
+		@keydown="${(x, c) => x.handleKeydown(c.event)}"
+		@click="${(x) => x.handleClick()}"
+	>
+		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+		${fastElement.when(
+    (x) => x.label,
+    (x) => fastElement.html`<span class="label">${x.label}</span>`
+  )}
+		${fastElement.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${fastElement.when(
+    (x) => x.selectable && x.selected,
+    fastElement.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+  )}
+	</span>`;
+};
+
+const tagDefinition = vividElement.defineVividComponent(
+  "tag",
+  Tag,
+  tagTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerTag = vividElement.createRegisterFunction(tagDefinition);
+
+exports.VwcTagElement = Tag;
+exports.registerTag = registerTag;
+exports.tagDefinition = tagDefinition;

package/tag/definition.js

@@ -0,0 +1,150 @@
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, when, html } from '@microsoft/fast-element';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { L as Localized } from '../unbundled/localized.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+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 Localized(DelegatesAria(AffixIcon(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([
+  attr
+], Tag.prototype, "connotation");
+__decorateClass([
+  attr
+], Tag.prototype, "shape");
+__decorateClass([
+  attr
+], Tag.prototype, "appearance");
+__decorateClass([
+  attr
+], Tag.prototype, "label");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "removable");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "disabled");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "selectable");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "selected");
+
+const styles = ".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:not(.connotation-cta){--_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-faint);--_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-faint);--_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-dim);--_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-dim);--_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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_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{--_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-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_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*(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;padding-inline:8px 1px}.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{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus{--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))}";
+
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  selectable,
+  removable,
+  selected
+}) => 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 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>`;
+}
+const tagTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
+  return html` <span
+		class="${getClasses}"
+		${delegateAria({
+    role: "option",
+    ariaDisabled: (x) => x.disabled,
+    ariaSelected: (x) => x.selected && x.selectable
+  })}
+		tabindex="${(x) => x.disabled || x.removable ? null : 0}"
+		@keydown="${(x, c) => x.handleKeydown(c.event)}"
+		@click="${(x) => x.handleClick()}"
+	>
+		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+		${when(
+    (x) => x.label,
+    (x) => html`<span class="label">${x.label}</span>`
+  )}
+		${when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when(
+    (x) => x.selectable && x.selected,
+    html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+  )}
+	</span>`;
+};
+
+const tagDefinition = defineVividComponent(
+  "tag",
+  Tag,
+  tagTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerTag = createRegisterFunction(tagDefinition);
+
+export { Tag as VwcTagElement, registerTag, tagDefinition };