@nysds/nys-textinput 1.11.1 → 1.11.3

package/dist/nys-textinput.js

@@ -1,780 +1,15 @@
-import { css as ot, LitElement as at, html as j } from "lit";
-/*!
-   * ▒█▄░▒█ ▒█░░▒█ ▒█▀▀▀█ ▒█▀▀▄ ▒█▀▀▀█ 
-   * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
-   * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
-   * 
-   * TextInput Component
-   * Part of the New York State Design System
-   * Repository: https://github.com/its-hcd/nysds
-   * License: MIT
-*/
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const O = globalThis, L = O.ShadowRoot && (O.ShadyCSS === void 0 || O.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, et = Symbol(), W = /* @__PURE__ */ new WeakMap();
-let lt = class {
-  constructor(t, e, s) {
-    if (this._$cssResult$ = !0, s !== et) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t, this.t = e;
-  }
-  get styleSheet() {
-    let t = this.o;
-    const e = this.t;
-    if (L && t === void 0) {
-      const s = e !== void 0 && e.length === 1;
-      s && (t = W.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && W.set(e, t));
-    }
-    return t;
-  }
-  toString() {
-    return this.cssText;
-  }
+import { LitElement as y, unsafeCSS as c, html as h } from "lit";
+import { property as o, state as _ } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+const v = ':host{--_nys-textinput-width: 100%;--_nys-textinput-height: var(--nys-size-500, 40px);--_nys-textinput-border-radius: var(--nys-radius-md, 4px);--_nys-textinput-border-width: var(--nys-border-width-sm, 1px);--_nys-textinput-border-color: var(--nys-color-neutral-400, #909395);--_nys-textinput-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-textinput-color--placeholder: var( --nys-color-text-weaker, var(--nys-color-neutral-500, #797c7f) );--_nys-textinput-padding: var(--nys-space-100, 8px);--_nys-textinput-gap: var(--nys-space-50, 4px);--_nys-textinput-background-color: var( --nys-color-ink-reverse, var(--nys-color-white, #ffffff) );--_nys-textinput-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-textinput-outline-color--hover: var( --nys-color-neutral-900, #1b1b1b );--_nys-textinput-outline-width: var(--nys-border-width-sm, 1px);--_nys-textinput-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-textinput-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-textinput-border-color--disabled: var( --nys-color-neutral-200, #bec0c1 );--_nys-textinput-color--disabled: var( --nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1) );--_nys-textinput-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-textinput-font-size: var(--nys-font-size-ui-md, 16px);--_nys-textinput-font-weight: var(--nys-font-weight-regular, 400);--_nys-textinput-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-textinput-letter-spacing: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) )}:host([width=sm]){--_nys-textinput-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-textinput-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-textinput-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-textinput-width: 100%;flex:1}:host([showError]){--_nys-textinput-border-color: var(--nys-color-danger, #b52c2c)}.nys-textinput{font-weight:var(--_nys-textinput-font-weight);font-family:var(--_nys-textinput-font-family);font-size:var(--_nys-textinput-font-size);line-height:var(--_nys-textinput-line-height);letter-spacing:var(--_nys-textinput-letter-spacing);color:var(--_nys-textinput-color);gap:var(--_nys-textinput-gap);display:flex;flex-direction:column}.nys-textinput__mask-overlay{position:absolute;margin:calc(var(--_nys-textinput-padding) + var(--_nys-textinput-border-width));color:var(--nys-color-text-weaker, #797c7f);display:inline;overflow:hidden;white-space:nowrap;font:inherit;letter-spacing:normal}.nys-textinput__input{color:var(--_nys-textinput-color);border-radius:var(--_nys-textinput-border-radius);border:solid var(--_nys-textinput-border-color) var(--_nys-textinput-border-width);outline-color:transparent;outline-width:var(--_nys-textinput-outline-width);outline-style:solid;padding:var(--_nys-textinput-padding);width:100%;height:var(--_nys-textinput-height);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:transparent;position:relative;font:inherit}.nys-textinput__input::placeholder{color:var(--_nys-textinput-color--placeholder)}.nys-textinput__buttoncontainer{width:var(--_nys-textinput-width);max-width:100%;display:flex}.nys-textinput__buttoncontainer.has-end-button .nys-textinput__input{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.nys-textinput__buttoncontainer.has-start-button .nys-textinput__input{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}.nys-textinput__container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--_nys-textinput-background-color);border-radius:var(--_nys-textinput-border-radius)}::slotted(nys-button){--_nys-button-height: var(--_nys-textinput-height);--_nys-button-border-radius--start: var(--_nys-textinput-border-radius);--_nys-button-border-radius--end: var(--_nys-textinput-border-radius);--_nys-button-background-color--disabled: var( --_nys-textinput-background-color--disabled );--_nys-button-border-color--disabled: var(--_nys-textinput-color--disabled);--_nys-button-color--disabled: var(--_nys-textinput-color--disabled);--_nys-button-border-width: var(--_nys-textinput-border-width);z-index:1}.nys-textinput__buttoncontainer.has-start-button ::slotted(nys-button){--_nys-button-border-radius--end: 0}.nys-textinput__buttoncontainer.has-end-button ::slotted(nys-button){--_nys-button-border-radius--start: 0}.eye-icon{position:absolute;right:var(--nys-space-50, 4px);top:50%;transform:translateY(-50%);cursor:pointer;color:var(--_nys-textinput-color--icon);--nys-button-background-color: var(--_nys-textinput-background-color);--nys-button-background-color--hover: var( --_nys-textinput-background-color );--nys-button-background-color--active: var( --_nys-textinput-background-color );--_nys-button-outline-focus: calc( var(--_nys-button-outline-width) * -1 );--_nys-button-padding--y: var(--nys-space-50, 4px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-height: var(--nys-size-300, 32px);--_nys-button-width: var(--nys-size-400, 32px)}.nys-textinput__input:hover:not(:disabled):not(:focus){outline-color:var(--_nys-textinput-outline-color--hover);border-color:var(--_nys-textinput-outline-color--hover)}.nys-textinput__input:focus{outline-color:var(--_nys-textinput-outline-color--focus);border-color:var(--_nys-textinput-outline-color--focus);caret-color:var(--_nys-textinput-outline-color--focus)}.nys-textinput__input:disabled,.nys-textinput__input:disabled::placeholder,.nys-textinput__input:disabled+.eye-icon{background-color:var(--_nys-textinput-background-color--disabled);border-color:var(--_nys-textinput-border-color--disabled);color:var(--_nys-textinput-color--disabled);cursor:not-allowed}';
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (p, e, s, t) => {
+  for (var i = t > 1 ? void 0 : t ? f(e, s) : e, l = p.length - 1, a; l >= 0; l--)
+    (a = p[l]) && (i = (t ? a(e, s, i) : a(i)) || i);
+  return t && i && b(e, s, i), i;
 };
-const ht = (r) => new lt(typeof r == "string" ? r : r + "", void 0, et), dt = (r, t) => {
-  if (L) r.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
-  else for (const e of t) {
-    const s = document.createElement("style"), i = O.litNonce;
-    i !== void 0 && s.setAttribute("nonce", i), s.textContent = e.cssText, r.appendChild(s);
-  }
-}, F = L ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
-  let e = "";
-  for (const s of t.cssRules) e += s.cssText;
-  return ht(e);
-})(r) : r;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const { is: ut, defineProperty: ct, getOwnPropertyDescriptor: pt, getOwnPropertyNames: yt, getOwnPropertySymbols: _t, getPrototypeOf: ft } = Object, I = globalThis, Y = I.trustedTypes, vt = Y ? Y.emptyScript : "", bt = I.reactiveElementPolyfillSupport, P = (r, t) => r, T = { toAttribute(r, t) {
-  switch (t) {
-    case Boolean:
-      r = r ? vt : null;
-      break;
-    case Object:
-    case Array:
-      r = r == null ? r : JSON.stringify(r);
-  }
-  return r;
-}, fromAttribute(r, t) {
-  let e = r;
-  switch (t) {
-    case Boolean:
-      e = r !== null;
-      break;
-    case Number:
-      e = r === null ? null : Number(r);
-      break;
-    case Object:
-    case Array:
-      try {
-        e = JSON.parse(r);
-      } catch {
-        e = null;
-      }
-  }
-  return e;
-} }, V = (r, t) => !ut(r, t), G = { attribute: !0, type: String, converter: T, reflect: !1, useDefault: !1, hasChanged: V };
-Symbol.metadata ??= Symbol("metadata"), I.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-class E extends HTMLElement {
-  static addInitializer(t) {
-    this._$Ei(), (this.l ??= []).push(t);
-  }
-  static get observedAttributes() {
-    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
-  }
-  static createProperty(t, e = G) {
-    if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
-      const s = Symbol(), i = this.getPropertyDescriptor(t, s, e);
-      i !== void 0 && ct(this.prototype, t, i);
-    }
-  }
-  static getPropertyDescriptor(t, e, s) {
-    const { get: i, set: n } = pt(this.prototype, t) ?? { get() {
-      return this[e];
-    }, set(o) {
-      this[e] = o;
-    } };
-    return { get: i, set(o) {
-      const l = i?.call(this);
-      n?.call(this, o), this.requestUpdate(t, l, s);
-    }, configurable: !0, enumerable: !0 };
-  }
-  static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? G;
-  }
-  static _$Ei() {
-    if (this.hasOwnProperty(P("elementProperties"))) return;
-    const t = ft(this);
-    t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
-  }
-  static finalize() {
-    if (this.hasOwnProperty(P("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(P("properties"))) {
-      const e = this.properties, s = [...yt(e), ..._t(e)];
-      for (const i of s) this.createProperty(i, e[i]);
-    }
-    const t = this[Symbol.metadata];
-    if (t !== null) {
-      const e = litPropertyMetadata.get(t);
-      if (e !== void 0) for (const [s, i] of e) this.elementProperties.set(s, i);
-    }
-    this._$Eh = /* @__PURE__ */ new Map();
-    for (const [e, s] of this.elementProperties) {
-      const i = this._$Eu(e, s);
-      i !== void 0 && this._$Eh.set(i, e);
-    }
-    this.elementStyles = this.finalizeStyles(this.styles);
-  }
-  static finalizeStyles(t) {
-    const e = [];
-    if (Array.isArray(t)) {
-      const s = new Set(t.flat(1 / 0).reverse());
-      for (const i of s) e.unshift(F(i));
-    } else t !== void 0 && e.push(F(t));
-    return e;
-  }
-  static _$Eu(t, e) {
-    const s = e.attribute;
-    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
-  }
-  constructor() {
-    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
-  }
-  _$Ev() {
-    this._$ES = new Promise(((t) => this.enableUpdating = t)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t) => t(this)));
-  }
-  addController(t) {
-    (this._$EO ??= /* @__PURE__ */ new Set()).add(t), this.renderRoot !== void 0 && this.isConnected && t.hostConnected?.();
-  }
-  removeController(t) {
-    this._$EO?.delete(t);
-  }
-  _$E_() {
-    const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
-    for (const s of e.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
-    t.size > 0 && (this._$Ep = t);
-  }
-  createRenderRoot() {
-    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return dt(t, this.constructor.elementStyles), t;
-  }
-  connectedCallback() {
-    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
-  }
-  enableUpdating(t) {
-  }
-  disconnectedCallback() {
-    this._$EO?.forEach(((t) => t.hostDisconnected?.()));
-  }
-  attributeChangedCallback(t, e, s) {
-    this._$AK(t, s);
-  }
-  _$ET(t, e) {
-    const s = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, s);
-    if (i !== void 0 && s.reflect === !0) {
-      const n = (s.converter?.toAttribute !== void 0 ? s.converter : T).toAttribute(e, s.type);
-      this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
-    }
-  }
-  _$AK(t, e) {
-    const s = this.constructor, i = s._$Eh.get(t);
-    if (i !== void 0 && this._$Em !== i) {
-      const n = s.getPropertyOptions(i), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : T;
-      this._$Em = i;
-      const l = o.fromAttribute(e, n.type);
-      this[i] = l ?? this._$Ej?.get(i) ?? l, this._$Em = null;
-    }
-  }
-  requestUpdate(t, e, s) {
-    if (t !== void 0) {
-      const i = this.constructor, n = this[t];
-      if (s ??= i.getPropertyOptions(t), !((s.hasChanged ?? V)(n, e) || s.useDefault && s.reflect && n === this._$Ej?.get(t) && !this.hasAttribute(i._$Eu(t, s)))) return;
-      this.C(t, e, s);
-    }
-    this.isUpdatePending === !1 && (this._$ES = this._$EP());
-  }
-  C(t, e, { useDefault: s, reflect: i, wrapped: n }, o) {
-    s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, o ?? e ?? this[t]), n !== !0 || o !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), i === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
-  }
-  async _$EP() {
-    this.isUpdatePending = !0;
-    try {
-      await this._$ES;
-    } catch (e) {
-      Promise.reject(e);
-    }
-    const t = this.scheduleUpdate();
-    return t != null && await t, !this.isUpdatePending;
-  }
-  scheduleUpdate() {
-    return this.performUpdate();
-  }
-  performUpdate() {
-    if (!this.isUpdatePending) return;
-    if (!this.hasUpdated) {
-      if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-        for (const [i, n] of this._$Ep) this[i] = n;
-        this._$Ep = void 0;
-      }
-      const s = this.constructor.elementProperties;
-      if (s.size > 0) for (const [i, n] of s) {
-        const { wrapped: o } = n, l = this[i];
-        o !== !0 || this._$AL.has(i) || l === void 0 || this.C(i, void 0, n, l);
-      }
-    }
-    let t = !1;
-    const e = this._$AL;
-    try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), this._$EO?.forEach(((s) => s.hostUpdate?.())), this.update(e)) : this._$EM();
-    } catch (s) {
-      throw t = !1, this._$EM(), s;
-    }
-    t && this._$AE(e);
-  }
-  willUpdate(t) {
-  }
-  _$AE(t) {
-    this._$EO?.forEach(((e) => e.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
-  }
-  _$EM() {
-    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$ES;
-  }
-  shouldUpdate(t) {
-    return !0;
-  }
-  update(t) {
-    this._$Eq &&= this._$Eq.forEach(((e) => this._$ET(e, this[e]))), this._$EM();
-  }
-  updated(t) {
-  }
-  firstUpdated(t) {
-  }
-}
-E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[P("elementProperties")] = /* @__PURE__ */ new Map(), E[P("finalized")] = /* @__PURE__ */ new Map(), bt?.({ ReactiveElement: E }), (I.reactiveElementVersions ??= []).push("2.1.1");
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const gt = { attribute: !0, type: String, converter: T, reflect: !1, hasChanged: V }, $t = (r = gt, t, e) => {
-  const { kind: s, metadata: i } = e;
-  let n = globalThis.litPropertyMetadata.get(i);
-  if (n === void 0 && globalThis.litPropertyMetadata.set(i, n = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), n.set(e.name, r), s === "accessor") {
-    const { name: o } = e;
-    return { set(l) {
-      const a = t.get.call(this);
-      t.set.call(this, l), this.requestUpdate(o, a, r);
-    }, init(l) {
-      return l !== void 0 && this.C(o, void 0, r, l), l;
-    } };
-  }
-  if (s === "setter") {
-    const { name: o } = e;
-    return function(l) {
-      const a = this[o];
-      t.call(this, l), this.requestUpdate(o, a, r);
-    };
-  }
-  throw Error("Unsupported decorator location: " + s);
-};
-function u(r) {
-  return (t, e) => typeof e == "object" ? $t(r, t, e) : ((s, i, n) => {
-    const o = i.hasOwnProperty(n);
-    return i.constructor.createProperty(n, s), o ? Object.getOwnPropertyDescriptor(i, n) : void 0;
-  })(r, t, e);
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function mt(r) {
-  return u({ ...r, state: !0, attribute: !1 });
-}
-const xt = ot`
-  :host {
-    /* Anything that can be overridden should be defined here */
-
-    /* Global Text Input Styles */
-    --_nys-textinput-width: 100%;
-    --_nys-textinput-height: var(--nys-size-500, 40px);
-    --_nys-textinput-border-radius: var(--nys-radius-md, 4px);
-    --_nys-textinput-border-width: var(--nys-border-width-sm, 1px);
-    --_nys-textinput-border-color: var(--nys-color-neutral-400, #909395);
-    --_nys-textinput-color: var(
-      --nys-color-text,
-      var(--nys-color-neutral-900, #1b1b1b)
-    );
-    --_nys-textinput-color--placeholder: var(
-      --nys-color-text-weaker,
-      var(--nys-color-neutral-500, #797c7f)
-    );
-    --_nys-textinput-padding: var(--nys-space-100, 8px);
-    --_nys-textinput-gap: var(--nys-space-50, 4px);
-    --_nys-textinput-background-color: var(
-      --nys-color-ink-reverse,
-      var(--nys-color-white, #ffffff)
-    );
-    --_nys-textinput-color: var(
-      --nys-color-ink,
-      var(--nys-color-neutral-900, #1b1b1b)
-    );
-
-    /* Hovered */
-    --_nys-textinput-outline-color--hover: var(
-      --nys-color-neutral-900,
-      #1b1b1b
-    );
-    --_nys-textinput-outline-width: var(--nys-border-width-sm, 1px);
-
-    /* Focused */
-    --_nys-textinput-outline-color--focus: var(--nys-color-focus, #004dd1);
-
-    /* Disabled */
-    --_nys-textinput-background-color--disabled: var(
-      --nys-color-neutral-10,
-      #f6f6f6
-    );
-    --_nys-textinput-border-color--disabled: var(
-      --nys-color-neutral-200,
-      #bec0c1
-    );
-    --_nys-textinput-color--disabled: var(
-      --nys-color-text-disabled,
-      var(--nys-color-neutral-200, #bec0c1)
-    );
-
-    /* Global Font Styles */
-    --_nys-textinput-font-family: var(
-      --nys-font-family-ui,
-      var(
-        --nys-font-family-sans,
-        "Proxima Nova",
-        "Helvetica Neue",
-        "Helvetica",
-        "Arial",
-        sans-serif
-      )
-    );
-    --_nys-textinput-font-size: var(--nys-font-size-ui-md, 16px);
-    --_nys-textinput-font-weight: var(--nys-font-weight-regular, 400);
-    --_nys-textinput-line-height: var(--nys-font-lineheight-ui-md, 24px);
-    --_nys-textinput-letter-spacing: var(
-      --nys-font-letterspacing-ui-md,
-      var(--nys-font-letterspacing-400, 0.044px)
-    );
-  }
-
-  :host([width="sm"]) {
-    --_nys-textinput-width: var(--nys-form-width-sm, 88px);
-  }
-
-  :host([width="md"]) {
-    --_nys-textinput-width: var(--nys-form-width-md, 200px);
-  }
-
-  :host([width="lg"]) {
-    --_nys-textinput-width: var(--nys-form-width-lg, 384px);
-  }
-
-  :host([width="full"]) {
-    --_nys-textinput-width: 100%;
-    flex: 1; /* stretches width for flex container */
-  }
-
-  :host([showError]) {
-    --_nys-textinput-border-color: var(--nys-color-danger, #b52c2c);
-  }
-
-  .nys-textinput {
-    font-weight: var(--_nys-textinput-font-weight);
-    font-family: var(--_nys-textinput-font-family);
-    font-size: var(--_nys-textinput-font-size);
-    line-height: var(--_nys-textinput-line-height);
-    letter-spacing: var(--_nys-textinput-letter-spacing);
-    color: var(--_nys-textinput-color);
-    gap: var(--_nys-textinput-gap);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .nys-textinput__mask-overlay {
-    position: absolute;
-    margin: calc(
-      var(--_nys-textinput-padding) + var(--_nys-textinput-border-width)
-    );
-    color: var(--nys-color-text-weaker, #797c7f);
-    display: inline;
-    overflow: hidden;
-    white-space: nowrap;
-    font: inherit;
-    letter-spacing: normal;
-  }
-
-  .nys-textinput__input {
-    color: var(--_nys-textinput-color);
-    border-radius: var(--_nys-textinput-border-radius);
-    border: solid var(--_nys-textinput-border-color)
-      var(--_nys-textinput-border-width);
-    outline-color: transparent;
-    outline-width: var(--_nys-textinput-outline-width);
-    outline-style: solid;
-    padding: var(--_nys-textinput-padding);
-    width: 100%;
-    height: var(--_nys-textinput-height);
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    background-color: transparent;
-    position: relative;
-    font: inherit;
-  }
-  .nys-textinput__input::placeholder {
-    color: var(--_nys-textinput-color--placeholder);
-  }
-
-  .nys-textinput__buttoncontainer {
-    width: var(--_nys-textinput-width);
-    max-width: 100%;
-    display: flex;
-  }
-
-  .nys-textinput__buttoncontainer.has-end-button .nys-textinput__input {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-inline-end: none;
-  }
-
-  .nys-textinput__buttoncontainer.has-start-button .nys-textinput__input {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    border-inline-start: none;
-  }
-
-  .nys-textinput__container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    background-color: var(--_nys-textinput-background-color);
-    border-radius: var(--_nys-textinput-border-radius);
-  }
-
-  ::slotted(nys-button) {
-    /* These props ARE NOT publicly overridable */
-    --_nys-button-height: var(--_nys-textinput-height);
-    --_nys-button-border-radius--start: var(--_nys-textinput-border-radius);
-    --_nys-button-border-radius--end: var(--_nys-textinput-border-radius);
-    --_nys-button-background-color--disabled: var(
-      --_nys-textinput-background-color--disabled
-    );
-    --_nys-button-border-color--disabled: var(--_nys-textinput-color--disabled);
-    --_nys-button-color--disabled: var(--_nys-textinput-color--disabled);
-    --_nys-button-border-width: var(--_nys-textinput-border-width);
-    z-index: 1; /* to make sure the button outline renders on top of the input */
-  }
-
-  .nys-textinput__buttoncontainer.has-start-button ::slotted(nys-button) {
-    --_nys-button-border-radius--end: 0;
-  }
-
-  .nys-textinput__buttoncontainer.has-end-button ::slotted(nys-button) {
-    --_nys-button-border-radius--start: 0;
-  }
-
-  .eye-icon {
-    position: absolute;
-    right: var(--nys-space-50, 4px);
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: var(--_nys-textinput-color--icon);
-    /* These props ARE publicly overridable */
-    --nys-button-background-color: var(--_nys-textinput-background-color);
-    --nys-button-background-color--hover: var(
-      --_nys-textinput-background-color
-    );
-    --nys-button-background-color--active: var(
-      --_nys-textinput-background-color
-    );
-    /* These props ARE NOT publicly overridable */
-    --_nys-button-outline-focus: calc(
-      var(--_nys-button-outline-width) * -1
-    ); /* Needs to be negative of the offset width */
-    --_nys-button-padding--y: var(--nys-space-50, 4px);
-    --_nys-button-padding--x: var(--nys-space-50, 4px);
-    --_nys-button-height: var(--nys-size-300, 32px);
-    --_nys-button-width: var(--nys-size-400, 32px);
-  }
-
-  /* Hovered */
-  .nys-textinput__input:hover:not(:disabled):not(:focus) {
-    outline-color: var(--_nys-textinput-outline-color--hover);
-    border-color: var(--_nys-textinput-outline-color--hover);
-  }
-
-  /* Focused */
-  .nys-textinput__input:focus {
-    outline-color: var(--_nys-textinput-outline-color--focus);
-    border-color: var(--_nys-textinput-outline-color--focus);
-    caret-color: var(--_nys-textinput-outline-color--focus);
-  }
-
-  /* Disabled */
-  .nys-textinput__input:disabled,
-  .nys-textinput__input:disabled::placeholder,
-  .nys-textinput__input:disabled + .eye-icon {
-    background-color: var(--_nys-textinput-background-color--disabled);
-    border-color: var(--_nys-textinput-border-color--disabled);
-    color: var(--_nys-textinput-color--disabled);
-    cursor: not-allowed;
-  }
-`;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const z = globalThis, R = z.trustedTypes, J = R ? R.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, st = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, it = "?" + g, wt = `<${it}>`, w = document, H = () => w.createComment(""), M = (r) => r === null || typeof r != "object" && typeof r != "function", D = Array.isArray, At = (r) => D(r) || typeof r?.[Symbol.iterator] == "function", B = `[ 	
-\f\r]`, S = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, K = /-->/g, Z = />/g, $ = RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, nt = /^(?:script|style|textarea|title)$/i, C = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), tt = /* @__PURE__ */ new WeakMap(), x = w.createTreeWalker(w, 129);
-function rt(r, t) {
-  if (!D(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return J !== void 0 ? J.createHTML(t) : t;
-}
-const Et = (r, t) => {
-  const e = r.length - 1, s = [];
-  let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = S;
-  for (let l = 0; l < e; l++) {
-    const a = r[l];
-    let y, _, h = -1, v = 0;
-    for (; v < a.length && (o.lastIndex = v, _ = o.exec(a), _ !== null); ) v = o.lastIndex, o === S ? _[1] === "!--" ? o = K : _[1] !== void 0 ? o = Z : _[2] !== void 0 ? (nt.test(_[2]) && (i = RegExp("</" + _[2], "g")), o = $) : _[3] !== void 0 && (o = $) : o === $ ? _[0] === ">" ? (o = i ?? S, h = -1) : _[1] === void 0 ? h = -2 : (h = o.lastIndex - _[2].length, y = _[1], o = _[3] === void 0 ? $ : _[3] === '"' ? X : Q) : o === X || o === Q ? o = $ : o === K || o === Z ? o = S : (o = $, i = void 0);
-    const b = o === $ && r[l + 1].startsWith("/>") ? " " : "";
-    n += o === S ? a + wt : h >= 0 ? (s.push(y), a.slice(0, h) + st + a.slice(h) + g + b) : a + g + (h === -2 ? l : b);
-  }
-  return [rt(r, n + (r[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
-};
-class k {
-  constructor({ strings: t, _$litType$: e }, s) {
-    let i;
-    this.parts = [];
-    let n = 0, o = 0;
-    const l = t.length - 1, a = this.parts, [y, _] = Et(t, e);
-    if (this.el = k.createElement(y, s), x.currentNode = this.el.content, e === 2 || e === 3) {
-      const h = this.el.content.firstChild;
-      h.replaceWith(...h.childNodes);
-    }
-    for (; (i = x.nextNode()) !== null && a.length < l; ) {
-      if (i.nodeType === 1) {
-        if (i.hasAttributes()) for (const h of i.getAttributeNames()) if (h.endsWith(st)) {
-          const v = _[o++], b = i.getAttribute(h).split(g), U = /([.?@])?(.*)/.exec(v);
-          a.push({ type: 1, index: n, name: U[2], strings: b, ctor: U[1] === "." ? Pt : U[1] === "?" ? Mt : U[1] === "@" ? Ct : q }), i.removeAttribute(h);
-        } else h.startsWith(g) && (a.push({ type: 6, index: n }), i.removeAttribute(h));
-        if (nt.test(i.tagName)) {
-          const h = i.textContent.split(g), v = h.length - 1;
-          if (v > 0) {
-            i.textContent = R ? R.emptyScript : "";
-            for (let b = 0; b < v; b++) i.append(h[b], H()), x.nextNode(), a.push({ type: 2, index: ++n });
-            i.append(h[v], H());
-          }
-        }
-      } else if (i.nodeType === 8) if (i.data === it) a.push({ type: 2, index: n });
-      else {
-        let h = -1;
-        for (; (h = i.data.indexOf(g, h + 1)) !== -1; ) a.push({ type: 7, index: n }), h += g.length - 1;
-      }
-      n++;
-    }
-  }
-  static createElement(t, e) {
-    const s = w.createElement("template");
-    return s.innerHTML = t, s;
-  }
-}
-function A(r, t, e = r, s) {
-  if (t === C) return t;
-  let i = s !== void 0 ? e._$Co?.[s] : e._$Cl;
-  const n = M(t) ? void 0 : t._$litDirective$;
-  return i?.constructor !== n && (i?._$AO?.(!1), n === void 0 ? i = void 0 : (i = new n(r), i._$AT(r, e, s)), s !== void 0 ? (e._$Co ??= [])[s] = i : e._$Cl = i), i !== void 0 && (t = A(r, i._$AS(r, t.values), i, s)), t;
-}
-class St {
-  constructor(t, e) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
-  }
-  get parentNode() {
-    return this._$AM.parentNode;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  u(t) {
-    const { el: { content: e }, parts: s } = this._$AD, i = (t?.creationScope ?? w).importNode(e, !0);
-    x.currentNode = i;
-    let n = x.nextNode(), o = 0, l = 0, a = s[0];
-    for (; a !== void 0; ) {
-      if (o === a.index) {
-        let y;
-        a.type === 2 ? y = new N(n, n.nextSibling, this, t) : a.type === 1 ? y = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (y = new kt(n, this, t)), this._$AV.push(y), a = s[++l];
-      }
-      o !== a?.index && (n = x.nextNode(), o++);
-    }
-    return x.currentNode = w, i;
-  }
-  p(t) {
-    let e = 0;
-    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
-  }
-}
-class N {
-  get _$AU() {
-    return this._$AM?._$AU ?? this._$Cv;
-  }
-  constructor(t, e, s, i) {
-    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = i, this._$Cv = i?.isConnected ?? !0;
-  }
-  get parentNode() {
-    let t = this._$AA.parentNode;
-    const e = this._$AM;
-    return e !== void 0 && t?.nodeType === 11 && (t = e.parentNode), t;
-  }
-  get startNode() {
-    return this._$AA;
-  }
-  get endNode() {
-    return this._$AB;
-  }
-  _$AI(t, e = this) {
-    t = A(this, t, e), M(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== C && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : At(t) ? this.k(t) : this._(t);
-  }
-  O(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB);
-  }
-  T(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
-  }
-  _(t) {
-    this._$AH !== p && M(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
-  }
-  $(t) {
-    const { values: e, _$litType$: s } = t, i = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = k.createElement(rt(s.h, s.h[0]), this.options)), s);
-    if (this._$AH?._$AD === i) this._$AH.p(e);
-    else {
-      const n = new St(i, this), o = n.u(this.options);
-      n.p(e), this.T(o), this._$AH = n;
-    }
-  }
-  _$AC(t) {
-    let e = tt.get(t.strings);
-    return e === void 0 && tt.set(t.strings, e = new k(t)), e;
-  }
-  k(t) {
-    D(this._$AH) || (this._$AH = [], this._$AR());
-    const e = this._$AH;
-    let s, i = 0;
-    for (const n of t) i === e.length ? e.push(s = new N(this.O(H()), this.O(H()), this, this.options)) : s = e[i], s._$AI(n), i++;
-    i < e.length && (this._$AR(s && s._$AB.nextSibling, i), e.length = i);
-  }
-  _$AR(t = this._$AA.nextSibling, e) {
-    for (this._$AP?.(!1, !0, e); t !== this._$AB; ) {
-      const s = t.nextSibling;
-      t.remove(), t = s;
-    }
-  }
-  setConnected(t) {
-    this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
-  }
-}
-class q {
-  get tagName() {
-    return this.element.tagName;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  constructor(t, e, s, i, n) {
-    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = t, this.name = e, this._$AM = i, this.options = n, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = p;
-  }
-  _$AI(t, e = this, s, i) {
-    const n = this.strings;
-    let o = !1;
-    if (n === void 0) t = A(this, t, e, 0), o = !M(t) || t !== this._$AH && t !== C, o && (this._$AH = t);
-    else {
-      const l = t;
-      let a, y;
-      for (t = n[0], a = 0; a < n.length - 1; a++) y = A(this, l[s + a], e, a), y === C && (y = this._$AH[a]), o ||= !M(y) || y !== this._$AH[a], y === p ? t = p : t !== p && (t += (y ?? "") + n[a + 1]), this._$AH[a] = y;
-    }
-    o && !i && this.j(t);
-  }
-  j(t) {
-    t === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
-  }
-}
-class Pt extends q {
-  constructor() {
-    super(...arguments), this.type = 3;
-  }
-  j(t) {
-    this.element[this.name] = t === p ? void 0 : t;
-  }
-}
-class Mt extends q {
-  constructor() {
-    super(...arguments), this.type = 4;
-  }
-  j(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== p);
-  }
-}
-class Ct extends q {
-  constructor(t, e, s, i, n) {
-    super(t, e, s, i, n), this.type = 5;
-  }
-  _$AI(t, e = this) {
-    if ((t = A(this, t, e, 0) ?? p) === C) return;
-    const s = this._$AH, i = t === p && s !== p || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, n = t !== p && (s === p || i);
-    i && this.element.removeEventListener(this.name, this, s), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
-  }
-  handleEvent(t) {
-    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
-  }
-}
-class kt {
-  constructor(t, e, s) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t) {
-    A(this, t);
-  }
-}
-const Ut = z.litHtmlPolyfillSupport;
-Ut?.(k, N), (z.litHtmlVersions ??= []).push("3.3.1");
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const m = (r) => r ?? p;
-var Ot = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, c = (r, t, e, s) => {
-  for (var i = s > 1 ? void 0 : s ? Tt(t, e) : t, n = r.length - 1, o; n >= 0; n--)
-    (o = r[n]) && (i = (s ? o(t, e, i) : o(i)) || i);
-  return s && i && Ot(t, e, i), i;
-};
-let Rt = 0;
-var f;
-const d = (f = class extends at {
+let x = 0;
+var u;
+const n = (u = class extends y {
   // allows use of elementInternals' API
   constructor() {
     super(), this.id = "", this.name = "", this._type = "text", this.label = "", this.description = "", this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.optional = !1, this._tooltip = "", this.form = null, this.pattern = "", this.maxlength = null, this.width = "full", this.step = null, this.min = null, this.max = null, this.inverted = !1, this.showError = !1, this.errorMessage = "", this.showPassword = !1, this._originalErrorMessage = "", this._hasUserInteracted = !1, this._maskPatterns = {
@@ -784,14 +19,14 @@ const d = (f = class extends at {
   get type() {
     return this._type;
   }
-  set type(t) {
-    this._type = f.VALID_TYPES.includes(
-      t
-    ) ? t : "text";
+  set type(e) {
+    this._type = u.VALID_TYPES.includes(
+      e
+    ) ? e : "text";
   }
   // Generate a unique ID if one is not provided
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${Rt++}`), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid);
+    super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${x++}`), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
@@ -800,14 +35,14 @@ const d = (f = class extends at {
     this._setValue();
   }
   // Ensure the "width" property is valid after updates
-  async updated(t) {
-    if (t.has("width") && (await Promise.resolve(), this.width = f.VALID_WIDTHS.includes(this.width) ? this.width : "full"), t.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), t.has("type")) {
-      const e = this._maskPatterns[this.type], s = this.shadowRoot?.querySelector("input");
-      if (s)
-        if (e)
-          s.maxLength = e.length, this._updateOverlay(s.value, e);
+  async updated(e) {
+    if (e.has("width") && (await Promise.resolve(), this.width = u.VALID_WIDTHS.includes(this.width) ? this.width : "full"), e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
+      const s = this._maskPatterns[this.type], t = this.shadowRoot?.querySelector("input");
+      if (t)
+        if (s)
+          t.maxLength = s.length, this._updateOverlay(t.value, s);
         else {
-          s.removeAttribute("maxLength");
+          t.removeAttribute("maxLength");
           const i = this.shadowRoot?.querySelector(
             ".nys-textinput__mask-overlay"
           );
@@ -824,75 +59,75 @@ const d = (f = class extends at {
     this._internals.setFormValue(this.value), this._manageRequire();
   }
   _manageRequire() {
-    const t = this.shadowRoot?.querySelector("input");
-    if (!t) return;
-    const e = this.errorMessage || "This field is required";
-    this.required && (!this.value || this.value?.trim() === "") ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, e, t)) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
-  }
-  _setValidityMessage(t = "") {
     const e = this.shadowRoot?.querySelector("input");
     if (!e) return;
-    this.showError = !!t, this._originalErrorMessage?.trim() && t !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = t;
-    const s = t ? { customError: !0 } : {};
-    this._internals.setValidity(s, this.errorMessage, e);
+    const s = this.errorMessage || "This field is required";
+    this.required && (!this.value || this.value?.trim() === "") ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, s, e)) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
+  }
+  _setValidityMessage(e = "") {
+    const s = this.shadowRoot?.querySelector("input");
+    if (!s) return;
+    this.showError = !!e, this._originalErrorMessage?.trim() && e !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = e;
+    const t = e ? { customError: !0 } : {};
+    this._internals.setValidity(t, this.errorMessage, s);
   }
   _validate() {
-    const t = this.shadowRoot?.querySelector("input");
-    if (!t) return;
-    const e = t.validity;
-    let s = "";
-    e.valueMissing ? s = "This field is required" : e.typeMismatch ? s = "Invalid format for this type" : e.patternMismatch ? s = "Invalid format" : e.tooShort ? s = `Value is too short. Minimum length is ${t.minLength}` : e.tooLong ? s = `Value is too long. Maximum length is ${t.maxLength}` : e.rangeUnderflow ? s = `Value must be at least ${t.min}` : e.rangeOverflow ? s = `Value must be at most ${t.max}` : e.stepMismatch ? s = "Invalid step value" : s = t.validationMessage, this._setValidityMessage(s);
+    const e = this.shadowRoot?.querySelector("input");
+    if (!e) return;
+    const s = e.validity;
+    let t = "";
+    s.valueMissing ? t = "This field is required" : s.typeMismatch ? t = "Invalid format for this type" : s.patternMismatch ? t = "Invalid format" : s.tooShort ? t = `Value is too short. Minimum length is ${e.minLength}` : s.tooLong ? t = `Value is too long. Maximum length is ${e.maxLength}` : s.rangeUnderflow ? t = `Value must be at least ${e.min}` : s.rangeOverflow ? t = `Value must be at most ${e.max}` : s.stepMismatch ? t = "Invalid step value" : t = e.validationMessage, this._setValidityMessage(t);
   }
   /********************** Functions **********************/
   // This helper function is called to perform the element's native validation.
   checkValidity() {
-    const t = this.shadowRoot?.querySelector("input");
-    return t ? t.checkValidity() : !0;
-  }
-  _handleInvalid(t) {
-    t.preventDefault(), this._hasUserInteracted = !0, this._validate();
     const e = this.shadowRoot?.querySelector("input");
-    if (e) {
-      const s = this._internals.form;
-      s ? Array.from(s.elements).find(
-        (o) => typeof o.checkValidity == "function" && !o.checkValidity()
-      ) === this && e.focus() : e.focus();
+    return e ? e.checkValidity() : !0;
+  }
+  _handleInvalid(e) {
+    e.preventDefault(), this._hasUserInteracted = !0, this._validate();
+    const s = this.shadowRoot?.querySelector("input");
+    if (s) {
+      const t = this._internals.form;
+      t ? Array.from(t.elements).find(
+        (a) => typeof a.checkValidity == "function" && !a.checkValidity()
+      ) === this && s.focus() : s.focus();
     }
   }
   _togglePasswordVisibility() {
     this.showPassword = !this.showPassword;
   }
-  _updateOverlay(t, e) {
-    const s = this.shadowRoot?.querySelector(
+  _updateOverlay(e, s) {
+    const t = this.shadowRoot?.querySelector(
       ".nys-textinput__mask-overlay"
     );
-    if (!s) return;
-    const i = t, n = e.slice(i.length);
-    s.textContent = i + n;
+    if (!t) return;
+    const i = e, l = s.slice(i.length);
+    t.textContent = i + l;
   }
-  _applyMask(t, e) {
-    const s = t.replace(/\D/g, "");
+  _applyMask(e, s) {
+    const t = e.replace(/\D/g, "");
     let i = "";
     if (this.type === "tel")
-      return s.length > 0 && (i = "(" + s.substring(0, 3)), s.length >= 4 && (i += ") " + s.substring(3, 6)), s.length > 6 && (i += "-" + s.substring(6, 10)), i;
-    let n = 0;
-    for (let o = 0; o < e.length; o++)
-      if (e[o] === "_" || e[o].match(/[d9]/i))
-        if (n < s.length)
-          i += s[n++];
+      return t.length > 0 && (i = "(" + t.substring(0, 3)), t.length >= 4 && (i += ") " + t.substring(3, 6)), t.length > 6 && (i += "-" + t.substring(6, 10)), i;
+    let l = 0;
+    for (let a = 0; a < s.length; a++)
+      if (s[a] === "_" || s[a].match(/[d9]/i))
+        if (l < t.length)
+          i += t[l++];
         else
           break;
       else
-        i += e[o];
+        i += s[a];
     return i;
   }
   /******************** Event Handlers ********************/
   // Handle input event to check pattern validity
-  _handleInput(t) {
-    const e = t.target;
-    let s = e.value;
+  _handleInput(e) {
+    const s = e.target;
+    let t = s.value;
     const i = this._maskPatterns[this.type];
-    i && (s = this._applyMask(s, i), e.value = s, this._updateOverlay(s, i)), this.value = s, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
+    i && (t = this._applyMask(t, i), s.value = t, this._updateOverlay(t, i)), this.value = t, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
       new CustomEvent("nys-input", {
         detail: { id: this.id, value: this.value },
         bubbles: !0,
@@ -908,27 +143,27 @@ const d = (f = class extends at {
   _handleBlur() {
     this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), this.dispatchEvent(new Event("nys-blur"));
   }
-  _validateButtonSlot(t) {
-    const e = this.shadowRoot?.querySelector(
-      'slot[name="' + t + '"]'
-    ), s = this.shadowRoot?.querySelector(
+  _validateButtonSlot(e) {
+    const s = this.shadowRoot?.querySelector(
+      'slot[name="' + e + '"]'
+    ), t = this.shadowRoot?.querySelector(
       ".nys-textinput__buttoncontainer"
     );
-    if (!e || !s) return;
-    const i = e.assignedElements();
-    let n = !1;
-    i.forEach((o) => {
-      o instanceof HTMLElement && o.tagName.toLowerCase() === "nys-button" && !n ? (n = !0, o.setAttribute("size", "sm"), o.setAttribute("variant", "primary"), this.disabled ? o.setAttribute("disabled", "true") : o.removeAttribute("disabled")) : (console.warn(
-        "The '" + t + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
-        o
-      ), o.remove());
-    }), t === "startButton" ? s.classList.toggle("has-start-button", n) : t === "endButton" && s.classList.toggle("has-end-button", n);
+    if (!s || !t) return;
+    const i = s.assignedElements();
+    let l = !1;
+    i.forEach((a) => {
+      a instanceof HTMLElement && a.tagName.toLowerCase() === "nys-button" && !l ? (l = !0, a.setAttribute("size", "sm"), a.setAttribute("variant", "primary"), this.disabled ? a.setAttribute("disabled", "true") : a.removeAttribute("disabled")) : (console.warn(
+        "The '" + e + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
+        a
+      ), a.remove());
+    }), e === "startButton" ? t.classList.toggle("has-start-button", l) : e === "endButton" && t.classList.toggle("has-end-button", l);
   }
   render() {
-    return j`
+    return h`
       <div class="nys-textinput">
         <nys-label
-          for=${this.id}
+          for=${this.id + "--native"}
           label=${this.label}
           description=${this.description}
           flag=${this.required ? "required" : this.optional ? "optional" : ""}
@@ -948,7 +183,7 @@ const d = (f = class extends at {
               class="nys-textinput__input"
               type=${this.type === "password" ? this.showPassword ? "text" : "password" : this.type}
               name=${this.name}
-              id=${this.id}
+              id=${this.id + "--native"}
               ?disabled=${this.disabled}
               ?required=${this.required}
               ?readonly=${this.readonly}
@@ -956,22 +191,22 @@ const d = (f = class extends at {
               aria-disabled="${this.disabled}"
               aria-label="${[this.label, this.description].filter(Boolean).join(" ")}"
               .value=${this.value}
-              placeholder=${m(
+              placeholder=${d(
       this.placeholder ? this.placeholder : void 0
     )}
-              pattern=${m(this.pattern ? this.pattern : void 0)}
-              min=${m(this.min !== null ? this.min : void 0)}
-              maxlength=${m(
+              pattern=${d(this.pattern ? this.pattern : void 0)}
+              min=${d(this.min !== null ? this.min : void 0)}
+              maxlength=${d(
       this.maxlength !== null ? this.maxlength : void 0
     )}
-              step=${m(this.step !== null ? this.step : void 0)}
-              max=${m(this.max !== null ? this.max : void 0)}
-              form=${m(this.form || void 0)}
+              step=${d(this.step !== null ? this.step : void 0)}
+              max=${d(this.max !== null ? this.max : void 0)}
+              form=${d(this.form || void 0)}
               @input=${this._handleInput}
               @focus="${this._handleFocus}"
               @blur="${this._handleBlur}"
             />
-            ${this.type === "password" ? j` <nys-button
+            ${this.type === "password" ? h` <nys-button
                   class="eye-icon"
                   id="password-toggle"
                   suffixIcon="slotted"
@@ -999,7 +234,7 @@ const d = (f = class extends at {
       </div>
     `;
   }
-}, f.VALID_TYPES = [
+}, u.styles = c(v), u.VALID_TYPES = [
   "email",
   "number",
   "password",
@@ -1007,79 +242,79 @@ const d = (f = class extends at {
   "tel",
   "text",
   "url"
-], f.VALID_WIDTHS = ["sm", "md", "lg", "full"], f.styles = xt, f.formAssociated = !0, f);
-c([
-  u({ type: String })
-], d.prototype, "id", 2);
-c([
-  u({ type: String, reflect: !0 })
-], d.prototype, "name", 2);
-c([
-  u({ reflect: !0 })
-], d.prototype, "type", 1);
-c([
-  u({ type: String })
-], d.prototype, "label", 2);
-c([
-  u({ type: String })
-], d.prototype, "description", 2);
-c([
-  u({ type: String })
-], d.prototype, "placeholder", 2);
-c([
-  u({ type: String })
-], d.prototype, "value", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "disabled", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "readonly", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "required", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "optional", 2);
-c([
-  u({ type: String })
-], d.prototype, "_tooltip", 2);
-c([
-  u({ type: String, reflect: !0 })
-], d.prototype, "form", 2);
-c([
-  u({ type: String })
-], d.prototype, "pattern", 2);
-c([
-  u({ type: Number })
-], d.prototype, "maxlength", 2);
-c([
-  u({ reflect: !0 })
-], d.prototype, "width", 2);
-c([
-  u({ type: Number })
-], d.prototype, "step", 2);
-c([
-  u({ type: Number })
-], d.prototype, "min", 2);
-c([
-  u({ type: Number })
-], d.prototype, "max", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "inverted", 2);
-c([
-  u({ type: Boolean, reflect: !0 })
-], d.prototype, "showError", 2);
-c([
-  u({ type: String })
-], d.prototype, "errorMessage", 2);
-c([
-  mt()
-], d.prototype, "showPassword", 2);
-let Ht = d;
-customElements.get("nys-textinput") || customElements.define("nys-textinput", Ht);
+], u.VALID_WIDTHS = ["sm", "md", "lg", "full"], u.formAssociated = !0, u);
+r([
+  o({ type: String, reflect: !0 })
+], n.prototype, "id", 2);
+r([
+  o({ type: String, reflect: !0 })
+], n.prototype, "name", 2);
+r([
+  o({ reflect: !0 })
+], n.prototype, "type", 1);
+r([
+  o({ type: String })
+], n.prototype, "label", 2);
+r([
+  o({ type: String })
+], n.prototype, "description", 2);
+r([
+  o({ type: String })
+], n.prototype, "placeholder", 2);
+r([
+  o({ type: String })
+], n.prototype, "value", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "readonly", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "required", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "optional", 2);
+r([
+  o({ type: String })
+], n.prototype, "_tooltip", 2);
+r([
+  o({ type: String, reflect: !0 })
+], n.prototype, "form", 2);
+r([
+  o({ type: String })
+], n.prototype, "pattern", 2);
+r([
+  o({ type: Number })
+], n.prototype, "maxlength", 2);
+r([
+  o({ reflect: !0 })
+], n.prototype, "width", 2);
+r([
+  o({ type: Number })
+], n.prototype, "step", 2);
+r([
+  o({ type: Number })
+], n.prototype, "min", 2);
+r([
+  o({ type: Number })
+], n.prototype, "max", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "inverted", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "showError", 2);
+r([
+  o({ type: String })
+], n.prototype, "errorMessage", 2);
+r([
+  _()
+], n.prototype, "showPassword", 2);
+let g = n;
+customElements.get("nys-textinput") || customElements.define("nys-textinput", g);
 export {
-  Ht as NysTextinput
+  g as NysTextinput
 };
 //# sourceMappingURL=nys-textinput.js.map