@vonage/vivid 5.15.1 → 5.17.0

package/tag/definition.cjs

@@ -1,176 +1,6 @@
-'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" || e.key === " ") {
-      e.preventDefault();
-      this.#select();
-    }
-    if (e.key === "Delete" || e.key === "Backspace") {
-      e.preventDefault();
-      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.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))}";
-
-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);
-  const content = fastElement.html`
-		${(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}>`
-  )}
-	`;
-  return fastElement.html`
-		${fastElement.when(
-    (x) => x.selectable,
-    fastElement.html`<button
-				class="${getClasses}"
-				${delegatesAria.delegateAria({
-      ariaPressed: (x) => x.selected
-    })}
-				?disabled="${(x) => x.disabled}"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				@click="${(x) => x.handleClick()}"
-			>
-				${content}
-			</button>`
-  )}
-		${fastElement.when(
-    (x) => !x.selectable,
-    fastElement.html`<span
-				class="${getClasses}"
-				${delegatesAria.delegateAria()}
-				tabindex="${(x) => x.disabled || x.removable ? null : 0}"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				@click="${(x) => x.handleClick()}"
-			>
-				${content}
-			</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;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition70.cjs");
+exports.VwcTagElement = require_definition$1.Tag;
+exports.registerTag = require_definition$1.registerTag;
+exports.tagDefinition = require_definition$1.tagDefinition;

package/tag/definition.js

@@ -1,170 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
-import { attr, when, html } from '@microsoft/fast-element';
-import { A 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" || e.key === " ") {
-      e.preventDefault();
-      this.#select();
-    }
-    if (e.key === "Delete" || e.key === "Backspace") {
-      e.preventDefault();
-      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.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))}";
-
-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);
-  const content = html`
-		${(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}>`
-  )}
-	`;
-  return html`
-		${when(
-    (x) => x.selectable,
-    html`<button
-				class="${getClasses}"
-				${delegateAria({
-      ariaPressed: (x) => x.selected
-    })}
-				?disabled="${(x) => x.disabled}"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				@click="${(x) => x.handleClick()}"
-			>
-				${content}
-			</button>`
-  )}
-		${when(
-    (x) => !x.selectable,
-    html`<span
-				class="${getClasses}"
-				${delegateAria()}
-				tabindex="${(x) => x.disabled || x.removable ? null : 0}"
-				@keydown="${(x, c) => x.handleKeydown(c.event)}"
-				@click="${(x) => x.handleClick()}"
-			>
-				${content}
-			</span>`
-  )}
-	`;
-};
-
-const tagDefinition = defineVividComponent(
-  "tag",
-  Tag,
-  tagTemplate,
-  [iconDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerTag = createRegisterFunction(tagDefinition);
-
+import "../unbundled/definition2.js";
+import { n as tagDefinition, r as Tag, t as registerTag } from "../unbundled/definition70.js";
 export { Tag as VwcTagElement, registerTag, tagDefinition };

package/tag/index.cjs

@@ -1,32 +1,32 @@
-"use strict";const _=require("../bundled/definition2.cjs"),r=require("../bundled/vivid-element.cjs"),d=require("../bundled/affix.cjs"),p=require("../bundled/delegates-aria.cjs"),f=require("../bundled/localized.cjs"),v=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs");var b=Object.defineProperty,l=(n,a,t,i)=>{for(var o=void 0,e=n.length-1,s;e>=0;e--)(s=n[e])&&(o=s(a,t,o)||o);return o&&b(a,t,o),o};class c extends f.Localized(p.DelegatesAria(d.AffixIcon(r.VividElement))){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([r.attr],c.prototype,"connotation");l([r.attr],c.prototype,"shape");l([r.attr],c.prototype,"appearance");l([r.attr],c.prototype,"label");l([r.attr({mode:"boolean"})],c.prototype,"removable");l([r.attr({mode:"boolean"})],c.prototype,"disabled");l([r.attr({mode:"boolean"})],c.prototype,"selectable");l([r.attr({mode:"boolean"})],c.prototype,"selected");const g=".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:n,appearance:a,shape:t,disabled:i,selectable:o,removable:e,selected:s})=>u.classNames("base",["disabled",i],["selectable",o],["selected",o&&s],["removable",e&&!o],[`connotation-${n}`,!!n],[`appearance-${a}`,!!a],[`shape-${t}`,!!t]);function h(n){return r.html`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/class-names.cjs`);var c=class extends e.t(o.t(a.t(t.t))){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()}};i.t([t.l],c.prototype,`connotation`,void 0),i.t([t.l],c.prototype,`shape`,void 0),i.t([t.l],c.prototype,`appearance`,void 0),i.t([t.l],c.prototype,`label`,void 0),i.t([t.l({mode:`boolean`})],c.prototype,`removable`,void 0),i.t([t.l({mode:`boolean`})],c.prototype,`disabled`,void 0),i.t([t.l({mode:`boolean`})],c.prototype,`selectable`,void 0),i.t([t.l({mode:`boolean`})],c.prototype,`selected`,void 0);var l=`.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))}`,u=({connotation:e,appearance:t,shape:n,disabled:r,selectable:i,removable:a,selected:o})=>s.t(`base`,[`disabled`,r],[`selectable`,i],[`selected`,i&&o],[`removable`,a&&!i],[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n]);function d(e){return t.d`
 	<button
 		class="dismiss-button"
-		aria-label="${a=>a.locale.tag.remove(a.label)}"
-		?disabled="${a=>a.disabled}"
-		@click="${a=>a.remove()}">
-		<${n} name="close-line"></${n}>
-	</button>`}const x=n=>{const a=d.affixIconTemplateFactory(n),t=n.tagFor(_.Icon),i=r.html`
-		${o=>a(o.icon,d.IconWrapper.Slot)}
-		${v.when(o=>o.label,o=>r.html`<span class="label">${o.label}</span>`)}
-		${v.when(o=>o.removable&&!o.selectable,h(t))}
-		${v.when(o=>o.selectable&&o.selected,r.html`<${t} class="selectable-icon" name="check-circle-solid"></${t}>`)}
-	`;return r.html`
-		${v.when(o=>o.selectable,r.html`<button
-				class="${m}"
-				${p.delegateAria({ariaPressed:o=>o.selected})}
-				?disabled="${o=>o.disabled}"
-				@keydown="${(o,e)=>o.handleKeydown(e.event)}"
-				@click="${o=>o.handleClick()}"
+		aria-label="${e=>e.locale.tag.remove(e.label)}"
+		?disabled="${e=>e.disabled}"
+		@click="${e=>e.remove()}">
+		<${e} name="close-line"></${e}>
+	</button>`}var f=t.o(`tag`,c,e=>{let i=a.a(e),s=e.tagFor(r.r),c=t.d`
+		${e=>i(e.icon,a.i.Slot)}
+		${n.t(e=>e.label,e=>t.d`<span class="label">${e.label}</span>`)}
+		${n.t(e=>e.removable&&!e.selectable,d(s))}
+		${n.t(e=>e.selectable&&e.selected,t.d`<${s} class="selectable-icon" name="check-circle-solid"></${s}>`)}
+	`;return t.d`
+		${n.t(e=>e.selectable,t.d`<button
+				class="${u}"
+				${o.n({ariaPressed:e=>e.selected})}
+				?disabled="${e=>e.disabled}"
+				@keydown="${(e,t)=>e.handleKeydown(t.event)}"
+				@click="${e=>e.handleClick()}"
 			>
-				${i}
+				${c}
 			</button>`)}
-		${v.when(o=>!o.selectable,r.html`<span
-				class="${m}"
-				${p.delegateAria()}
-				tabindex="${o=>o.disabled||o.removable?null:0}"
-				@keydown="${(o,e)=>o.handleKeydown(e.event)}"
-				@click="${o=>o.handleClick()}"
+		${n.t(e=>!e.selectable,t.d`<span
+				class="${u}"
+				${o.n()}
+				tabindex="${e=>e.disabled||e.removable?null:0}"
+				@keydown="${(e,t)=>e.handleKeydown(t.event)}"
+				@click="${e=>e.handleClick()}"
 			>
-				${i}
+				${c}
 			</span>`)}
-	`},y=r.defineVividComponent("tag",c,x,[_.iconDefinition],{styles:g,shadowOptions:{delegatesFocus:!0}}),w=r.createRegisterFunction(y);w();
+	`},[r.t],{styles:l,shadowOptions:{delegatesFocus:!0}});t.s(f)();