@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition52.cjs

@@ -0,0 +1,304 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const definition$1 = require('./definition58.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(--_connotation-color-backdrop);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.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-backdrop: var(--vvd-text-area-success-backdrop, var(--vvd-color-success-50));--_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-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-backdrop: var(--vvd-text-area-alert-backdrop, var(--vvd-color-alert-50));--_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-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-backdrop: var(--vvd-text-area-accent-backdrop, var(--vvd-color-canvas));--_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-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{outline:2px solid var(--focus-stroke-color, currentColor);outline-offset:-2px}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  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;
+};
+let TextArea = class extends TextArea$1 {
+  #reflectToTextArea;
+  connectedCallback() {
+    super.connectedCallback();
+    this.#reflectToTextArea = new Reflector.Reflector(this, this.control);
+    this.#reflectToTextArea.property("value", "value", true);
+  }
+  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);
+
+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() {
+  return index.html`
+		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
+	`;
+}
+const TextAreaTemplate = (context) => {
+  return index.html`
+	  <div class="${getClasses}">
+		${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
+		${when.when((x) => x.label, renderLabel())}
+			<textarea class="control" id="control"
+				?autofocus="${(x) => x.autofocus}"
+				placeholder="${(x) => x.placeholder ? x.placeholder : null}"
+				name="${(x) => x.name ? x.name : null}"
+				minlength="${(x) => x.minlength ? x.minlength : null}"
+				maxlength="${(x) => x.maxlength ? x.maxlength : null}"
+				rows="${(x) => x.rows ? x.rows : null}"
+				cols="${(x) => x.cols ? x.cols : null}"
+				wrap="${(x) => x.wrap ? x.wrap : null}"
+				?readonly="${(x) => x.readOnly}"
+				?disabled="${(x) => x.disabled}"
+				?required="${(x) => x.required}"
+				?spellcheck="${(x) => x.spellcheck}"
+				aria-atomic="${(x) => x.ariaAtomic}"
+				aria-busy="${(x) => x.ariaBusy}"
+				aria-current="${(x) => x.ariaCurrent}"
+				aria-details="${(x) => x.ariaDetails}"
+				aria-disabled="${(x) => x.ariaDisabled}"
+				aria-errormessage="${(x) => x.ariaErrormessage}"
+				aria-haspopup="${(x) => x.ariaHaspopup}"
+				aria-hidden="${(x) => x.ariaHidden}"
+				aria-invalid="${(x) => x.ariaInvalid}"
+				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+				aria-label="${(x) => x.ariaLabel}"
+				aria-live="${(x) => x.ariaLive}"
+				aria-relevant="${(x) => x.ariaRelevant}"
+				aria-roledescription="${(x) => x.ariaRoledescription}"
+				@input="${(x) => x.handleTextInput()}"
+				@change="${(x) => x.handleChange()}"
+				${ref.ref("control")}
+	  >
+			</textarea>
+		${when.when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
+		${when.when((x) => !x.successText && x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
+		${when.when((x) => x.successText, index$1.getFeedbackTemplate("success", context))}
+	  </div>
+	`;
+};
+
+const textAreaDefinition = TextArea.compose({
+  baseName: "text-area",
+  template: TextAreaTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerTextArea = index.registerFactory(textAreaRegistries);
+
+exports.registerTextArea = registerTextArea;
+exports.textAreaDefinition = textAreaDefinition;
+exports.textAreaRegistries = textAreaRegistries;

package/shared/definition53.cjs

@@ -0,0 +1,309 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition$1 = require('./definition58.cjs');
+const definition = require('./definition26.cjs');
+const affix = require('./affix.cjs');
+const index$1 = require('./index2.cjs');
+const Reflector = require('./Reflector.cjs');
+const icon = require('./icon.cjs');
+const textField = require('./text-field2.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const textField$1 = require('./text-field.cjs');
+const focus = require('./focus2.cjs');
+const when = require('./when.cjs');
+const slotted = require('./slotted.cjs');
+const classNames = require('./class-names.cjs');
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  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]];
+}
+
+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)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
+const generateRandomId = () => v4();
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
+const getSafariWorkaroundStyleSheet = icon.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 textField.TextField {
+  constructor() {
+    super(...arguments);
+    /**
+     * @internal
+     */
+    this._labelEl = null;
+  }
+  /**
+   * @internal
+   */
+  labelChanged() {
+    if (this._labelEl) {
+      this.#handleLabelChange(this._labelEl);
+    }
+  }
+  #handleLabelChange(labelEl) {
+    if (!this.label) {
+      labelEl.remove();
+    } else {
+      labelEl.textContent = this.label;
+      if (!labelEl.isConnected) {
+        this.appendChild(labelEl);
+      }
+    }
+  }
+  #reflectToInput;
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.control) {
+      const uniqueId = this.id || generateRandomId();
+      const controlId = `vvd-text-field-control-${uniqueId}`;
+      const input = document.createElement("input");
+      input.slot = "_control";
+      input.id = controlId;
+      input.className = safariWorkaroundClassName;
+      this.control = input;
+      this.#reflectToInput = new Reflector.Reflector(this, input);
+      this.#reflectToInput.booleanAttribute("autofocus", "autofocus");
+      this.#reflectToInput.booleanAttribute("disabled", "disabled");
+      this.#reflectToInput.booleanAttribute("readOnly", "readonly");
+      this.#reflectToInput.booleanAttribute("required", "required");
+      this.#reflectToInput.booleanAttribute("spellcheck", "spellcheck");
+      this.#reflectToInput.attribute("list", "list");
+      this.#reflectToInput.attribute("maxlength", "maxlength");
+      this.#reflectToInput.attribute("minlength", "minlength");
+      this.#reflectToInput.attribute("pattern", "pattern");
+      this.#reflectToInput.attribute("placeholder", "placeholder");
+      this.#reflectToInput.attribute("size", "size");
+      this.#reflectToInput.attribute("autoComplete", "autocomplete");
+      this.#reflectToInput.attribute("type", "type");
+      this.#reflectToInput.attribute("ariaAtomic", "aria-atomic");
+      this.#reflectToInput.attribute("ariaBusy", "aria-busy");
+      this.#reflectToInput.attribute("ariaCurrent", "aria-current");
+      this.#reflectToInput.attribute("ariaDetails", "aria-details");
+      this.#reflectToInput.attribute("ariaDisabled", "aria-disabled");
+      this.#reflectToInput.attribute("ariaHaspopup", "aria-haspopup");
+      this.#reflectToInput.attribute("ariaHidden", "aria-hidden");
+      this.#reflectToInput.attribute("ariaInvalid", "aria-invalid");
+      this.#reflectToInput.attribute("ariaKeyshortcuts", "aria-keyshortcuts");
+      this.#reflectToInput.attribute("ariaLabel", "aria-label");
+      this.#reflectToInput.attribute("ariaLive", "aria-live");
+      this.#reflectToInput.attribute("ariaRelevant", "aria-relevant");
+      this.#reflectToInput.attribute("ariaRoledescription", "aria-roledescription");
+      this.#reflectToInput.property("value", "value", true);
+      input.addEventListener("input", () => {
+        this.handleTextInput();
+      });
+      input.addEventListener("change", () => {
+        this.handleChange();
+      });
+      input.addEventListener("blur", () => {
+        this.$emit("blur");
+      });
+      input.addEventListener("focus", () => {
+        this.$emit("focus");
+      });
+      this.appendChild(input);
+      const label = document.createElement("label");
+      label.slot = "_label";
+      label.htmlFor = controlId;
+      this._labelEl = label;
+      this.#handleLabelChange(label);
+      installSafariWorkaroundStyle(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#reflectToInput.destroy();
+  }
+  focus() {
+    this.control?.focus();
+  }
+};
+__decorateClass([
+  index.attr
+], exports.TextField.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], exports.TextField.prototype, "shape", 2);
+__decorateClass([
+  index.attr
+], exports.TextField.prototype, "autoComplete", 2);
+__decorateClass([
+  index.observable
+], exports.TextField.prototype, "actionItemsSlottedContent", 2);
+__decorateClass([
+  index.observable
+], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
+exports.TextField = __decorateClass([
+  index$1.errorText,
+  index$1.formElements
+], exports.TextField);
+applyMixins.applyMixins(exports.TextField, affix.AffixIcon, index$1.FormElementCharCount, index$1.FormElementHelperText, index$1.FormElementSuccessText);
+
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText,
+  actionItemsSlottedContent,
+  leadingActionItemsSlottedContent,
+  icon
+}) => classNames.classNames(
+  ["error", Boolean(errorValidationMessage)],
+  ["disabled", disabled],
+  ["has-value", Boolean(value)],
+  ["readonly", readOnly],
+  ["placeholder", Boolean(placeholder)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["no-label", !label],
+  ["has-icon", !!icon],
+  ["success", Boolean(successText)],
+  ["action-items", !!actionItemsSlottedContent?.length],
+  ["leading-action-items", !!leadingActionItemsSlottedContent?.length],
+  ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)]
+);
+function renderCharCount() {
+  return index.html`
+		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
+	`;
+}
+const TextfieldTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const focusTemplate = focus.focusTemplateFactory(context);
+  return index.html`
+	<div class="base ${getStateClasses}">
+    ${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
+    <slot class="label" name="_label"></slot>
+    <div class="fieldset">
+			<div class="leading-items-wrapper">
+				<slot name="leading-action-items"  ${slotted.slotted("leadingActionItemsSlottedContent")}></slot>
+				${(x) => affixIconTemplate(x.icon)}
+			</div>
+
+			<div class="wrapper">
+				<slot class="control" name="_control"></slot>
+				${() => focusTemplate}
+			</div>
+			<div class="action-items-wrapper">
+				<slot name="action-items"  ${slotted.slotted("actionItemsSlottedContent")}></slot>
+			</div>
+
+    </div>
+	  ${when.when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
+	  ${when.when((x) => !x.successText && x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
+	  ${when.when((x) => x.successText, index$1.getFeedbackTemplate("success", context))}
+	</div>`;
+};
+
+const textFieldDefinition = exports.TextField.compose({
+  baseName: "text-field",
+  template: TextfieldTemplate,
+  styles: textField$1.styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const textFieldRegistries = [textFieldDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerTextField = index.registerFactory(textFieldRegistries);
+
+exports.registerTextField = registerTextField;
+exports.textFieldDefinition = textFieldDefinition;
+exports.textFieldRegistries = textFieldRegistries;