@nysds/nys-button 1.19.1 → 1.19.3

package/dist/nys-button.js

@@ -1,27 +1,27 @@
-import { LitElement as f, unsafeCSS as v, html as s } from "lit";
-import { property as n, state as d } from "lit/decorators.js";
+import { LitElement as d, unsafeCSS as v, html as s } from "lit";
+import { property as n, state as u } from "lit/decorators.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
 /*!
    * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Button Component v1.19.1
+   * Button Component v1.19.3
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
 */
 const h = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius: var(--nys-radius-xl, 12px);--_nys-button-padding--y: calc( var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px) );--_nys-button-cursor: pointer;--_nys-button-padding--x: calc( var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px) );--_nys-button-gap: var(--nys-space-100, 8px);--_nys-button-justify-content: center;--_nys-button-border-style: solid;--_nys-button-border-width: var(--nys-border-width-md, 2px);--_nys-button-outline-width: var(--nys-border-width-md, 2px);--_nys-button-outline-offset: var(--nys-space-2px, 2px);--_nys-button-outline-color: var(--nys-color-focus, #004dd1);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_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 ) );--_nys-button-text-decoration: none;display:inline-flex;width:var(--_nys-button-width);vertical-align:middle}:host([size=sm]){--_nys-button-height: var(--nys-size-500, 40px);--_nys-button-padding--y: calc( var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) )}:host([size=lg]){--_nys-button-height: var(--nys-size-700, 56px);--_nys-button-padding--y: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px) )}:host([fullWidth]){width:100%}:host([fullWidth]) .nys-button__linkwrapper{width:100%}:host([fullWidth]) .nys-button{width:100%}:host([variant=filled]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1)}:host([variant=outline]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var(--nys-button-color, var(--nys-color-theme, #154973));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-theme, #154973) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-weaker, #eff6fb) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-theme, #154973) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-theme, #154973) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-weak, #cddde9) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-theme, #154973) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-theme, #154973) );--_nys-button-background-color--disabled: var(--nys-color-surface, #ffffff);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-100, #d0d0ce)}:host([variant=text]){--_nys-button-height: fit-content;--_nys-button-border-radius: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: 0;--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-text-decoration-thickness: var( --nys-font-decoration-thickness-regular, 7% );--_nys-button-text-decoration-thickness--hover: var( --nys-font-decoration-thickness-strong, 14% );--_nys-button-text-decoration-thickness--active: var( --nys-font-decoration-thickness-strong, 14% );--_nys-button-gap: var(--nys-space-50, 4px);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var(--nys-button-color, var(--nys-color-link, #004dd1));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-strong, #003ba1) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-link-strongest, #002971) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost]){--_nys-button-gap: var(--nys-space-50, 4px);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-black-transparent-100, #0000001a) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-black-transparent-200, #00000033) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=filled][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--disabled: var(--nys-color-text, #1b1b1b);--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a)}:host([variant=outline][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-ink-reverse, #ffffff) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse-weak, #d0d0ce) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse-weaker, #bec0c1) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-background-color--disabled: var( --nys-color-surface-reverse, #1b1b1b );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-link-reverse, #a7a9ab) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-reverse-strong, #ededed) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-reverse-strongest, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-white-transparent-200, #ffffff33) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-white-transparent-300, #ffffff4d) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([inverted]){--_nys-button-outline-color: var(--nys-color-focus-reverse, #7aa5e7)}:host([circle]){--_nys-button-width: var(--_nys-button-height);--_nys-button-border-radius: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-radius:var(--_nys-button-border-radius);padding:var(--_nys-button-padding--y) var(--_nys-button-padding--x);display:flex;align-items:center;justify-content:var(--_nys-button-justify-content);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-background-color);color:var(--_nys-button-color);border-color:var(--_nys-button-border-color);border-style:var(--_nys-button-border-style);border-width:var(--_nys-button-border-width);cursor:var(--_nys-button-cursor)}.nys-button:hover{background-color:var(--_nys-button-background-color--hover);color:var(--_nys-button-color--hover);border-color:var(--_nys-button-border-color--hover);text-decoration-thickness:var(--_nys-button-text-decoration-thickness--hover, auto)}.nys-button:active,.nys-button.active{background-color:var(--_nys-button-background-color--active);color:var(--_nys-button-color--active);border-color:var(--_nys-button-border-color--active);text-decoration-thickness:var(--_nys-button-text-decoration-thickness--active, auto)}.nys-button:disabled,a[disabled]{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled);--_nys-button-cursor: not-allowed}a[disabled]{pointer-events:none}.nys-button:focus-visible{outline-offset:var(--_nys-button-outline-offset);outline:solid var(--_nys-button-outline-width) var(--_nys-button-outline-color)}.nys-button__text{display:flex;align-items:center;-webkit-user-select:none;user-select:none}';
-var _ = Object.defineProperty, r = (u, o, e, i) => {
-  for (var c = void 0, b = u.length - 1, y; b >= 0; b--)
-    (y = u[b]) && (c = y(o, e, c) || c);
+var _ = Object.defineProperty, r = (y, o, e, i) => {
+  for (var c = void 0, b = y.length - 1, f; b >= 0; b--)
+    (f = y[b]) && (c = f(o, e, c) || c);
   return c && _(o, e, c), c;
 };
 let p = 0;
-const l = class l extends f {
+const l = class l extends d {
   // 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 = null, this.href = "", this.target = "_self", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1, 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._hasPrefixSlot = !1, this._hasSuffixSlot = !1, this._hasCircleSlot = !1, this._internals = this.attachInternals();
   }
   connectedCallback() {
     super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
@@ -41,6 +41,10 @@ const l = class l extends f {
     const e = o.target;
     this._hasSuffixSlot = e.assignedElements({ flatten: !0 }).length > 0;
   }
+  _onCircleSlotChange(o) {
+    const e = o.target;
+    this._hasCircleSlot = e.assignedElements({ flatten: !0 }).length > 0;
+  }
   _manageFormAction() {
     typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
     const o = this._internals.form;
@@ -95,18 +99,16 @@ const l = class l extends f {
     (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") && this.renderRoot.querySelector(".nys-button")?.classList.remove("active");
   }
   /**
-   * A Solution to the Vanilla JS & Native HTML keydown:
-   *
-   * Handles inline onClick attributes set as strings in vanilla HTML
-   * (e.g. <nys-button onClick="doSomething()">).
+   * Handles inline onclick attributes for keyboard activation.
    *
-   * When onClick is set this way, it is a DOM attribute (not a property)
-   * so this.onClick remains null. Native clicks execute the attribute
-   * automatically, but keydown events do not, so we invoke it manually here.
+   * Native clicks execute inline onclick attributes automatically, but
+   * keyboard activation of the custom element does not trigger that native
+   * behavior. Dispatching a synthetic click lets the browser's own inline
+   * event handler mechanism execute any onclick attribute safely without
+   * eval() or new Function().
    */
   _handleAnyAttributeFunction() {
-    const o = this.getAttribute("onClick");
-    o && new Function("return " + o)();
+    this.click();
   }
   focus(o) {
     const e = this.renderRoot.querySelector(
@@ -147,7 +149,7 @@ const l = class l extends f {
                         name=${this.prefixIcon}
                       ></nys-icon>` : ""}
                 </slot>
-                ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
+                ${this.circle ? "" : this.label ? s`<div class="nys-button__text">${this.label}</div>` : s` <slot class="nys-button__default-slot"></slot> `}
                 <slot
                   name="suffix-icon"
                   @slotchange=${this._onSuffixSlotChange}
@@ -158,12 +160,16 @@ const l = class l extends f {
                         name=${this.suffixIcon}
                       ></nys-icon>` : ""}
                 </slot>
-                ${this.circle && this.icon ? s`<slot name="circle-icon"
-                      ><nys-icon
+                <slot
+                  name="circle-icon"
+                  @slotchange=${this._onCircleSlotChange}
+                  ?hidden=${!this.circle || !this.icon && !this._hasCircleSlot}
+                >
+                  ${this.icon ? s`<nys-icon
                         size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                         name=${this.icon}
-                      ></nys-icon
-                    ></slot>` : ""}
+                      ></nys-icon>` : ""}
+                </slot>
               </a>
             </div>
           ` : s`
@@ -198,7 +204,7 @@ const l = class l extends f {
                       name=${this.prefixIcon}
                     ></nys-icon>` : ""}
               </slot>
-              ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
+              ${this.circle ? "" : this.label ? s`<div class="nys-button__text">${this.label}</div>` : s` <slot class="nys-button__default-slot"></slot> `}
               <slot
                 name="suffix-icon"
                 @slotchange=${this._onSuffixSlotChange}
@@ -209,19 +215,23 @@ const l = class l extends f {
                       name=${this.suffixIcon}
                     ></nys-icon>` : ""}
               </slot>
-              ${this.circle && this.icon ? s`<slot name="circle-icon">
-                    <nys-icon
+              <slot
+                name="circle-icon"
+                @slotchange=${this._onCircleSlotChange}
+                ?hidden=${!this.circle || !this.icon && !this._hasCircleSlot}
+              >
+                ${this.icon ? s`<nys-icon
                       size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                       name=${this.icon}
-                    ></nys-icon>
-                  </slot>` : ""}
+                    ></nys-icon>` : ""}
+              </slot>
             </button>
           `}
     `;
   }
 };
 l.styles = v(h), l.shadowRootOptions = {
-  ...f.shadowRootOptions,
+  ...d.shadowRootOptions,
   delegatesFocus: !0
 }, l.formAssociated = !0;
 let t = l;
@@ -289,11 +299,14 @@ r([
   n({ type: String, reflect: !0 })
 ], t.prototype, "target");
 r([
-  d()
+  u()
 ], t.prototype, "_hasPrefixSlot");
 r([
-  d()
+  u()
 ], t.prototype, "_hasSuffixSlot");
+r([
+  u()
+], t.prototype, "_hasCircleSlot");
 customElements.get("nys-button") || customElements.define("nys-button", t);
 export {
   t as NysButton

package/dist/nys-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-button.js","sources":["../src/nys-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-button.scss?inline\";\n\nlet buttonIdCounter = 0;\n\n/**\n * A button for actions like saving, submitting, or navigating. Form-associated with full keyboard support.\n *\n * Use `filled` for primary actions (one per section), `outline` for secondary, `ghost` for tertiary,\n * `text` for inline. Set `href` to render as a navigation link.\n *\n * @summary Button for actions and CTAs with variants, sizes, and icon support.\n * @element nys-button\n *\n * @slot prefix-icon - Icon before label. Not shown for `text` variant.\n * @slot suffix-icon - Icon after label. Not shown for `text` variant.\n * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.\n *\n * @cssprop [--nys-button-color] - Text color of the button label.\n * @cssprop [--nys-button-color--hover] - Text color when hovered.\n * @cssprop [--nys-button-color--active] - Text color when active/pressed.\n * @cssprop [--nys-button-background-color] - Background color of the button.\n * @cssprop [--nys-button-background-color--hover] - Background color when hovered.\n * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--nys-button-border-color] - Border color of the button.\n * @cssprop [--nys-button-border-color--hover] - Border color when hovered.\n * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.\n *\n * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires nys-focus - Fired when the button receives focus.\n * @fires nys-blur - Fired when the button loses focus.\n *\n * @example Basic filled button\n * ```html\n * <nys-button label=\"Submit\" variant=\"filled\"></nys-button>\n * ```\n *\n * @example Secondary outline button\n * ```html\n * <nys-button label=\"Cancel\" variant=\"outline\"></nys-button>\n * ```\n *\n * @example Button with icons\n * ```html\n * <nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>\n * <nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>\n * ```\n *\n * @example Circle icon button\n * ```html\n * <nys-button circle icon=\"close\" label=\"Close dialog\"></nys-button>\n * ```\n *\n * @example Link-style button for navigation\n * ```html\n * <nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>\n * ```\n *\n * @example Form submit button\n * ```html\n * <nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>\n * ```\n */\n\nexport class NysButton extends LitElement {\n  static styles = unsafeCSS(styles);\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Unique identifier. Auto-generated if not provided.\n   */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /**\n   * Name for form submission.\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /**\n   * Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.\n   * @default \"md\"\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n  /**\n   * Expands button to fill container width. Use for mobile layouts or stacked button groups.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /**\n   * Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.\n   * @default \"filled\"\n   */\n  @property({ type: String, reflect: true }) variant:\n    | \"filled\"\n    | \"outline\"\n    | \"ghost\"\n    | \"text\" = \"filled\";\n\n  /**\n   * Adjusts colors for dark backgrounds.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n\n  /**\n   * Visible button text. Use sentence case, action-oriented text (e.g., \"Save Draft\"). Becomes aria-label in `circle` mode.\n   */\n  @property({ type: String }) label = \"\";\n\n  /**\n   * Screen reader label. Required for icon-only buttons if `label` is not set.\n   */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**\n   * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.\n   */\n  @property({ type: String }) ariaControls = \"\";\n\n  /**\n   * Material Symbol icon before label. Not shown for `circle` mode.\n   */\n  @property({ type: String }) prefixIcon = \"\";\n\n  /**\n   * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.\n   */\n  @property({ type: String }) suffixIcon = \"\";\n\n  /**\n   * Renders circular icon-only button. Requires `icon` prop. `label` becomes aria-label.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) circle = false;\n\n  /**\n   * Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).\n   */\n  @property({ type: String }) icon = \"\";\n\n  /**\n   * Prevents interaction. Avoid disabling without explanation—show validation errors instead.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Form `id` to associate with. Use when button is outside the form element.\n   */\n  @property({ type: String, reflect: true }) form: string | null = null;\n\n  /**\n   * Value submitted with form data. Only used when `type=\"submit\"`.\n   */\n  @property({ type: String }) value = \"\";\n\n  /**\n   * Additional screen reader description. Sets `aria-description`.\n   */\n  @property({ type: String }) ariaDescription = \"\";\n\n  /**\n   * Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.\n   * @default \"button\"\n   */\n  @property({ type: String, reflect: true }) type:\n    | \"submit\"\n    | \"reset\"\n    | \"button\" = \"button\";\n\n  /**\n   * Click handler. Use instead of `@click` to ensure keyboard accessibility.\n   */\n  @property({ attribute: false }) onClick: ((event: Event) => void) | null =\n    null;\n\n  /**\n   * URL to navigate to. Renders as `<a>` tag. Omit for action buttons.\n   */\n  @property({ type: String }) href = \"\";\n\n  /**\n   * Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon=\"open_in_new\"`), `_parent`, `_top`, or frame name.\n   * @default \"_self\"\n   */\n  @property({ type: String, reflect: true }) target:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | \"framename\" = \"_self\";\n\n  private _internals: ElementInternals;\n\n  @state() private _hasPrefixSlot = false;\n  @state() private _hasSuffixSlot = false;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   */\n\n  static formAssociated = true; // allows use of elementInternals' API\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Generate a unique ID if not provided\n    if (!this.id) {\n      this.id = this._generateUniqueId();\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _generateUniqueId() {\n    return `nys-button-${Date.now()}-${buttonIdCounter++}`;\n  }\n\n  private _onPrefixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onSuffixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _manageFormAction() {\n    // If an onClick function is provided, call it\n    if (typeof this.onClick === \"function\" && this.onClick !== null) {\n      this.onClick(new Event(\"click\")); // Call user-provided onClick function with a fake click event\n    }\n\n    // If part of a form, perform the corresponding action based on button's \"type\"\n    const form = this._internals.form;\n\n    if (form) {\n      switch (this.type) {\n        case \"submit\":\n          form.requestSubmit();\n          break;\n        case \"reset\":\n          form.reset();\n          break;\n        case \"button\":\n      }\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private _handleFocus() {\n    this.dispatchEvent(\n      new Event(\"nys-focus\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleBlur() {\n    const button = this.shadowRoot?.querySelector(\".nys-button\");\n    button?.classList.remove(\"active-focus\");\n    this.dispatchEvent(\n      new Event(\"nys-blur\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this._manageFormAction();\n    this.dispatchEvent(\n      new Event(\"nys-click\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      if (this.disabled) return;\n\n      e.preventDefault();\n      const btn = this.renderRoot.querySelector(\".nys-button\");\n      btn?.classList.add(\"active\");\n      setTimeout(() => btn?.classList.remove(\"active\"), 150);\n\n      if (this.href) {\n        // Click the internal <a> so native navigation happens\n        const linkEl = this.renderRoot.querySelector(\n          \"a.nys-button\",\n        ) as HTMLAnchorElement;\n        if (linkEl) {\n          linkEl.click();\n        }\n      } else {\n        this._handleAnyAttributeFunction();\n        this._handleClick(e);\n      }\n    }\n  }\n\n  private _handleKeyup(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      this.renderRoot.querySelector(\".nys-button\")?.classList.remove(\"active\");\n    }\n  }\n\n  /**\n   * A Solution to the Vanilla JS & Native HTML keydown:\n   *\n   * Handles inline onClick attributes set as strings in vanilla HTML\n   * (e.g. <nys-button onClick=\"doSomething()\">).\n   *\n   * When onClick is set this way, it is a DOM attribute (not a property)\n   * so this.onClick remains null. Native clicks execute the attribute\n   * automatically, but keydown events do not, so we invoke it manually here.\n   */\n  private _handleAnyAttributeFunction() {\n    const onClickAttr = this.getAttribute(\"onClick\");\n    if (onClickAttr) {\n      const callFunc = new Function(\"return \" + onClickAttr);\n      callFunc();\n    }\n  }\n\n  public focus(options?: FocusOptions) {\n    const innerEl = this.renderRoot.querySelector(\n      this.href ? \"a.nys-button\" : \"button.nys-button\",\n    ) as HTMLElement | null;\n\n    if (innerEl) {\n      innerEl.focus(options);\n    } else {\n      // fallback: focus host\n      super.focus(options);\n    }\n  }\n\n  render() {\n    return html`\n      ${this.href\n        ? html`\n            <div class=\"nys-button__linkwrapper\">\n              <a\n                class=\"nys-button\"\n                name=${ifDefined(this.name ? this.name : undefined)}\n                ?disabled=${this.disabled}\n                aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n                value=${ifDefined(this.value ? this.value : undefined)}\n                href=${this.href}\n                target=${this.target}\n                @click=${this._handleClick}\n                @focus=\"${this._handleFocus}\"\n                @blur=\"${this._handleBlur}\"\n                @keydown=\"${this._handleKeydown}\"\n                @keyup=\"${this._handleKeyup}\"\n                tabindex=\"${this.disabled ? -1 : 0}\"\n                aria-label=${ifDefined(\n                  this.ariaLabel ||\n                    this.label ||\n                    (this.circle ? this.icon : null) ||\n                    \"button\",\n                )}\n                aria-description=${ifDefined(this.ariaDescription || undefined)}\n              >\n                <slot\n                  name=\"prefix-icon\"\n                  @slotchange=${this._onPrefixSlotChange}\n                  ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n                >\n                  ${this.prefixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.prefixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                ${this.label && !this.circle\n                  ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                  : \"\"}\n                <slot\n                  name=\"suffix-icon\"\n                  @slotchange=${this._onSuffixSlotChange}\n                  ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n                >\n                  ${this.suffixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.suffixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                ${this.circle && this.icon\n                  ? html`<slot name=\"circle-icon\"\n                      ><nys-icon\n                        size=${this.size === \"sm\"\n                          ? \"24\"\n                          : this.size === \"lg\"\n                            ? \"40\"\n                            : \"32\"}\n                        name=${this.icon}\n                      ></nys-icon\n                    ></slot>`\n                  : \"\"}\n              </a>\n            </div>\n          `\n        : html`\n            <button\n              class=\"nys-button\"\n              name=${ifDefined(this.name ? this.name : undefined)}\n              ?disabled=${this.disabled}\n              aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n              form=${ifDefined(this.form || undefined)}\n              value=${ifDefined(this.value ? this.value : undefined)}\n              type=${this.type}\n              aria-controls=${ifDefined(this.ariaControls || undefined)}\n              @click=${this._handleClick}\n              @focus=\"${this._handleFocus}\"\n              @blur=\"${this._handleBlur}\"\n              @keydown=\"${this._handleKeydown}\"\n              @keyup=\"${this._handleKeyup}\"\n              tabindex=\"${this.disabled ? -1 : 0}\"\n              aria-label=${ifDefined(\n                this.ariaLabel ||\n                  this.label ||\n                  (this.circle ? this.icon : null) ||\n                  this.prefixIcon ||\n                  this.suffixIcon ||\n                  \"button\",\n              )}\n              aria-description=${ifDefined(this.ariaDescription || undefined)}\n              role=\"button\"\n            >\n              <slot\n                name=\"prefix-icon\"\n                @slotchange=${this._onPrefixSlotChange}\n                ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n              >\n                ${this.prefixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.prefixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              ${this.label && !this.circle\n                ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                : \"\"}\n              <slot\n                name=\"suffix-icon\"\n                @slotchange=${this._onSuffixSlotChange}\n                ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n              >\n                ${this.suffixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.suffixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              ${this.circle && this.icon\n                ? html`<slot name=\"circle-icon\">\n                    <nys-icon\n                      size=${this.size === \"sm\"\n                        ? \"24\"\n                        : this.size === \"lg\"\n                          ? \"40\"\n                          : \"32\"}\n                      name=${this.icon}\n                    ></nys-icon>\n                  </slot>`\n                : \"\"}\n            </button>\n          `}\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-button\")) {\n  customElements.define(\"nys-button\", NysButton);\n}\n"],"names":["buttonIdCounter","_NysButton","LitElement","e","slot","form","event","btn","linkEl","onClickAttr","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"nys-button.js","sources":["../src/nys-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-button.scss?inline\";\n\nlet buttonIdCounter = 0;\n\n/**\n * A button for actions like saving, submitting, or navigating. Form-associated with full keyboard support.\n *\n * Use `filled` for primary actions (one per section), `outline` for secondary, `ghost` for tertiary,\n * `text` for inline. Set `href` to render as a navigation link.\n *\n * @summary Button for actions and CTAs with variants, sizes, and icon support.\n * @element nys-button\n *\n * @slot - Button label text. Use as fallback when `label` prop is not provided.\n * @slot prefix-icon - Icon before label. Not shown for `text` variant.\n * @slot suffix-icon - Icon after label. Not shown for `text` variant.\n * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.\n *\n * @cssprop [--nys-button-color] - Text color of the button label.\n * @cssprop [--nys-button-color--hover] - Text color when hovered.\n * @cssprop [--nys-button-color--active] - Text color when active/pressed.\n * @cssprop [--nys-button-background-color] - Background color of the button.\n * @cssprop [--nys-button-background-color--hover] - Background color when hovered.\n * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--nys-button-border-color] - Border color of the button.\n * @cssprop [--nys-button-border-color--hover] - Border color when hovered.\n * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.\n *\n * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires nys-focus - Fired when the button receives focus.\n * @fires nys-blur - Fired when the button loses focus.\n *\n * @example Basic\n * ```html\n * <nys-button label=\"Button\" variant=\"filled\"></nys-button>\n * ```\n *\n * @example Variant Outline\n * ```html\n * <nys-button label=\"Button\" variant=\"outline\"></nys-button>\n * ```\n *\n * @example Variant Ghost\n * ```html\n * <nys-button label=\"Button\" variant=\"ghost\"></nys-button>\n * ```\n *\n * @example Variant Text\n * ```html\n * <nys-button label=\"Button\" variant=\"text\"></nys-button>\n * ```\n *\n * @example Prefix Icon\n * ```html\n * <nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>\n * ```\n *\n * @example Suffix Icon\n * ```html\n * <nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>\n * ```\n *\n * @example Slotted Icons\n * ```html\n * <nys-button label=\"Slotted icons\">\n *   <nys-icon color=\"#db117d\" slot=\"prefix-icon\" name=\"chevron_left\"></nys-icon>\n *   <nys-icon color=\"#db117d\" slot=\"suffix-icon\" name=\"chevron_right\"></nys-icon>\n * </nys-button>\n * ```\n *\n * @example Circle icon button\n * ```html\n * <nys-button circle icon=\"close\" label=\"Close dialog\"></nys-button>\n * ```\n *\n * @example Size Small\n * ```html\n * <nys-button label=\"Small\" size=\"sm\"></nys-button>\n * ```\n * @example Size Large\n * ```html\n * <nys-button label=\"Large\" size=\"lg\"></nys-button>\n * ```\n *\n * @example Full width\n * ```html\n * <nys-button label=\"Full width\" fullWidth></nys-button>\n * ```\n *\n * @example Inverted\n * ```html\n * <nys-button label=\"Inverted\" inverted></nys-button>\n * ```\n * @render Inverted\n * ```html\n * <div style=\"background: #1b1b1b; padding: 1rem;\">\n *   <nys-button label=\"Inverted\" inverted></nys-button>\n * </div>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-button label=\"Disabled\" disabled></nys-button>\n * ```\n *\n * @example Href\n * ```html\n * <nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>\n * ```\n *\n * @example Type\n * ```html\n * <nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>\n * ```\n */\n\nexport class NysButton extends LitElement {\n  static styles = unsafeCSS(styles);\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Unique identifier. Auto-generated if not provided.\n   */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /**\n   * Name for form submission.\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /**\n   * Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.\n   * @default \"md\"\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n  /**\n   * Expands button to fill container width. Use for mobile layouts or stacked button groups.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /**\n   * Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.\n   * @default \"filled\"\n   */\n  @property({ type: String, reflect: true }) variant:\n    | \"filled\"\n    | \"outline\"\n    | \"ghost\"\n    | \"text\" = \"filled\";\n\n  /**\n   * Adjusts colors for dark backgrounds.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n\n  /**\n   * Visible button text. Use sentence case, action-oriented text (e.g., \"Save Draft\"). Becomes aria-label in `circle` mode.\n   */\n  @property({ type: String }) label = \"\";\n\n  /**\n   * Screen reader label. Required for icon-only buttons if `label` is not set.\n   */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**\n   * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.\n   */\n  @property({ type: String }) ariaControls = \"\";\n\n  /**\n   * Material Symbol icon before label. Not shown for `circle` mode.\n   */\n  @property({ type: String }) prefixIcon = \"\";\n\n  /**\n   * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.\n   */\n  @property({ type: String }) suffixIcon = \"\";\n\n  /**\n   * Renders circular icon-only button. Requires `icon` prop. `label` becomes aria-label.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) circle = false;\n\n  /**\n   * Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).\n   */\n  @property({ type: String }) icon = \"\";\n\n  /**\n   * Prevents interaction. Avoid disabling without explanation—show validation errors instead.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Form `id` to associate with. Use when button is outside the form element.\n   */\n  @property({ type: String, reflect: true }) form: string | null = null;\n\n  /**\n   * Value submitted with form data. Only used when `type=\"submit\"`.\n   */\n  @property({ type: String }) value = \"\";\n\n  /**\n   * Additional screen reader description. Sets `aria-description`.\n   */\n  @property({ type: String }) ariaDescription = \"\";\n\n  /**\n   * Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.\n   * @default \"button\"\n   */\n  @property({ type: String, reflect: true }) type:\n    | \"submit\"\n    | \"reset\"\n    | \"button\" = \"button\";\n\n  /**\n   * Click handler. Use instead of `@click` to ensure keyboard accessibility.\n   */\n  @property({ attribute: false }) onClick: ((event: Event) => void) | null =\n    null;\n\n  /**\n   * URL to navigate to. Renders as `<a>` tag. Omit for action buttons.\n   */\n  @property({ type: String }) href = \"\";\n\n  /**\n   * Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon=\"open_in_new\"`), `_parent`, `_top`, or frame name.\n   * @default \"_self\"\n   */\n  @property({ type: String, reflect: true }) target:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | \"framename\" = \"_self\";\n\n  private _internals: ElementInternals;\n\n  @state() private _hasPrefixSlot = false;\n  @state() private _hasSuffixSlot = false;\n  @state() private _hasCircleSlot = false;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   */\n\n  static formAssociated = true; // allows use of elementInternals' API\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Generate a unique ID if not provided\n    if (!this.id) {\n      this.id = this._generateUniqueId();\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _generateUniqueId() {\n    return `nys-button-${Date.now()}-${buttonIdCounter++}`;\n  }\n\n  private _onPrefixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onSuffixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onCircleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasCircleSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _manageFormAction() {\n    // If an onClick function is provided, call it\n    if (typeof this.onClick === \"function\" && this.onClick !== null) {\n      this.onClick(new Event(\"click\")); // Call user-provided onClick function with a fake click event\n    }\n\n    // If part of a form, perform the corresponding action based on button's \"type\"\n    const form = this._internals.form;\n\n    if (form) {\n      switch (this.type) {\n        case \"submit\":\n          form.requestSubmit();\n          break;\n        case \"reset\":\n          form.reset();\n          break;\n        case \"button\":\n      }\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private _handleFocus() {\n    this.dispatchEvent(\n      new Event(\"nys-focus\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleBlur() {\n    const button = this.shadowRoot?.querySelector(\".nys-button\");\n    button?.classList.remove(\"active-focus\");\n    this.dispatchEvent(\n      new Event(\"nys-blur\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this._manageFormAction();\n    this.dispatchEvent(\n      new Event(\"nys-click\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      if (this.disabled) return;\n\n      e.preventDefault();\n      const btn = this.renderRoot.querySelector(\".nys-button\");\n      btn?.classList.add(\"active\");\n      setTimeout(() => btn?.classList.remove(\"active\"), 150);\n\n      if (this.href) {\n        // Click the internal <a> so native navigation happens\n        const linkEl = this.renderRoot.querySelector(\n          \"a.nys-button\",\n        ) as HTMLAnchorElement;\n        if (linkEl) {\n          linkEl.click();\n        }\n      } else {\n        this._handleAnyAttributeFunction();\n        this._handleClick(e);\n      }\n    }\n  }\n\n  private _handleKeyup(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      this.renderRoot.querySelector(\".nys-button\")?.classList.remove(\"active\");\n    }\n  }\n\n  /**\n   * Handles inline onclick attributes for keyboard activation.\n   *\n   * Native clicks execute inline onclick attributes automatically, but\n   * keyboard activation of the custom element does not trigger that native\n   * behavior. Dispatching a synthetic click lets the browser's own inline\n   * event handler mechanism execute any onclick attribute safely without\n   * eval() or new Function().\n   */\n  private _handleAnyAttributeFunction() {\n    this.click();\n  }\n\n  public focus(options?: FocusOptions) {\n    const innerEl = this.renderRoot.querySelector(\n      this.href ? \"a.nys-button\" : \"button.nys-button\",\n    ) as HTMLElement | null;\n\n    if (innerEl) {\n      innerEl.focus(options);\n    } else {\n      // fallback: focus host\n      super.focus(options);\n    }\n  }\n\n  render() {\n    return html`\n      ${this.href\n        ? html`\n            <div class=\"nys-button__linkwrapper\">\n              <a\n                class=\"nys-button\"\n                name=${ifDefined(this.name ? this.name : undefined)}\n                ?disabled=${this.disabled}\n                aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n                value=${ifDefined(this.value ? this.value : undefined)}\n                href=${this.href}\n                target=${this.target}\n                @click=${this._handleClick}\n                @focus=\"${this._handleFocus}\"\n                @blur=\"${this._handleBlur}\"\n                @keydown=\"${this._handleKeydown}\"\n                @keyup=\"${this._handleKeyup}\"\n                tabindex=\"${this.disabled ? -1 : 0}\"\n                aria-label=${ifDefined(\n                  this.ariaLabel ||\n                    this.label ||\n                    (this.circle ? this.icon : null) ||\n                    \"button\",\n                )}\n                aria-description=${ifDefined(this.ariaDescription || undefined)}\n              >\n                <slot\n                  name=\"prefix-icon\"\n                  @slotchange=${this._onPrefixSlotChange}\n                  ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n                >\n                  ${this.prefixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.prefixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                ${!this.circle\n                  ? this.label\n                    ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                    : html` <slot class=\"nys-button__default-slot\"></slot> `\n                  : \"\"}\n                <slot\n                  name=\"suffix-icon\"\n                  @slotchange=${this._onSuffixSlotChange}\n                  ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n                >\n                  ${this.suffixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.suffixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                <slot\n                  name=\"circle-icon\"\n                  @slotchange=${this._onCircleSlotChange}\n                  ?hidden=${!this.circle ||\n                  (!this.icon && !this._hasCircleSlot)}\n                >\n                  ${this.icon\n                    ? html`<nys-icon\n                        size=${this.size === \"sm\"\n                          ? \"24\"\n                          : this.size === \"lg\"\n                            ? \"40\"\n                            : \"32\"}\n                        name=${this.icon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n              </a>\n            </div>\n          `\n        : html`\n            <button\n              class=\"nys-button\"\n              name=${ifDefined(this.name ? this.name : undefined)}\n              ?disabled=${this.disabled}\n              aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n              form=${ifDefined(this.form || undefined)}\n              value=${ifDefined(this.value ? this.value : undefined)}\n              type=${this.type}\n              aria-controls=${ifDefined(this.ariaControls || undefined)}\n              @click=${this._handleClick}\n              @focus=\"${this._handleFocus}\"\n              @blur=\"${this._handleBlur}\"\n              @keydown=\"${this._handleKeydown}\"\n              @keyup=\"${this._handleKeyup}\"\n              tabindex=\"${this.disabled ? -1 : 0}\"\n              aria-label=${ifDefined(\n                this.ariaLabel ||\n                  this.label ||\n                  (this.circle ? this.icon : null) ||\n                  this.prefixIcon ||\n                  this.suffixIcon ||\n                  \"button\",\n              )}\n              aria-description=${ifDefined(this.ariaDescription || undefined)}\n              role=\"button\"\n            >\n              <slot\n                name=\"prefix-icon\"\n                @slotchange=${this._onPrefixSlotChange}\n                ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n              >\n                ${this.prefixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.prefixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              ${!this.circle\n                ? this.label\n                  ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                  : html` <slot class=\"nys-button__default-slot\"></slot> `\n                : \"\"}\n              <slot\n                name=\"suffix-icon\"\n                @slotchange=${this._onSuffixSlotChange}\n                ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n              >\n                ${this.suffixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.suffixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              <slot\n                name=\"circle-icon\"\n                @slotchange=${this._onCircleSlotChange}\n                ?hidden=${!this.circle || (!this.icon && !this._hasCircleSlot)}\n              >\n                ${this.icon\n                  ? html`<nys-icon\n                      size=${this.size === \"sm\"\n                        ? \"24\"\n                        : this.size === \"lg\"\n                          ? \"40\"\n                          : \"32\"}\n                      name=${this.icon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n            </button>\n          `}\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-button\")) {\n  customElements.define(\"nys-button\", NysButton);\n}\n"],"names":["buttonIdCounter","_NysButton","LitElement","e","slot","form","event","btn","linkEl","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property","state"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-button",
-  "version": "1.19.1",
+  "version": "1.19.3",
   "description": "The Button component from the NYS Design System.",
   "module": "dist/nys-button.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.19.1"
+    "@nysds/nys-icon": "^1.19.3"
   },
   "devDependencies": {
     "lit": "^3.3.1",
@@ -40,5 +40,9 @@
     "forms"
   ],
   "author": "New York State Design System Team",
-  "license": "MIT"
+  "license": "MIT",
+  "sideEffects": true,
+  "peerDependencies": {
+    "lit": "^3.3.1"
+  }
 }