@vonage/vivid 4.17.0 → 4.19.0-preview.0

package/shared/text-field.cjs

@@ -1,558 +1,5 @@
 'use strict';
 
-const applyMixins = require('./apply-mixins.cjs');
-const vividElement = require('./vivid-element.cjs');
-const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
-const formAssociated = require('./form-associated.cjs');
-const definition = require('./definition27.cjs');
-const formElements = require('./form-elements.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const affix = require('./affix.cjs');
+const styles = ":host{display:inline-block}.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-firm);--_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-firm);--_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-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@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)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--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 not selector(:has(*)){.wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
 
-const byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-    byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-    return (byteToHex[arr[offset + 0]] +
-        byteToHex[arr[offset + 1]] +
-        byteToHex[arr[offset + 2]] +
-        byteToHex[arr[offset + 3]] +
-        '-' +
-        byteToHex[arr[offset + 4]] +
-        byteToHex[arr[offset + 5]] +
-        '-' +
-        byteToHex[arr[offset + 6]] +
-        byteToHex[arr[offset + 7]] +
-        '-' +
-        byteToHex[arr[offset + 8]] +
-        byteToHex[arr[offset + 9]] +
-        '-' +
-        byteToHex[arr[offset + 10]] +
-        byteToHex[arr[offset + 11]] +
-        byteToHex[arr[offset + 12]] +
-        byteToHex[arr[offset + 13]] +
-        byteToHex[arr[offset + 14]] +
-        byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-    if (!getRandomValues) {
-        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
-            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-        }
-        getRandomValues = crypto.getRandomValues.bind(crypto);
-    }
-    return getRandomValues(rnds8);
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = { randomUUID };
-
-function v4(options, buf, offset) {
-    if (native.randomUUID && true && !options) {
-        return native.randomUUID();
-    }
-    options = options || {};
-    const rnds = options.random ?? options.rng?.() ?? rng();
-    if (rnds.length < 16) {
-        throw new Error('Random bytes length must be >= 16');
-    }
-    rnds[6] = (rnds[6] & 0x0f) | 0x40;
-    rnds[8] = (rnds[8] & 0x3f) | 0x80;
-    return unsafeStringify(rnds);
-}
-
-const generateRandomId = () => v4();
-
-class Reflector {
-  #reflectedProperties = /* @__PURE__ */ new Map();
-  #source;
-  #target;
-  constructor(source, target) {
-    this.#source = source;
-    this.#target = target;
-  }
-  attribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "attribute",
-      destination: attributeName
-    });
-  }
-  booleanAttribute(propertyName, attributeName) {
-    this.#addReflectedProperty(propertyName, {
-      type: "boolean-attribute",
-      destination: attributeName
-    });
-  }
-  property(propertyName, targetProperty, skipIfEqual = false) {
-    this.#addReflectedProperty(propertyName, {
-      type: "property",
-      destination: targetProperty,
-      skipIfEqual
-    });
-  }
-  destroy() {
-    const notifier = vividElement.Observable.getNotifier(this.#source);
-    for (const prop of this.#reflectedProperties.keys()) {
-      notifier.unsubscribe(this.#propertyChangeHandler, prop);
-    }
-    this.#reflectedProperties.clear();
-  }
-  #addReflectedProperty(name, reflected) {
-    this.#reflectedProperties.set(name, reflected);
-    const notifier = vividElement.Observable.getNotifier(this.#source);
-    notifier.subscribe(this.#propertyChangeHandler, name);
-    this.#propertyChangeHandler.handleChange(this.#source, name);
-  }
-  #propertyChangeHandler = {
-    handleChange: (source, propertyName) => {
-      const reflectedProperty = this.#reflectedProperties.get(propertyName);
-      const value = source[propertyName];
-      switch (reflectedProperty.type) {
-        case "boolean-attribute":
-          vividElement.DOM.setBooleanAttribute(
-            this.#target,
-            reflectedProperty.destination,
-            Boolean(value)
-          );
-          break;
-        case "attribute":
-          vividElement.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
-          break;
-        case "property":
-          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
-            return;
-          }
-          this.#target[reflectedProperty.destination] = value;
-          break;
-      }
-    }
-  };
-}
-
-class _TextField extends vividElement.VividElement {
-}
-class FormAssociatedTextField extends formAssociated.FormAssociated(_TextField) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _TextField_instances, handleLabelChange_fn, _reflectToInput, _helperTextMirrorEl, _helperTextSlotMutationObserver, updateHelperTextMutationObserver_fn, updateMirroredHelperText_fn;
-const TextFieldType = {
-  /**
-   * A text TextField
-   */
-  text: "text"};
-const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
-const getSafariWorkaroundStyleSheet = definition.memoizeWith(
-  () => "",
-  () => {
-    const styleSheet = new CSSStyleSheet();
-    const supportsReplaceSync = "replaceSync" in styleSheet;
-    if (supportsReplaceSync) {
-      styleSheet.replaceSync(`
-.${safariWorkaroundClassName}::placeholder {
-	opacity: 1 !important;
-	-webkit-text-fill-color: var(--_low-ink-color) !important;
-}`);
-    }
-    return styleSheet;
-  }
-);
-const installSafariWorkaroundStyle = (forElement) => {
-  const root = forElement.getRootNode();
-  const workaroundStyleSheet = getSafariWorkaroundStyleSheet();
-  const supportsAdoptedStyleSheets = "adoptedStyleSheets" in root;
-  if (!supportsAdoptedStyleSheets) {
-    return;
-  }
-  if (!root.adoptedStyleSheets.includes(workaroundStyleSheet)) {
-    root.adoptedStyleSheets = [
-      ...root.adoptedStyleSheets,
-      workaroundStyleSheet
-    ];
-  }
-};
-exports.TextField = class TextField extends FormAssociatedTextField {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _TextField_instances);
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.type = TextFieldType.text;
-    /**
-     * @internal
-     */
-    this._labelEl = null;
-    __privateAdd(this, _reflectToInput);
-    __privateAdd(this, _helperTextMirrorEl);
-    __privateAdd(this, _helperTextSlotMutationObserver);
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  autofocusChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.autofocus = this.autofocus;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  placeholderChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.placeholder = this.placeholder;
-    }
-  }
-  /**
-   * @internal
-   */
-  typeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.type = this.type;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  listChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.setAttribute("list", this.list);
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  maxlengthChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.maxLength = this.maxlength;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  minlengthChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.minLength = this.minlength;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  patternChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.pattern = this.pattern;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  sizeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.size = this.size;
-    }
-  }
-  /**
-   * @internal
-   */
-  spellcheckChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.spellcheck = this.spellcheck;
-    }
-  }
-  /**
-   * Selects all the text in the text field
-   *
-   * @public
-   */
-  select() {
-    this.control.select();
-  }
-  /**
-   * Handles the internal control's `input` event
-   * @internal
-   */
-  handleTextInput() {
-    this.value = this.control.value;
-  }
-  /**
-   * 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);
-  }
-  /**
-   * @internal
-   */
-  labelChanged() {
-    if (this._labelEl) {
-      __privateMethod(this, _TextField_instances, handleLabelChange_fn).call(this, this._labelEl);
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", this.type);
-    this.validate();
-    if (this.autofocus) {
-      vividElement.DOM.queueUpdate(() => {
-        this.focus();
-      });
-    }
-    if (!this.control) {
-      const uniqueId = this.id || generateRandomId();
-      const controlId = `vvd-text-field-control-${uniqueId}`;
-      const helperTextId = `vvd-text-field-helper-text-${uniqueId}`;
-      const input = document.createElement("input");
-      input.slot = "_control";
-      input.id = controlId;
-      input.className = safariWorkaroundClassName;
-      this.control = input;
-      input.addEventListener("input", () => {
-        this.handleTextInput();
-      });
-      input.addEventListener("change", () => {
-        this.handleChange();
-      });
-      input.addEventListener("blur", () => {
-        this.$emit("blur", void 0, { bubbles: false });
-      });
-      input.addEventListener("focus", () => {
-        this.$emit("focus", void 0, { bubbles: false });
-      });
-      this.appendChild(input);
-      const label = document.createElement("label");
-      label.slot = "_label";
-      label.htmlFor = controlId;
-      this._labelEl = label;
-      __privateMethod(this, _TextField_instances, handleLabelChange_fn).call(this, label);
-      __privateSet(this, _helperTextMirrorEl, document.createElement("div"));
-      __privateGet(this, _helperTextMirrorEl).id = helperTextId;
-      __privateGet(this, _helperTextMirrorEl).slot = "_mirrored-helper-text";
-      __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
-      this.appendChild(__privateGet(this, _helperTextMirrorEl));
-      installSafariWorkaroundStyle(this);
-    }
-    __privateSet(this, _reflectToInput, new Reflector(this, this.control));
-    __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
-    __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
-    __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
-    __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
-    __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
-    __privateGet(this, _reflectToInput).attribute("list", "list");
-    __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
-    __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
-    __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
-    __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
-    __privateGet(this, _reflectToInput).attribute("size", "size");
-    __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
-    __privateGet(this, _reflectToInput).attribute("type", "type");
-    __privateGet(this, _reflectToInput).attribute("inputMode", "inputmode");
-    __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
-    __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
-    __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
-    __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
-    __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
-    __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
-    __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
-    __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
-    __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
-    __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
-    __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
-    __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
-    __privateGet(this, _reflectToInput).attribute(
-      "ariaRoledescription",
-      "aria-roledescription"
-    );
-    __privateGet(this, _reflectToInput).property("value", "value", true);
-    __privateMethod(this, _TextField_instances, updateHelperTextMutationObserver_fn).call(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _reflectToInput).destroy();
-    __privateSet(this, _reflectToInput, void 0);
-    __privateMethod(this, _TextField_instances, updateHelperTextMutationObserver_fn).call(this);
-  }
-  focus() {
-    this.control?.focus();
-  }
-  /**
-   * @internal
-   */
-  helperTextChanged() {
-    __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
-  }
-  /**
-   * @internal
-   */
-  _helperTextSlottedContentChanged() {
-    __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
-    __privateMethod(this, _TextField_instances, updateHelperTextMutationObserver_fn).call(this);
-  }
-};
-_TextField_instances = new WeakSet();
-handleLabelChange_fn = function(labelEl) {
-  if (!this.label) {
-    labelEl.remove();
-  } else {
-    labelEl.textContent = this.label;
-    if (!labelEl.isConnected) {
-      this.appendChild(labelEl);
-    }
-  }
-};
-_reflectToInput = new WeakMap();
-_helperTextMirrorEl = new WeakMap();
-_helperTextSlotMutationObserver = new WeakMap();
-updateHelperTextMutationObserver_fn = function() {
-  const usesHelperTextSlot = this._helperTextSlottedContent.length;
-  const shouldHaveMutationObserver = usesHelperTextSlot && this.isConnected;
-  if (shouldHaveMutationObserver && !__privateGet(this, _helperTextSlotMutationObserver)) {
-    __privateSet(this, _helperTextSlotMutationObserver, new MutationObserver((records) => {
-      if (records.some((record) => record.target !== __privateGet(this, _helperTextMirrorEl))) {
-        __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
-      }
-    }));
-    __privateGet(this, _helperTextSlotMutationObserver).observe(this, {
-      subtree: true,
-      childList: true,
-      characterData: true
-    });
-  }
-  if (!shouldHaveMutationObserver && __privateGet(this, _helperTextSlotMutationObserver)) {
-    __privateGet(this, _helperTextSlotMutationObserver).disconnect();
-    __privateSet(this, _helperTextSlotMutationObserver, void 0);
-  }
-};
-updateMirroredHelperText_fn = function() {
-  let helperText = this.helperText ?? "";
-  if (this._helperTextSlottedContent?.length) {
-    helperText = this._helperTextSlottedContent.map((node) => node.innerText).join(" ");
-  }
-  if (__privateGet(this, _helperTextMirrorEl)) {
-    __privateGet(this, _helperTextMirrorEl).textContent = helperText;
-    if (helperText) {
-      this.control.setAttribute(
-        "aria-describedby",
-        __privateGet(this, _helperTextMirrorEl).id
-      );
-    } else {
-      this.control.removeAttribute("aria-describedby");
-    }
-  }
-};
-__decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
-], exports.TextField.prototype, "readOnly", 2);
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], exports.TextField.prototype, "autofocus", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "placeholder", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "type", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "list", 2);
-__decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
-], exports.TextField.prototype, "maxlength", 2);
-__decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
-], exports.TextField.prototype, "minlength", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "pattern", 2);
-__decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
-], exports.TextField.prototype, "size", 2);
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], exports.TextField.prototype, "spellcheck", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "appearance", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "shape", 2);
-__decorateClass([
-  vividElement.attr
-], exports.TextField.prototype, "autoComplete", 2);
-__decorateClass([
-  vividElement.attr()
-], exports.TextField.prototype, "scale", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "inputmode" })
-], exports.TextField.prototype, "inputMode", 2);
-__decorateClass([
-  vividElement.observable
-], exports.TextField.prototype, "actionItemsSlottedContent", 2);
-__decorateClass([
-  vividElement.observable
-], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
-exports.TextField = __decorateClass([
-  formElements.errorText,
-  formElements.formElements
-], exports.TextField);
-class DelegatesARIATextbox {
-}
-applyMixins.applyMixins(DelegatesARIATextbox, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixinsWithObservables.applyMixinsWithObservables(
-  exports.TextField,
-  affix.AffixIcon,
-  formElements.FormElementCharCount,
-  formElements.FormElementHelperText,
-  formElements.FormElementSuccessText,
-  DelegatesARIATextbox
-);
-
-exports.DelegatesARIATextbox = DelegatesARIATextbox;
-exports.Reflector = Reflector;
+exports.styles = styles;