npm - @nysds/nys-button - Versions diffs - 1.19.2 → 1.19.3 - Mend

@nysds/nys-button 1.19.2 → 1.19.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/nys-button.js CHANGED Viewed

@@ -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.2
+   * 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;
@@ -145,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}
@@ -156,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`
@@ -196,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}
@@ -207,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;
@@ -287,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 CHANGED Viewed

	@@ -1 +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 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.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","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property","state"],"mappings":"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"}
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 - 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-button",
-  "version": "1.19.2",
+  "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.2"
+    "@nysds/nys-icon": "^1.19.3"
   },
   "devDependencies": {
     "lit": "^3.3.1",
@@ -41,5 +41,8 @@
   ],
   "author": "New York State Design System Team",
   "license": "MIT",
-  "sideEffects": true
+  "sideEffects": true,
+  "peerDependencies": {
+    "lit": "^3.3.1"
+  }
 }

package/dist/nys-button.d.ts DELETED Viewed

@@ -1,201 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A button for actions like saving, submitting, or navigating. Form-associated with full keyboard support.
- *
- * Use `filled` for primary actions (one per section), `outline` for secondary, `ghost` for tertiary,
- * `text` for inline. Set `href` to render as a navigation link.
- *
- * @summary Button for actions and CTAs with variants, sizes, and icon support.
- * @element nys-button
- *
- * @slot prefix-icon - Icon before label. Not shown for `text` variant.
- * @slot suffix-icon - Icon after label. Not shown for `text` variant.
- * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.
- *
- * @cssprop [--nys-button-color] - Text color of the button label.
- * @cssprop [--nys-button-color--hover] - Text color when hovered.
- * @cssprop [--nys-button-color--active] - Text color when active/pressed.
- * @cssprop [--nys-button-background-color] - Background color of the button.
- * @cssprop [--nys-button-background-color--hover] - Background color when hovered.
- * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.
- * @cssprop [--nys-button-border-color] - Border color of the button.
- * @cssprop [--nys-button-border-color--hover] - Border color when hovered.
- * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.
- *
- * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.
- * @fires nys-focus - Fired when the button receives focus.
- * @fires nys-blur - Fired when the button loses focus.
- *
- * @example Basic filled button
- * ```html
- * <nys-button label="Submit" variant="filled"></nys-button>
- * ```
- *
- * @example Secondary outline button
- * ```html
- * <nys-button label="Cancel" variant="outline"></nys-button>
- * ```
- *
- * @example Button with icons
- * ```html
- * <nys-button label="Previous" prefixIcon="chevron_left"></nys-button>
- * <nys-button label="Next" suffixIcon="chevron_right"></nys-button>
- * ```
- *
- * @example Circle icon button
- * ```html
- * <nys-button circle icon="close" label="Close dialog"></nys-button>
- * ```
- *
- * @example Link-style button for navigation
- * ```html
- * <nys-button label="Visit NY.gov" href="https://www.ny.gov/" target="_blank" suffixIcon="open_in_new"></nys-button>
- * ```
- *
- * @example Form submit button
- * ```html
- * <nys-button type="submit" label="Save Changes" variant="filled"></nys-button>
- * ```
- */
-export declare class NysButton extends LitElement {
-    static styles: import("lit").CSSResult;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    /**
-     * Unique identifier. Auto-generated if not provided.
-     */
-    id: string;
-    /**
-     * Name for form submission.
-     */
-    name: string;
-    /**
-     * Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.
-     * @default "md"
-     */
-    size: "sm" | "md" | "lg";
-    /**
-     * Expands button to fill container width. Use for mobile layouts or stacked button groups.
-     * @default false
-     */
-    fullWidth: boolean;
-    /**
-     * Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.
-     * @default "filled"
-     */
-    variant: "filled" | "outline" | "ghost" | "text";
-    /**
-     * Adjusts colors for dark backgrounds.
-     * @default false
-     */
-    inverted: boolean;
-    /**
-     * Visible button text. Use sentence case, action-oriented text (e.g., "Save Draft"). Becomes aria-label in `circle` mode.
-     */
-    label: string;
-    /**
-     * Screen reader label. Required for icon-only buttons if `label` is not set.
-     */
-    ariaLabel: string;
-    /**
-     * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.
-     */
-    ariaControls: string;
-    /**
-     * Material Symbol icon before label. Not shown for `circle` mode.
-     */
-    prefixIcon: string;
-    /**
-     * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.
-     */
-    suffixIcon: string;
-    /**
-     * Renders circular icon-only button. Requires `icon` prop. `label` becomes aria-label.
-     * @default false
-     */
-    circle: boolean;
-    /**
-     * Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).
-     */
-    icon: string;
-    /**
-     * Prevents interaction. Avoid disabling without explanation—show validation errors instead.
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Form `id` to associate with. Use when button is outside the form element.
-     */
-    form: string | null;
-    /**
-     * Value submitted with form data. Only used when `type="submit"`.
-     */
-    value: string;
-    /**
-     * Additional screen reader description. Sets `aria-description`.
-     */
-    ariaDescription: string;
-    /**
-     * Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.
-     * @default "button"
-     */
-    type: "submit" | "reset" | "button";
-    /**
-     * Click handler. Use instead of `@click` to ensure keyboard accessibility.
-     */
-    onClick: ((event: Event) => void) | null;
-    /**
-     * URL to navigate to. Renders as `<a>` tag. Omit for action buttons.
-     */
-    href: string;
-    /**
-     * Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon="open_in_new"`), `_parent`, `_top`, or frame name.
-     * @default "_self"
-     */
-    target: "_self" | "_blank" | "_parent" | "_top" | "framename";
-    private _internals;
-    private _hasPrefixSlot;
-    private _hasSuffixSlot;
-    /**
-     * Lifecycle methods
-     * --------------------------------------------------------------------------
-     */
-    static formAssociated: boolean;
-    constructor();
-    connectedCallback(): void;
-    /**
-     * Functions
-     * --------------------------------------------------------------------------
-     */
-    private _generateUniqueId;
-    private _onPrefixSlotChange;
-    private _onSuffixSlotChange;
-    private _manageFormAction;
-    /**
-     * Event Handlers
-     * --------------------------------------------------------------------------
-     */
-    private _handleFocus;
-    private _handleBlur;
-    private _handleClick;
-    private _handleKeydown;
-    private _handleKeyup;
-    /**
-     * Handles inline onclick attributes for keyboard activation.
-     *
-     * 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().
-     */
-    private _handleAnyAttributeFunction;
-    focus(options?: FocusOptions): void;
-    render(): import("lit-html").TemplateResult<1>;
-}