@nysds/nys-button 1.18.3 → 1.19.0

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
  1. package/dist/nys-button.js +136 -94
  2. package/dist/nys-button.js.map +1 -1
  3. package/package.json +2 -2
package/dist/nys-button.js CHANGED
@@ -1,27 +1,27 @@
1
- import { LitElement as d, unsafeCSS as v, html as e } from "lit";
2
- import { property as r } from "lit/decorators.js";
3
- import { ifDefined as s } from "lit/directives/if-defined.js";
1
+ import { LitElement as f, unsafeCSS as v, html as s } from "lit";
2
+ import { property as n, state as d } from "lit/decorators.js";
3
+ import { ifDefined as a } from "lit/directives/if-defined.js";
4
4
  /*!
5
5
  * █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
6
6
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
7
7
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
8
8
  *
9
- * Button Component v1.18.3
9
+ * Button Component v1.19.0
10
10
  * Part of the New York State Design System
11
11
  * Repository: https://github.com/its-hcd/nysds
12
12
  * License: MIT
13
13
  */
14
- 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}';
15
- var h = Object.defineProperty, n = (y, o, a, i) => {
16
- for (var c = void 0, b = y.length - 1, u; b >= 0; b--)
17
- (u = y[b]) && (c = u(o, a, c) || c);
18
- return c && h(o, a, c), c;
14
+ 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=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-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)}.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);--_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}';
15
+ var p = Object.defineProperty, r = (u, o, e, l) => {
16
+ for (var c = void 0, b = u.length - 1, y; b >= 0; b--)
17
+ (y = u[b]) && (c = y(o, e, c) || c);
18
+ return c && p(o, e, c), c;
19
19
  };
20
- let p = 0;
21
- const l = class l extends d {
20
+ let _ = 0;
21
+ const i = class i extends f {
22
22
  // allows use of elementInternals' API
23
23
  constructor() {
24
- 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();
24
+ 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();
25
25
  }
26
26
  connectedCallback() {
27
27
  super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
@@ -31,7 +31,15 @@ const l = class l extends d {
31
31
  * --------------------------------------------------------------------------
32
32
  */
33
33
  _generateUniqueId() {
34
- return `nys-button-${Date.now()}-${p++}`;
34
+ return `nys-button-${Date.now()}-${_++}`;
35
+ }
36
+ _onPrefixSlotChange(o) {
37
+ const e = o.target;
38
+ this._hasPrefixSlot = e.assignedElements({ flatten: !0 }).length > 0;
39
+ }
40
+ _onSuffixSlotChange(o) {
41
+ const e = o.target;
42
+ this._hasSuffixSlot = e.assignedElements({ flatten: !0 }).length > 0;
35
43
  }
36
44
  _manageFormAction() {
37
45
  typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
@@ -73,12 +81,12 @@ const l = class l extends d {
73
81
  if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
74
82
  if (this.disabled) return;
75
83
  o.preventDefault();
76
- const a = this.renderRoot.querySelector(".nys-button");
77
- if (a?.classList.add("active"), setTimeout(() => a?.classList.remove("active"), 150), this.href) {
78
- const i = this.renderRoot.querySelector(
84
+ const e = this.renderRoot.querySelector(".nys-button");
85
+ if (e?.classList.add("active"), setTimeout(() => e?.classList.remove("active"), 150), this.href) {
86
+ const l = this.renderRoot.querySelector(
79
87
  "a.nys-button"
80
88
  );
81
- i && i.click();
89
+ l && l.click();
82
90
  } else
83
91
  this._handleAnyAttributeFunction(), this._handleClick(o);
84
92
  }
@@ -101,21 +109,21 @@ const l = class l extends d {
101
109
  o && new Function("return " + o)();
102
110
  }
103
111
  focus(o) {
104
- const a = this.renderRoot.querySelector(
112
+ const e = this.renderRoot.querySelector(
105
113
  this.href ? "a.nys-button" : "button.nys-button"
106
114
  );
107
- a ? a.focus(o) : super.focus(o);
115
+ e ? e.focus(o) : super.focus(o);
108
116
  }
109
117
  render() {
110
- return e`
111
- ${this.href ? e`
118
+ return s`
119
+ ${this.href ? s`
112
120
  <div class="nys-button__linkwrapper">
113
121
  <a
114
122
  class="nys-button"
115
- name=${s(this.name ? this.name : void 0)}
123
+ name=${a(this.name ? this.name : void 0)}
116
124
  ?disabled=${this.disabled}
117
125
  aria-disabled="${this.disabled ? "true" : "false"}"
118
- value=${s(this.value ? this.value : void 0)}
126
+ value=${a(this.value ? this.value : void 0)}
119
127
  href=${this.href}
120
128
  target=${this.target}
121
129
  @click=${this._handleClick}
@@ -124,19 +132,33 @@ const l = class l extends d {
124
132
  @keydown="${this._handleKeydown}"
125
133
  @keyup="${this._handleKeyup}"
126
134
  tabindex="${this.disabled ? -1 : 0}"
127
- aria-label=${s(
135
+ aria-label=${a(
128
136
  this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
129
137
  )}
130
- aria-description=${s(this.ariaDescription || void 0)}
138
+ aria-description=${a(this.ariaDescription || void 0)}
131
139
  >
132
- ${this.prefixIcon ? e`<slot name="prefix-icon">
133
- <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
134
- </slot>` : ""}
135
- ${this.label && !this.circle ? e`<div class="nys-button__text">${this.label}</div>` : ""}
136
- ${this.suffixIcon ? e`<slot name="suffix-icon">
137
- <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
138
- </slot>` : ""}
139
- ${this.circle && this.icon ? e`<slot name="circle-icon"
140
+ <slot
141
+ name="prefix-icon"
142
+ @slotchange=${this._onPrefixSlotChange}
143
+ ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}
144
+ >
145
+ ${this.prefixIcon ? s`<nys-icon
146
+ size="16"
147
+ name=${this.prefixIcon}
148
+ ></nys-icon>` : ""}
149
+ </slot>
150
+ ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
151
+ <slot
152
+ name="suffix-icon"
153
+ @slotchange=${this._onSuffixSlotChange}
154
+ ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}
155
+ >
156
+ ${this.suffixIcon ? s`<nys-icon
157
+ size="16"
158
+ name=${this.suffixIcon}
159
+ ></nys-icon>` : ""}
160
+ </slot>
161
+ ${this.circle && this.icon ? s`<slot name="circle-icon"
140
162
  ><nys-icon
141
163
  size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
142
164
  name=${this.icon}
@@ -144,36 +166,50 @@ const l = class l extends d {
144
166
  ></slot>` : ""}
145
167
  </a>
146
168
  </div>
147
- ` : e`
169
+ ` : s`
148
170
  <button
149
171
  class="nys-button"
150
- name=${s(this.name ? this.name : void 0)}
172
+ name=${a(this.name ? this.name : void 0)}
151
173
  ?disabled=${this.disabled}
152
174
  aria-disabled="${this.disabled ? "true" : "false"}"
153
- form=${s(this.form || void 0)}
154
- value=${s(this.value ? this.value : void 0)}
175
+ form=${a(this.form || void 0)}
176
+ value=${a(this.value ? this.value : void 0)}
155
177
  type=${this.type}
156
- aria-controls=${s(this.ariaControls || void 0)}
178
+ aria-controls=${a(this.ariaControls || void 0)}
157
179
  @click=${this._handleClick}
158
180
  @focus="${this._handleFocus}"
159
181
  @blur="${this._handleBlur}"
160
182
  @keydown="${this._handleKeydown}"
161
183
  @keyup="${this._handleKeyup}"
162
184
  tabindex="${this.disabled ? -1 : 0}"
163
- aria-label=${s(
185
+ aria-label=${a(
164
186
  this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
165
187
  )}
166
- aria-description=${s(this.ariaDescription || void 0)}
188
+ aria-description=${a(this.ariaDescription || void 0)}
167
189
  role="button"
168
190
  >
169
- ${this.prefixIcon ? e`<slot name="prefix-icon">
170
- <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
171
- </slot>` : ""}
172
- ${this.label && !this.circle ? e`<div class="nys-button__text">${this.label}</div>` : ""}
173
- ${this.suffixIcon ? e`<slot name="suffix-icon">
174
- <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
175
- </slot>` : ""}
176
- ${this.circle && this.icon ? e`<slot name="circle-icon">
191
+ <slot
192
+ name="prefix-icon"
193
+ @slotchange=${this._onPrefixSlotChange}
194
+ ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}
195
+ >
196
+ ${this.prefixIcon ? s`<nys-icon
197
+ size="16"
198
+ name=${this.prefixIcon}
199
+ ></nys-icon>` : ""}
200
+ </slot>
201
+ ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
202
+ <slot
203
+ name="suffix-icon"
204
+ @slotchange=${this._onSuffixSlotChange}
205
+ ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}
206
+ >
207
+ ${this.suffixIcon ? s`<nys-icon
208
+ size="16"
209
+ name=${this.suffixIcon}
210
+ ></nys-icon>` : ""}
211
+ </slot>
212
+ ${this.circle && this.icon ? s`<slot name="circle-icon">
177
213
  <nys-icon
178
214
  size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
179
215
  name=${this.icon}
@@ -184,74 +220,80 @@ const l = class l extends d {
184
220
  `;
185
221
  }
186
222
  };
187
- l.styles = v(f), l.shadowRootOptions = {
188
- ...d.shadowRootOptions,
223
+ i.styles = v(h), i.shadowRootOptions = {
224
+ ...f.shadowRootOptions,
189
225
  delegatesFocus: !0
190
- }, l.formAssociated = !0;
191
- let t = l;
192
- n([
193
- r({ type: String, reflect: !0 })
226
+ }, i.formAssociated = !0;
227
+ let t = i;
228
+ r([
229
+ n({ type: String, reflect: !0 })
194
230
  ], t.prototype, "id");
195
- n([
196
- r({ type: String, reflect: !0 })
231
+ r([
232
+ n({ type: String, reflect: !0 })
197
233
  ], t.prototype, "name");
198
- n([
199
- r({ type: String, reflect: !0 })
234
+ r([
235
+ n({ type: String, reflect: !0 })
200
236
  ], t.prototype, "size");
201
- n([
202
- r({ type: Boolean, reflect: !0 })
237
+ r([
238
+ n({ type: Boolean, reflect: !0 })
203
239
  ], t.prototype, "fullWidth");
204
- n([
205
- r({ type: String, reflect: !0 })
240
+ r([
241
+ n({ type: String, reflect: !0 })
206
242
  ], t.prototype, "variant");
207
- n([
208
- r({ type: Boolean, reflect: !0 })
243
+ r([
244
+ n({ type: Boolean, reflect: !0 })
209
245
  ], t.prototype, "inverted");
210
- n([
211
- r({ type: String })
246
+ r([
247
+ n({ type: String })
212
248
  ], t.prototype, "label");
213
- n([
214
- r({ type: String })
249
+ r([
250
+ n({ type: String })
215
251
  ], t.prototype, "ariaLabel");
216
- n([
217
- r({ type: String })
252
+ r([
253
+ n({ type: String })
218
254
  ], t.prototype, "ariaControls");
219
- n([
220
- r({ type: String })
255
+ r([
256
+ n({ type: String })
221
257
  ], t.prototype, "prefixIcon");
222
- n([
223
- r({ type: String })
258
+ r([
259
+ n({ type: String })
224
260
  ], t.prototype, "suffixIcon");
225
- n([
226
- r({ type: Boolean, reflect: !0 })
261
+ r([
262
+ n({ type: Boolean, reflect: !0 })
227
263
  ], t.prototype, "circle");
228
- n([
229
- r({ type: String })
264
+ r([
265
+ n({ type: String })
230
266
  ], t.prototype, "icon");
231
- n([
232
- r({ type: Boolean, reflect: !0 })
267
+ r([
268
+ n({ type: Boolean, reflect: !0 })
233
269
  ], t.prototype, "disabled");
234
- n([
235
- r({ type: String, reflect: !0 })
270
+ r([
271
+ n({ type: String, reflect: !0 })
236
272
  ], t.prototype, "form");
237
- n([
238
- r({ type: String })
273
+ r([
274
+ n({ type: String })
239
275
  ], t.prototype, "value");
240
- n([
241
- r({ type: String })
276
+ r([
277
+ n({ type: String })
242
278
  ], t.prototype, "ariaDescription");
243
- n([
244
- r({ type: String, reflect: !0 })
279
+ r([
280
+ n({ type: String, reflect: !0 })
245
281
  ], t.prototype, "type");
246
- n([
247
- r({ attribute: !1 })
282
+ r([
283
+ n({ attribute: !1 })
248
284
  ], t.prototype, "onClick");
249
- n([
250
- r({ type: String })
285
+ r([
286
+ n({ type: String })
251
287
  ], t.prototype, "href");
252
- n([
253
- r({ type: String, reflect: !0 })
288
+ r([
289
+ n({ type: String, reflect: !0 })
254
290
  ], t.prototype, "target");
291
+ r([
292
+ d()
293
+ ], t.prototype, "_hasPrefixSlot");
294
+ r([
295
+ d()
296
+ ], t.prototype, "_hasSuffixSlot");
255
297
  customElements.get("nys-button") || customElements.define("nys-button", t);
256
298
  export {
257
299
  t as NysButton
package/dist/nys-button.js.map CHANGED
@@ -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 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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"}
1
+ {"version":3,"file":"nys-button.js","sources":["../src/nys-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-button.scss?inline\";\n\nlet buttonIdCounter = 0;\n\n/**\n * A button for actions like saving, submitting, or navigating. Form-associated with full keyboard support.\n *\n * Use `filled` for primary actions (one per section), `outline` for secondary, `ghost` for tertiary,\n * `text` for inline. Set `href` to render as a navigation link.\n *\n * @summary Button for actions and CTAs with variants, sizes, and icon support.\n * @element nys-button\n *\n * @slot prefix-icon - Icon before label. Not shown for `text` variant.\n * @slot suffix-icon - Icon after label. Not shown for `text` variant.\n * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.\n *\n * @cssprop [--nys-button-color] - Text color of the button label.\n * @cssprop [--nys-button-color--hover] - Text color when hovered.\n * @cssprop [--nys-button-color--active] - Text color when active/pressed.\n * @cssprop [--nys-button-background-color] - Background color of the button.\n * @cssprop [--nys-button-background-color--hover] - Background color when hovered.\n * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--nys-button-border-color] - Border color of the button.\n * @cssprop [--nys-button-border-color--hover] - Border color when hovered.\n * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.\n *\n * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires nys-focus - Fired when the button receives focus.\n * @fires nys-blur - Fired when the button loses focus.\n *\n * @example Basic filled button\n * ```html\n * <nys-button label=\"Submit\" variant=\"filled\"></nys-button>\n * ```\n *\n * @example Secondary outline button\n * ```html\n * <nys-button label=\"Cancel\" variant=\"outline\"></nys-button>\n * ```\n *\n * @example Button with icons\n * ```html\n * <nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>\n * <nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>\n * ```\n *\n * @example Circle icon button\n * ```html\n * <nys-button circle icon=\"close\" label=\"Close dialog\"></nys-button>\n * ```\n *\n * @example Link-style button for navigation\n * ```html\n * <nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>\n * ```\n *\n * @example Form submit button\n * ```html\n * <nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>\n * ```\n */\n\nexport class NysButton extends LitElement {\n static styles = unsafeCSS(styles);\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Unique identifier. Auto-generated if not provided.\n */\n @property({ type: String, reflect: true }) id = \"\";\n\n /**\n * Name for form submission.\n */\n @property({ type: String, reflect: true }) name = \"\";\n\n /**\n * Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n /**\n * Expands button to fill container width. Use for mobile layouts or stacked button groups.\n * @default false\n */\n @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n /**\n * Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.\n * @default \"filled\"\n */\n @property({ type: String, reflect: true }) variant:\n | \"filled\"\n | \"outline\"\n | \"ghost\"\n | \"text\" = \"filled\";\n\n /**\n * Adjusts colors for dark backgrounds.\n * @default false\n */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /**\n * Visible button text. Use sentence case, action-oriented text (e.g., \"Save Draft\"). Becomes aria-label in `circle` mode.\n */\n @property({ type: String }) label = \"\";\n\n /**\n * Screen reader label. Required for icon-only buttons if `label` is not set.\n */\n @property({ type: String }) ariaLabel = \"\";\n\n /**\n * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.\n */\n @property({ type: String }) ariaControls = \"\";\n\n /**\n * Material Symbol icon before label. Not shown for `circle` mode.\n */\n @property({ type: String }) prefixIcon = \"\";\n\n /**\n * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.\n */\n @property({ type: String }) suffixIcon = \"\";\n\n /**\n * Renders circular icon-only button. Requires `icon` prop. `label` becomes aria-label.\n * @default false\n */\n @property({ type: Boolean, reflect: true }) circle = false;\n\n /**\n * Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).\n */\n @property({ type: String }) icon = \"\";\n\n /**\n * Prevents interaction. Avoid disabling without explanation—show validation errors instead.\n * @default false\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Form `id` to associate with. Use when button is outside the form element.\n */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /**\n * Value submitted with form data. Only used when `type=\"submit\"`.\n */\n @property({ type: String }) value = \"\";\n\n /**\n * Additional screen reader description. Sets `aria-description`.\n */\n @property({ type: String }) ariaDescription = \"\";\n\n /**\n * Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.\n * @default \"button\"\n */\n @property({ type: String, reflect: true }) type:\n | \"submit\"\n | \"reset\"\n | \"button\" = \"button\";\n\n /**\n * Click handler. Use instead of `@click` to ensure keyboard accessibility.\n */\n @property({ attribute: false }) onClick: ((event: Event) => void) | null =\n null;\n\n /**\n * URL to navigate to. Renders as `<a>` tag. Omit for action buttons.\n */\n @property({ type: String }) href = \"\";\n\n /**\n * Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon=\"open_in_new\"`), `_parent`, `_top`, or frame name.\n * @default \"_self\"\n */\n @property({ type: String, reflect: true }) target:\n | \"_self\"\n | \"_blank\"\n | \"_parent\"\n | \"_top\"\n | \"framename\" = \"_self\";\n\n private _internals: ElementInternals;\n\n @state() private _hasPrefixSlot = false;\n @state() private _hasSuffixSlot = false;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _generateUniqueId() {\n return `nys-button-${Date.now()}-${buttonIdCounter++}`;\n }\n\n private _onPrefixSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._hasPrefixSlot = slot.assignedElements({ flatten: true }).length > 0;\n }\n\n private _onSuffixSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._hasSuffixSlot = slot.assignedElements({ flatten: true }).length > 0;\n }\n\n private _manageFormAction() {\n // If an onClick function is provided, call it\n if (typeof this.onClick === \"function\" && this.onClick !== null) {\n this.onClick(new Event(\"click\")); // Call user-provided onClick function with a fake click event\n }\n\n // If part of a form, perform the corresponding action based on button's \"type\"\n const form = this._internals.form;\n\n if (form) {\n switch (this.type) {\n case \"submit\":\n form.requestSubmit();\n break;\n case \"reset\":\n form.reset();\n break;\n case \"button\":\n }\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _handleFocus() {\n this.dispatchEvent(\n new Event(\"nys-focus\", { bubbles: true, composed: true }),\n );\n }\n\n private _handleBlur() {\n const button = this.shadowRoot?.querySelector(\".nys-button\");\n button?.classList.remove(\"active-focus\");\n this.dispatchEvent(\n new Event(\"nys-blur\", { bubbles: true, composed: true }),\n );\n }\n\n private _handleClick(event: Event) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n this._manageFormAction();\n this.dispatchEvent(\n new Event(\"nys-click\", { bubbles: true, composed: true }),\n );\n }\n\n private _handleKeydown(e: KeyboardEvent) {\n if (\n e.code === \"Space\" ||\n e.code === \"Enter\" ||\n e.key === \" \" ||\n e.key === \"Enter\"\n ) {\n if (this.disabled) return;\n\n e.preventDefault();\n const btn = this.renderRoot.querySelector(\".nys-button\");\n btn?.classList.add(\"active\");\n setTimeout(() => btn?.classList.remove(\"active\"), 150);\n\n if (this.href) {\n // Click the internal <a> so native navigation happens\n const linkEl = this.renderRoot.querySelector(\n \"a.nys-button\",\n ) as HTMLAnchorElement;\n if (linkEl) {\n linkEl.click();\n }\n } else {\n this._handleAnyAttributeFunction();\n this._handleClick(e);\n }\n }\n }\n\n private _handleKeyup(e: KeyboardEvent) {\n if (\n e.code === \"Space\" ||\n e.code === \"Enter\" ||\n e.key === \" \" ||\n e.key === \"Enter\"\n ) {\n this.renderRoot.querySelector(\".nys-button\")?.classList.remove(\"active\");\n }\n }\n\n /**\n * A Solution to the Vanilla JS & Native HTML keydown:\n *\n * Handles inline onClick attributes set as strings in vanilla HTML\n * (e.g. <nys-button onClick=\"doSomething()\">).\n *\n * When onClick is set this way, it is a DOM attribute (not a property)\n * so this.onClick remains null. Native clicks execute the attribute\n * automatically, but keydown events do not, so we invoke it manually here.\n */\n private _handleAnyAttributeFunction() {\n const onClickAttr = this.getAttribute(\"onClick\");\n if (onClickAttr) {\n const callFunc = new Function(\"return \" + onClickAttr);\n callFunc();\n }\n }\n\n public focus(options?: FocusOptions) {\n const innerEl = this.renderRoot.querySelector(\n this.href ? \"a.nys-button\" : \"button.nys-button\",\n ) as HTMLElement | null;\n\n if (innerEl) {\n innerEl.focus(options);\n } else {\n // fallback: focus host\n super.focus(options);\n }\n }\n\n render() {\n return html`\n ${this.href\n ? html`\n <div class=\"nys-button__linkwrapper\">\n <a\n class=\"nys-button\"\n name=${ifDefined(this.name ? this.name : undefined)}\n ?disabled=${this.disabled}\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n value=${ifDefined(this.value ? this.value : undefined)}\n href=${this.href}\n target=${this.target}\n @click=${this._handleClick}\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @keydown=\"${this._handleKeydown}\"\n @keyup=\"${this._handleKeyup}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n aria-label=${ifDefined(\n this.ariaLabel ||\n this.label ||\n (this.circle ? this.icon : null) ||\n \"button\",\n )}\n aria-description=${ifDefined(this.ariaDescription || undefined)}\n >\n <slot\n name=\"prefix-icon\"\n @slotchange=${this._onPrefixSlotChange}\n ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n >\n ${this.prefixIcon\n ? html`<nys-icon\n size=\"16\"\n name=${this.prefixIcon}\n ></nys-icon>`\n : \"\"}\n </slot>\n ${this.label && !this.circle\n ? html`<div class=\"nys-button__text\">${this.label}</div>`\n : \"\"}\n <slot\n name=\"suffix-icon\"\n @slotchange=${this._onSuffixSlotChange}\n ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n >\n ${this.suffixIcon\n ? html`<nys-icon\n size=\"16\"\n name=${this.suffixIcon}\n ></nys-icon>`\n : \"\"}\n </slot>\n ${this.circle && this.icon\n ? html`<slot name=\"circle-icon\"\n ><nys-icon\n size=${this.size === \"sm\"\n ? \"24\"\n : this.size === \"lg\"\n ? \"40\"\n : \"32\"}\n name=${this.icon}\n ></nys-icon\n ></slot>`\n : \"\"}\n </a>\n </div>\n `\n : html`\n <button\n class=\"nys-button\"\n name=${ifDefined(this.name ? this.name : undefined)}\n ?disabled=${this.disabled}\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n form=${ifDefined(this.form || undefined)}\n value=${ifDefined(this.value ? this.value : undefined)}\n type=${this.type}\n aria-controls=${ifDefined(this.ariaControls || undefined)}\n @click=${this._handleClick}\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @keydown=\"${this._handleKeydown}\"\n @keyup=\"${this._handleKeyup}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n aria-label=${ifDefined(\n this.ariaLabel ||\n this.label ||\n (this.circle ? this.icon : null) ||\n this.prefixIcon ||\n this.suffixIcon ||\n \"button\",\n )}\n aria-description=${ifDefined(this.ariaDescription || undefined)}\n role=\"button\"\n >\n <slot\n name=\"prefix-icon\"\n @slotchange=${this._onPrefixSlotChange}\n ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n >\n ${this.prefixIcon\n ? html`<nys-icon\n size=\"16\"\n name=${this.prefixIcon}\n ></nys-icon>`\n : \"\"}\n </slot>\n ${this.label && !this.circle\n ? html`<div class=\"nys-button__text\">${this.label}</div>`\n : \"\"}\n <slot\n name=\"suffix-icon\"\n @slotchange=${this._onSuffixSlotChange}\n ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n >\n ${this.suffixIcon\n ? html`<nys-icon\n size=\"16\"\n name=${this.suffixIcon}\n ></nys-icon>`\n : \"\"}\n </slot>\n ${this.circle && this.icon\n ? html`<slot name=\"circle-icon\">\n <nys-icon\n size=${this.size === \"sm\"\n ? \"24\"\n : this.size === \"lg\"\n ? \"40\"\n : \"32\"}\n name=${this.icon}\n ></nys-icon>\n </slot>`\n : \"\"}\n </button>\n `}\n `;\n }\n}\n\nif (!customElements.get(\"nys-button\")) {\n customElements.define(\"nys-button\", NysButton);\n}\n"],"names":["buttonIdCounter","_NysButton","LitElement","e","slot","form","event","btn","linkEl","onClickAttr","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property","state"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-button",
3
- "version": "1.18.3",
3
+ "version": "1.19.0",
4
4
  "description": "The Button component from the NYS Design System.",
5
5
  "module": "dist/nys-button.js",
6
6
  "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.18.3"
26
+ "@nysds/nys-icon": "^1.19.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "lit": "^3.3.1",