@vonage/vivid 4.5.0 → 4.6.0

package/shared/definition53.cjs

@@ -1,13 +1,10 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition27.cjs');
-const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const icon = require('./icon.cjs');
-const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
+const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -17,132 +14,40 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tag extends index.FoundationElement {
+class TagGroup extends index.FoundationElement {
   constructor() {
     super(...arguments);
-    this.removable = false;
-    this.disabled = false;
-    this.selectable = false;
-    this.selected = false;
-    this.#select = () => {
-      if (!this.selectable || this.disabled) {
-        return;
-      }
-      this.selected = !this.selected;
-      this.$emit("selected-change");
-    };
-  }
-  remove() {
-    if (!this.removable || this.selectable) {
-      return;
-    }
-    this.$emit("removed");
-    this.parentElement && this.parentElement.removeChild(this);
-  }
-  #select;
-  handleKeydown(e) {
-    if (e.key === "Enter") {
-      this.#select();
-    }
-    if (e.key === "Delete" || e.key === "Backspace") {
-      this.remove();
-    }
-    return true;
-  }
-  handleClick() {
-    this.#select();
+    this.ariaLabel = null;
   }
 }
 __decorateClass([
-  index.attr
-], Tag.prototype, "connotation");
-__decorateClass([
-  index.attr
-], Tag.prototype, "shape");
-__decorateClass([
-  index.attr
-], Tag.prototype, "appearance");
-__decorateClass([
-  index.attr
-], Tag.prototype, "label");
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], Tag.prototype, "removable");
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], Tag.prototype, "disabled");
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], Tag.prototype, "selectable");
-__decorateClass([
-  index.attr({ mode: "boolean" })
-], Tag.prototype, "selected");
-applyMixins.applyMixins(Tag, affix.AffixIcon);
-
-const styles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}";
+  index.attr({ attribute: "aria-label" })
+], TagGroup.prototype, "ariaLabel");
 
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  selectable,
-  removable,
-  selected
-}) => classNames.classNames(
-  "base",
-  ["disabled", disabled],
-  ["selectable", selectable],
-  ["selected", selectable && selected],
-  ["removable", removable && !selectable],
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)]
-);
-function renderDismissButton(iconTag) {
+const getClasses = (_) => classNames.classNames("base");
+const TagGroupTemplate = () => {
   return index.html`
-	<span
-		aria-hidden="true"
-		class="dismiss-button"
-		@click="${(x) => x.remove()}">
-		<${iconTag} name="close-line"></${iconTag}>
-	</span>`;
-}
-const tagTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(icon.Icon);
-  return index.html` <span
-		class="${getClasses}"
-		role="option"
-		aria-disabled="${(x) => x.disabled}"
-		aria-selected="${(x) => x.selectable}"
-		tabindex="${(x) => x.disabled ? null : 0}"
-		@keydown="${(x, c) => x.handleKeydown(c.event)}"
-		@click="${(x) => x.handleClick()}"
-	>
-		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-		${when.when(
-    (x) => x.label,
-    (x) => index.html`<span class="label">${x.label}</span>`
-  )}
-		${when.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
-		${when.when(
-    (x) => x.selectable && x.selected,
-    index.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
-  )}
-	</span>`;
+		<div
+			class="${getClasses}"
+			role="listbox"
+			aria-orientation="horizontal"
+			aria-label="${(x) => x.ariaLabel}"
+		>
+			<slot></slot>
+		</div>
+	`;
 };
 
-const tagDefinition = Tag.compose({
-  baseName: "tag",
-  template: tagTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const tagGroupDefinition = TagGroup.compose(
+  {
+    baseName: "tag-group",
+    template: TagGroupTemplate,
+    styles
   }
-});
-const tagRegistries = [tagDefinition(), ...definition.iconRegistries];
-const registerTag = index.registerFactory(tagRegistries);
+);
+const tagGroupRegistries = [tagGroupDefinition()];
+const registerTagGroup = index.registerFactory(tagGroupRegistries);
 
-exports.registerTag = registerTag;
-exports.tagDefinition = tagDefinition;
+exports.registerTagGroup = registerTagGroup;
+exports.tagGroupDefinition = tagGroupDefinition;
+exports.tagGroupRegistries = tagGroupRegistries;

package/shared/definition53.js

@@ -1,11 +1,8 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
+const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
+
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -15,131 +12,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tag extends FoundationElement {
+class TagGroup extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.removable = false;
-    this.disabled = false;
-    this.selectable = false;
-    this.selected = false;
-    this.#select = () => {
-      if (!this.selectable || this.disabled) {
-        return;
-      }
-      this.selected = !this.selected;
-      this.$emit("selected-change");
-    };
-  }
-  remove() {
-    if (!this.removable || this.selectable) {
-      return;
-    }
-    this.$emit("removed");
-    this.parentElement && this.parentElement.removeChild(this);
-  }
-  #select;
-  handleKeydown(e) {
-    if (e.key === "Enter") {
-      this.#select();
-    }
-    if (e.key === "Delete" || e.key === "Backspace") {
-      this.remove();
-    }
-    return true;
-  }
-  handleClick() {
-    this.#select();
+    this.ariaLabel = null;
   }
 }
 __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");
-applyMixins(Tag, AffixIcon);
-
-const styles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}";
+  attr({ attribute: "aria-label" })
+], TagGroup.prototype, "ariaLabel");
 
-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) {
+const getClasses = (_) => classNames("base");
+const TagGroupTemplate = () => {
   return html`
-	<span
-		aria-hidden="true"
-		class="dismiss-button"
-		@click="${(x) => x.remove()}">
-		<${iconTag} name="close-line"></${iconTag}>
-	</span>`;
-}
-const tagTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html` <span
-		class="${getClasses}"
-		role="option"
-		aria-disabled="${(x) => x.disabled}"
-		aria-selected="${(x) => x.selectable}"
-		tabindex="${(x) => x.disabled ? null : 0}"
-		@keydown="${(x, c) => x.handleKeydown(c.event)}"
-		@click="${(x) => x.handleClick()}"
-	>
-		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		${when(
-    (x) => x.label,
-    (x) => html`<span class="label">${x.label}</span>`
-  )}
-		${when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
-		${when(
-    (x) => x.selectable && x.selected,
-    html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
-  )}
-	</span>`;
+		<div
+			class="${getClasses}"
+			role="listbox"
+			aria-orientation="horizontal"
+			aria-label="${(x) => x.ariaLabel}"
+		>
+			<slot></slot>
+		</div>
+	`;
 };
 
-const tagDefinition = Tag.compose({
-  baseName: "tag",
-  template: tagTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const tagGroupDefinition = TagGroup.compose(
+  {
+    baseName: "tag-group",
+    template: TagGroupTemplate,
+    styles
   }
-});
-const tagRegistries = [tagDefinition(), ...iconRegistries];
-const registerTag = registerFactory(tagRegistries);
+);
+const tagGroupRegistries = [tagGroupDefinition()];
+const registerTagGroup = registerFactory(tagGroupRegistries);
 
-export { registerTag as r, tagDefinition as t };
+export { tagGroupRegistries as a, registerTagGroup as r, tagGroupDefinition as t };