@vonage/vivid 4.16.2 → 4.17.0

package/shared/text-field2.js

@@ -1,572 +1,3 @@
-import { a as applyMixins } from './apply-mixins.js';
-import { O as Observable, D as DOM, V as VividElement, a as attr, o as observable, n as nullableNumberConverter } from './vivid-element.js';
-import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
-import { F as FormAssociated } from './form-associated.js';
-import { m as memoizeWith } from './definition27.js';
-import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount } from './form-elements.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { b as AffixIcon } from './affix.js';
+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 && !buf && !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 = 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 = 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":
-          DOM.setBooleanAttribute(
-            this.#target,
-            reflectedProperty.destination,
-            Boolean(value)
-          );
-          break;
-        case "attribute":
-          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 {
-}
-class FormAssociatedTextField extends 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 = {
-  /**
-   * An email TextField
-   */
-  email: "email",
-  /**
-   * A password TextField
-   */
-  password: "password",
-  /**
-   * A telephone TextField
-   */
-  tel: "tel",
-  /**
-   * A text TextField
-   */
-  text: "text",
-  /**
-   * A URL TextField
-   */
-  url: "url"
-};
-const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
-const getSafariWorkaroundStyleSheet = 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
-    ];
-  }
-};
-let TextField = class 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) {
-      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([
-  attr({ attribute: "readonly", mode: "boolean" })
-], TextField.prototype, "readOnly", 2);
-__decorateClass([
-  attr({ mode: "boolean" })
-], TextField.prototype, "autofocus", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "placeholder", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "type", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "list", 2);
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], TextField.prototype, "maxlength", 2);
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], TextField.prototype, "minlength", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "pattern", 2);
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], TextField.prototype, "size", 2);
-__decorateClass([
-  attr({ mode: "boolean" })
-], TextField.prototype, "spellcheck", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "appearance", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "shape", 2);
-__decorateClass([
-  attr
-], TextField.prototype, "autoComplete", 2);
-__decorateClass([
-  attr()
-], TextField.prototype, "scale", 2);
-__decorateClass([
-  attr({ attribute: "inputmode" })
-], TextField.prototype, "inputMode", 2);
-__decorateClass([
-  observable
-], TextField.prototype, "actionItemsSlottedContent", 2);
-__decorateClass([
-  observable
-], TextField.prototype, "leadingActionItemsSlottedContent", 2);
-TextField = __decorateClass([
-  errorText,
-  formElements
-], TextField);
-class DelegatesARIATextbox {
-}
-applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixinsWithObservables(
-  TextField,
-  AffixIcon,
-  FormElementCharCount,
-  FormElementHelperText,
-  FormElementSuccessText,
-  DelegatesARIATextbox
-);
-
-export { DelegatesARIATextbox as D, Reflector as R, TextField as T };
+export { styles as s };

package/shared/trapped-focus.cjs

@@ -1,12 +1,18 @@
 'use strict';
 
 class TrappedFocus {
+  static {
+    this.ignoredEvents = /* @__PURE__ */ new WeakSet();
+  }
+  static ignoreEvent(event) {
+    this.ignoredEvents.add(event);
+  }
   /**
    * @returns Whether focus was trapped.
    * @internal
    */
   _trappedFocus(event, getFocusableEls) {
-    if (event.key === "Tab") {
+    if (!TrappedFocus.ignoredEvents.has(event) && event.key === "Tab") {
       const focusableEls = getFocusableEls();
       const firstFocusableEl = focusableEls[0];
       const lastFocusableEl = focusableEls[focusableEls.length - 1];

package/shared/trapped-focus.js

@@ -1,10 +1,16 @@
 class TrappedFocus {
+  static {
+    this.ignoredEvents = /* @__PURE__ */ new WeakSet();
+  }
+  static ignoreEvent(event) {
+    this.ignoredEvents.add(event);
+  }
   /**
    * @returns Whether focus was trapped.
    * @internal
    */
   _trappedFocus(event, getFocusableEls) {
-    if (event.key === "Tab") {
+    if (!TrappedFocus.ignoredEvents.has(event) && event.key === "Tab") {
       const focusableEls = getFocusableEls();
       const firstFocusableEl = focusableEls[0];
       const lastFocusableEl = focusableEls[focusableEls.length - 1];

package/shared/utils/mixins.d.ts

@@ -0,0 +1,3 @@
+export type Constructor<T = {}> = new (...args: any[]) => T;
+export type AbstractConstructor<T = {}> = abstract new (...args: any[]) => T;
+export type MixinType<T extends (...args: any) => any> = InstanceType<ReturnType<T>>;

package/shared/vivid-element.cjs

@@ -2592,6 +2592,9 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
 });
 
 class VividElement extends FASTElement {
+  static {
+    this.VIVID_VERSION = "4.17.0";
+  }
 }
 
 exports.AttachedBehaviorHTMLDirective = AttachedBehaviorHTMLDirective;

package/shared/vivid-element.js

@@ -2590,6 +2590,9 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
 });
 
 class VividElement extends FASTElement {
+  static {
+    this.VIVID_VERSION = "4.17.0";
+  }
 }
 
-export { AttributeConfiguration as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, AttachedBehaviorHTMLDirective as b, booleanConverter as c, defineVividComponent as d, emptyArray as e, createRegisterFunction as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, volatile as v };
+export { AttributeConfiguration as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, AttachedBehaviorHTMLDirective as b, booleanConverter as c, createRegisterFunction as d, emptyArray as e, defineVividComponent as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, volatile as v };

package/side-drawer/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition45.cjs');
+const definition = require('../shared/definition46.cjs');
 
 definition.registerSideDrawer();

package/side-drawer/index.js

@@ -1,3 +1,3 @@
-import { r as registerSideDrawer } from '../shared/definition45.js';
+import { r as registerSideDrawer } from '../shared/definition46.js';
 
 registerSideDrawer();

package/slider/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition46.cjs');
+const definition = require('../shared/definition47.cjs');
 
 definition.registerSlider();

package/slider/index.js

@@ -1,3 +1,3 @@
-import { r as registerSlider } from '../shared/definition46.js';
+import { r as registerSlider } from '../shared/definition47.js';
 
 registerSlider();

package/split-button/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition47.cjs');
+const definition = require('../shared/definition48.cjs');
 
 definition.registerSplitButton();