@vonage/vivid 5.15.0 → 5.16.0

package/tag/index.js

@@ -1,135 +1,74 @@
-import { I as _, i as f } from "../bundled/definition2.js";
-import { V as u, a as c, h as i, c as b, d as g } from "../bundled/vivid-element.js";
-import { b as x, a as h, I as y } from "../bundled/affix.js";
-import { D as w, d as p } from "../bundled/delegates-aria.js";
-import { L as $ } from "../bundled/localized.js";
-import { w as s } from "../bundled/when.js";
-import { c as k } from "../bundled/class-names.js";
-var z = Object.defineProperty, l = (r, a, n, v) => {
-  for (var o = void 0, t = r.length - 1, d; t >= 0; t--)
-    (d = r[t]) && (o = d(a, n, o) || o);
-  return o && z(a, n, o), o;
+import { t as e } from "../bundled/localized.js";
+import { d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/when.js";
+import { r as s, t as c } from "../bundled/definition2.js";
+import { t as l } from "../bundled/decorate.js";
+import { t as u } from "../bundled/class-names.js";
+import { a as d, i as f, t as p } from "../bundled/affix.js";
+import { n as m, t as h } from "../bundled/delegates-aria.js";
+//#region src/lib/tag/tag.ts
+var g = class extends e(h(p(a))) {
+	constructor(...e) {
+		super(...e), this.removable = !1, this.disabled = !1, this.selectable = !1, this.selected = !1;
+	}
+	remove() {
+		!this.removable || this.selectable || (this.$emit("removed"), this.parentElement && this.parentElement.removeChild(this));
+	}
+	#e = () => {
+		!this.selectable || this.disabled || (this.selected = !this.selected, this.$emit("selected-change"));
+	};
+	handleKeydown(e) {
+		return (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#e()), (e.key === "Delete" || e.key === "Backspace") && (e.preventDefault(), this.remove()), !0;
+	}
+	handleClick() {
+		this.#e();
+	}
 };
-class e extends $(w(x(u))) {
-  constructor() {
-    super(...arguments), this.removable = !1, this.disabled = !1, this.selectable = !1, this.selected = !1, this.#o = () => {
-      !this.selectable || this.disabled || (this.selected = !this.selected, this.$emit("selected-change"));
-    };
-  }
-  remove() {
-    !this.removable || this.selectable || (this.$emit("removed"), this.parentElement && this.parentElement.removeChild(this));
-  }
-  #o;
-  handleKeydown(a) {
-    return (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.#o()), (a.key === "Delete" || a.key === "Backspace") && (a.preventDefault(), this.remove()), !0;
-  }
-  handleClick() {
-    this.#o();
-  }
-}
-l([
-  c
-], e.prototype, "connotation");
-l([
-  c
-], e.prototype, "shape");
-l([
-  c
-], e.prototype, "appearance");
-l([
-  c
-], e.prototype, "label");
-l([
-  c({ mode: "boolean" })
-], e.prototype, "removable");
-l([
-  c({ mode: "boolean" })
-], e.prototype, "disabled");
-l([
-  c({ mode: "boolean" })
-], e.prototype, "selectable");
-l([
-  c({ mode: "boolean" })
-], e.prototype, "selected");
-const C = ".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{--_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-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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border:none;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(--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{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-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))}", m = ({
-  connotation: r,
-  appearance: a,
-  shape: n,
-  disabled: v,
-  selectable: o,
-  removable: t,
-  selected: d
-}) => k(
-  "base",
-  ["disabled", v],
-  ["selectable", o],
-  ["selected", o && d],
-  ["removable", t && !o],
-  [`connotation-${r}`, !!r],
-  [`appearance-${a}`, !!a],
-  [`shape-${n}`, !!n]
-);
-function D(r) {
-  return i`
+l([n], g.prototype, "connotation", void 0), l([n], g.prototype, "shape", void 0), l([n], g.prototype, "appearance", void 0), l([n], g.prototype, "label", void 0), l([n({ mode: "boolean" })], g.prototype, "removable", void 0), l([n({ mode: "boolean" })], g.prototype, "disabled", void 0), l([n({ mode: "boolean" })], g.prototype, "selectable", void 0), l([n({ mode: "boolean" })], g.prototype, "selected", void 0);
+//#endregion
+//#region src/lib/tag/tag.scss?inline
+var _ = ".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))}", v = ({ connotation: e, appearance: t, shape: n, disabled: r, selectable: i, removable: a, selected: o }) => u("base", ["disabled", r], ["selectable", i], ["selected", i && o], ["removable", a && !i], [`connotation-${e}`, !!e], [`appearance-${t}`, !!t], [`shape-${n}`, !!n]);
+function y(e) {
+	return t`
 	<button
 		class="dismiss-button"
-		aria-label="${(a) => a.locale.tag.remove(a.label)}"
-		?disabled="${(a) => a.disabled}"
-		@click="${(a) => a.remove()}">
-		<${r} name="close-line"></${r}>
+		aria-label="${(e) => e.locale.tag.remove(e.label)}"
+		?disabled="${(e) => e.disabled}"
+		@click="${(e) => e.remove()}">
+		<${e} name="close-line"></${e}>
 	</button>`;
 }
-const I = (r) => {
-  const a = h(r), n = r.tagFor(_), v = i`
-		${(o) => a(o.icon, y.Slot)}
-		${s(
-    (o) => o.label,
-    (o) => i`<span class="label">${o.label}</span>`
-  )}
-		${s((o) => o.removable && !o.selectable, D(n))}
-		${s(
-    (o) => o.selectable && o.selected,
-    i`<${n} class="selectable-icon" name="check-circle-solid"></${n}>`
-  )}
+//#endregion
+//#region src/lib/tag/index.ts
+i(r("tag", g, (e) => {
+	let n = d(e), r = e.tagFor(s), i = t`
+		${(e) => n(e.icon, f.Slot)}
+		${o((e) => e.label, (e) => t`<span class="label">${e.label}</span>`)}
+		${o((e) => e.removable && !e.selectable, y(r))}
+		${o((e) => e.selectable && e.selected, t`<${r} class="selectable-icon" name="check-circle-solid"></${r}>`)}
 	`;
-  return i`
-		${s(
-    (o) => o.selectable,
-    i`<button
-				class="${m}"
-				${p({
-      ariaPressed: (o) => o.selected
-    })}
-				?disabled="${(o) => o.disabled}"
-				@keydown="${(o, t) => o.handleKeydown(t.event)}"
-				@click="${(o) => o.handleClick()}"
+	return t`
+		${o((e) => e.selectable, t`<button
+				class="${v}"
+				${m({ ariaPressed: (e) => e.selected })}
+				?disabled="${(e) => e.disabled}"
+				@keydown="${(e, t) => e.handleKeydown(t.event)}"
+				@click="${(e) => e.handleClick()}"
 			>
-				${v}
-			</button>`
-  )}
-		${s(
-    (o) => !o.selectable,
-    i`<span
-				class="${m}"
-				${p()}
-				tabindex="${(o) => o.disabled || o.removable ? null : 0}"
-				@keydown="${(o, t) => o.handleKeydown(t.event)}"
-				@click="${(o) => o.handleClick()}"
+				${i}
+			</button>`)}
+		${o((e) => !e.selectable, t`<span
+				class="${v}"
+				${m()}
+				tabindex="${(e) => e.disabled || e.removable ? null : 0}"
+				@keydown="${(e, t) => e.handleKeydown(t.event)}"
+				@click="${(e) => e.handleClick()}"
 			>
-				${v}
-			</span>`
-  )}
+				${i}
+			</span>`)}
 	`;
-}, B = g(
-  "tag",
-  e,
-  I,
-  [f],
-  {
-    styles: C,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), T = b(B);
-T();
+}, [c], {
+	styles: _,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion

package/tag-group/definition.cjs

@@ -1,40 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
-
-class TagGroup extends delegatesAria.DelegatesAria(vividElement.VividElement) {
-}
-
-const getClasses = (_) => fastWebUtilities.classNames("base");
-const TagGroupTemplate = fastElement.html`
-	<div
-		class="${getClasses}"
-		${delegatesAria.delegateAria({
-  role: "group"
-})}
-	>
-		<slot></slot>
-	</div>
-`;
-
-const tagGroupDefinition = vividElement.defineVividComponent(
-  "tag-group",
-  TagGroup,
-  TagGroupTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerTagGroup = vividElement.createRegisterFunction(tagGroupDefinition);
-
-exports.VwcTagGroupElement = TagGroup;
-exports.registerTagGroup = registerTagGroup;
-exports.tagGroupDefinition = tagGroupDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition69.cjs");
+exports.VwcTagGroupElement = require_definition.TagGroup;
+exports.registerTagGroup = require_definition.registerTagGroup;
+exports.tagGroupDefinition = require_definition.tagGroupDefinition;

package/tag-group/definition.js

@@ -1,34 +1,2 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { html } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
-
-class TagGroup extends DelegatesAria(VividElement) {
-}
-
-const getClasses = (_) => classNames("base");
-const TagGroupTemplate = html`
-	<div
-		class="${getClasses}"
-		${delegateAria({
-  role: "group"
-})}
-	>
-		<slot></slot>
-	</div>
-`;
-
-const tagGroupDefinition = defineVividComponent(
-  "tag-group",
-  TagGroup,
-  TagGroupTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerTagGroup = createRegisterFunction(tagGroupDefinition);
-
+import { n as tagGroupDefinition, r as TagGroup, t as registerTagGroup } from "../unbundled/definition69.js";
 export { TagGroup as VwcTagGroupElement, registerTagGroup, tagGroupDefinition };

package/tag-group/index.cjs

@@ -1,8 +1,8 @@
-"use strict";const e=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),a=require("../bundled/class-names.cjs"),i=".base{display:flex;flex-wrap:wrap;gap:8px}";class r extends s.DelegatesAria(e.VividElement){}const o=t=>a.classNames("base"),l=e.html`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/class-names.cjs`),n=require(`../bundled/delegates-aria.cjs`);var r=`.base{flex-wrap:wrap;gap:8px;display:flex}`,i=class extends n.t(e.t){},a=e.d`
 	<div
-		class="${o}"
-		${s.delegateAria({role:"group"})}
+		class="${e=>t.t(`base`)}"
+		${n.n({role:`group`})}
 	>
 		<slot></slot>
 	</div>
-`,n=e.defineVividComponent("tag-group",r,l,[],{styles:i}),c=e.createRegisterFunction(n);c();
+`,o=e.o(`tag-group`,i,a,[],{styles:r});e.s(o)();

package/tag-group/index.js

@@ -1,25 +1,14 @@
-import { V as e, h as a, c as t, d as o } from "../bundled/vivid-element.js";
-import { D as r, d as i } from "../bundled/delegates-aria.js";
-import { c as l } from "../bundled/class-names.js";
-const p = ".base{display:flex;flex-wrap:wrap;gap:8px}";
-class n extends r(e) {
-}
-const g = (s) => l("base"), c = a`
+import { d as e, o as t, s as n, t as r } from "../bundled/vivid-element.js";
+import { t as i } from "../bundled/class-names.js";
+import { n as a, t as o } from "../bundled/delegates-aria.js";
+//#endregion
+//#region src/lib/tag-group/index.ts
+n(t("tag-group", class extends o(r) {}, e`
 	<div
-		class="${g}"
-		${i({
-  role: "group"
-})}
+		class="${(e) => i("base")}"
+		${a({ role: "group" })}
 	>
 		<slot></slot>
 	</div>
-`, m = o(
-  "tag-group",
-  n,
-  c,
-  [],
-  {
-    styles: p
-  }
-), d = t(m);
-d();
+`, [], { styles: ".base{flex-wrap:wrap;gap:8px;display:flex}" }))();
+//#endregion