@nysds/nys-textinput 1.1.8 → 1.2.0

package/dist/nys-textinput.js

@@ -1,4 +1,4 @@
-import { css as lt, LitElement as ht, html as F } from "lit";
+import { css as qt, LitElement as jt, html as A } from "lit";
 import "@nysds/nys-icon";
 import "@nysds/nys-label";
 import "@nysds/nys-errormessage";
@@ -17,18 +17,18 @@ import "@nysds/nys-errormessage";
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const O = globalThis, j = O.ShadowRoot && (O.ShadyCSS === void 0 || O.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, it = Symbol(), Y = /* @__PURE__ */ new WeakMap();
-let dt = class {
+const Q = globalThis, yt = Q.ShadowRoot && (Q.ShadyCSS === void 0 || Q.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ft = Symbol(), mt = /* @__PURE__ */ new WeakMap();
+let oe = class {
   constructor(t, e, s) {
-    if (this._$cssResult$ = !0, s !== it) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== Ft) 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 (j && t === void 0) {
+    if (yt && t === void 0) {
       const s = e !== void 0 && e.length === 1;
-      s && (t = Y.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && Y.set(e, t));
+      s && (t = mt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && mt.set(e, t));
     }
     return t;
   }
@@ -36,101 +36,101 @@ let dt = class {
     return this.cssText;
   }
 };
-const ct = (r) => new dt(typeof r == "string" ? r : r + "", void 0, it), pt = (r, t) => {
-  if (j) r.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+const ne = (o) => new oe(typeof o == "string" ? o : o + "", void 0, Ft), ie = (o, t) => {
+  if (yt) o.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);
+    const s = document.createElement("style"), r = Q.litNonce;
+    r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, o.appendChild(s);
   }
-}, G = j ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {
+}, xt = yt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return ct(e);
-})(r) : r;
+  return ne(e);
+})(o) : o;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ut, defineProperty: yt, getOwnPropertyDescriptor: _t, getOwnPropertyNames: ft, getOwnPropertySymbols: vt, getPrototypeOf: $t } = Object, g = globalThis, J = g.trustedTypes, mt = J ? J.emptyScript : "", L = g.reactiveElementPolyfillSupport, C = (r, t) => r, N = { toAttribute(r, t) {
+const { is: ae, defineProperty: le, getOwnPropertyDescriptor: he, getOwnPropertyNames: ce, getOwnPropertySymbols: de, getPrototypeOf: ue } = Object, I = globalThis, At = I.trustedTypes, pe = At ? At.emptyScript : "", ct = I.reactiveElementPolyfillSupport, j = (o, t) => o, tt = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
-      r = r ? mt : null;
+      o = o ? pe : null;
       break;
     case Object:
     case Array:
-      r = r == null ? r : JSON.stringify(r);
+      o = o == null ? o : JSON.stringify(o);
   }
-  return r;
-}, fromAttribute(r, t) {
-  let e = r;
+  return o;
+}, fromAttribute(o, t) {
+  let e = o;
   switch (t) {
     case Boolean:
-      e = r !== null;
+      e = o !== null;
       break;
     case Number:
-      e = r === null ? null : Number(r);
+      e = o === null ? null : Number(o);
       break;
     case Object:
     case Array:
       try {
-        e = JSON.parse(r);
+        e = JSON.parse(o);
       } catch {
         e = null;
       }
   }
   return e;
-} }, B = (r, t) => !ut(r, t), K = { attribute: !0, type: String, converter: N, reflect: !1, hasChanged: B };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), g.litPropertyMetadata ?? (g.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class S extends HTMLElement {
+} }, bt = (o, t) => !ae(o, t), wt = { attribute: !0, type: String, converter: tt, reflect: !1, hasChanged: bt };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), I.litPropertyMetadata ?? (I.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+let L = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, e = K) {
+  static createProperty(t, e = wt) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
-      const s = Symbol(), i = this.getPropertyDescriptor(t, s, e);
-      i !== void 0 && yt(this.prototype, t, i);
+      const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
+      r !== void 0 && le(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, e, s) {
-    const { get: i, set: o } = _t(this.prototype, t) ?? { get() {
+    const { get: r, set: i } = he(this.prototype, t) ?? { get() {
       return this[e];
     }, set(n) {
       this[e] = n;
     } };
     return { get() {
-      return i == null ? void 0 : i.call(this);
+      return r == null ? void 0 : r.call(this);
     }, set(n) {
-      const l = i == null ? void 0 : i.call(this);
-      o.call(this, n), this.requestUpdate(t, l, s);
+      const l = r == null ? void 0 : r.call(this);
+      i.call(this, n), this.requestUpdate(t, l, s);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? K;
+    return this.elementProperties.get(t) ?? wt;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(C("elementProperties"))) return;
-    const t = $t(this);
+    if (this.hasOwnProperty(j("elementProperties"))) return;
+    const t = ue(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(C("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(C("properties"))) {
-      const e = this.properties, s = [...ft(e), ...vt(e)];
-      for (const i of s) this.createProperty(i, e[i]);
+    if (this.hasOwnProperty(j("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(j("properties"))) {
+      const e = this.properties, s = [...ce(e), ...de(e)];
+      for (const r of s) this.createProperty(r, e[r]);
     }
     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);
+      if (e !== void 0) for (const [s, r] of e) this.elementProperties.set(s, r);
     }
     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);
+      const r = this._$Eu(e, s);
+      r !== void 0 && this._$Eh.set(r, e);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
@@ -138,8 +138,8 @@ class S extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const s = new Set(t.flat(1 / 0).reverse());
-      for (const i of s) e.unshift(G(i));
-    } else t !== void 0 && e.push(G(t));
+      for (const r of s) e.unshift(xt(r));
+    } else t !== void 0 && e.push(xt(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -168,7 +168,7 @@ class S extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return pt(t, this.constructor.elementStyles), t;
+    return ie(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -190,24 +190,24 @@ class S extends HTMLElement {
     this._$AK(t, s);
   }
   _$EC(t, e) {
-    var o;
-    const s = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, s);
-    if (i !== void 0 && s.reflect === !0) {
-      const n = (((o = s.converter) == null ? void 0 : o.toAttribute) !== void 0 ? s.converter : N).toAttribute(e, s.type);
-      this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
+    var i;
+    const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
+    if (r !== void 0 && s.reflect === !0) {
+      const n = (((i = s.converter) == null ? void 0 : i.toAttribute) !== void 0 ? s.converter : tt).toAttribute(e, s.type);
+      this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
     }
   }
   _$AK(t, e) {
-    var o;
-    const s = this.constructor, i = s._$Eh.get(t);
-    if (i !== void 0 && this._$Em !== i) {
-      const n = s.getPropertyOptions(i), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : N;
-      this._$Em = i, this[i] = l.fromAttribute(e, n.type), this._$Em = null;
+    var i;
+    const s = this.constructor, r = s._$Eh.get(t);
+    if (r !== void 0 && this._$Em !== r) {
+      const n = s.getPropertyOptions(r), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : tt;
+      this._$Em = r, this[r] = l.fromAttribute(e, n.type), this._$Em = null;
     }
   }
   requestUpdate(t, e, s) {
     if (t !== void 0) {
-      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? B)(this[t], e)) return;
+      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? bt)(this[t], e)) return;
       this.P(t, e, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$ET());
@@ -233,21 +233,21 @@ class S extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [o, n] of this._$Ep) this[o] = n;
+        for (const [i, n] of this._$Ep) this[i] = n;
         this._$Ep = void 0;
       }
-      const i = this.constructor.elementProperties;
-      if (i.size > 0) for (const [o, n] of i) n.wrapped !== !0 || this._$AL.has(o) || this[o] === void 0 || this.P(o, this[o], n);
+      const r = this.constructor.elementProperties;
+      if (r.size > 0) for (const [i, n] of r) n.wrapped !== !0 || this._$AL.has(i) || this[i] === void 0 || this.P(i, this[i], n);
     }
     let t = !1;
     const e = this._$AL;
     try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((i) => {
-        var o;
-        return (o = i.hostUpdate) == null ? void 0 : o.call(i);
+      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((r) => {
+        var i;
+        return (i = r.hostUpdate) == null ? void 0 : i.call(r);
       }), this.update(e)) : this._$EU();
-    } catch (i) {
-      throw t = !1, this._$EU(), i;
+    } catch (r) {
+      throw t = !1, this._$EU(), r;
     }
     t && this._$AE(e);
   }
@@ -256,8 +256,8 @@ class S extends HTMLElement {
   _$AE(t) {
     var e;
     (e = this._$EO) == null || e.forEach((s) => {
-      var i;
-      return (i = s.hostUpdated) == null ? void 0 : i.call(s);
+      var r;
+      return (r = s.hostUpdated) == null ? void 0 : r.call(s);
     }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
   }
   _$EU() {
@@ -279,54 +279,55 @@ class S extends HTMLElement {
   }
   firstUpdated(t) {
   }
-}
-S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[C("elementProperties")] = /* @__PURE__ */ new Map(), S[C("finalized")] = /* @__PURE__ */ new Map(), L == null || L({ ReactiveElement: S }), (g.reactiveElementVersions ?? (g.reactiveElementVersions = [])).push("2.0.4");
+};
+L.elementStyles = [], L.shadowRootOptions = { mode: "open" }, L[j("elementProperties")] = /* @__PURE__ */ new Map(), L[j("finalized")] = /* @__PURE__ */ new Map(), ct == null || ct({ ReactiveElement: L }), (I.reactiveElementVersions ?? (I.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const gt = { attribute: !0, type: String, converter: N, reflect: !1, hasChanged: B }, bt = (r = gt, t, e) => {
-  const { kind: s, metadata: i } = e;
-  let o = globalThis.litPropertyMetadata.get(i);
-  if (o === void 0 && globalThis.litPropertyMetadata.set(i, o = /* @__PURE__ */ new Map()), o.set(e.name, r), s === "accessor") {
+const fe = { attribute: !0, type: String, converter: tt, reflect: !1, hasChanged: bt }, ye = (o = fe, t, e) => {
+  const { kind: s, metadata: r } = e;
+  let i = globalThis.litPropertyMetadata.get(r);
+  if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), i.set(e.name, o), s === "accessor") {
     const { name: n } = e;
     return { set(l) {
       const a = t.get.call(this);
-      t.set.call(this, l), this.requestUpdate(n, a, r);
+      t.set.call(this, l), this.requestUpdate(n, a, o);
     }, init(l) {
-      return l !== void 0 && this.P(n, void 0, r), l;
+      return l !== void 0 && this.P(n, void 0, o), l;
     } };
   }
   if (s === "setter") {
     const { name: n } = e;
     return function(l) {
       const a = this[n];
-      t.call(this, l), this.requestUpdate(n, a, r);
+      t.call(this, l), this.requestUpdate(n, a, o);
     };
   }
   throw Error("Unsupported decorator location: " + s);
 };
-function c(r) {
-  return (t, e) => typeof e == "object" ? bt(r, t, e) : ((s, i, o) => {
-    const n = i.hasOwnProperty(o);
-    return i.constructor.createProperty(o, n ? { ...s, wrapped: !0 } : s), n ? Object.getOwnPropertyDescriptor(i, o) : void 0;
-  })(r, t, e);
+function p(o) {
+  return (t, e) => typeof e == "object" ? ye(o, t, e) : ((s, r, i) => {
+    const n = r.hasOwnProperty(i);
+    return r.constructor.createProperty(i, n ? { ...s, wrapped: !0 } : s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
+  })(o, t, e);
 }
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function xt(r) {
-  return c({ ...r, state: !0, attribute: !1 });
+function be(o) {
+  return p({ ...o, state: !0, attribute: !1 });
 }
-const At = lt`
+const ve = qt`
   :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-radius: var(--nys-radius-md, 4px);
     --_nys-textinput-width-border: var(--nys-border-width-sm, 1px);
     --_nys-textinput-color-border: var(--nys-color-neutral-400, #909395);
@@ -429,9 +430,8 @@ const At = lt`
     border: solid var(--_nys-textinput-color-border)
       var(--_nys-textinput-width-border);
     padding: var(--_nys-textinput-padding);
-    width: var(--_nys-textinput-width);
-    min-width: var(--_nys-textinput-width);
-    max-width: var(--_nys-textinput-width);
+    width: 100%;
+    height: var(--_nys-textinput-height);
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -441,18 +441,74 @@ const At = lt`
     color: var(--_nys-textinput-placeholder-color);
   }
 
+  .nys-textinput__buttoncontainer {
+    width: var(--_nys-textinput-width);
+    min-width: var(--_nys-textinput-width);
+    max-width: var(--_nys-textinput-width);
+    display: flex;
+  }
+
+  .nys-textinput__buttoncontainer.has-end-button .nys-textinput__input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+
+  .nys-textinput__buttoncontainer.has-start-button .nys-textinput__input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+  }
+
   /* This container exist to mainly style the type="password" eye icon */
-  .nys-input-container {
+  .nys-textinput__container {
     position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  ::slotted(nys-button) {
+    --_nys-button-height: var(--_nys-textinput-height);
+    --_nys-button-radius-left: var(--_nys-textinput-radius);
+    --_nys-button-radius-right: var(--_nys-textinput-radius);
+    --_nys-button-color-bg-disabled: var(--_nys-textinput-disabled-color);
+    --_nys-button-color-border-disabled: var(
+      --_nys-textinput-disabled-color-text
+    );
+    --_nys-button-color-text-disabled: var(
+      --_nys-textinput-disabled-color-text
+    );
+    --_nys-button-width-border: var(--_nys-textinput-width-border);
+    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-radius-right: 0;
+  }
+
+  .nys-textinput__buttoncontainer.has-end-button ::slotted(nys-button) {
+    --_nys-button-radius-left: 0;
   }
+
   .eye-icon {
     position: absolute;
-    right: 10px;
+    right: var(--nys-space-50, 4px);
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: var(--_nys-textinput-icon-color);
-    background-color: var(--_nys-textinput-background-color);
+    --_nys-button-color-bg: transparent;
+    --_nys-button-color-bg-hover: transparent;
+    --_nys-button-color-bg-active: transparent;
+    --_nys-button-offset-focus: calc(
+      var(--_nys-button-width-focus) * -1
+    ); /* Needs to be negative of the offset width */
+    --_nys-button-radius-left: var(--_nys-textinput-radius);
+    --_nys-button-radius-right: var(--_nys-textinput-radius);
+    --_nys-button-height: var(--nys-size-400, 32px);
+    --_nys-button-width: var(--nys-size-400, 32px);
+    --_nys-button-padding-x: 0;
   }
 
   /* Hovered */
@@ -472,9 +528,8 @@ const At = lt`
 
   /* Disabled */
   .nys-textinput__input:disabled,
-  .nys-input-container.disabled,
-  .nys-input-container.disabled .eye-icon,
-  .nys-textinput__input:disabled::placeholder {
+  .nys-textinput__input:disabled::placeholder,
+  .nys-textinput__input:disabled + .eye-icon {
     background-color: var(--_nys-textinput-disabled-color);
     border-color: var(--_nys-textinput-disabled-color-border);
     color: var(--_nys-textinput-disabled-color-text);
@@ -486,70 +541,70 @@ const At = lt`
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const M = globalThis, R = M.trustedTypes, Z = R ? R.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, rt = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, nt = "?" + m, wt = `<${nt}>`, w = document, k = () => w.createComment(""), U = (r) => r === null || typeof r != "object" && typeof r != "function", W = Array.isArray, Et = (r) => W(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", z = `[ 	
-\f\r]`, P = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Q = /-->/g, X = />/g, b = RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), tt = /'/g, et = /"/g, ot = /^(?:script|style|textarea|title)$/i, H = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), st = /* @__PURE__ */ new WeakMap(), A = w.createTreeWalker(w, 129);
-function at(r, t) {
-  if (!W(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return Z !== void 0 ? Z.createHTML(t) : t;
+const F = globalThis, et = F.trustedTypes, St = et ? et.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Wt = "$lit$", P = `lit$${Math.random().toFixed(9).slice(2)}$`, Gt = "?" + P, _e = `<${Gt}>`, k = document, st = () => k.createComment(""), G = (o) => o === null || typeof o != "object" && typeof o != "function", vt = Array.isArray, ge = (o) => vt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", dt = `[ 	
+\f\r]`, V = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Et = /-->/g, Pt = />/g, U = RegExp(`>|${dt}(?:([^\\s"'>=/]+)(${dt}*=${dt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Ct = /'/g, It = /"/g, Kt = /^(?:script|style|textarea|title)$/i, K = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), Ut = /* @__PURE__ */ new WeakMap(), H = k.createTreeWalker(k, 129);
+function Zt(o, t) {
+  if (!vt(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return St !== void 0 ? St.createHTML(t) : t;
 }
-const St = (r, t) => {
-  const e = r.length - 1, s = [];
-  let i, o = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = P;
+const $e = (o, t) => {
+  const e = o.length - 1, s = [];
+  let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = V;
   for (let l = 0; l < e; l++) {
-    const a = r[l];
-    let y, _, h = -1, v = 0;
-    for (; v < a.length && (n.lastIndex = v, _ = n.exec(a), _ !== null); ) v = n.lastIndex, n === P ? _[1] === "!--" ? n = Q : _[1] !== void 0 ? n = X : _[2] !== void 0 ? (ot.test(_[2]) && (i = RegExp("</" + _[2], "g")), n = b) : _[3] !== void 0 && (n = b) : n === b ? _[0] === ">" ? (n = i ?? P, h = -1) : _[1] === void 0 ? h = -2 : (h = n.lastIndex - _[2].length, y = _[1], n = _[3] === void 0 ? b : _[3] === '"' ? et : tt) : n === et || n === tt ? n = b : n === Q || n === X ? n = P : (n = b, i = void 0);
-    const $ = n === b && r[l + 1].startsWith("/>") ? " " : "";
-    o += n === P ? a + wt : h >= 0 ? (s.push(y), a.slice(0, h) + rt + a.slice(h) + m + $) : a + m + (h === -2 ? l : $);
+    const a = o[l];
+    let c, d, h = -1, y = 0;
+    for (; y < a.length && (n.lastIndex = y, d = n.exec(a), d !== null); ) y = n.lastIndex, n === V ? d[1] === "!--" ? n = Et : d[1] !== void 0 ? n = Pt : d[2] !== void 0 ? (Kt.test(d[2]) && (r = RegExp("</" + d[2], "g")), n = U) : d[3] !== void 0 && (n = U) : n === U ? d[0] === ">" ? (n = r ?? V, h = -1) : d[1] === void 0 ? h = -2 : (h = n.lastIndex - d[2].length, c = d[1], n = d[3] === void 0 ? U : d[3] === '"' ? It : Ct) : n === It || n === Ct ? n = U : n === Et || n === Pt ? n = V : (n = U, r = void 0);
+    const g = n === U && o[l + 1].startsWith("/>") ? " " : "";
+    i += n === V ? a + _e : h >= 0 ? (s.push(c), a.slice(0, h) + Wt + a.slice(h) + P + g) : a + P + (h === -2 ? l : g);
   }
-  return [at(r, o + (r[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
+  return [Zt(o, i + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
-class T {
+let ft = class Yt {
   constructor({ strings: t, _$litType$: e }, s) {
-    let i;
+    let r;
     this.parts = [];
-    let o = 0, n = 0;
-    const l = t.length - 1, a = this.parts, [y, _] = St(t, e);
-    if (this.el = T.createElement(y, s), A.currentNode = this.el.content, e === 2 || e === 3) {
+    let i = 0, n = 0;
+    const l = t.length - 1, a = this.parts, [c, d] = $e(t, e);
+    if (this.el = Yt.createElement(c, s), H.currentNode = this.el.content, e === 2 || e === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
     }
-    for (; (i = A.nextNode()) !== null && a.length < l; ) {
-      if (i.nodeType === 1) {
-        if (i.hasAttributes()) for (const h of i.getAttributeNames()) if (h.endsWith(rt)) {
-          const v = _[n++], $ = i.getAttribute(h).split(m), I = /([.?@])?(.*)/.exec(v);
-          a.push({ type: 1, index: o, name: I[2], strings: $, ctor: I[1] === "." ? Ct : I[1] === "?" ? Mt : I[1] === "@" ? Ut : q }), i.removeAttribute(h);
-        } else h.startsWith(m) && (a.push({ type: 6, index: o }), i.removeAttribute(h));
-        if (ot.test(i.tagName)) {
-          const h = i.textContent.split(m), v = h.length - 1;
-          if (v > 0) {
-            i.textContent = R ? R.emptyScript : "";
-            for (let $ = 0; $ < v; $++) i.append(h[$], k()), A.nextNode(), a.push({ type: 2, index: ++o });
-            i.append(h[v], k());
+    for (; (r = H.nextNode()) !== null && a.length < l; ) {
+      if (r.nodeType === 1) {
+        if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(Wt)) {
+          const y = d[n++], g = r.getAttribute(h).split(P), S = /([.?@])?(.*)/.exec(y);
+          a.push({ type: 1, index: i, name: S[2], strings: g, ctor: S[1] === "." ? xe : S[1] === "?" ? Ae : S[1] === "@" ? we : at }), r.removeAttribute(h);
+        } else h.startsWith(P) && (a.push({ type: 6, index: i }), r.removeAttribute(h));
+        if (Kt.test(r.tagName)) {
+          const h = r.textContent.split(P), y = h.length - 1;
+          if (y > 0) {
+            r.textContent = et ? et.emptyScript : "";
+            for (let g = 0; g < y; g++) r.append(h[g], st()), H.nextNode(), a.push({ type: 2, index: ++i });
+            r.append(h[y], st());
           }
         }
-      } else if (i.nodeType === 8) if (i.data === nt) a.push({ type: 2, index: o });
+      } else if (r.nodeType === 8) if (r.data === Gt) a.push({ type: 2, index: i });
       else {
         let h = -1;
-        for (; (h = i.data.indexOf(m, h + 1)) !== -1; ) a.push({ type: 7, index: o }), h += m.length - 1;
+        for (; (h = r.data.indexOf(P, h + 1)) !== -1; ) a.push({ type: 7, index: i }), h += P.length - 1;
       }
-      o++;
+      i++;
     }
   }
   static createElement(t, e) {
-    const s = w.createElement("template");
+    const s = k.createElement("template");
     return s.innerHTML = t, s;
   }
-}
-function E(r, t, e = r, s) {
+};
+function R(o, t, e = o, s) {
   var n, l;
-  if (t === H) return t;
-  let i = s !== void 0 ? (n = e._$Co) == null ? void 0 : n[s] : e._$Cl;
-  const o = U(t) ? void 0 : t._$litDirective$;
-  return (i == null ? void 0 : i.constructor) !== o && ((l = i == null ? void 0 : i._$AO) == null || l.call(i, !1), o === void 0 ? i = void 0 : (i = new o(r), i._$AT(r, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = i : e._$Cl = i), i !== void 0 && (t = E(r, i._$AS(r, t.values), i, s)), t;
+  if (t === K) return t;
+  let r = s !== void 0 ? (n = e._$Co) == null ? void 0 : n[s] : e._$Cl;
+  const i = G(t) ? void 0 : t._$litDirective$;
+  return (r == null ? void 0 : r.constructor) !== i && ((l = r == null ? void 0 : r._$AO) == null || l.call(r, !1), i === void 0 ? r = void 0 : (r = new i(o), r._$AT(o, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = r : e._$Cl = r), r !== void 0 && (t = R(o, r._$AS(o, t.values), r, s)), t;
 }
-class Pt {
+let me = class {
   constructor(t, e) {
     this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
   }
@@ -560,30 +615,29 @@ class Pt {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: e }, parts: s } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? w).importNode(e, !0);
-    A.currentNode = i;
-    let o = A.nextNode(), n = 0, l = 0, a = s[0];
+    const { el: { content: e }, parts: s } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? k).importNode(e, !0);
+    H.currentNode = r;
+    let i = H.nextNode(), n = 0, l = 0, a = s[0];
     for (; a !== void 0; ) {
       if (n === a.index) {
-        let y;
-        a.type === 2 ? y = new V(o, o.nextSibling, this, t) : a.type === 1 ? y = new a.ctor(o, a.name, a.strings, this, t) : a.type === 6 && (y = new Ht(o, this, t)), this._$AV.push(y), a = s[++l];
+        let c;
+        a.type === 2 ? c = new Jt(i, i.nextSibling, this, t) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, t) : a.type === 6 && (c = new Se(i, this, t)), this._$AV.push(c), a = s[++l];
       }
-      n !== (a == null ? void 0 : a.index) && (o = A.nextNode(), n++);
+      n !== (a == null ? void 0 : a.index) && (i = H.nextNode(), n++);
     }
-    return A.currentNode = w, i;
+    return H.currentNode = k, r;
   }
   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 V {
+}, Jt = class Qt {
   get _$AU() {
     var t;
     return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
   }
-  constructor(t, e, s, i) {
-    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = i, this._$Cv = (i == null ? void 0 : i.isConnected) ?? !0;
+  constructor(t, e, s, r) {
+    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = r, this._$Cv = (r == null ? void 0 : r.isConnected) ?? !0;
   }
   get parentNode() {
     let t = this._$AA.parentNode;
@@ -597,7 +651,7 @@ class V {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = E(this, t, e), U(t) ? t === u || t == null || t === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : t !== this._$AH && t !== H && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Et(t) ? this.k(t) : this._(t);
+    t = R(this, t, e), G(t) ? t === b || t == null || t === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : t !== this._$AH && t !== K && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : ge(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -606,96 +660,93 @@ class V {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== u && U(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
+    this._$AH !== b && G(this._$AH) ? this._$AA.nextSibling.data = t : this.T(k.createTextNode(t)), this._$AH = t;
   }
   $(t) {
-    var o;
-    const { values: e, _$litType$: s } = t, i = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = T.createElement(at(s.h, s.h[0]), this.options)), s);
-    if (((o = this._$AH) == null ? void 0 : o._$AD) === i) this._$AH.p(e);
+    var i;
+    const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = ft.createElement(Zt(s.h, s.h[0]), this.options)), s);
+    if (((i = this._$AH) == null ? void 0 : i._$AD) === r) this._$AH.p(e);
     else {
-      const n = new Pt(i, this), l = n.u(this.options);
+      const n = new me(r, this), l = n.u(this.options);
       n.p(e), this.T(l), this._$AH = n;
     }
   }
   _$AC(t) {
-    let e = st.get(t.strings);
-    return e === void 0 && st.set(t.strings, e = new T(t)), e;
+    let e = Ut.get(t.strings);
+    return e === void 0 && Ut.set(t.strings, e = new ft(t)), e;
   }
   k(t) {
-    W(this._$AH) || (this._$AH = [], this._$AR());
+    vt(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
-    let s, i = 0;
-    for (const o of t) i === e.length ? e.push(s = new V(this.O(k()), this.O(k()), this, this.options)) : s = e[i], s._$AI(o), i++;
-    i < e.length && (this._$AR(s && s._$AB.nextSibling, i), e.length = i);
+    let s, r = 0;
+    for (const i of t) r === e.length ? e.push(s = new Qt(this.O(st()), this.O(st()), this, this.options)) : s = e[r], s._$AI(i), r++;
+    r < e.length && (this._$AR(s && s._$AB.nextSibling, r), e.length = r);
   }
   _$AR(t = this._$AA.nextSibling, e) {
     var s;
     for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t && t !== this._$AB; ) {
-      const i = t.nextSibling;
-      t.remove(), t = i;
+      const r = t.nextSibling;
+      t.remove(), t = r;
     }
   }
   setConnected(t) {
     var e;
     this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
   }
-}
-class q {
+}, at = class {
   get tagName() {
     return this.element.tagName;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t, e, s, i, o) {
-    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = t, this.name = e, this._$AM = i, this.options = o, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = u;
+  constructor(t, e, s, r, i) {
+    this.type = 1, this._$AH = b, this._$AN = void 0, this.element = t, this.name = e, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = b;
   }
-  _$AI(t, e = this, s, i) {
-    const o = this.strings;
+  _$AI(t, e = this, s, r) {
+    const i = this.strings;
     let n = !1;
-    if (o === void 0) t = E(this, t, e, 0), n = !U(t) || t !== this._$AH && t !== H, n && (this._$AH = t);
+    if (i === void 0) t = R(this, t, e, 0), n = !G(t) || t !== this._$AH && t !== K, n && (this._$AH = t);
     else {
       const l = t;
-      let a, y;
-      for (t = o[0], a = 0; a < o.length - 1; a++) y = E(this, l[s + a], e, a), y === H && (y = this._$AH[a]), n || (n = !U(y) || y !== this._$AH[a]), y === u ? t = u : t !== u && (t += (y ?? "") + o[a + 1]), this._$AH[a] = y;
+      let a, c;
+      for (t = i[0], a = 0; a < i.length - 1; a++) c = R(this, l[s + a], e, a), c === K && (c = this._$AH[a]), n || (n = !G(c) || c !== this._$AH[a]), c === b ? t = b : t !== b && (t += (c ?? "") + i[a + 1]), this._$AH[a] = c;
     }
-    n && !i && this.j(t);
+    n && !r && this.j(t);
   }
   j(t) {
-    t === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+    t === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
-}
-class Ct extends q {
+};
+class xe extends at {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(t) {
-    this.element[this.name] = t === u ? void 0 : t;
+    this.element[this.name] = t === b ? void 0 : t;
   }
 }
-class Mt extends q {
+let Ae = class extends at {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== u);
+    this.element.toggleAttribute(this.name, !!t && t !== b);
   }
-}
-class Ut extends q {
-  constructor(t, e, s, i, o) {
-    super(t, e, s, i, o), this.type = 5;
+}, we = class extends at {
+  constructor(t, e, s, r, i) {
+    super(t, e, s, r, i), this.type = 5;
   }
   _$AI(t, e = this) {
-    if ((t = E(this, t, e, 0) ?? u) === H) return;
-    const s = this._$AH, i = t === u && s !== u || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, o = t !== u && (s === u || i);
-    i && this.element.removeEventListener(this.name, this, s), o && this.element.addEventListener(this.name, this, t), this._$AH = t;
+    if ((t = R(this, t, e, 0) ?? b) === K) return;
+    const s = this._$AH, r = t === b && s !== b || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, i = t !== b && (s === b || r);
+    r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
   handleEvent(t) {
     var e;
     typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
   }
-}
-class Ht {
+}, Se = class {
   constructor(t, e, s) {
     this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
   }
@@ -703,129 +754,1298 @@ class Ht {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    E(this, t);
+    R(this, t);
   }
-}
-const D = M.litHtmlPolyfillSupport;
-D == null || D(T, V), (M.litHtmlVersions ?? (M.litHtmlVersions = [])).push("3.2.1");
+};
+const ut = F.litHtmlPolyfillSupport;
+ut == null || ut(ft, Jt), (F.litHtmlVersions ?? (F.litHtmlVersions = [])).push("3.2.1");
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const x = (r) => r ?? u;
-var Tt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, p = (r, t, e, s) => {
-  for (var i = s > 1 ? void 0 : s ? It(t, e) : t, o = r.length - 1, n; o >= 0; o--)
-    (n = r[o]) && (i = (s ? n(t, e, i) : n(i)) || i);
-  return s && i && Tt(t, e, i), i;
+const T = (o) => o ?? b;
+/*!
+   * 
+   * ▒█▄░▒█ ▒█░░▒█ ▒█▀▀▀█ ▒█▀▀▄ ▒█▀▀▀█ 
+   * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
+   * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
+   * 
+   * Button 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 X = globalThis, _t = X.ShadowRoot && (X.ShadyCSS === void 0 || X.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Xt = Symbol(), Tt = /* @__PURE__ */ new WeakMap();
+let Ee = class {
+  constructor(o, t, e) {
+    if (this._$cssResult$ = !0, e !== Xt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = o, this.t = t;
+  }
+  get styleSheet() {
+    let o = this.o;
+    const t = this.t;
+    if (_t && o === void 0) {
+      const e = t !== void 0 && t.length === 1;
+      e && (o = Tt.get(t)), o === void 0 && ((this.o = o = new CSSStyleSheet()).replaceSync(this.cssText), e && Tt.set(t, o));
+    }
+    return o;
+  }
+  toString() {
+    return this.cssText;
+  }
 };
-let Ot = 0;
-var f;
-const d = (f = class extends ht {
-  // 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.form = "", this.pattern = "", this.maxlength = null, this.width = "full", this.step = null, this.min = null, this.max = null, this.showError = !1, this.errorMessage = "", this.showPassword = !1, this._originalErrorMessage = "", this._hasUserInteracted = !1, this._internals = this.attachInternals();
+const Pe = (o) => new Ee(typeof o == "string" ? o : o + "", void 0, Xt), Ce = (o, t) => {
+  if (_t) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+  else for (const e of t) {
+    const s = document.createElement("style"), r = X.litNonce;
+    r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, o.appendChild(s);
   }
-  get type() {
-    return this._type;
+}, Mt = _t ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+  let e = "";
+  for (const s of t.cssRules) e += s.cssText;
+  return Pe(e);
+})(o) : o;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: Ie, defineProperty: Ue, getOwnPropertyDescriptor: Te, getOwnPropertyNames: Me, getOwnPropertySymbols: He, getPrototypeOf: Oe } = Object, z = globalThis, Ht = z.trustedTypes, ke = Ht ? Ht.emptyScript : "", Ot = z.reactiveElementPolyfillSupport, W = (o, t) => o, rt = { toAttribute(o, t) {
+  switch (t) {
+    case Boolean:
+      o = o ? ke : null;
+      break;
+    case Object:
+    case Array:
+      o = o == null ? o : JSON.stringify(o);
   }
-  set type(t) {
-    this._type = f.VALID_TYPES.includes(
-      t
-    ) ? t : "text";
+  return o;
+}, fromAttribute(o, t) {
+  let e = o;
+  switch (t) {
+    case Boolean:
+      e = o !== null;
+      break;
+    case Number:
+      e = o === null ? null : Number(o);
+      break;
+    case Object:
+    case Array:
+      try {
+        e = JSON.parse(o);
+      } catch {
+        e = null;
+      }
   }
-  // Ensure the "width" property is valid after updates
-  async updated(t) {
-    t.has("width") && (await Promise.resolve(), this.width = f.VALID_WIDTHS.includes(this.width) ? this.width : "full");
+  return e;
+} }, gt = (o, t) => !Ie(o, t), kt = { attribute: !0, type: String, converter: rt, reflect: !1, hasChanged: gt };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), z.litPropertyMetadata ?? (z.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class B extends HTMLElement {
+  static addInitializer(t) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
-  // Generate a unique ID if one is not provided
-  connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${Ot++}`), this._originalErrorMessage = this.errorMessage, this.addEventListener("invalid", this._handleInvalid);
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
+  static createProperty(t, e = kt) {
+    if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
+      const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
+      r !== void 0 && Ue(this.prototype, t, r);
+    }
   }
-  firstUpdated() {
-    this._setValue(), this._manageRequire();
+  static getPropertyDescriptor(t, e, s) {
+    const { get: r, set: i } = Te(this.prototype, t) ?? { get() {
+      return this[e];
+    }, set(n) {
+      this[e] = n;
+    } };
+    return { get() {
+      return r == null ? void 0 : r.call(this);
+    }, set(n) {
+      const l = r == null ? void 0 : r.call(this);
+      i.call(this, n), this.requestUpdate(t, l, s);
+    }, configurable: !0, enumerable: !0 };
   }
-  // This callback is automatically called when the parent form is reset.
-  formResetCallback() {
-    this.value = "";
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) ?? kt;
   }
-  /********************** Form Integration **********************/
-  _setValue() {
-    this._internals.setFormValue(this.value), this._manageRequire();
+  static _$Ei() {
+    if (this.hasOwnProperty(W("elementProperties"))) return;
+    const t = Oe(this);
+    t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
-  _manageRequire() {
-    var i;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.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);
+  static finalize() {
+    if (this.hasOwnProperty(W("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(W("properties"))) {
+      const e = this.properties, s = [...Me(e), ...He(e)];
+      for (const r of s) this.createProperty(r, e[r]);
+    }
+    const t = this[Symbol.metadata];
+    if (t !== null) {
+      const e = litPropertyMetadata.get(t);
+      if (e !== void 0) for (const [s, r] of e) this.elementProperties.set(s, r);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [e, s] of this.elementProperties) {
+      const r = this._$Eu(e, s);
+      r !== void 0 && this._$Eh.set(r, e);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
   }
-  _setValidityMessage(t = "") {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.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);
+  static finalizeStyles(t) {
+    const e = [];
+    if (Array.isArray(t)) {
+      const s = new Set(t.flat(1 / 0).reverse());
+      for (const r of s) e.unshift(Mt(r));
+    } else t !== void 0 && e.push(Mt(t));
+    return e;
   }
-  _validate() {
-    var i;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.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);
+  static _$Eu(t, e) {
+    const s = e.attribute;
+    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
   }
-  /********************** Functions **********************/
-  // This helper function is called to perform the element's native validation.
-  checkValidity() {
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    var t;
+    this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
+  }
+  addController(t) {
     var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
-    return t ? t.checkValidity() : !0;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
   }
-  _handleInvalid(t) {
+  removeController(t) {
+    var e;
+    (e = this._$EO) == null || e.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 Ce(t, this.constructor.elementStyles), t;
+  }
+  connectedCallback() {
+    var t;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
+      var s;
+      return (s = e.hostConnected) == null ? void 0 : s.call(e);
+    });
+  }
+  enableUpdating(t) {
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._$EO) == null || t.forEach((e) => {
+      var s;
+      return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
+    });
+  }
+  attributeChangedCallback(t, e, s) {
+    this._$AK(t, s);
+  }
+  _$EC(t, e) {
     var s;
-    t.preventDefault(), this._hasUserInteracted = !0, this._validate();
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
-    if (e) {
-      const i = this._internals.form;
-      i ? Array.from(i.elements).find(
-        (l) => typeof l.checkValidity == "function" && !l.checkValidity()
-      ) === this && e.focus() : e.focus();
+    const r = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, r);
+    if (i !== void 0 && r.reflect === !0) {
+      const n = (((s = r.converter) == null ? void 0 : s.toAttribute) !== void 0 ? r.converter : rt).toAttribute(e, r.type);
+      this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
     }
   }
-  _togglePasswordVisibility() {
-    this.showPassword = !this.showPassword;
+  _$AK(t, e) {
+    var s;
+    const r = this.constructor, i = r._$Eh.get(t);
+    if (i !== void 0 && this._$Em !== i) {
+      const n = r.getPropertyOptions(i), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((s = n.converter) == null ? void 0 : s.fromAttribute) !== void 0 ? n.converter : rt;
+      this._$Em = i, this[i] = l.fromAttribute(e, n.type), this._$Em = null;
+    }
   }
-  /******************** Event Handlers ********************/
-  // Handle input event to check pattern validity
-  _handleInput(t) {
-    const e = t.target;
-    this.value = e.value, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
-      new CustomEvent("input", {
-        detail: { value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    );
+  requestUpdate(t, e, s) {
+    if (t !== void 0) {
+      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? gt)(this[t], e)) return;
+      this.P(t, e, s);
+    }
+    this.isUpdatePending === !1 && (this._$ES = this._$ET());
   }
-  // Handle focus event
-  _handleFocus() {
-    this.dispatchEvent(new Event("focus"));
+  P(t, e, s) {
+    this._$AL.has(t) || this._$AL.set(t, e), s.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
   }
-  // Handle blur event
-  _handleBlur() {
-    this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), this.dispatchEvent(new Event("blur"));
+  async _$ET() {
+    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();
   }
-  // Handle change event
-  _handleChange() {
-    this.dispatchEvent(new Event("change"));
+  performUpdate() {
+    var t;
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [i, n] of this._$Ep) this[i] = n;
+        this._$Ep = void 0;
+      }
+      const r = this.constructor.elementProperties;
+      if (r.size > 0) for (const [i, n] of r) n.wrapped !== !0 || this._$AL.has(i) || this[i] === void 0 || this.P(i, this[i], n);
+    }
+    let e = !1;
+    const s = this._$AL;
+    try {
+      e = this.shouldUpdate(s), e ? (this.willUpdate(s), (t = this._$EO) == null || t.forEach((r) => {
+        var i;
+        return (i = r.hostUpdate) == null ? void 0 : i.call(r);
+      }), this.update(s)) : this._$EU();
+    } catch (r) {
+      throw e = !1, this._$EU(), r;
+    }
+    e && this._$AE(s);
+  }
+  willUpdate(t) {
+  }
+  _$AE(t) {
+    var e;
+    (e = this._$EO) == null || e.forEach((s) => {
+      var r;
+      return (r = s.hostUpdated) == null ? void 0 : r.call(s);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
+  }
+  _$EU() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t) {
+    return !0;
+  }
+  update(t) {
+    this._$Ej && (this._$Ej = this._$Ej.forEach((e) => this._$EC(e, this[e]))), this._$EU();
+  }
+  updated(t) {
+  }
+  firstUpdated(t) {
+  }
+}
+B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[W("elementProperties")] = /* @__PURE__ */ new Map(), B[W("finalized")] = /* @__PURE__ */ new Map(), Ot == null || Ot({ ReactiveElement: B }), (z.reactiveElementVersions ?? (z.reactiveElementVersions = [])).push("2.0.4");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Ne = { attribute: !0, type: String, converter: rt, reflect: !1, hasChanged: gt }, Re = (o = Ne, t, e) => {
+  const { kind: s, metadata: r } = e;
+  let i = globalThis.litPropertyMetadata.get(r);
+  if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), i.set(e.name, o), s === "accessor") {
+    const { name: n } = e;
+    return { set(l) {
+      const a = t.get.call(this);
+      t.set.call(this, l), this.requestUpdate(n, a, o);
+    }, init(l) {
+      return l !== void 0 && this.P(n, void 0, o), l;
+    } };
+  }
+  if (s === "setter") {
+    const { name: n } = e;
+    return function(l) {
+      const a = this[n];
+      t.call(this, l), this.requestUpdate(n, a, o);
+    };
+  }
+  throw Error("Unsupported decorator location: " + s);
+};
+function $(o) {
+  return (t, e) => typeof e == "object" ? Re(o, t, e) : ((s, r, i) => {
+    const n = r.hasOwnProperty(i);
+    return r.constructor.createProperty(i, n ? { ...s, wrapped: !0 } : s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
+  })(o, t, e);
+}
+const ze = qt`
+  :host {
+    /* Anything that can be overridden should be defined here */
+
+    /* Global Button Styles */
+    --_nys-button-width: fit-content;
+    --_nys-button-height: var(--nys-size-600, 48px);
+    --_nys-button-radius-left: var(--nys-radius-xl, 12px);
+    --_nys-button-radius-right: var(--nys-radius-xl, 12px);
+    --_nys-button-padding-y: var(--nys-space-150, 12px);
+    --_nys-button-padding-x: var(--nys-space-250, 20px);
+    --_nys-button-gap: var(--nys-space-100, 8px);
+    --_nys-button-width-border: var(--nys-border-width-md, 2px);
+    --_nys-button-width-focus: var(--nys-border-width-md, 2px);
+    --_nys-button-offset-focus: var(--nys-space-2px, 2px);
+    --_nys-button-color-focus: var(--nys-color-focus, #004dd1);
+
+    /* Global Button Colors */
+    --_nys-button-color-bg: var(--nys-color-theme, #154973);
+    --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border: var(--nys-color-theme, #154973);
+
+    --_nys-button-color-bg-hover: var(--nys-color-theme-strong, #0e324f);
+    --_nys-button-color-text-hover: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border-hover: var(--nys-color-theme-strong, #0e324f);
+
+    --_nys-button-color-bg-active: var(--nys-color-theme-stronger, #081b2b);
+    --_nys-button-color-text-active: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border-active: var(--nys-color-theme-stronger, #081b2b);
+
+    --_nys-button-color-bg-disabled: var(--nys-color-neutral-10, #f6f6f6);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
+    --_nys-button-color-border-disabled: var(--nys-color-neutral-10, #f6f6f6);
+
+    /* Typography */
+    --_nys-button-font-size: var(--nys-font-size-ui-md, 16px);
+    --_nys-button-font-weight: var(--nys-font-weight-semibold, 600);
+    --_nys-button-line-height: var(--nys-font-lineheight-ui-md, 24px);
+    --_nys-button-font-family: var(
+      --nys-font-family-ui,
+      var(
+        --nys-font-family-sans,
+        "Proxima Nova",
+        "Helvetica Neue",
+        "Helvetica",
+        "Arial",
+        sans-serif
+      )
+    );
+  }
+
+  /* Sizes */
+  :host([size="sm"]) {
+    --_nys-button-height: var(--nys-size-500, 40px);
+    --_nys-button-padding-y: var(--nys-space-100, 8px);
+    --_nys-button-padding-x: var(--nys-space-200, 16px);
+  }
+  :host([size="md"]) {
+    --_nys-button-height: var(--nys-size-600, 48px);
+    --_nys-button-padding-y: var(--nys-space-150, 12px);
+    --_nys-button-padding-x: var(--nys-space-250, 20px);
+  }
+  :host([size="lg"]) {
+    --_nys-button-height: var(--nys-size-700, 56px);
+    --_nys-button-padding-y: var(--nys-space-200, 16px);
+    --_nys-button-padding-x: var(--nys-space-300, 24px);
+  }
+  :host([fullWidth]) {
+    --_nys-button-width: 100%;
+  }
+
+  /* VARIANTS */
+
+  /* Filled */
+  :host([variant="filled"]) {
+    /* Filled - Default */
+    --_nys-button-color-bg: var(--nys-color-theme, #154973);
+    --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Filled - Hover */
+    --_nys-button-color-bg-hover: var(--nys-color-theme-strong, #0e324f);
+    --_nys-button-color-text-hover: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Filled - Pressed/Active */
+    --_nys-button-color-bg-active: var(--nys-color-theme-stronger, #081b2b);
+    --_nys-button-color-text-active: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Filled - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-neutral-10, #f6f6f6);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+  }
+
+  /* Outline */
+  :host([variant="outline"]) {
+    /* Outline - Default */
+    --_nys-button-color-bg: var(--nys-color-surface, #ffffff);
+    --_nys-button-color-text: var(--nys-color-theme, #154973);
+    --_nys-button-color-border: var(--nys-color-theme, #154973);
+
+    /* Outline - Hover */
+    --_nys-button-color-bg-hover: var(--nys-color-theme-weaker, #eff6fb);
+    --_nys-button-color-text-hover: var(--nys-color-theme, #154973);
+    --_nys-button-color-border-hover: var(--nys-color-theme, #154973);
+
+    /* Outline - Pressed/Active */
+    --_nys-button-color-bg-active: var(--nys-color-theme-weak, #cddde9);
+    --_nys-button-color-text-active: var(--nys-color-theme, #154973);
+    --_nys-button-color-border-active: var(--nys-color-theme, #154973);
+
+    /* Outline - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-surface, #ffffff);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
+    --_nys-button-color-border-disabled: var(--nys-color-neutral-100, #d0d0ce);
+  }
+
+  /* Text */
+  :host([variant="text"]) {
+    --_nys-button-height: fit-content;
+    --_nys-button-radius-left: var(--nys-radius-md, 4px);
+    --_nys-button-radius-right: var(--nys-radius-md, 4px);
+    --_nys-button-padding-y: var(--nys-space-2px, 2px);
+    --_nys-button-padding-x: var(--nys-space-50, 4px);
+    --_nys-button-width-border: 0px;
+    --_nys-button-text-decoration: underline;
+
+    /* Text - Default */
+    --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text: var(--nys-color-link, #004dd1);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Text - Hover */
+    --_nys-button-color-bg-hover: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-hover: var(--nys-color-link-strong, #003ba1);
+    --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
+
+    /* Text - Pressed/Active */
+    --_nys-button-color-bg-active: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-active: var(--nys-color-link-strongest, #002971);
+    --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
+
+    /* Text - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+  }
+
+  /* Ghost */
+  :host([variant="ghost"]) {
+    /* Ghost - Default */
+    --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Ghost - Hover */
+    --_nys-button-color-bg-hover: var(
+      --nys-color-black-transparent-100,
+      #0000001a
+    );
+    --_nys-button-color-text-hover: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
+
+    /* Ghost - Active */
+    --_nys-button-color-bg-active: var(
+      --nys-color-black-transparent-200,
+      #00000033
+    );
+    --_nys-button-color-text-active: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
+
+    /* Ghost - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+  }
+
+  /* INVERTED VARIANTS */
+
+  /* Filled Inverted */
+  :host([variant="filled"][inverted]) {
+    /* Filled Inverted - Default */
+    --_nys-button-color-bg: var(--nys-color-surface, #ffffff);
+    --_nys-button-color-text: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+
+    /* Filled Inverted - Hover */
+    --_nys-button-color-bg-hover: var(--nys-color-neutral-100, #d0d0ce);
+    --_nys-button-color-text-hover: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+
+    /* Filled Inverted - Pressed/Active */
+    --_nys-button-color-bg-active: var(--nys-color-neutral-300, #a7a9ab);
+    --_nys-button-color-text-active: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+
+    /* Filled Inverted - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-text, #1b1b1b);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #62666a);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+  }
+
+  /* Outline Inverted */
+  :host([variant="outline"][inverted]) {
+    /* Outline Inverted - Default */
+    --_nys-button-color-bg: var(--nys-color-surface-reverse, #1b1b1b);
+    --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border: var(--nys-color-ink-reverse, #ffffff);
+
+    /* Outline Inverted - Hover */
+    --_nys-button-color-bg-hover: var(--nys-color-surface-reverse, #1b1b1b);
+    --_nys-button-color-text-hover: var(--nys-color-text-reverse-weak, #d0d0ce);
+    --_nys-button-color-border-hover: var(--nys-color-neutral-100, #d0d0ce);
+
+    /* Outline Inverted - Pressed/Active */
+    --_nys-button-color-bg-active: var(--nys-color-surface-reverse, #1b1b1b);
+    --_nys-button-color-text-active: var(
+      --nys-color-text-reverse-weaker,
+      #bec0c1
+    );
+    --_nys-button-color-border-active: var(--nys-color-neutral-300, #a7a9ab);
+
+    /* Outline Inverted - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-surface-reverse, #1b1b1b);
+    --_nys-button-color-text-disabled: var(
+      --nys-color-text-reverse-disabled,
+      #62666a
+    );
+    --_nys-button-color-border-disabled: var(--nys-color-neutral-600, #62666a);
+  }
+
+  /* Text Inverted */
+  :host([variant="text"][inverted]) {
+    --_nys-button-height: fit-content;
+    --_nys-button-radius-left: var(--nys-radius-md, 4px);
+    --_nys-button-radius-right: var(--nys-radius-md, 4px);
+    --_nys-button-padding-y: var(--nys-space-2px, 2px);
+    --_nys-button-padding-x: var(--nys-space-50, 4px);
+    --_nys-button-width-border: 0px;
+    --_nys-button-text-decoration: underline;
+
+    /* Text Inverted - Default */
+    --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text: var(--nys-color-link-reverse, #a7a9ab);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Text Inverted - Hover */
+    --_nys-button-color-bg-hover: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-hover: var(
+      --nys-color-link-reverse-strong,
+      #ededed
+    );
+    --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
+
+    /* Text Inverted - Pressed/Active */
+    --_nys-button-color-bg-active: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-active: var(
+      --nys-color-reverse-strongest,
+      #ffffff
+    );
+    --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
+
+    /* Text Inverted - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-disabled: var(
+      --nys-color-text-reverse-disabled,
+      #62666a
+    );
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+  }
+
+  /* Ghost Inverted */
+  :host([variant="ghost"][inverted]) {
+    /* Ghost Inverted - Default */
+    --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
+
+    /* Ghost Inverted - Hover */
+    --_nys-button-color-bg-hover: var(
+      --nys-color-white-transparent-100,
+      #ffffff1a
+    );
+    --_nys-button-color-text-hover: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
+
+    /* Ghost Inverted - Pressed/Active */
+    --_nys-button-color-bg-active: var(
+      --nys-color-white-transparent-200,
+      #ffffff33
+    );
+    --_nys-button-color-text-active: var(--nys-color-text-reverse, #ffffff);
+    --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
+
+    /* Ghost Inverted - Disabled */
+    --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
+    --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #62666a);
+    --_nys-button-color-border-disabled: var(
+      --nys-color-transparent,
+      #ffffff00
+    );
+  }
+
+  .nys-button {
+    width: var(--_nys-button-width);
+    height: var(--_nys-button-height);
+    /* set every corner individually */
+    border-top-left-radius: var(--_nys-button-radius-left);
+    border-bottom-left-radius: var(--_nys-button-radius-left);
+    border-top-right-radius: var(--_nys-button-radius-right);
+    border-bottom-right-radius: var(--_nys-button-radius-right);
+    padding: var(--_nys-button-padding-y) var(--_nys-button-padding-x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--_nys-button-gap);
+    font-family: var(--_nys-button-font-family);
+    font-size: var(--_nys-button-font-size);
+    font-weight: var(--_nys-button-font-weight);
+    line-height: var(--_nys-button-line-height);
+    text-decoration: var(--_nys-button-text-decoration);
+    box-sizing: border-box;
+    background-color: var(--_nys-button-color-bg);
+    color: var(--_nys-button-color-text);
+    border: solid var(--_nys-button-width-border)
+      var(--_nys-button-color-border);
+    cursor: pointer;
+  }
+
+  .nys-button:hover {
+    background-color: var(--_nys-button-color-bg-hover);
+    color: var(--_nys-button-color-text-hover);
+    border-color: var(--_nys-button-color-border-hover);
+  }
+
+  .nys-button:active {
+    background-color: var(--_nys-button-color-bg-active);
+    color: var(--_nys-button-color-text-active);
+    border-color: var(--_nys-button-color-border-active);
+  }
+
+  .nys-button:disabled,
+  a[disabled] {
+    background-color: var(--_nys-button-color-bg-disabled);
+    color: var(--_nys-button-color-text-disabled);
+    border-color: var(--_nys-button-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  .nys-button__linkwrapper:has([disabled]) {
+    cursor: not-allowed;
+    width: fit-content;
+  }
+
+  /* Remove click functionality from disabled link button */
+  a[disabled] {
+    pointer-events: none;
+  }
+
+  a[disabled]:hover {
+    background-color: var(--_nys-button-color-bg-disabled);
+    color: var(--_nys-button-color-text-disabled);
+    border-color: var(--_nys-button-color-border-disabled);
+  }
+
+  .nys-button * {
+    cursor: pointer;
+  }
+
+  .nys-button:disabled * {
+    cursor: not-allowed;
+  }
+
+  .nys-button:focus-visible {
+    outline-offset: var(--_nys-button-offset-focus);
+    outline: solid var(--_nys-button-width-focus) var(--_nys-button-color-focus);
+  }
+
+  .nys-button__text {
+    display: flex;
+    align-items: center;
+    user-select: none;
+  }
+`;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ot = globalThis, nt = ot.trustedTypes, Nt = nt ? nt.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, te = "$lit$", C = `lit$${Math.random().toFixed(9).slice(2)}$`, ee = "?" + C, De = `<${ee}>`, N = document, it = () => N.createComment(""), Z = (o) => o === null || typeof o != "object" && typeof o != "function", $t = Array.isArray, Le = (o) => $t(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", pt = `[ 	
+\f\r]`, q = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Rt = /-->/g, zt = />/g, M = RegExp(`>|${pt}(?:([^\\s"'>=/]+)(${pt}*=${pt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Dt = /'/g, Lt = /"/g, se = /^(?:script|style|textarea|title)$/i, Y = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), Vt = /* @__PURE__ */ new WeakMap(), O = N.createTreeWalker(N, 129);
+function re(o, t) {
+  if (!$t(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Nt !== void 0 ? Nt.createHTML(t) : t;
+}
+const Ve = (o, t) => {
+  const e = o.length - 1, s = [];
+  let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = q;
+  for (let l = 0; l < e; l++) {
+    const a = o[l];
+    let c, d, h = -1, y = 0;
+    for (; y < a.length && (n.lastIndex = y, d = n.exec(a), d !== null); ) y = n.lastIndex, n === q ? d[1] === "!--" ? n = Rt : d[1] !== void 0 ? n = zt : d[2] !== void 0 ? (se.test(d[2]) && (r = RegExp("</" + d[2], "g")), n = M) : d[3] !== void 0 && (n = M) : n === M ? d[0] === ">" ? (n = r ?? q, h = -1) : d[1] === void 0 ? h = -2 : (h = n.lastIndex - d[2].length, c = d[1], n = d[3] === void 0 ? M : d[3] === '"' ? Lt : Dt) : n === Lt || n === Dt ? n = M : n === Rt || n === zt ? n = q : (n = M, r = void 0);
+    const g = n === M && o[l + 1].startsWith("/>") ? " " : "";
+    i += n === q ? a + De : h >= 0 ? (s.push(c), a.slice(0, h) + te + a.slice(h) + C + g) : a + C + (h === -2 ? l : g);
+  }
+  return [re(o, i + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
+};
+class J {
+  constructor({ strings: t, _$litType$: e }, s) {
+    let r;
+    this.parts = [];
+    let i = 0, n = 0;
+    const l = t.length - 1, a = this.parts, [c, d] = Ve(t, e);
+    if (this.el = J.createElement(c, s), O.currentNode = this.el.content, e === 2 || e === 3) {
+      const h = this.el.content.firstChild;
+      h.replaceWith(...h.childNodes);
+    }
+    for (; (r = O.nextNode()) !== null && a.length < l; ) {
+      if (r.nodeType === 1) {
+        if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(te)) {
+          const y = d[n++], g = r.getAttribute(h).split(C), S = /([.?@])?(.*)/.exec(y);
+          a.push({ type: 1, index: i, name: S[2], strings: g, ctor: S[1] === "." ? qe : S[1] === "?" ? je : S[1] === "@" ? Fe : ht }), r.removeAttribute(h);
+        } else h.startsWith(C) && (a.push({ type: 6, index: i }), r.removeAttribute(h));
+        if (se.test(r.tagName)) {
+          const h = r.textContent.split(C), y = h.length - 1;
+          if (y > 0) {
+            r.textContent = nt ? nt.emptyScript : "";
+            for (let g = 0; g < y; g++) r.append(h[g], it()), O.nextNode(), a.push({ type: 2, index: ++i });
+            r.append(h[y], it());
+          }
+        }
+      } else if (r.nodeType === 8) if (r.data === ee) a.push({ type: 2, index: i });
+      else {
+        let h = -1;
+        for (; (h = r.data.indexOf(C, h + 1)) !== -1; ) a.push({ type: 7, index: i }), h += C.length - 1;
+      }
+      i++;
+    }
+  }
+  static createElement(t, e) {
+    const s = N.createElement("template");
+    return s.innerHTML = t, s;
+  }
+}
+function D(o, t, e = o, s) {
+  var r, i;
+  if (t === Y) return t;
+  let n = s !== void 0 ? (r = e._$Co) == null ? void 0 : r[s] : e._$Cl;
+  const l = Z(t) ? void 0 : t._$litDirective$;
+  return (n == null ? void 0 : n.constructor) !== l && ((i = n == null ? void 0 : n._$AO) == null || i.call(n, !1), l === void 0 ? n = void 0 : (n = new l(o), n._$AT(o, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = n : e._$Cl = n), n !== void 0 && (t = D(o, n._$AS(o, t.values), n, s)), t;
+}
+class Be {
+  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, r = ((t == null ? void 0 : t.creationScope) ?? N).importNode(e, !0);
+    O.currentNode = r;
+    let i = O.nextNode(), n = 0, l = 0, a = s[0];
+    for (; a !== void 0; ) {
+      if (n === a.index) {
+        let c;
+        a.type === 2 ? c = new lt(i, i.nextSibling, this, t) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, t) : a.type === 6 && (c = new We(i, this, t)), this._$AV.push(c), a = s[++l];
+      }
+      n !== (a == null ? void 0 : a.index) && (i = O.nextNode(), n++);
+    }
+    return O.currentNode = N, r;
+  }
+  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 lt {
+  get _$AU() {
+    var t;
+    return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
+  }
+  constructor(t, e, s, r) {
+    this.type = 2, this._$AH = v, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = r, this._$Cv = (r == null ? void 0 : r.isConnected) ?? !0;
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode;
+    const e = this._$AM;
+    return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t, e = this) {
+    t = D(this, t, e), Z(t) ? t === v || t == null || t === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : t !== this._$AH && t !== Y && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Le(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 !== v && Z(this._$AH) ? this._$AA.nextSibling.data = t : this.T(N.createTextNode(t)), this._$AH = t;
+  }
+  $(t) {
+    var e;
+    const { values: s, _$litType$: r } = t, i = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = J.createElement(re(r.h, r.h[0]), this.options)), r);
+    if (((e = this._$AH) == null ? void 0 : e._$AD) === i) this._$AH.p(s);
+    else {
+      const n = new Be(i, this), l = n.u(this.options);
+      n.p(s), this.T(l), this._$AH = n;
+    }
+  }
+  _$AC(t) {
+    let e = Vt.get(t.strings);
+    return e === void 0 && Vt.set(t.strings, e = new J(t)), e;
+  }
+  k(t) {
+    $t(this._$AH) || (this._$AH = [], this._$AR());
+    const e = this._$AH;
+    let s, r = 0;
+    for (const i of t) r === e.length ? e.push(s = new lt(this.O(it()), this.O(it()), this, this.options)) : s = e[r], s._$AI(i), r++;
+    r < e.length && (this._$AR(s && s._$AB.nextSibling, r), e.length = r);
+  }
+  _$AR(t = this._$AA.nextSibling, e) {
+    var s;
+    for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t && t !== this._$AB; ) {
+      const r = t.nextSibling;
+      t.remove(), t = r;
+    }
+  }
+  setConnected(t) {
+    var e;
+    this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
+  }
+}
+class ht {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t, e, s, r, i) {
+    this.type = 1, this._$AH = v, this._$AN = void 0, this.element = t, this.name = e, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = v;
+  }
+  _$AI(t, e = this, s, r) {
+    const i = this.strings;
+    let n = !1;
+    if (i === void 0) t = D(this, t, e, 0), n = !Z(t) || t !== this._$AH && t !== Y, n && (this._$AH = t);
+    else {
+      const l = t;
+      let a, c;
+      for (t = i[0], a = 0; a < i.length - 1; a++) c = D(this, l[s + a], e, a), c === Y && (c = this._$AH[a]), n || (n = !Z(c) || c !== this._$AH[a]), c === v ? t = v : t !== v && (t += (c ?? "") + i[a + 1]), this._$AH[a] = c;
+    }
+    n && !r && this.j(t);
+  }
+  j(t) {
+    t === v ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  }
+}
+class qe extends ht {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t) {
+    this.element[this.name] = t === v ? void 0 : t;
+  }
+}
+class je extends ht {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== v);
+  }
+}
+class Fe extends ht {
+  constructor(t, e, s, r, i) {
+    super(t, e, s, r, i), this.type = 5;
+  }
+  _$AI(t, e = this) {
+    if ((t = D(this, t, e, 0) ?? v) === Y) return;
+    const s = this._$AH, r = t === v && s !== v || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, i = t !== v && (s === v || r);
+    r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
+  }
+  handleEvent(t) {
+    var e;
+    typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
+  }
+}
+class We {
+  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) {
+    D(this, t);
+  }
+}
+const Bt = ot.litHtmlPolyfillSupport;
+Bt == null || Bt(J, lt), (ot.litHtmlVersions ?? (ot.litHtmlVersions = [])).push("3.2.1");
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const E = (o) => o ?? v;
+var Ge = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, m = (o, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? Ke(t, e) : t, i = o.length - 1, n; i >= 0; i--)
+    (n = o[i]) && (r = (s ? n(t, e, r) : n(r)) || r);
+  return s && r && Ge(t, e, r), r;
+};
+let Ze = 0;
+var x;
+const _ = (x = class extends jt {
+  // allows use of elementInternals' API
+  constructor() {
+    super(), this.id = "", this.name = "", this._size = "md", this.fullWidth = !1, this._variant = "filled", this.inverted = !1, this.label = "", this.ariaLabel = "", this.prefixIcon = "", this.suffixIcon = "", this.disabled = !1, this.form = "", this.value = "", this._type = "button", this.onClick = () => {
+    }, this.href = "", this._target = "_self", this._internals = this.attachInternals();
+  }
+  get size() {
+    return this._size;
+  }
+  set size(o) {
+    this._size = x.VALID_SIZES.includes(
+      o
+    ) ? o : "md";
+  }
+  get variant() {
+    return this._variant;
+  }
+  set variant(o) {
+    this._variant = x.VALID_VARIANTS.includes(
+      o
+    ) ? o : "filled";
+  }
+  get type() {
+    return this._type;
+  }
+  set type(o) {
+    this._type = x.VALID_TYPES.includes(
+      o
+    ) ? o : "button";
+  }
+  get target() {
+    return this._target;
+  }
+  set target(o) {
+    this._target = x.VALID_TARGETS.includes(
+      o
+    ) ? o : "_self";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
+  }
+  /******************** Functions ********************/
+  _generateUniqueId() {
+    return `nys-button-${Date.now()}-${Ze++}`;
+  }
+  _manageFormAction(o) {
+    typeof this.onClick == "function" && this.onClick(o);
+    const t = this._internals.form;
+    if (t)
+      switch (this.type) {
+        case "submit":
+          t.requestSubmit();
+          break;
+        case "reset":
+          t.reset();
+          break;
+      }
+  }
+  /******************** Event Handlers ********************/
+  // Handle focus event
+  _handleFocus() {
+    this.dispatchEvent(new Event("nys-focus"));
+  }
+  // Handle blur event
+  _handleBlur() {
+    this.dispatchEvent(new Event("nys-blur"));
+  }
+  _handleClick(o) {
+    if (this.disabled) {
+      o.preventDefault();
+      return;
+    }
+    this._manageFormAction(o), this.dispatchEvent(new Event("nys-click"));
+  }
+  // Handle keydown for keyboard accessibility
+  _handleKeydown(o) {
+    (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") && (o.preventDefault(), this.disabled || this._manageFormAction(o));
+  }
+  render() {
+    return A`
+      ${this.href ? A`
+            <div class="nys-button__linkwrapper">
+              <a
+                class="nys-button"
+                id=${E(this.id)}
+                name=${E(this.name ? this.name : void 0)}
+                ?disabled=${this.disabled}
+                aria-disabled="${this.disabled ? "true" : "false"}"
+                form=${E(this.form ? this.form : void 0)}
+                value=${E(this.value ? this.value : void 0)}
+                href=${this.href}
+                target=${this.target}
+                aria-label=${this.ariaLabel || this.label || "button"}
+                @click=${this._handleClick}
+                @focus="${this._handleFocus}"
+                @blur="${this._handleBlur}"
+              >
+                ${this.prefixIcon && this.variant !== "text" ? A`<slot name="prefix-icon">
+                      <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
+                    </slot>` : ""}
+                ${this.label ? A`<label class="nys-button__text">${this.label}</label>` : ""}
+                ${this.suffixIcon && this.variant !== "text" ? A`<slot name="suffix-icon">
+                      <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
+                    </slot>` : ""}
+              </a>
+            </div>
+          ` : A`
+            <button
+              class="nys-button"
+              id=${E(this.id)}
+              name=${E(this.name ? this.name : void 0)}
+              ?disabled=${this.disabled}
+              form=${E(this.form ? this.form : void 0)}
+              value=${E(this.value ? this.value : void 0)}
+              type=${this.type}
+              aria-label=${this.ariaLabel || this.label || "button"}
+              @click=${this._handleClick}
+              @focus="${this._handleFocus}"
+              @blur="${this._handleBlur}"
+              @keydown="${this._handleKeydown}"
+            >
+              ${this.prefixIcon && this.variant !== "text" ? A`<slot name="prefix-icon">
+                    <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
+                  </slot>` : ""}
+              ${this.label ? A`<label class="nys-button__text">${this.label}</label>` : ""}
+              ${this.suffixIcon && this.variant !== "text" ? A`<slot name="suffix-icon">
+                    <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
+                  </slot>` : ""}
+            </button>
+          `}
+    `;
+  }
+}, x.VALID_SIZES = ["sm", "md", "lg"], x.VALID_VARIANTS = [
+  "filled",
+  "outline",
+  "ghost",
+  "text"
+], x.VALID_TYPES = ["submit", "reset", "button"], x.VALID_TARGETS = [
+  "_self",
+  "_blank",
+  "_parent",
+  "_top",
+  "framename"
+], x.styles = ze, x.formAssociated = !0, x);
+m([
+  $({ type: String })
+], _.prototype, "id", 2);
+m([
+  $({ type: String, reflect: !0 })
+], _.prototype, "name", 2);
+m([
+  $({ reflect: !0 })
+], _.prototype, "size", 1);
+m([
+  $({ type: Boolean, reflect: !0 })
+], _.prototype, "fullWidth", 2);
+m([
+  $({ reflect: !0 })
+], _.prototype, "variant", 1);
+m([
+  $({ type: Boolean, reflect: !0 })
+], _.prototype, "inverted", 2);
+m([
+  $({ type: String })
+], _.prototype, "label", 2);
+m([
+  $({ type: String })
+], _.prototype, "ariaLabel", 2);
+m([
+  $({ type: String })
+], _.prototype, "prefixIcon", 2);
+m([
+  $({ type: String })
+], _.prototype, "suffixIcon", 2);
+m([
+  $({ type: Boolean, reflect: !0 })
+], _.prototype, "disabled", 2);
+m([
+  $({ type: String })
+], _.prototype, "form", 2);
+m([
+  $({ type: String })
+], _.prototype, "value", 2);
+m([
+  $({ reflect: !0 })
+], _.prototype, "type", 1);
+m([
+  $({ type: Function })
+], _.prototype, "onClick", 2);
+m([
+  $({ type: String })
+], _.prototype, "href", 2);
+m([
+  $({ reflect: !0 })
+], _.prototype, "target", 1);
+let Ye = _;
+customElements.get("nys-button") || customElements.define("nys-button", Ye);
+var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, f = (o, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? Qe(t, e) : t, i = o.length - 1, n; i >= 0; i--)
+    (n = o[i]) && (r = (s ? n(t, e, r) : n(r)) || r);
+  return s && r && Je(t, e, r), r;
+};
+let Xe = 0;
+var w;
+const u = (w = class extends jt {
+  // 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.form = "", this.pattern = "", this.maxlength = null, this.width = "full", this.step = null, this.min = null, this.max = null, this.showError = !1, this.errorMessage = "", this.showPassword = !1, this._originalErrorMessage = "", this._hasUserInteracted = !1, this._internals = this.attachInternals();
+  }
+  get type() {
+    return this._type;
+  }
+  set type(t) {
+    this._type = w.VALID_TYPES.includes(
+      t
+    ) ? t : "text";
+  }
+  // Ensure the "width" property is valid after updates
+  async updated(t) {
+    t.has("width") && (await Promise.resolve(), this.width = w.VALID_WIDTHS.includes(this.width) ? this.width : "full"), t.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton"));
+  }
+  // Generate a unique ID if one is not provided
+  connectedCallback() {
+    super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${Xe++}`), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
+  }
+  firstUpdated() {
+    this._setValue(), this._manageRequire();
+  }
+  // This callback is automatically called when the parent form is reset.
+  formResetCallback() {
+    this.value = "";
+  }
+  /********************** Form Integration **********************/
+  _setValue() {
+    this._internals.setFormValue(this.value), this._manageRequire();
+  }
+  _manageRequire() {
+    var r, i;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    if (!t) return;
+    const e = this.errorMessage || "This field is required";
+    this.required && (!this.value || ((i = this.value) == null ? void 0 : i.trim()) === "") ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, e, t)) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
+  }
+  _setValidityMessage(t = "") {
+    var r, i;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    if (!e) return;
+    this.showError = !!t, (i = this._originalErrorMessage) != null && i.trim() && t !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = t;
+    const s = t ? { customError: !0 } : {};
+    this._internals.setValidity(s, this.errorMessage, e);
+  }
+  _validate() {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.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);
+  }
+  /********************** Functions **********************/
+  // This helper function is called to perform the element's native validation.
+  checkValidity() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
+    return t ? t.checkValidity() : !0;
+  }
+  _handleInvalid(t) {
+    var s;
+    t.preventDefault(), this._hasUserInteracted = !0, this._validate();
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+    if (e) {
+      const r = this._internals.form;
+      r ? Array.from(r.elements).find(
+        (l) => typeof l.checkValidity == "function" && !l.checkValidity()
+      ) === this && e.focus() : e.focus();
+    }
+  }
+  _togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+  /******************** Event Handlers ********************/
+  // Handle input event to check pattern validity
+  _handleInput(t) {
+    const e = t.target;
+    this.value = e.value, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
+      new CustomEvent("nys-input", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // Handle focus event
+  _handleFocus() {
+    this.dispatchEvent(new Event("nys-focus"));
+  }
+  // Handle blur event
+  _handleBlur() {
+    this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), this.dispatchEvent(new Event("nys-blur"));
+  }
+  _validateButtonSlot(t) {
+    var n, l;
+    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector(
+      'slot[name="' + t + '"]'
+    ), s = (l = this.shadowRoot) == null ? void 0 : l.querySelector(
+      ".nys-textinput__buttoncontainer"
+    );
+    if (!e || !s) return;
+    const r = e.assignedElements();
+    let i = !1;
+    r.forEach((a) => {
+      a instanceof HTMLElement && a.tagName.toLowerCase() === "nys-button" && !i ? (i = !0, a.setAttribute("size", "sm"), a.setAttribute("variant", "primary"), this.disabled ? a.setAttribute("disabled", "true") : a.removeAttribute("disabled")) : (console.warn(
+        "The '" + t + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
+        a
+      ), a.remove());
+    }), t === "startButton" ? s.classList.toggle("has-start-button", i) : t === "endButton" && s.classList.toggle("has-end-button", i);
   }
   render() {
-    return F`
+    return A`
       <div class="nys-textinput">
         <nys-label
           id=${this.id}
@@ -835,41 +2055,58 @@ const d = (f = class extends ht {
         >
           <slot name="description" slot="description">${this.description}</slot>
         </nys-label>
-        <div class="nys-input-container ${this.disabled ? "disabled" : ""}">
-          <input
-            class="nys-textinput__input"
-            type=${this.type === "password" ? this.showPassword ? "text" : "password" : this.type}
-            name=${this.name}
-            id=${this.id}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            ?aria-required=${this.required}
-            ?readonly=${this.readonly}
-            aria-disabled="${this.disabled}"
-            aria-label="${this.label} ${this.description}"
-            .value=${this.value}
-            placeholder=${x(
+        <div class="nys-textinput__buttoncontainer">
+          <slot
+            name="startButton"
+            @slotchange=${this._validateButtonSlot("startButton")}
+          ></slot>
+          <div class="nys-textinput__container">
+            <input
+              class="nys-textinput__input"
+              type=${this.type === "password" ? this.showPassword ? "text" : "password" : this.type}
+              name=${this.name}
+              id=${this.id}
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              ?readonly=${this.readonly}
+              aria-required=${this.required}
+              aria-disabled="${this.disabled}"
+              aria-label="${[this.label, this.description].filter(Boolean).join(" ")}"
+              .value=${this.value}
+              placeholder=${T(
       this.placeholder ? this.placeholder : void 0
     )}
-            pattern=${x(this.pattern ? this.pattern : void 0)}
-            min=${x(this.min !== "" ? this.min : void 0)}
-            maxlength=${x(
+              pattern=${T(this.pattern ? this.pattern : void 0)}
+              min=${T(this.min !== "" ? this.min : void 0)}
+              maxlength=${T(
       this.maxlength !== "" ? this.maxlength : void 0
     )}
-            step=${x(this.step !== "" ? this.step : void 0)}
-            max=${x(this.max !== "" ? this.max : void 0)}
-            form=${x(this.form ? this.form : void 0)}
-            @input=${this._handleInput}
-            @focus="${this._handleFocus}"
-            @blur="${this._handleBlur}"
-            @change="${this._handleChange}"
-          />
-          ${this.type === "password" ? F`<nys-icon
-                class="eye-icon"
-                @click=${() => !this.disabled && this._togglePasswordVisibility()}
-                name=${this.showPassword ? "visibility_off" : "visibility"}
-                size="2xl"
-              ></nys-icon>` : ""}
+              step=${T(this.step !== "" ? this.step : void 0)}
+              max=${T(this.max !== "" ? this.max : void 0)}
+              form=${T(this.form ? this.form : void 0)}
+              @input=${this._handleInput}
+              @focus="${this._handleFocus}"
+              @blur="${this._handleBlur}"
+            />
+            ${this.type === "password" ? A` <nys-button
+                  class="eye-icon"
+                  id="password-toggle"
+                  suffixIcon="slotted"
+                  .onClick=${() => !this.disabled && this._togglePasswordVisibility()}
+                  variant="ghost"
+                  size="sm"
+                >
+                  <nys-icon
+                    slot="suffix-icon"
+                    size="2xl"
+                    name=${this.showPassword ? "visibility_off" : "visibility"}
+                  ></nys-icon>
+                </nys-button>` : ""}
+          </div>
+          <slot
+            name="endButton"
+            @slotchange=${this._validateButtonSlot("endButton")}
+          ></slot>
         </div>
         <nys-errormessage
           ?showError=${this.showError}
@@ -878,7 +2115,7 @@ const d = (f = class extends ht {
       </div>
     `;
   }
-}, f.VALID_TYPES = [
+}, w.VALID_TYPES = [
   "email",
   "number",
   "password",
@@ -886,73 +2123,73 @@ const d = (f = class extends ht {
   "tel",
   "text",
   "url"
-], f.VALID_WIDTHS = ["sm", "md", "lg", "full"], f.styles = At, f.formAssociated = !0, f);
-p([
-  c({ type: String })
-], d.prototype, "id", 2);
-p([
-  c({ type: String, reflect: !0 })
-], d.prototype, "name", 2);
-p([
-  c({ reflect: !0 })
-], d.prototype, "type", 1);
-p([
-  c({ type: String })
-], d.prototype, "label", 2);
-p([
-  c({ type: String })
-], d.prototype, "description", 2);
-p([
-  c({ type: String })
-], d.prototype, "placeholder", 2);
-p([
-  c({ type: String })
-], d.prototype, "value", 2);
-p([
-  c({ type: Boolean, reflect: !0 })
-], d.prototype, "disabled", 2);
-p([
-  c({ type: Boolean, reflect: !0 })
-], d.prototype, "readonly", 2);
-p([
-  c({ type: Boolean, reflect: !0 })
-], d.prototype, "required", 2);
-p([
-  c({ type: Boolean, reflect: !0 })
-], d.prototype, "optional", 2);
-p([
-  c({ type: String })
-], d.prototype, "form", 2);
-p([
-  c({ type: String })
-], d.prototype, "pattern", 2);
-p([
-  c({ type: Number })
-], d.prototype, "maxlength", 2);
-p([
-  c({ reflect: !0 })
-], d.prototype, "width", 2);
-p([
-  c({ type: Number })
-], d.prototype, "step", 2);
-p([
-  c({ type: Number })
-], d.prototype, "min", 2);
-p([
-  c({ type: Number })
-], d.prototype, "max", 2);
-p([
-  c({ type: Boolean, reflect: !0 })
-], d.prototype, "showError", 2);
-p([
-  c({ type: String })
-], d.prototype, "errorMessage", 2);
-p([
-  xt()
-], d.prototype, "showPassword", 2);
-let Nt = d;
-customElements.get("nys-textinput") || customElements.define("nys-textinput", Nt);
+], w.VALID_WIDTHS = ["sm", "md", "lg", "full"], w.styles = ve, w.formAssociated = !0, w);
+f([
+  p({ type: String })
+], u.prototype, "id", 2);
+f([
+  p({ type: String, reflect: !0 })
+], u.prototype, "name", 2);
+f([
+  p({ reflect: !0 })
+], u.prototype, "type", 1);
+f([
+  p({ type: String })
+], u.prototype, "label", 2);
+f([
+  p({ type: String })
+], u.prototype, "description", 2);
+f([
+  p({ type: String })
+], u.prototype, "placeholder", 2);
+f([
+  p({ type: String })
+], u.prototype, "value", 2);
+f([
+  p({ type: Boolean, reflect: !0 })
+], u.prototype, "disabled", 2);
+f([
+  p({ type: Boolean, reflect: !0 })
+], u.prototype, "readonly", 2);
+f([
+  p({ type: Boolean, reflect: !0 })
+], u.prototype, "required", 2);
+f([
+  p({ type: Boolean, reflect: !0 })
+], u.prototype, "optional", 2);
+f([
+  p({ type: String })
+], u.prototype, "form", 2);
+f([
+  p({ type: String })
+], u.prototype, "pattern", 2);
+f([
+  p({ type: Number })
+], u.prototype, "maxlength", 2);
+f([
+  p({ reflect: !0 })
+], u.prototype, "width", 2);
+f([
+  p({ type: Number })
+], u.prototype, "step", 2);
+f([
+  p({ type: Number })
+], u.prototype, "min", 2);
+f([
+  p({ type: Number })
+], u.prototype, "max", 2);
+f([
+  p({ type: Boolean, reflect: !0 })
+], u.prototype, "showError", 2);
+f([
+  p({ type: String })
+], u.prototype, "errorMessage", 2);
+f([
+  be()
+], u.prototype, "showPassword", 2);
+let ts = u;
+customElements.get("nys-textinput") || customElements.define("nys-textinput", ts);
 export {
-  Nt as NysTextinput
+  ts as NysTextinput
 };
 //# sourceMappingURL=nys-textinput.js.map