@nysds/components 1.11.0 → 1.11.2

package/dist/nysds.es.js

@@ -2,12 +2,12 @@ import { css as u, LitElement as y, html as l } from "lit";
 import { property as r, query as u1, state as $ } from "lit/decorators.js";
 import { ifDefined as d } from "lit/directives/if-defined.js";
 /*!
-   * New York State Design System (v1.11.0)
+   * New York State Design System (v1.11.2)
    * Description: A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
  */
-const i1 = u`
+const a1 = u`
   :host {
     /* Anything that can be overridden should be defined here */
 
@@ -229,7 +229,7 @@ const Ne = class Ne extends y {
     </div>`;
   }
 };
-Ne.styles = i1;
+Ne.styles = a1;
 let le = Ne;
 De([
   r({ type: String })
@@ -295,7 +295,7 @@ const Fe = class Fe extends y {
     </div>`;
   }
 };
-Fe.styles = i1;
+Fe.styles = a1;
 let Ce = Fe;
 Ue([
   r({ type: String })
@@ -551,7 +551,7 @@ var _1 = Object.defineProperty, C1 = Object.getOwnPropertyDescriptor, P = (a, e,
 };
 let m1 = 0;
 var ne;
-const H = (ne = class extends y {
+const A = (ne = class extends y {
   constructor() {
     super(...arguments), this.id = "", this.heading = "", this.icon = "", this.dismissible = !1, this.duration = 0, this.text = "", this.primaryAction = "", this.secondaryAction = "", this.primaryLabel = "Learn more", this.secondaryLabel = "Dismiss", this._alertClosed = !1, this._slotHasContent = !0, this._type = "base", this._timeoutId = null;
   }
@@ -668,44 +668,44 @@ const H = (ne = class extends y {
 ], ne);
 P([
   r({ type: String })
-], H.prototype, "id", 2);
+], A.prototype, "id", 2);
 P([
   r({ type: String })
-], H.prototype, "heading", 2);
+], A.prototype, "heading", 2);
 P([
   r({ type: String })
-], H.prototype, "icon", 2);
+], A.prototype, "icon", 2);
 P([
   r({ type: Boolean, reflect: !0 })
-], H.prototype, "dismissible", 2);
+], A.prototype, "dismissible", 2);
 P([
   r({ type: Number, reflect: !0 })
-], H.prototype, "duration", 2);
+], A.prototype, "duration", 2);
 P([
   r({ type: String })
-], H.prototype, "text", 2);
+], A.prototype, "text", 2);
 P([
   r({ type: String })
-], H.prototype, "primaryAction", 2);
+], A.prototype, "primaryAction", 2);
 P([
   r({ type: String })
-], H.prototype, "secondaryAction", 2);
+], A.prototype, "secondaryAction", 2);
 P([
   r({ type: String })
-], H.prototype, "primaryLabel", 2);
+], A.prototype, "primaryLabel", 2);
 P([
   r({ type: String })
-], H.prototype, "secondaryLabel", 2);
+], A.prototype, "secondaryLabel", 2);
 P([
   $()
-], H.prototype, "_alertClosed", 2);
+], A.prototype, "_alertClosed", 2);
 P([
   $()
-], H.prototype, "_slotHasContent", 2);
+], A.prototype, "_slotHasContent", 2);
 P([
   r({ reflect: !0 })
-], H.prototype, "type", 1);
-let x1 = H;
+], A.prototype, "type", 1);
+let x1 = A;
 customElements.get("nys-alert") || customElements.define("nys-alert", x1);
 const w1 = u`
   :host {
@@ -809,25 +809,22 @@ const w1 = u`
     fill: currentColor;
   }
 `;
-var k1 = Object.defineProperty, K = (a, e, t, o) => {
+var k1 = Object.defineProperty, W = (a, e, t, o) => {
   for (var s = void 0, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = i(e, t, s) || s);
   return s && k1(e, t, s), s;
 };
-let L1 = 0;
+let S1 = 0;
 const je = class je extends y {
   constructor() {
-    super(...arguments), this.id = "", this.ariaLabel = "", this.image = "", this.initials = "", this.icon = "", this.color = "", this.interactive = !1, this.disabled = !1, this.lazy = !1, this._slotHasContent = !0;
+    super(...arguments), this.id = "", this.ariaLabel = "", this.image = "", this.initials = "", this.icon = "", this.color = "", this.interactive = !1, this.disabled = !1, this.lazy = !1, this._slotHasContent = !1;
   }
   /******************** Functions ********************/
   // Generate a unique ID if one is not provided
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-avatar-${Date.now()}-${L1++}`);
-  }
-  firstUpdated() {
-    this._checkSlotContent();
+    super.connectedCallback(), this.id || (this.id = `nys-avatar-${Date.now()}-${S1++}`);
   }
-  async _checkSlotContent() {
+  async _handleSlotChange() {
     const e = this.shadowRoot?.querySelector("slot");
     if (!e) {
       this._slotHasContent = !1;
@@ -849,8 +846,8 @@ const je = class je extends y {
     document.body.removeChild(n);
     const c = i.match(/\d+/g);
     if (!c) return;
-    const p = Number(c[0]), h = Number(c[1]), V = Number(c[2]), j = (0.299 * p + 0.587 * h + 0.114 * V) / 255 < 0.5;
-    return this.initials?.length > 0 ? j ? s : o : j ? t : e;
+    const p = Number(c[0]), h = Number(c[1]), V = Number(c[2]), T = (0.299 * p + 0.587 * h + 0.114 * V) / 255 < 0.5;
+    return this.initials?.length > 0 ? T ? s : o : T ? t : e;
   }
   render() {
     return l`
@@ -866,7 +863,9 @@ const je = class je extends y {
             aria-label=${d(
       this.image ? void 0 : this.ariaLabel ? this.ariaLabel : "avatar"
     )}
-            tabindex=${this.interactive && !this.disabled ? "0" : d(void 0)}
+            tabindex=${d(
+      this.interactive && !this.disabled ? 0 : void 0
+    )}
           >
             ${this.image?.length > 0 ? l`<img
                   part="nys-avatar__image"
@@ -879,14 +878,13 @@ const je = class je extends y {
                     class="nys-avatar__initials"
                     aria-hidden="true"
                     >${this.initials}</span
-                  >` : this._slotHasContent ? l`<div part="nys-avatar__icon">
-                      <slot></slot>
-                    </div>` : l`<div part="nys-avatar__icon">
-                      <nys-icon
-                        label="nys-avatar__icon"
-                        name=${this.icon?.length > 0 ? this.icon : "account_circle"}
-                      ></nys-icon>
-                    </div>`}
+                  >` : l`<div part="nys-avatar__icon">
+                    <slot @slotchange=${this._handleSlotChange}></slot>
+                    ${this._slotHasContent ? null : l`<nys-icon
+                          label="nys-avatar__icon"
+                          name=${this.icon?.length > 0 ? this.icon : "account_circle"}
+                        ></nys-icon>`}
+                  </div>`}
           </div>
         </div>
       </label>
@@ -895,38 +893,38 @@ const je = class je extends y {
 };
 je.styles = w1;
 let I = je;
-K([
+W([
   r({ type: String })
 ], I.prototype, "id");
-K([
+W([
   r({ type: String })
 ], I.prototype, "ariaLabel");
-K([
+W([
   r({ type: String })
 ], I.prototype, "image");
-K([
+W([
   r({ type: String })
 ], I.prototype, "initials");
-K([
+W([
   r({ type: String })
 ], I.prototype, "icon");
-K([
+W([
   r({ type: String })
 ], I.prototype, "color");
-K([
+W([
   r({ type: Boolean, reflect: !0 })
 ], I.prototype, "interactive");
-K([
+W([
   r({ type: Boolean, reflect: !0 })
 ], I.prototype, "disabled");
-K([
+W([
   r({ type: Boolean, reflect: !0 })
 ], I.prototype, "lazy");
-K([
+W([
   $()
 ], I.prototype, "_slotHasContent");
 customElements.get("nys-avatar") || customElements.define("nys-avatar", I);
-const S1 = u`
+const L1 = u`
   .nys-backtotop {
     /* These props ARE NOT publicly overridable */
     --_nys-button-border-radius--start: var(--nys-radius-round, 1776px);
@@ -994,7 +992,7 @@ const Ge = class Ge extends y {
     ></nys-button>`;
   }
 };
-Ge.styles = S1;
+Ge.styles = L1;
 let ve = Ge;
 Ze([
   r({ type: String })
@@ -1018,8 +1016,12 @@ const E1 = u`
     --_nys-button-height: var(--nys-size-600, 48px);
     --_nys-button-border-radius--start: var(--nys-radius-xl, 12px);
     --_nys-button-border-radius--end: 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-padding--y: calc(
+      var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
+    --_nys-button-padding--x: calc(
+      var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
     --_nys-button-gap: var(--nys-space-100, 8px);
     --_nys-button-border-width: var(--nys-border-width-md, 2px);
     --_nys-button-outline-width: var(--nys-border-width-md, 2px);
@@ -1093,18 +1095,30 @@ const E1 = u`
   /* 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);
+    --_nys-button-padding--y: calc(
+      var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
+    --_nys-button-padding--x: calc(
+      var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
   }
   :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);
+    --_nys-button-padding--y: calc(
+      var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
+    --_nys-button-padding--x: calc(
+      var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
   }
   :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);
+    --_nys-button-padding--y: calc(
+      var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
+    --_nys-button-padding--x: calc(
+      var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px)
+    ); /* remove calc when SASS'd */
   }
   :host([fullWidth]) {
     --_nys-button-width: 100%;
@@ -1584,7 +1598,6 @@ const E1 = u`
   .nys-button {
     width: var(--_nys-button-width);
     min-height: var(--_nys-button-height);
-    height: var(--_nys-button-height);
     /* set every corner individually */
     border-start-start-radius: var(--_nys-button-border-radius--start);
     border-end-start-radius: var(--_nys-button-border-radius--start);
@@ -1675,18 +1688,17 @@ var D1 = Object.defineProperty, M1 = Object.getOwnPropertyDescriptor, _ = (a, e,
   return o && s && D1(e, t, s), s;
 };
 let z1 = 0;
-var S;
-const b = (S = class extends y {
+var L;
+const b = (L = class extends y {
   // 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.ariaControls = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescription = "", this._type = "button", this.onClick = () => {
-    }, this.href = "", this._target = "_self", this._internals = this.attachInternals();
+    super(), this.id = "", this.name = "", this._size = "md", this.fullWidth = !1, this._variant = "filled", this.inverted = !1, this.label = "", this.ariaLabel = "", this.ariaControls = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescription = "", this._type = "button", this.onClick = null, this.href = "", this._target = "_self", this._internals = this.attachInternals();
   }
   get size() {
     return this._size;
   }
   set size(e) {
-    this._size = S.VALID_SIZES.includes(
+    this._size = L.VALID_SIZES.includes(
       e
     ) ? e : "md";
   }
@@ -1694,7 +1706,7 @@ const b = (S = class extends y {
     return this._variant;
   }
   set variant(e) {
-    this._variant = S.VALID_VARIANTS.includes(
+    this._variant = L.VALID_VARIANTS.includes(
       e
     ) ? e : "filled";
   }
@@ -1702,7 +1714,7 @@ const b = (S = class extends y {
     return this._type;
   }
   set type(e) {
-    this._type = S.VALID_TYPES.includes(
+    this._type = L.VALID_TYPES.includes(
       e
     ) ? e : "button";
   }
@@ -1710,7 +1722,7 @@ const b = (S = class extends y {
     return this._target;
   }
   set target(e) {
-    this._target = S.VALID_TARGETS.includes(
+    this._target = L.VALID_TARGETS.includes(
       e
     ) ? e : "_self";
   }
@@ -1729,7 +1741,7 @@ const b = (S = class extends y {
     return `nys-button-${Date.now()}-${z1++}`;
   }
   _manageFormAction() {
-    typeof this.onClick == "function" && this.click();
+    typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
     const e = this._internals.form;
     if (e)
       switch (this.type) {
@@ -1767,9 +1779,19 @@ const b = (S = class extends y {
         );
         t && t.click();
       } else
-        this._handleClick(e);
+        this._handleAnyAttributeFunction(), this._handleClick(e);
     }
   }
+  /**
+   * Vanilla JS & Native HTML keydown solution:
+   * The <nys-button onClick="doFunction();"></nys-button> onClick is an attribute here.
+   * Thus, we call it here. Otherwise, at this point, this.onClick is null as it isn't props, but a string attribute
+   * In vanilla HTML/JS, clicking with execute the attribute function, BUT now with keydown, hence this solution.
+   */
+  _handleAnyAttributeFunction() {
+    const e = this.getAttribute("onClick");
+    e && new Function("return " + e)();
+  }
   /******************** Public Methods ********************/
   focus(e) {
     const t = this.renderRoot.querySelector(
@@ -1830,7 +1852,6 @@ const b = (S = class extends y {
       this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
     )}
               aria-description=${d(this.ariaDescription || void 0)}
-              onclick="${this.onClick}"
               @click=${this._handleClick}
               @focus="${this._handleFocus}"
               @blur="${this._handleBlur}"
@@ -1854,18 +1875,18 @@ const b = (S = class extends y {
           `}
     `;
   }
-}, S.VALID_SIZES = ["sm", "md", "lg"], S.VALID_VARIANTS = [
+}, L.VALID_SIZES = ["sm", "md", "lg"], L.VALID_VARIANTS = [
   "filled",
   "outline",
   "ghost",
   "text"
-], S.VALID_TYPES = ["submit", "reset", "button"], S.VALID_TARGETS = [
+], L.VALID_TYPES = ["submit", "reset", "button"], L.VALID_TARGETS = [
   "_self",
   "_blank",
   "_parent",
   "_top",
   "framename"
-], S.styles = E1, S.formAssociated = !0, S);
+], L.styles = E1, L.formAssociated = !0, L);
 _([
   r({ type: String })
 ], b.prototype, "id", 2);
@@ -1931,7 +1952,7 @@ _([
 ], b.prototype, "target", 1);
 let V1 = b;
 customElements.get("nys-button") || customElements.define("nys-button", V1);
-const H1 = u`
+const A1 = u`
   :host {
     /* Anything that can be overridden should be defined here */
 
@@ -2011,10 +2032,10 @@ const H1 = u`
     font-weight: var(--_nys-badge-prefix-font-weight);
   }
 `;
-var A1 = Object.defineProperty, B1 = Object.getOwnPropertyDescriptor, ue = (a, e, t, o) => {
+var H1 = Object.defineProperty, B1 = Object.getOwnPropertyDescriptor, ue = (a, e, t, o) => {
   for (var s = o > 1 ? void 0 : o ? B1(e, t) : e, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = (o ? i(e, t, s) : i(s)) || s);
-  return o && s && A1(e, t, s), s;
+  return o && s && H1(e, t, s), s;
 }, q;
 const oe = (q = class extends y {
   constructor() {
@@ -2074,7 +2095,7 @@ const oe = (q = class extends y {
   "error",
   "success",
   "warning"
-], q.styles = H1, q.DEFAULT_ICONS = {
+], q.styles = A1, q.DEFAULT_ICONS = {
   neutral: "info",
   error: "emergency_home",
   success: "check_circle",
@@ -2106,7 +2127,7 @@ ue([
 ], oe.prototype, "suffixIcon", 1);
 let I1 = oe;
 customElements.get("nys-badge") || customElements.define("nys-badge", I1);
-const a1 = u`
+const l1 = u`
   :host {
     /* Anything that can be overridden should be defined here */
 
@@ -2489,14 +2510,14 @@ const a1 = u`
     border: 0;
   }
 `;
-var P1 = Object.defineProperty, Z1 = Object.getOwnPropertyDescriptor, A = (a, e, t, o) => {
+var P1 = Object.defineProperty, Z1 = Object.getOwnPropertyDescriptor, H = (a, e, t, o) => {
   for (var s = o > 1 ? void 0 : o ? Z1(e, t) : e, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = (o ? i(e, t, s) : i(s)) || s);
   return o && s && P1(e, t, s), s;
 };
 let q1 = 0;
-var W;
-const E = (W = class extends y {
+var K;
+const E = (K = class extends y {
   // allows use of elementInternals' API
   constructor() {
     super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this._tooltip = "", this.inverted = !1, this.form = null, this._slottedDescriptionText = "", this._size = "md", this._internals = this.attachInternals();
@@ -2505,7 +2526,7 @@ const E = (W = class extends y {
     return this._size;
   }
   set size(e) {
-    this._size = W.VALID_SIZES.includes(
+    this._size = K.VALID_SIZES.includes(
       e
     ) ? e : "md";
   }
@@ -2636,47 +2657,47 @@ const E = (W = class extends y {
       </div>
     `;
   }
-}, W.VALID_SIZES = ["sm", "md"], W.styles = a1, W.formAssociated = !0, W);
-A([
+}, K.VALID_SIZES = ["sm", "md"], K.styles = l1, K.formAssociated = !0, K);
+H([
   r({ type: String })
 ], E.prototype, "id", 2);
-A([
+H([
   r({ type: String, reflect: !0 })
 ], E.prototype, "name", 2);
-A([
+H([
   r({ type: Boolean, reflect: !0 })
 ], E.prototype, "required", 2);
-A([
+H([
   r({ type: Boolean, reflect: !0 })
 ], E.prototype, "optional", 2);
-A([
+H([
   r({ type: Boolean, reflect: !0 })
 ], E.prototype, "showError", 2);
-A([
+H([
   r({ type: String })
 ], E.prototype, "errorMessage", 2);
-A([
+H([
   r({ type: String })
 ], E.prototype, "label", 2);
-A([
+H([
   r({ type: String })
 ], E.prototype, "description", 2);
-A([
+H([
   r({ type: Boolean, reflect: !0 })
 ], E.prototype, "tile", 2);
-A([
+H([
   r({ type: String })
 ], E.prototype, "_tooltip", 2);
-A([
+H([
   r({ type: Boolean, reflect: !0 })
 ], E.prototype, "inverted", 2);
-A([
+H([
   r({ type: String, reflect: !0 })
 ], E.prototype, "form", 2);
-A([
+H([
   $()
 ], E.prototype, "_slottedDescriptionText", 2);
-A([
+H([
   r({ reflect: !0 })
 ], E.prototype, "size", 1);
 let O1 = E;
@@ -2847,7 +2868,7 @@ const w = (X = class extends y {
           ></nys-errormessage>` : ""}
     `;
   }
-}, X.VALID_SIZES = ["sm", "md"], X.styles = a1, X.formAssociated = !0, X);
+}, X.VALID_SIZES = ["sm", "md"], X.styles = l1, X.formAssociated = !0, X);
 D([
   r({ type: Boolean, reflect: !0 })
 ], w.prototype, "checked", 2);
@@ -2987,10 +3008,10 @@ const Y1 = u`
       var(--_nys-errormessage-color);
   }
 `;
-var K1 = Object.defineProperty, Te = (a, e, t, o) => {
+var W1 = Object.defineProperty, Te = (a, e, t, o) => {
   for (var s = void 0, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = i(e, t, s) || s);
-  return s && K1(e, t, s), s;
+  return s && W1(e, t, s), s;
 };
 const Ie = class Ie extends y {
   // allows use of elementInternals' API
@@ -3016,7 +3037,7 @@ Te([
   r({ type: Boolean, reflect: !0 })
 ], me.prototype, "showDivider");
 customElements.get("nys-errormessage") || customElements.define("nys-errormessage", me);
-async function W1(a, e) {
+async function K1(a, e) {
   if (!e || e.trim() === "") return !0;
   const t = e.toLowerCase().split(",").map((n) => n.trim()), o = a.name.toLowerCase(), s = o.includes(".") ? o.split(".").pop() : "";
   for (const n of t)
@@ -3308,7 +3329,7 @@ var J1 = Object.defineProperty, qe = (a, e, t, o) => {
     (i = a[n]) && (s = i(e, t, s) || s);
   return s && J1(e, t, s), s;
 };
-const Ke = class Ke extends y {
+const We = class We extends y {
   constructor() {
     super(...arguments), this.filename = "", this.status = "pending", this.progress = 0, this.errorMessage = "";
   }
@@ -3381,8 +3402,8 @@ const Ke = class Ke extends y {
     `;
   }
 };
-Ke.styles = Q1;
-let fe = Ke;
+We.styles = Q1;
+let fe = We;
 qe([
   r({ type: String })
 ], fe.prototype, "filename");
@@ -3516,7 +3537,7 @@ const Pe = class Pe extends y {
   async _processFile(e) {
     e.status = "processing";
     try {
-      if (!await W1(e.file, this.accept)) {
+      if (!await K1(e.file, this.accept)) {
         e.status = "error", e.errorMsg = "File type is invalid.", this.requestUpdate();
         return;
       }
@@ -3641,8 +3662,9 @@ const Pe = class Pe extends y {
             ${this._dragActive ? "drag-active" : ""}
             ${this._isDropDisabled ? "disabled" : ""}
             ${this.showError && !this._isDropDisabled ? "error" : ""}"
-            @click=${this._isDropDisabled ? null : this._openFileDialog}
-            @keydown=${(e) => !this._isDropDisabled && (e.key === "Enter" || e.key === " ") && this._openFileDialog()}
+            @click=${this._isDropDisabled ? null : (e) => {
+      e.target.closest("nys-button") || this._openFileDialog();
+    }}
             @dragover=${this._isDropDisabled ? null : this._onDragOver}
             @dragleave=${this._isDropDisabled ? null : this._onDragLeave}
             @drop=${this._isDropDisabled ? null : this._onDrop}
@@ -3656,10 +3678,9 @@ const Pe = class Pe extends y {
                     ariaLabel=${this._buttonAriaLabel}
                     ariaDescription=${this._buttonAriaDescription}
                     ?disabled=${this._isDropDisabled}
-                    @nys-click=${(e) => {
-      e.stopPropagation(), this._openFileDialog();
-    }}
-                    @click=${(e) => e.stopPropagation()}
+                    @nys-click="${(e) => {
+      e.preventDefault(), e.stopPropagation(), this._openFileDialog();
+    }}"
                   ></nys-button>
                   <p>or drag here</p>`}
           </div>` : l`<nys-button
@@ -4632,7 +4653,7 @@ var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ke = (a, e
     (i = a[n]) && (s = (o ? i(e, t, s) : i(s)) || s);
   return o && s && lt(e, t, s), s;
 };
-const We = class We extends y {
+const Ke = class Ke extends y {
   constructor() {
     super(...arguments), this.for = "", this.label = "", this.description = "", this.flag = "", this.inverted = !1, this._tooltip = "";
   }
@@ -4658,7 +4679,7 @@ const We = class We extends y {
                 ?inverted=${this.inverted}
               >
                 <div class="nys-label__tooltip-icon">
-                  <nys-icon name="info" size="3xl"></nys-icon>
+                  <nys-icon name="info" size="4xl"></nys-icon>
                 </div>
               </nys-tooltip>` : ""}
         </div>
@@ -4669,8 +4690,8 @@ const We = class We extends y {
     `;
   }
 };
-We.styles = at;
-let te = We;
+Ke.styles = at;
+let te = Ke;
 ke([
   r({ type: String })
 ], te.prototype, "for", 2);
@@ -4868,9 +4889,6 @@ const re = (ae = class extends y {
   disconnectedCallback() {
     super.disconnectedCallback(), this._restoreBodyScroll(), window.removeEventListener("keydown", (e) => this._handleKeydown(e));
   }
-  firstUpdated() {
-    this._handleBodySlotChange(), this._handleActionSlotChange();
-  }
   async updated(e) {
     e.has("open") && (this.open ? (this._hideBodyScroll(), this._dispatchOpenEvent(), await this.updateComplete, this._savePrevFocused(), this._focusOnModal(), this._updateDismissAria()) : (this._restorePrevFocused(), this._restoreBodyScroll(), this._dispatchCloseEvent(), this._updateDismissAria()));
   }
@@ -4890,9 +4908,9 @@ const re = (ae = class extends y {
   async _restorePrevFocused() {
     const e = this._prevFocusedElement;
     if (e && e.tagName.toLowerCase() === "nys-button") {
-      const t = await e.getButtonElement();
-      if (t) {
-        t.focus();
+      const o = await e.getButtonElement();
+      if (o) {
+        o.focus();
         return;
       }
     } else
@@ -4980,10 +4998,10 @@ const re = (ae = class extends y {
         let h = document.activeElement, V = s.indexOf(h);
         if (e.shiftKey) {
           e.preventDefault();
-          let F = V - 1;
-          F < 0 && (F = s.length - 1);
-          const j = s[F];
-          s[F].tagName.toLowerCase() === "nys-button" ? (await j.getButtonElement())?.focus() : j.focus();
+          let j = V - 1;
+          j < 0 && (j = s.length - 1);
+          const T = s[j];
+          s[j].tagName.toLowerCase() === "nys-button" ? (await T.getButtonElement())?.focus() : T.focus();
         } else
           h === p && (e.preventDefault(), c.tagName.toLowerCase() === "nys-button" ? (await c.getButtonElement())?.focus() : c.focus());
       }
@@ -5216,8 +5234,13 @@ const Xe = class Xe extends y {
   constructor() {
     super(), this.id = "", this.name = "", this.currentPage = 1, this.totalPages = 1, this._twoBeforeLast = !1;
   }
-  updated(e) {
-    super.updated(e), this.currentPage = this._clampPage(this.currentPage), this._twoBeforeLast = this.currentPage === this.totalPages - 2;
+  willUpdate(e) {
+    if (e.has("currentPage") || e.has("totalPages")) {
+      const t = this._clampPage(this.currentPage);
+      t !== this.currentPage && (this.currentPage = t);
+      const o = this.currentPage === this.totalPages - 2;
+      o !== this._twoBeforeLast && (this._twoBeforeLast = o);
+    }
   }
   // Generate a unique ID if one is not provided
   connectedCallback() {
@@ -5318,7 +5341,7 @@ Me([
   r({ type: Boolean, reflect: !0 })
 ], ce.prototype, "_twoBeforeLast");
 customElements.get("nys-pagination") || customElements.define("nys-pagination", ce);
-const l1 = u`
+const c1 = u`
   :host {
     /* Global Radiobutton Styles */
     --_nys-radiobutton-size: var(--nys-size-400, 32px);
@@ -5685,7 +5708,7 @@ var bt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, M = (a, e,
 };
 let Ct = 0;
 var Q;
-const L = (Q = class extends y {
+const S = (Q = class extends y {
   // allows use of elementInternals' API
   constructor() {
     super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this._tooltip = "", this.inverted = !1, this.form = null, this.selectedValue = null, this._slottedDescriptionText = "", this._size = "md", this._internals = this.attachInternals();
@@ -5706,7 +5729,7 @@ const L = (Q = class extends y {
     super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleRadioButtonChange), this.removeEventListener("invalid", this._handleInvalid);
   }
   async firstUpdated() {
-    this._initializeCheckedRadioValue(), this._setValue(), this._setRadioButtonRequire(), this._updateRadioButtonsSize(), this._updateRadioButtonsTile(), this._updateRadioButtonsShowError(), this._getSlotDescriptionForAria(), await this.updateComplete, this._initializeChildAttributes(), this._updateGroupTabIndex();
+    await this.updateComplete, this._initializeCheckedRadioValue(), this._setValue(), this._setRadioButtonRequire(), this._updateRadioButtonsSize(), this._updateRadioButtonsTile(), this._updateRadioButtonsShowError(), this._getSlotDescriptionForAria(), this._initializeChildAttributes(), this._updateGroupTabIndex();
   }
   updated(e) {
     (e.has("required") || e.has("selectedValue")) && this._manageRequire(), e.has("size") && this._updateRadioButtonsSize(), e.has("tile") && this._updateRadioButtonsTile(), e.has("inverted") && this._updateRadioButtonsInvert(), e.has("showError") && this._updateRadioButtonsShowError(), e.has("form") && this._updateRadioButtonsForm();
@@ -5748,7 +5771,9 @@ const L = (Q = class extends y {
   }
   /********************** Core Keyboard & Click Logic **********************/
   _getAllRadios() {
-    return Array.from(this.querySelectorAll("nys-radiobutton"));
+    return Array.from(
+      this.querySelectorAll("nys-radiobutton")
+    );
   }
   // Arrow / Space / Enter navigation at group level
   async _handleKeyDown(e) {
@@ -5822,7 +5847,9 @@ const L = (Q = class extends y {
   async _handleInvalid(e) {
     if (e.preventDefault(), this._internals.validity.valueMissing) {
       this.showError = !0, this._manageRequire();
-      const t = this.querySelector("nys-radiobutton");
+      const t = this.querySelector(
+        "nys-radiobutton"
+      );
       if (t) {
         const o = this._internals.form;
         o ? Array.from(o.elements).find(
@@ -5858,53 +5885,53 @@ const L = (Q = class extends y {
       ></nys-errormessage>
     </div>`;
   }
-}, Q.VALID_SIZES = ["sm", "md"], Q.styles = l1, Q.formAssociated = !0, Q);
+}, Q.VALID_SIZES = ["sm", "md"], Q.styles = c1, Q.formAssociated = !0, Q);
 M([
   r({ type: String })
-], L.prototype, "id", 2);
+], S.prototype, "id", 2);
 M([
   r({ type: String, reflect: !0 })
-], L.prototype, "name", 2);
+], S.prototype, "name", 2);
 M([
   r({ type: Boolean, reflect: !0 })
-], L.prototype, "required", 2);
+], S.prototype, "required", 2);
 M([
   r({ type: Boolean, reflect: !0 })
-], L.prototype, "optional", 2);
+], S.prototype, "optional", 2);
 M([
   r({ type: Boolean, reflect: !0 })
-], L.prototype, "showError", 2);
+], S.prototype, "showError", 2);
 M([
   r({ type: String })
-], L.prototype, "errorMessage", 2);
+], S.prototype, "errorMessage", 2);
 M([
   r({ type: String })
-], L.prototype, "label", 2);
+], S.prototype, "label", 2);
 M([
   r({ type: String })
-], L.prototype, "description", 2);
+], S.prototype, "description", 2);
 M([
   r({ type: Boolean, reflect: !0 })
-], L.prototype, "tile", 2);
+], S.prototype, "tile", 2);
 M([
   r({ type: String })
-], L.prototype, "_tooltip", 2);
+], S.prototype, "_tooltip", 2);
 M([
   r({ type: Boolean, reflect: !0 })
-], L.prototype, "inverted", 2);
+], S.prototype, "inverted", 2);
 M([
   r({ type: String, reflect: !0 })
-], L.prototype, "form", 2);
+], S.prototype, "form", 2);
 M([
   $()
-], L.prototype, "selectedValue", 2);
+], S.prototype, "selectedValue", 2);
 M([
   $()
-], L.prototype, "_slottedDescriptionText", 2);
+], S.prototype, "_slottedDescriptionText", 2);
 M([
   r({ reflect: !0 })
-], L.prototype, "size", 1);
-let mt = L;
+], S.prototype, "size", 1);
+let mt = S;
 customElements.get("nys-radiogroup") || customElements.define("nys-radiogroup", mt);
 var xt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, O = (a, e, t, o) => {
   for (var s = o > 1 ? void 0 : o ? wt(e, t) : e, n = a.length - 1, i; n >= 0; n--)
@@ -6018,7 +6045,7 @@ const Z = (g = class extends y {
       </label>
     `;
   }
-}, g.VALID_SIZES = ["sm", "md"], g.buttonGroup = {}, g.styles = l1, g);
+}, g.VALID_SIZES = ["sm", "md"], g.buttonGroup = {}, g.styles = c1, g);
 O([
   r({ type: Boolean, reflect: !0 })
 ], Z.prototype, "checked", 2);
@@ -6055,9 +6082,9 @@ O([
 O([
   r({ type: Boolean, reflect: !0 })
 ], Z.prototype, "tile", 2);
-let Lt = Z;
-customElements.get("nys-radiobutton") || customElements.define("nys-radiobutton", Lt);
-const St = u`
+let St = Z;
+customElements.get("nys-radiobutton") || customElements.define("nys-radiobutton", St);
+const Lt = u`
   :host {
     /* Global Select Styles */
     --_nys-select-width: 100%;
@@ -6410,7 +6437,7 @@ const z = (J = class extends y {
             @blur="${this._handleBlur}"
             @change="${this._handleChange}"
           >
-            <option hidden disabled selected value=""></option>
+            <option data-native hidden disabled selected value=""></option>
           </select>
           <slot
             @slotchange="${this._handleSlotChange}"
@@ -6429,7 +6456,7 @@ const z = (J = class extends y {
       </div>
     `;
   }
-}, J.VALID_WIDTHS = ["sm", "md", "lg", "full"], J.styles = St, J.formAssociated = !0, J);
+}, J.VALID_WIDTHS = ["sm", "md", "lg", "full"], J.styles = Lt, J.formAssociated = !0, J);
 B([
   r({ type: String })
 ], z.prototype, "id", 2);
@@ -6544,10 +6571,10 @@ const Vt = u`
     outline: none;
   }
 `;
-var Ht = Object.defineProperty, c1 = (a, e, t, o) => {
+var At = Object.defineProperty, d1 = (a, e, t, o) => {
   for (var s = void 0, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = i(e, t, s) || s);
-  return s && Ht(e, t, s), s;
+  return s && At(e, t, s), s;
 };
 const Qe = class Qe extends y {
   constructor() {
@@ -6588,14 +6615,14 @@ const Qe = class Qe extends y {
 };
 Qe.styles = Vt;
 let Ee = Qe;
-c1([
+d1([
   r({ type: String })
 ], Ee.prototype, "id");
-c1([
+d1([
   r({ type: String })
 ], Ee.prototype, "href");
 customElements.get("nys-skipnav") || customElements.define("nys-skipnav", Ee);
-const d1 = u`
+const h1 = u`
   :host {
     /* Anything that can be overridden should be defined here */
 
@@ -6749,7 +6776,11 @@ const d1 = u`
       rgba(255, 255, 255, 0.9)
     );
     width: var(--nys-size-300, 24px);
+    min-width: var(--nys-size-300, 24px);
+    max-width: var(--nys-size-300, 24px);
     height: var(--nys-size-300, 24px);
+    min-height: var(--nys-size-300, 24px);
+    max-height: var(--nys-size-300, 24px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -6865,7 +6896,11 @@ const d1 = u`
       border: none;
       background-color: var(--nys-color-neutral-200, #bec0c1);
       height: var(--nys-size-100, 8px);
+      min-height: var(--nys-size-100, 8px);
+      max-height: var(--nys-size-100, 8px);
       width: 100%;
+      min-width: 100%;
+      max-width: 100%;
       color: transparent;
     }
 
@@ -6924,7 +6959,11 @@ const d1 = u`
         rgba(255, 255, 255, 0.9)
       );
       width: var(--nys-space-300, 24px);
+      min-width: var(--nys-space-300, 24px);
+      max-width: var(--nys-space-300, 24px);
       height: var(--nys-space-300, 24px);
+      min-height: var(--nys-space-300, 24px);
+      max-height: var(--nys-space-300, 24px);
       color: var(--nys-color-text, #1b1b1b);
     }
 
@@ -6949,10 +6988,10 @@ const d1 = u`
     }
   }
 `;
-var At = Object.defineProperty, be = (a, e, t, o) => {
+var Ht = Object.defineProperty, be = (a, e, t, o) => {
   for (var s = void 0, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = i(e, t, s) || s);
-  return s && At(e, t, s), s;
+  return s && Ht(e, t, s), s;
 };
 const Je = class Je extends y {
   constructor() {
@@ -7002,7 +7041,7 @@ const Je = class Je extends y {
     `;
   }
 };
-Je.styles = d1;
+Je.styles = h1;
 let G = Je;
 be([
   r({ type: Boolean, reflect: !0 })
@@ -7020,7 +7059,7 @@ be([
   r({ type: Boolean })
 ], G.prototype, "isCompactExpanded");
 be([
-  r({ type: Function })
+  r({ attribute: !1 })
 ], G.prototype, "onClick");
 be([
   r({ type: Number })
@@ -7076,24 +7115,26 @@ const e1 = class e1 extends y {
     });
   }
   _updateCounter() {
-    if (this.isCompactExpanded) {
-      this.counterText = "Back to Form", this.style.height = "-webkit-fit-content", this.style.height = "-moz-fit-content", this.style.height = "fit-content";
-      return;
-    } else
+    let e;
+    if (this.isCompactExpanded)
+      e = "Back to Form", this.style.height = "-webkit-fit-content", this.style.height = "-moz-fit-content", this.style.height = "fit-content";
+    else {
       this.style.height = "auto";
-    const e = this.querySelectorAll("nys-step"), t = Array.from(e).findIndex(
-      (s) => s.hasAttribute("selected")
-    ), o = e.length;
-    this.counterText = t >= 0 ? `Step ${t + 1} of ${o}` : `Step 1 of ${o}`;
+      const t = this.querySelectorAll("nys-step"), o = Array.from(t).findIndex(
+        (n) => n.hasAttribute("selected")
+      ), s = t.length;
+      e = o >= 0 ? `Step ${o + 1} of ${s}` : `Step 1 of ${s}`;
+    }
+    e !== this.counterText && (this.counterText = e);
   }
-  updated() {
+  willUpdate() {
     const e = this.querySelectorAll("nys-step");
     this._stepsNumbered || (e.forEach((n, i) => {
       n.stepNumber = i + 1;
     }), this._stepsNumbered = !0);
     let t = !1, o = !1, s = !1;
     e.forEach((n, i) => {
-      n.hasAttribute("current") && (s ? n.removeAttribute("current") : s = !0), i === 0 ? n.setAttribute("first", "") : n.removeAttribute("first"), n.hasAttribute("current") ? (t = !0, n.removeAttribute("previous")) : t ? n.removeAttribute("previous") : n.setAttribute("previous", ""), n.hasAttribute("selected") && (t || o ? n.removeAttribute("selected") : o = !0), this.hasAttribute("isCompactExpanded") ? n.setAttribute("isCompactExpanded", "") : n.removeAttribute("isCompactExpanded");
+      n.hasAttribute("current") && (s ? n.removeAttribute("current") : s = !0), i === 0 ? n.setAttribute("first", "") : n.removeAttribute("first"), n.hasAttribute("current") ? (t = !0, n.removeAttribute("previous")) : t ? n.removeAttribute("previous") : n.setAttribute("previous", ""), n.hasAttribute("selected") && (t || o ? n.removeAttribute("selected") : o = !0), this.isCompactExpanded ? n.setAttribute("isCompactExpanded", "") : n.removeAttribute("isCompactExpanded");
     }), o || (s ? e.forEach((n) => {
       n.hasAttribute("current") && !o && (n.setAttribute("selected", ""), o = !0);
     }) : e.length > 0 && (e[0].setAttribute("current", ""), e[0].setAttribute("selected", ""))), this._updateCounter();
@@ -7129,7 +7170,7 @@ const e1 = class e1 extends y {
     `;
   }
 };
-e1.styles = d1;
+e1.styles = h1;
 let he = e1;
 Ve([
   r({ type: String })
@@ -7293,8 +7334,8 @@ var Pt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, x = (a, e,
   return o && s && Pt(e, t, s), s;
 };
 let qt = 0;
-var T;
-const C = (T = class extends y {
+var R;
+const C = (R = class extends y {
   // allows use of elementInternals' API
   constructor() {
     super(), this.id = "", this.name = "", this.label = "", this.description = "", this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.optional = !1, this._tooltip = "", this.inverted = !1, this.form = null, this.maxlength = null, this.width = "full", this.rows = 4, this._resize = "vertical", this.showError = !1, this.errorMessage = "", this._hasUserInteracted = !1, this._internals = this.attachInternals();
@@ -7303,12 +7344,12 @@ const C = (T = class extends y {
     return this._resize;
   }
   set resize(e) {
-    this._resize = T.VALID_RESIZE.includes(
+    this._resize = R.VALID_RESIZE.includes(
       e
     ) ? e : "vertical";
   }
   async updated(e) {
-    await Promise.resolve(), e.has("width") && (this.width = T.VALID_WIDTHS.includes(this.width) ? this.width : "full"), e.has("rows") && (this.rows = this.rows ?? 4);
+    await Promise.resolve(), e.has("width") && (this.width = R.VALID_WIDTHS.includes(this.width) ? this.width : "full"), e.has("rows") && (this.rows = this.rows ?? 4);
   }
   // Generate a unique ID if one is not provided
   connectedCallback() {
@@ -7421,6 +7462,7 @@ const C = (T = class extends y {
           class="nys-textarea__textarea ${this.resize}"
           name=${this.name}
           id=${this.id}
+          .value=${this.value}
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?readonly=${this.readonly}
@@ -7439,9 +7481,7 @@ const C = (T = class extends y {
           @blur="${this._handleBlur}"
           @select="${this._handleSelect}"
           @selectionchange="${this._handleSelectionChange}"
-        >
-${this.value}</textarea
-        >
+        ></textarea>
         <nys-errormessage
           ?showError=${this.showError}
           errorMessage=${this._internals.validationMessage || this.errorMessage}
@@ -7449,7 +7489,7 @@ ${this.value}</textarea
       </label>
     `;
   }
-}, T.VALID_WIDTHS = ["sm", "md", "lg", "full"], T.VALID_RESIZE = ["vertical", "none"], T.styles = It, T.formAssociated = !0, T);
+}, R.VALID_WIDTHS = ["sm", "md", "lg", "full"], R.VALID_RESIZE = ["vertical", "none"], R.styles = It, R.formAssociated = !0, R);
 x([
   r({ type: String })
 ], C.prototype, "id", 2);
@@ -7754,8 +7794,8 @@ var Tt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, f = (a, e,
   return o && s && Tt(e, t, s), s;
 };
 let Nt = 0;
-var R;
-const v = (R = class extends y {
+var N;
+const v = (N = class extends y {
   // allows use of elementInternals' API
   constructor() {
     super(), this.id = "", this.name = "", this._type = "text", this.label = "", this.description = "", this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.optional = !1, this._tooltip = "", this.form = null, this.pattern = "", this.maxlength = null, this.width = "full", this.step = null, this.min = null, this.max = null, this.inverted = !1, this.showError = !1, this.errorMessage = "", this.showPassword = !1, this._originalErrorMessage = "", this._hasUserInteracted = !1, this._maskPatterns = {
@@ -7766,7 +7806,7 @@ const v = (R = class extends y {
     return this._type;
   }
   set type(e) {
-    this._type = R.VALID_TYPES.includes(
+    this._type = N.VALID_TYPES.includes(
       e
     ) ? e : "text";
   }
@@ -7782,7 +7822,7 @@ const v = (R = class extends y {
   }
   // Ensure the "width" property is valid after updates
   async updated(e) {
-    if (e.has("width") && (await Promise.resolve(), this.width = R.VALID_WIDTHS.includes(this.width) ? this.width : "full"), e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
+    if (e.has("width") && (await Promise.resolve(), this.width = N.VALID_WIDTHS.includes(this.width) ? this.width : "full"), e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
       const t = this._maskPatterns[this.type], o = this.shadowRoot?.querySelector("input");
       if (o)
         if (t)
@@ -7980,7 +8020,7 @@ const v = (R = class extends y {
       </div>
     `;
   }
-}, R.VALID_TYPES = [
+}, N.VALID_TYPES = [
   "email",
   "number",
   "password",
@@ -7988,7 +8028,7 @@ const v = (R = class extends y {
   "tel",
   "text",
   "url"
-], R.VALID_WIDTHS = ["sm", "md", "lg", "full"], R.styles = Ut, R.formAssociated = !0, R);
+], N.VALID_WIDTHS = ["sm", "md", "lg", "full"], N.styles = Ut, N.formAssociated = !0, N);
 f([
   r({ type: String })
 ], v.prototype, "id", 2);
@@ -8331,12 +8371,12 @@ const jt = u`
     }
   }
 `;
-var Gt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, N = (a, e, t, o) => {
+var Gt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, F = (a, e, t, o) => {
   for (var s = o > 1 ? void 0 : o ? Yt(e, t) : e, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = (o ? i(e, t, s) : i(s)) || s);
   return o && s && Gt(e, t, s), s;
 };
-let Kt = 0;
+let Wt = 0;
 var ee;
 const U = (ee = class extends y {
   // allows use of elementInternals' API
@@ -8353,7 +8393,7 @@ const U = (ee = class extends y {
   }
   // Generate a unique ID if one is not provided
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${Kt++}`);
+    super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${Wt++}`);
   }
   /********************** Form Integration **********************/
   // Update the internals whenever `checked` or `value` changes.
@@ -8425,41 +8465,41 @@ const U = (ee = class extends y {
     `;
   }
 }, ee.VALID_SIZES = ["sm", "md"], ee.styles = jt, ee.formAssociated = !0, ee);
-N([
+F([
   r({ type: String })
 ], U.prototype, "id", 2);
-N([
+F([
   r({ type: String, reflect: !0 })
 ], U.prototype, "name", 2);
-N([
+F([
   r({ type: String })
 ], U.prototype, "value", 2);
-N([
+F([
   r({ type: String })
 ], U.prototype, "label", 2);
-N([
+F([
   r({ type: String })
 ], U.prototype, "description", 2);
-N([
+F([
   r({ type: String, reflect: !0 })
 ], U.prototype, "form", 2);
-N([
+F([
   r({ type: Boolean, reflect: !0 })
 ], U.prototype, "checked", 2);
-N([
+F([
   r({ type: Boolean, reflect: !0 })
 ], U.prototype, "disabled", 2);
-N([
+F([
   r({ type: Boolean })
 ], U.prototype, "noIcon", 2);
-N([
+F([
   r({ type: Boolean, reflect: !0 })
 ], U.prototype, "inverted", 2);
-N([
+F([
   r({ reflect: !0 })
 ], U.prototype, "size", 1);
-let Wt = U;
-customElements.get("nys-toggle") || customElements.define("nys-toggle", Wt);
+let Kt = U;
+customElements.get("nys-toggle") || customElements.define("nys-toggle", Kt);
 const Xt = u`
   :host {
     /* Global Tooltip Styles */
@@ -8617,7 +8657,7 @@ const Xt = u`
     }
   }
 `;
-var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, Le = (a, e, t, o) => {
+var Qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, Se = (a, e, t, o) => {
   for (var s = o > 1 ? void 0 : o ? Jt(e, t) : e, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = (o ? i(e, t, s) : i(s)) || s);
   return o && s && Qt(e, t, s), s;
@@ -8814,22 +8854,22 @@ const t1 = class t1 extends y {
 };
 t1.styles = Xt;
 let se = t1;
-Le([
+Se([
   r({ type: String })
 ], se.prototype, "id", 2);
-Le([
+Se([
   r({ type: String })
 ], se.prototype, "text", 2);
-Le([
+Se([
   r({ type: Boolean, reflect: !0 })
 ], se.prototype, "inverted", 2);
-Le([
+Se([
   r({ type: Boolean, reflect: !0 })
 ], se.prototype, "focusable", 2);
-Le([
+Se([
   $()
 ], se.prototype, "_active", 2);
-Le([
+Se([
   r({ type: String, reflect: !0 })
 ], se.prototype, "position", 1);
 customElements.get("nys-tooltip") || customElements.define("nys-tooltip", se);
@@ -9134,7 +9174,7 @@ const ts = u`
       flex-direction: column;
     }
 
-    #nys-unavheader__translate:not([circle]),
+    #nys-unavheader__translate--desktop,
     #nys-unavheader__searchbar {
       display: none;
     }
@@ -9277,16 +9317,14 @@ const s1 = class s1 extends y {
   _getNysLogo() {
     return new DOMParser().parseFromString(ss, "image/svg+xml").documentElement;
   }
-  _toggleTrustbar() {
-    this.trustbarVisible = !this.trustbarVisible, this.trustbarVisible ? (this.languageVisible = !1, this.searchDropdownVisible = !1, this.updateComplete.then(() => {
-      this.shadowRoot?.getElementById(
-        "nys-unavheader__closetrustbar"
-      )?.focus();
-    })) : this.updateComplete.then(() => {
-      this.shadowRoot?.getElementById(
-        "nys-unavheader__know--inline"
-      )?.focus();
-    });
+  _toggleTrustbar(e) {
+    if (this.trustbarVisible = !this.trustbarVisible, this.trustbarVisible && (this.languageVisible = !1, this.searchDropdownVisible = !1), e === "no focus") return;
+    if (e === "nys-unavheader__know--inline" || !e) {
+      const o = this.trustbarVisible ? "nys-unavheader__closetrustbar" : "nys-unavheader__know--inline";
+      this.updateComplete.then(() => {
+        this.shadowRoot?.getElementById(o)?.focus();
+      });
+    }
   }
   _toggleLanguageList() {
     this.languageVisible = !this.languageVisible, this.languageVisible && (this.trustbarVisible = !1, this.searchDropdownVisible = !1);
@@ -9326,7 +9364,9 @@ const s1 = class s1 extends y {
       <header class="nys-unavheader">
         <div
           class="nys-unavheader__trustbar wrapper"
-          @click="${this._toggleTrustbar}"
+          @click="${(e) => {
+      e.target.closest("nys-button") || this._toggleTrustbar("no focus");
+    }}"
         >
           <div class="content">
             <label id="nys-unavheader__official"
@@ -9339,8 +9379,8 @@ const s1 = class s1 extends y {
               variant="ghost"
               size="sm"
               suffixIcon="slotted"
-              @keydown="${(e) => {
-      (e.code === "Enter" || e.code === "Space" || e.key === "Enter" || e.key === " ") && this._toggleTrustbar();
+              @nys-click="${(e) => {
+      e.preventDefault(), e.stopPropagation(), this._toggleTrustbar("nys-unavheader__know");
     }}"
             >
               <nys-icon
@@ -9364,7 +9404,7 @@ const s1 = class s1 extends y {
               icon="close"
               size="sm"
               ariaLabel="Close this notice"
-              @nys-click="${this._toggleTrustbar}"
+              @nys-click="${() => this._toggleTrustbar("nys-unavheader__know--inline")}"
             ></nys-button>
             <div class="nys-unavheader__messagewrapper">
               <div
@@ -9414,7 +9454,7 @@ const s1 = class s1 extends y {
                 variant="ghost"
                 size="sm"
                 suffixIcon="slotted"
-                @nys-click="${this._toggleTrustbar}"
+                @nys-click="${() => this._toggleTrustbar("nys-unavheader__know--inline")}"
               >
                 <nys-icon
                   slot="suffix-icon"
@@ -9706,7 +9746,7 @@ const rs = u`
     font-weight: var(--_nys-globalheader-font-weight);
     line-height: var(--_nys-globalheader-line-height);
     letter-spacing: var(--_nys-globalheader-letter-spacing);
-    text-wrap: wrap;
+    overflow-wrap: break-word; /* note: we use this bc text-wrap: wrap; is not a standard CSS property (yet). */
   }
 
   .nys-globalheader__agencyName {
@@ -9868,7 +9908,7 @@ const rs = u`
     }
   }
 `;
-var ns = Object.defineProperty, He = (a, e, t, o) => {
+var ns = Object.defineProperty, Ae = (a, e, t, o) => {
   for (var s = void 0, n = a.length - 1, i; n >= 0; n--)
     (i = a[n]) && (s = i(e, t, s) || s);
   return s && ns(e, t, s), s;
@@ -9901,18 +9941,18 @@ const o1 = class o1 extends y {
       t.forEach((i) => {
         if (i.nodeType === Node.ELEMENT_NODE) {
           const c = i.cloneNode(!0), p = i.cloneNode(!0);
-          ["script", "iframe", "object", "embed, img"].forEach((F) => {
-            c.querySelectorAll(F).forEach((j) => j.remove());
+          ["script", "iframe", "object", "embed, img"].forEach((j) => {
+            c.querySelectorAll(j).forEach((T) => T.remove());
           });
-          const V = (F) => {
-            const j = Array.from(F.querySelectorAll("a"));
-            let Se = {
+          const V = (j) => {
+            const T = Array.from(j.querySelectorAll("a"));
+            let Le = {
               li: null,
               length: 0
             };
-            j.forEach((Ae) => {
-              const h1 = Ae.getAttribute("href"), $e = this._normalizePath(h1);
-              $e && ($e === "/" && n === "/" ? Se = { li: Ae.closest("li"), length: 1 } : n?.startsWith($e) && $e.length > Se.length && (Se = { li: Ae.closest("li"), length: $e.length }), j.forEach((y1) => y1.closest("li")?.classList.remove("active")), Se.li?.classList.add("active"));
+            T.forEach((He) => {
+              const i1 = He.getAttribute("href"), $e = this._normalizePath(i1);
+              $e && ($e === "/" && n === "/" ? Le = { li: He.closest("li"), length: 1 } : n?.startsWith($e) && $e.length > Le.length && (Le = { li: He.closest("li"), length: $e.length }), T.forEach((y1) => y1.closest("li")?.classList.remove("active")), Le.li?.classList.add("active"));
             });
           };
           V(c), V(p), o.appendChild(c), s.appendChild(p), i.remove();
@@ -10011,19 +10051,19 @@ const o1 = class o1 extends y {
 };
 o1.styles = rs;
 let ye = o1;
-He([
+Ae([
   r({ type: String })
 ], ye.prototype, "appName");
-He([
+Ae([
   r({ type: String })
 ], ye.prototype, "agencyName");
-He([
+Ae([
   r({ type: String })
 ], ye.prototype, "homepageLink");
-He([
+Ae([
   $()
 ], ye.prototype, "slotHasContent");
-He([
+Ae([
   $()
 ], ye.prototype, "isMobileMenuOpen");
 customElements.get("nys-globalheader") || customElements.define("nys-globalheader", ye);
@@ -10515,7 +10555,7 @@ export {
   pt as NysModal,
   de as NysOption,
   ce as NysPagination,
-  Lt as NysRadiobutton,
+  St as NysRadiobutton,
   mt as NysRadiogroup,
   zt as NysSelect,
   Ee as NysSkipnav,
@@ -10523,7 +10563,7 @@ export {
   he as NysStepper,
   Ot as NysTextarea,
   Ft as NysTextinput,
-  Wt as NysToggle,
+  Kt as NysToggle,
   se as NysTooltip,
   Oe as NysUnavFooter,
   Y as NysUnavHeader