@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition52.cjs

@@ -1,195 +1,9 @@
 'use strict';
 
 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 applyMixins = require('./apply-mixins.cjs');
-const formAssociated = require('./form-associated.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";
+const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -202,102 +16,40 @@ 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 TagGroup extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#reflectToTextArea.destroy();
-  }
-};
+}
 __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);
+  index.attr({ attribute: "aria-label" })
+], TagGroup.prototype, "ariaLabel", 2);
 
-const getClasses = ({ value, errorValidationMessage, disabled, placeholder, readOnly, successText }) => classNames.classNames(
-  "base",
-  ["readonly", readOnly],
-  ["placeholder", Boolean(placeholder)],
-  ["disabled", disabled],
-  ["error", Boolean(errorValidationMessage)],
-  ["has-value", Boolean(value)],
-  ["success", !!successText]
-);
-function renderLabel() {
-  return index.html`
-	  <label for="control" class="label">
-		  ${(x) => x.label}
-	  </label>`;
-}
-function renderCharCount() {
+const getClasses = (_) => classNames.classNames("base");
+const TagGroupTemplate = () => {
   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>
+		<div
+			class="${getClasses}"
+			role="listbox"
+			aria-orientation="horizontal"
+			aria-label="${(x) => x.ariaLabel}"
+		>
+			<slot></slot>
+		</div>
 	`;
 };
 
-const textAreaDefinition = TextArea.compose({
-  baseName: "text-area",
-  template: TextAreaTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const tagGroupDefinition = TagGroup.compose(
+  {
+    baseName: "tag-group",
+    template: TagGroupTemplate,
+    styles
   }
-});
-const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries];
-const registerTextArea = index.registerFactory(textAreaRegistries);
+);
+const tagGroupRegistries = [tagGroupDefinition()];
+const registerTagGroup = index.registerFactory(tagGroupRegistries);
 
-exports.registerTextArea = registerTextArea;
-exports.textAreaDefinition = textAreaDefinition;
-exports.textAreaRegistries = textAreaRegistries;
+exports.registerTagGroup = registerTagGroup;
+exports.tagGroupDefinition = tagGroupDefinition;
+exports.tagGroupRegistries = tagGroupRegistries;

package/shared/definition52.js

@@ -1,193 +1,7 @@
-import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
-import './affix.js';
-import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
-import { R as Reflector } from './Reflector.js';
-import { D as DelegatesARIATextbox } from './text-field2.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { F as FormAssociated } from './form-associated.js';
-import { w as when } from './when.js';
-import { r as ref } from './ref.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
 
-class _TextArea extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
- *
- * @internal
- */
-class FormAssociatedTextArea extends 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);
-    }
-};
-__decorate([
-    attr({ mode: "boolean" })
-], TextArea$1.prototype, "readOnly", void 0);
-__decorate([
-    attr
-], TextArea$1.prototype, "resize", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextArea$1.prototype, "autofocus", void 0);
-__decorate([
-    attr({ attribute: "form" })
-], TextArea$1.prototype, "formId", void 0);
-__decorate([
-    attr
-], TextArea$1.prototype, "list", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextArea$1.prototype, "maxlength", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextArea$1.prototype, "minlength", void 0);
-__decorate([
-    attr
-], TextArea$1.prototype, "name", void 0);
-__decorate([
-    attr
-], TextArea$1.prototype, "placeholder", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter, mode: "fromView" })
-], TextArea$1.prototype, "cols", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter, mode: "fromView" })
-], TextArea$1.prototype, "rows", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextArea$1.prototype, "spellcheck", void 0);
-__decorate([
-    observable
-], TextArea$1.prototype, "defaultSlottedNodes", void 0);
-applyMixins(TextArea$1, 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";
+const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -200,100 +14,38 @@ 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(this, this.control);
-    this.#reflectToTextArea.property("value", "value", true);
+class TagGroup extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#reflectToTextArea.destroy();
-  }
-};
+}
 __decorateClass([
-  attr
-], TextArea.prototype, "wrap", 2);
-TextArea = __decorateClass([
-  errorText,
-  formElements
-], TextArea);
-applyMixins(TextArea, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+  attr({ attribute: "aria-label" })
+], TagGroup.prototype, "ariaLabel", 2);
 
-const getClasses = ({ value, errorValidationMessage, disabled, placeholder, readOnly, successText }) => classNames(
-  "base",
-  ["readonly", readOnly],
-  ["placeholder", Boolean(placeholder)],
-  ["disabled", disabled],
-  ["error", Boolean(errorValidationMessage)],
-  ["has-value", Boolean(value)],
-  ["success", !!successText]
-);
-function renderLabel() {
-  return html`
-	  <label for="control" class="label">
-		  ${(x) => x.label}
-	  </label>`;
-}
-function renderCharCount() {
+const getClasses = (_) => classNames("base");
+const TagGroupTemplate = () => {
   return html`
-		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
-	`;
-}
-const TextAreaTemplate = (context) => {
-  return html`
-	  <div class="${getClasses}">
-		${when((x) => x.charCount && x.maxlength, renderCharCount())}
-		${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("control")}
-	  >
-			</textarea>
-		${when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate("helper", context))}
-		${when((x) => !x.successText && x.errorValidationMessage, getFeedbackTemplate("error", context))}
-		${when((x) => x.successText, getFeedbackTemplate("success", context))}
-	  </div>
+		<div
+			class="${getClasses}"
+			role="listbox"
+			aria-orientation="horizontal"
+			aria-label="${(x) => x.ariaLabel}"
+		>
+			<slot></slot>
+		</div>
 	`;
 };
 
-const textAreaDefinition = TextArea.compose({
-  baseName: "text-area",
-  template: TextAreaTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const tagGroupDefinition = TagGroup.compose(
+  {
+    baseName: "tag-group",
+    template: TagGroupTemplate,
+    styles
   }
-});
-const textAreaRegistries = [textAreaDefinition(), ...iconRegistries];
-const registerTextArea = registerFactory(textAreaRegistries);
+);
+const tagGroupRegistries = [tagGroupDefinition()];
+const registerTagGroup = registerFactory(tagGroupRegistries);
 
-export { textAreaRegistries as a, registerTextArea as r, textAreaDefinition as t };
+export { tagGroupRegistries as a, registerTagGroup as r, tagGroupDefinition as t };