@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition52.cjs

@@ -2,195 +2,12 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-require('./affix.cjs');
-const index$1 = require('./index2.cjs');
-const Reflector = require('./Reflector.cjs');
-const textField = require('./text-field2.cjs');
+const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const formAssociated = require('./form-associated.cjs');
+const icon = require('./icon.cjs');
 const when = require('./when.cjs');
-const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-class _TextArea extends index.FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
- *
- * @internal
- */
-class FormAssociatedTextArea extends formAssociated.FormAssociated(_TextArea) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("textarea");
-    }
-}
-
-/**
- * Resize mode for a TextArea
- * @public
- */
-const TextAreaResize = {
-    /**
-     * No resize.
-     */
-    none: "none",
-    /**
-     * Resize vertically and horizontally.
-     */
-    both: "both",
-    /**
-     * Resize horizontally.
-     */
-    horizontal: "horizontal",
-    /**
-     * Resize vertically.
-     */
-    vertical: "vertical",
-};
-
-/**
- * A Text Area Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
- *
- * @slot - The default slot for the label
- * @csspart label - The label
- * @csspart root - The element wrapping the control
- * @csspart control - The textarea element
- * @fires change - Emits a custom 'change' event when the textarea emits a change event
- *
- * @public
- */
-let TextArea$1 = class TextArea extends FormAssociatedTextArea {
-    constructor() {
-        super(...arguments);
-        /**
-         * The resize mode of the element.
-         * @public
-         * @remarks
-         * HTML Attribute: resize
-         */
-        this.resize = TextAreaResize.none;
-        /**
-         * Sizes the element horizontally by a number of character columns.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: cols
-         */
-        this.cols = 20;
-        /**
-         * @internal
-         */
-        this.handleTextInput = () => {
-            this.value = this.control.value;
-        };
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.autofocus = this.autofocus;
-        }
-    }
-    listChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.setAttribute("list", this.list);
-        }
-    }
-    maxlengthChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.maxLength = this.maxlength;
-        }
-    }
-    minlengthChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.minLength = this.minlength;
-        }
-    }
-    spellcheckChanged() {
-        if (this.proxy instanceof HTMLTextAreaElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
-    }
-    /**
-     * Selects all the text in the text area
-     *
-     * @public
-     */
-    select() {
-        this.control.select();
-        /**
-         * The select event does not permeate the shadow DOM boundary.
-         * This fn effectively proxies the select event,
-         * emitting a `select` event whenever the internal
-         * control emits a `select` event
-         */
-        this.$emit("select");
-    }
-    /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
-     * @internal
-     */
-    handleChange() {
-        this.$emit("change");
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
-    }
-};
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TextArea$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.attr
-], TextArea$1.prototype, "resize", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TextArea$1.prototype, "autofocus", void 0);
-index.__decorate([
-    index.attr({ attribute: "form" })
-], TextArea$1.prototype, "formId", void 0);
-index.__decorate([
-    index.attr
-], TextArea$1.prototype, "list", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], TextArea$1.prototype, "maxlength", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], TextArea$1.prototype, "minlength", void 0);
-index.__decorate([
-    index.attr
-], TextArea$1.prototype, "name", void 0);
-index.__decorate([
-    index.attr
-], TextArea$1.prototype, "placeholder", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter, mode: "fromView" })
-], TextArea$1.prototype, "cols", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter, mode: "fromView" })
-], TextArea$1.prototype, "rows", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TextArea$1.prototype, "spellcheck", void 0);
-index.__decorate([
-    index.observable
-], TextArea$1.prototype, "defaultSlottedNodes", void 0);
-applyMixins.applyMixins(TextArea$1, textField.DelegatesARIATextbox);
-
-const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control: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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -202,102 +19,132 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-let TextArea = class extends TextArea$1 {
-  #reflectToTextArea;
-  connectedCallback() {
-    super.connectedCallback();
-    this.#reflectToTextArea = new Reflector.Reflector(this, this.control);
-    this.#reflectToTextArea.property("value", "value", true);
+class Tag 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);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#reflectToTextArea.destroy();
+  #select;
+  handleKeydown(e) {
+    if (e.key === "Enter") {
+      this.#select();
+    }
+    if (e.key === "Delete" || e.key === "Backspace") {
+      this.remove();
+    }
+    return true;
   }
-};
+  handleClick() {
+    this.#select();
+  }
+}
+__decorateClass([
+  index.attr
+], Tag.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Tag.prototype, "shape", 2);
 __decorateClass([
   index.attr
-], TextArea.prototype, "wrap", 2);
-TextArea = __decorateClass([
-  index$1.errorText,
-  index$1.formElements
-], TextArea);
-applyMixins.applyMixins(TextArea, index$1.FormElementCharCount, index$1.FormElementHelperText, index$1.FormElementSuccessText);
+], Tag.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], Tag.prototype, "label", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "removable", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "disabled", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "selectable", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "selected", 2);
+applyMixins.applyMixins(Tag, affix.AffixIcon);
+
+const styles = ".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.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:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}.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}\n";
 
-const getClasses = ({ value, errorValidationMessage, disabled, placeholder, readOnly, successText }) => classNames.classNames(
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  selectable,
+  removable,
+  selected
+}) => classNames.classNames(
   "base",
-  ["readonly", readOnly],
-  ["placeholder", Boolean(placeholder)],
   ["disabled", disabled],
-  ["error", Boolean(errorValidationMessage)],
-  ["has-value", Boolean(value)],
-  ["success", !!successText]
+  ["selectable", selectable],
+  ["selected", selectable && selected],
+  ["removable", removable && !selectable],
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)]
 );
-function renderLabel() {
+function renderDismissButton(iconTag) {
   return index.html`
-	  <label for="control" class="label">
-		  ${(x) => x.label}
-	  </label>`;
+	<span
+		aria-hidden="true"
+		class="dismiss-button"
+		@click="${(x) => x.remove()}">
+		<${iconTag} name="close-line"></${iconTag}>
+	</span>`;
 }
-function renderCharCount() {
-  return index.html`
-		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
-	`;
-}
-const TextAreaTemplate = (context) => {
-  return index.html`
-	  <div class="${getClasses}">
-		${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
-		${when.when((x) => x.label, renderLabel())}
-			<textarea class="control" id="control"
-				?autofocus="${(x) => x.autofocus}"
-				placeholder="${(x) => x.placeholder ? x.placeholder : null}"
-				name="${(x) => x.name ? x.name : null}"
-				minlength="${(x) => x.minlength ? x.minlength : null}"
-				maxlength="${(x) => x.maxlength ? x.maxlength : null}"
-				rows="${(x) => x.rows ? x.rows : null}"
-				cols="${(x) => x.cols ? x.cols : null}"
-				wrap="${(x) => x.wrap ? x.wrap : null}"
-				?readonly="${(x) => x.readOnly}"
-				?disabled="${(x) => x.disabled}"
-				?required="${(x) => x.required}"
-				?spellcheck="${(x) => x.spellcheck}"
-				aria-atomic="${(x) => x.ariaAtomic}"
-				aria-busy="${(x) => x.ariaBusy}"
-				aria-current="${(x) => x.ariaCurrent}"
-				aria-details="${(x) => x.ariaDetails}"
-				aria-disabled="${(x) => x.ariaDisabled}"
-				aria-errormessage="${(x) => x.ariaErrormessage}"
-				aria-haspopup="${(x) => x.ariaHaspopup}"
-				aria-hidden="${(x) => x.ariaHidden}"
-				aria-invalid="${(x) => x.ariaInvalid}"
-				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-				aria-label="${(x) => x.ariaLabel}"
-				aria-live="${(x) => x.ariaLive}"
-				aria-relevant="${(x) => x.ariaRelevant}"
-				aria-roledescription="${(x) => x.ariaRoledescription}"
-				@input="${(x) => x.handleTextInput()}"
-				@change="${(x) => x.handleChange()}"
-				${ref.ref("control")}
-	  >
-			</textarea>
-		${when.when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
-		${when.when((x) => !x.successText && x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
-		${when.when((x) => x.successText, index$1.getFeedbackTemplate("success", context))}
-	  </div>
-	`;
+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>`;
 };
 
-const textAreaDefinition = TextArea.compose({
-  baseName: "text-area",
-  template: TextAreaTemplate,
+const tagDefinition = Tag.compose({
+  baseName: "tag",
+  template: tagTemplate,
   styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries];
-const registerTextArea = index.registerFactory(textAreaRegistries);
+const tagRegistries = [tagDefinition(), ...definition.iconRegistries];
+const registerTag = index.registerFactory(tagRegistries);
 
-exports.registerTextArea = registerTextArea;
-exports.textAreaDefinition = textAreaDefinition;
-exports.textAreaRegistries = textAreaRegistries;
+exports.registerTag = registerTag;
+exports.tagDefinition = tagDefinition;