npm - @nysds/nys-button - Versions diffs - 1.18.0 → 1.18.3 - Mend

@nysds/nys-button 1.18.0 → 1.18.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 (3) hide show

package/dist/nys-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { LitElement as y, unsafeCSS as d, html as e } from "lit";
+import { LitElement as d, unsafeCSS as v, html as e } from "lit";
 import { property as r } from "lit/decorators.js";
 import { ifDefined as s } from "lit/directives/if-defined.js";
 /*!
@@ -6,19 +6,19 @@ import { ifDefined as s } from "lit/directives/if-defined.js";
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Button Component v1.18.0
+   * Button Component v1.18.3
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
 */
-const f = ':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-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-theme, #154973));--_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-theme-strong, #0e324f));--_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-theme-stronger, #081b2b));--_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-neutral-10, #f6f6f6);--_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:fit-content;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=md]){--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-padding--y: calc(var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px));--_nys-button-padding--x: calc(var(--nys-space-250, 20px) - 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{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: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_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-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-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: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_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, pointer)}.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)}.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)}.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);cursor:not-allowed}.nys-button__linkwrapper:has([disabled]){cursor:not-allowed;width:fit-content}a[disabled]{pointer-events:none}a[disabled]:hover{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:var(--_nys-button-cursor, pointer)}.nys-button:disabled *{cursor:not-allowed}.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 v = Object.defineProperty, n = (i, t, a, p) => {
-  for (var c = void 0, b = i.length - 1, u; b >= 0; b--)
-    (u = i[b]) && (c = u(t, a, c) || c);
-  return c && v(t, a, c), c;
+const f = ':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-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-theme, #154973));--_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-theme-strong, #0e324f));--_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-theme-stronger, #081b2b));--_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-neutral-10, #f6f6f6);--_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:fit-content;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=md]){--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-padding--y: calc(var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px));--_nys-button-padding--x: calc(var(--nys-space-250, 20px) - 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{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: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_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-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: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_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, pointer)}.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)}.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)}.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);cursor:not-allowed}.nys-button__linkwrapper:has([disabled]){cursor:not-allowed;width:fit-content}a[disabled]{pointer-events:none}a[disabled]:hover{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:var(--_nys-button-cursor, pointer)}.nys-button:disabled *{cursor:not-allowed}.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 h = Object.defineProperty, n = (y, o, a, i) => {
+  for (var c = void 0, b = y.length - 1, u; b >= 0; b--)
+    (u = y[b]) && (c = u(o, a, c) || c);
+  return c && h(o, a, c), c;
 };
-let h = 0;
-const l = class l extends y {
+let p = 0;
+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._internals = this.attachInternals();
@@ -31,18 +31,18 @@ const l = class l extends y {
    * --------------------------------------------------------------------------
    */
   _generateUniqueId() {
-    return `nys-button-${Date.now()}-${h++}`;
+    return `nys-button-${Date.now()}-${p++}`;
   }
   _manageFormAction() {
     typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
-    const t = this._internals.form;
-    if (t)
+    const o = this._internals.form;
+    if (o)
       switch (this.type) {
         case "submit":
-          t.requestSubmit();
+          o.requestSubmit();
           break;
         case "reset":
-          t.reset();
+          o.reset();
           break;
       }
   }
@@ -60,27 +60,32 @@ const l = class l extends y {
       new Event("nys-blur", { bubbles: !0, composed: !0 })
     );
   }
-  _handleClick(t) {
+  _handleClick(o) {
     if (this.disabled) {
-      t.preventDefault();
+      o.preventDefault();
       return;
     }
     this._manageFormAction(), this.dispatchEvent(
       new Event("nys-click", { bubbles: !0, composed: !0 })
     );
   }
-  _handleKeydown(t) {
-    if (t.code === "Space" || t.code === "Enter" || t.key === " " || t.key === "Enter") {
+  _handleKeydown(o) {
+    if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
       if (this.disabled) return;
-      if (t.preventDefault(), this.href) {
-        const a = this.renderRoot.querySelector(
+      o.preventDefault();
+      const a = this.renderRoot.querySelector(".nys-button");
+      if (a?.classList.add("active"), setTimeout(() => a?.classList.remove("active"), 150), this.href) {
+        const i = this.renderRoot.querySelector(
           "a.nys-button"
         );
-        a && a.click();
+        i && i.click();
       } else
-        this._handleAnyAttributeFunction(), this._handleClick(t);
+        this._handleAnyAttributeFunction(), this._handleClick(o);
     }
   }
+  _handleKeyup(o) {
+    (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:
    *
@@ -92,14 +97,14 @@ const l = class l extends y {
    * automatically, but keydown events do not, so we invoke it manually here.
    */
   _handleAnyAttributeFunction() {
-    const t = this.getAttribute("onClick");
-    t && new Function("return " + t)();
+    const o = this.getAttribute("onClick");
+    o && new Function("return " + o)();
   }
-  focus(t) {
+  focus(o) {
     const a = this.renderRoot.querySelector(
       this.href ? "a.nys-button" : "button.nys-button"
     );
-    a ? a.focus(t) : super.focus(t);
+    a ? a.focus(o) : super.focus(o);
   }
   render() {
     return e`
@@ -117,6 +122,7 @@ const l = class l extends y {
                 @focus="${this._handleFocus}"
                 @blur="${this._handleBlur}"
                 @keydown="${this._handleKeydown}"
+                @keyup="${this._handleKeyup}"
                 tabindex="${this.disabled ? -1 : 0}"
                 aria-label=${s(
       this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
@@ -152,6 +158,7 @@ const l = class l extends y {
               @focus="${this._handleFocus}"
               @blur="${this._handleBlur}"
               @keydown="${this._handleKeydown}"
+              @keyup="${this._handleKeyup}"
               tabindex="${this.disabled ? -1 : 0}"
               aria-label=${s(
       this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
@@ -177,76 +184,76 @@ const l = class l extends y {
     `;
   }
 };
-l.styles = d(f), l.shadowRootOptions = {
-  ...y.shadowRootOptions,
+l.styles = v(f), l.shadowRootOptions = {
+  ...d.shadowRootOptions,
   delegatesFocus: !0
 }, l.formAssociated = !0;
-let o = l;
+let t = l;
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "id");
+], t.prototype, "id");
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "name");
+], t.prototype, "name");
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "size");
+], t.prototype, "size");
 n([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "fullWidth");
+], t.prototype, "fullWidth");
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "variant");
+], t.prototype, "variant");
 n([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "inverted");
+], t.prototype, "inverted");
 n([
   r({ type: String })
-], o.prototype, "label");
+], t.prototype, "label");
 n([
   r({ type: String })
-], o.prototype, "ariaLabel");
+], t.prototype, "ariaLabel");
 n([
   r({ type: String })
-], o.prototype, "ariaControls");
+], t.prototype, "ariaControls");
 n([
   r({ type: String })
-], o.prototype, "prefixIcon");
+], t.prototype, "prefixIcon");
 n([
   r({ type: String })
-], o.prototype, "suffixIcon");
+], t.prototype, "suffixIcon");
 n([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "circle");
+], t.prototype, "circle");
 n([
   r({ type: String })
-], o.prototype, "icon");
+], t.prototype, "icon");
 n([
   r({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled");
+], t.prototype, "disabled");
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "form");
+], t.prototype, "form");
 n([
   r({ type: String })
-], o.prototype, "value");
+], t.prototype, "value");
 n([
   r({ type: String })
-], o.prototype, "ariaDescription");
+], t.prototype, "ariaDescription");
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "type");
+], t.prototype, "type");
 n([
   r({ attribute: !1 })
-], o.prototype, "onClick");
+], t.prototype, "onClick");
 n([
   r({ type: String })
-], o.prototype, "href");
+], t.prototype, "href");
 n([
   r({ type: String, reflect: !0 })
-], o.prototype, "target");
-customElements.get("nys-button") || customElements.define("nys-button", o);
+], t.prototype, "target");
+customElements.get("nys-button") || customElements.define("nys-button", t);
 export {
-  o as NysButton
+  t as NysButton
 };
 //# sourceMappingURL=nys-button.js.map

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 } 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 /\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 _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\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 /\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 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 ${this.prefixIcon\n ? html`<slot name=\"prefix-icon\">\n <nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>\n </slot>`\n : \"\"}\n ${this.label && !this.circle\n ? html`<div class=\"nys-button__text\">${this.label}</div>`\n : \"\"}\n ${this.suffixIcon\n ? html`<slot name=\"suffix-icon\">\n <nys-icon size=\"16\" name=${this.suffixIcon}></nys-icon>\n </slot>`\n : \"\"}\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 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 ${this.prefixIcon\n ? html`<slot name=\"prefix-icon\">\n <nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>\n </slot>`\n : \"\"}\n ${this.label && !this.circle\n ? html`<div class=\"nys-button__text\">${this.label}</div>`\n : \"\"}\n ${this.suffixIcon\n ? html`<slot name=\"suffix-icon\">\n <nys-icon size=\"16\" name=${this.suffixIcon}></nys-icon>\n </slot>`\n : \"\"}\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","form","event","e","linkEl","onClickAttr","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property"],"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 } 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 /\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 _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 ${this.prefixIcon\n ? html`<slot name=\"prefix-icon\">\n <nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>\n </slot>`\n : \"\"}\n ${this.label && !this.circle\n ? html`<div class=\"nys-button__text\">${this.label}</div>`\n : \"\"}\n ${this.suffixIcon\n ? html`<slot name=\"suffix-icon\">\n <nys-icon size=\"16\" name=${this.suffixIcon}></nys-icon>\n </slot>`\n : \"\"}\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 ${this.prefixIcon\n ? html`<slot name=\"prefix-icon\">\n <nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>\n </slot>`\n : \"\"}\n ${this.label && !this.circle\n ? html`<div class=\"nys-button__text\">${this.label}</div>`\n : \"\"}\n ${this.suffixIcon\n ? html`<slot name=\"suffix-icon\">\n <nys-icon size=\"16\" name=${this.suffixIcon}></nys-icon>\n </slot>`\n : \"\"}\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","form","event","e","btn","linkEl","onClickAttr","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-button",
-  "version": "1.18.0",
+  "version": "1.18.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.18.0"
+    "@nysds/nys-icon": "^1.18.3"
   },
   "devDependencies": {
     "lit": "^3.3.1",