@nysds/nys-button 1.15.1 → 1.16.0-alpha5

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 +77 -80
  2. package/dist/nys-button.js.map +1 -1
  3. package/package.json +2 -2
package/dist/nys-button.js CHANGED
@@ -1,21 +1,21 @@
1
- import { LitElement as y, unsafeCSS as d, html as s } from "lit";
1
+ import { LitElement as y, unsafeCSS as d, html as e } from "lit";
2
2
  import { property as r } from "lit/decorators.js";
3
- import { ifDefined as a } from "lit/directives/if-defined.js";
3
+ import { ifDefined as s } from "lit/directives/if-defined.js";
4
4
  /*!
5
5
  * █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
6
6
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
7
7
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
8
8
  *
9
- * Button Component v1.15.1
9
+ * Button Component v1.16.0-alpha5
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 v = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius--start: var(--nys-radius-xl, 12px);--_nys-button-border-radius--end: var(--nys-radius-xl, 12px);--_nys-button-padding--y: 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-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));display:inline-flex;width:fit-content}: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-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-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--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: 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--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: 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([circle]){--_nys-button-width: var(--_nys-button-height);--_nys-button-border-radius--start: var(--nys-radius-round, 1776px);--_nys-button-border-radius--end: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-start-start-radius:var(--_nys-button-border-radius--start);border-end-start-radius:var(--_nys-button-border-radius--start);border-start-end-radius:var(--_nys-button-border-radius--end);border-end-end-radius:var(--_nys-button-border-radius--end);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:solid var(--_nys-button-border-width) var(--_nys-button-border-color);cursor:var(--_nys-button-cursor, pointer)}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.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}';
15
- var f = Object.defineProperty, n = (b, o, e, p) => {
14
+ const v = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius--start: var(--nys-radius-xl, 12px);--_nys-button-border-radius--end: var(--nys-radius-xl, 12px);--_nys-button-padding--y: 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-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));display:inline-flex;width:fit-content}: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-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-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--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: 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--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: 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--start: var(--nys-radius-round, 1776px);--_nys-button-border-radius--end: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-start-start-radius:var(--_nys-button-border-radius--start);border-end-start-radius:var(--_nys-button-border-radius--start);border-start-end-radius:var(--_nys-button-border-radius--end);border-end-end-radius:var(--_nys-button-border-radius--end);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:solid var(--_nys-button-border-width) var(--_nys-button-border-color);cursor:var(--_nys-button-cursor, pointer)}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.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}';
15
+ var f = Object.defineProperty, n = (b, t, a, p) => {
16
16
  for (var c = void 0, i = b.length - 1, u; i >= 0; i--)
17
- (u = b[i]) && (c = u(o, e, c) || c);
18
- return c && f(o, e, c), c;
17
+ (u = b[i]) && (c = u(t, a, c) || c);
18
+ return c && f(t, a, c), c;
19
19
  };
20
20
  let h = 0;
21
21
  const l = class l extends y {
@@ -23,13 +23,6 @@ const l = class l extends y {
23
23
  constructor() {
24
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();
25
25
  }
26
- async getButtonElement() {
27
- await this.updateComplete;
28
- const o = this.shadowRoot?.querySelector("a.nys-button") || null;
29
- if (o) return o;
30
- const e = this.shadowRoot?.querySelector("button.nys-button") || null;
31
- return e || null;
32
- }
33
26
  connectedCallback() {
34
27
  super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
35
28
  }
@@ -42,14 +35,14 @@ const l = class l extends y {
42
35
  }
43
36
  _manageFormAction() {
44
37
  typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
45
- const o = this._internals.form;
46
- if (o)
38
+ const t = this._internals.form;
39
+ if (t)
47
40
  switch (this.type) {
48
41
  case "submit":
49
- o.requestSubmit();
42
+ t.requestSubmit();
50
43
  break;
51
44
  case "reset":
52
- o.reset();
45
+ t.reset();
53
46
  break;
54
47
  }
55
48
  }
@@ -67,54 +60,58 @@ const l = class l extends y {
67
60
  new Event("nys-blur", { bubbles: !0, composed: !0 })
68
61
  );
69
62
  }
70
- _handleClick(o) {
63
+ _handleClick(t) {
71
64
  if (this.disabled) {
72
- o.preventDefault();
65
+ t.preventDefault();
73
66
  return;
74
67
  }
75
68
  this._manageFormAction(), this.dispatchEvent(
76
69
  new Event("nys-click", { bubbles: !0, composed: !0 })
77
70
  );
78
71
  }
79
- _handleKeydown(o) {
80
- if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
72
+ _handleKeydown(t) {
73
+ if (t.code === "Space" || t.code === "Enter" || t.key === " " || t.key === "Enter") {
81
74
  if (this.disabled) return;
82
- if (o.preventDefault(), this.href) {
83
- const e = this.renderRoot.querySelector(
75
+ if (t.preventDefault(), this.href) {
76
+ const a = this.renderRoot.querySelector(
84
77
  "a.nys-button"
85
78
  );
86
- e && e.click();
79
+ a && a.click();
87
80
  } else
88
- this._handleAnyAttributeFunction(), this._handleClick(o);
81
+ this._handleAnyAttributeFunction(), this._handleClick(t);
89
82
  }
90
83
  }
91
84
  /**
92
- * Vanilla JS & Native HTML keydown solution:
93
- * The <nys-button onClick="doFunction();"></nys-button> onClick is an attribute here.
94
- * Thus, we call it here. Otherwise, at this point, this.onClick is null as it isn't props, but a string attribute
95
- * In vanilla HTML/JS, clicking with execute the attribute function, BUT now with keydown, hence this solution.
85
+ * A Solution to the Vanilla JS & Native HTML keydown:
86
+ *
87
+ * Handles inline onClick attributes set as strings in vanilla HTML
88
+ * (e.g. <nys-button onClick="doSomething()">).
89
+ *
90
+ * When onClick is set this way, it is a DOM attribute (not a property)
91
+ * so this.onClick remains null. Native clicks execute the attribute
92
+ * automatically, but keydown events do not, so we invoke it manually here.
96
93
  */
97
94
  _handleAnyAttributeFunction() {
98
- const o = this.getAttribute("onClick");
99
- o && new Function("return " + o)();
95
+ const t = this.getAttribute("onClick");
96
+ t && new Function("return " + t)();
100
97
  }
101
98
  // Public Methods
102
- focus(o) {
103
- const e = this.renderRoot.querySelector(
99
+ focus(t) {
100
+ const a = this.renderRoot.querySelector(
104
101
  this.href ? "a.nys-button" : "button.nys-button"
105
102
  );
106
- e ? e.focus(o) : super.focus(o);
103
+ a ? a.focus(t) : super.focus(t);
107
104
  }
108
105
  render() {
109
- return s`
110
- ${this.href ? s`
106
+ return e`
107
+ ${this.href ? e`
111
108
  <div class="nys-button__linkwrapper">
112
109
  <a
113
110
  class="nys-button"
114
- name=${a(this.name ? this.name : void 0)}
111
+ name=${s(this.name ? this.name : void 0)}
115
112
  ?disabled=${this.disabled}
116
113
  aria-disabled="${this.disabled ? "true" : "false"}"
117
- value=${a(this.value ? this.value : void 0)}
114
+ value=${s(this.value ? this.value : void 0)}
118
115
  href=${this.href}
119
116
  target=${this.target}
120
117
  @click=${this._handleClick}
@@ -122,19 +119,19 @@ const l = class l extends y {
122
119
  @blur="${this._handleBlur}"
123
120
  @keydown="${this._handleKeydown}"
124
121
  tabindex="${this.disabled ? -1 : 0}"
125
- aria-label=${a(
122
+ aria-label=${s(
126
123
  this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
127
124
  )}
128
- aria-description=${a(this.ariaDescription || void 0)}
125
+ aria-description=${s(this.ariaDescription || void 0)}
129
126
  >
130
- ${this.prefixIcon && this.variant !== "text" ? s`<slot name="prefix-icon">
127
+ ${this.prefixIcon && this.variant !== "text" ? e`<slot name="prefix-icon">
131
128
  <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
132
129
  </slot>` : ""}
133
- ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
134
- ${this.suffixIcon && this.variant !== "text" ? s`<slot name="suffix-icon">
130
+ ${this.label && !this.circle ? e`<div class="nys-button__text">${this.label}</div>` : ""}
131
+ ${this.suffixIcon && this.variant !== "text" ? e`<slot name="suffix-icon">
135
132
  <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
136
133
  </slot>` : ""}
137
- ${this.circle && this.icon ? s`<slot name="circle-icon"
134
+ ${this.circle && this.icon ? e`<slot name="circle-icon"
138
135
  ><nys-icon
139
136
  size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
140
137
  name=${this.icon}
@@ -142,34 +139,34 @@ const l = class l extends y {
142
139
  ></slot>` : ""}
143
140
  </a>
144
141
  </div>
145
- ` : s`
142
+ ` : e`
146
143
  <button
147
144
  class="nys-button"
148
- name=${a(this.name ? this.name : void 0)}
145
+ name=${s(this.name ? this.name : void 0)}
149
146
  ?disabled=${this.disabled}
150
- form=${a(this.form || void 0)}
151
- value=${a(this.value ? this.value : void 0)}
147
+ form=${s(this.form || void 0)}
148
+ value=${s(this.value ? this.value : void 0)}
152
149
  type=${this.type}
153
- aria-controls=${a(this.ariaControls || void 0)}
150
+ aria-controls=${s(this.ariaControls || void 0)}
154
151
  @click=${this._handleClick}
155
152
  @focus="${this._handleFocus}"
156
153
  @blur="${this._handleBlur}"
157
154
  @keydown="${this._handleKeydown}"
158
155
  tabindex="${this.disabled ? -1 : 0}"
159
- aria-label=${a(
156
+ aria-label=${s(
160
157
  this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
161
158
  )}
162
- aria-description=${a(this.ariaDescription || void 0)}
159
+ aria-description=${s(this.ariaDescription || void 0)}
163
160
  role="button"
164
161
  >
165
- ${this.prefixIcon && this.variant !== "text" ? s`<slot name="prefix-icon">
162
+ ${this.prefixIcon && this.variant !== "text" ? e`<slot name="prefix-icon">
166
163
  <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
167
164
  </slot>` : ""}
168
- ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
169
- ${this.suffixIcon && this.variant !== "text" ? s`<slot name="suffix-icon">
165
+ ${this.label && !this.circle ? e`<div class="nys-button__text">${this.label}</div>` : ""}
166
+ ${this.suffixIcon && this.variant !== "text" ? e`<slot name="suffix-icon">
170
167
  <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
171
168
  </slot>` : ""}
172
- ${this.circle && this.icon ? s`<slot name="circle-icon">
169
+ ${this.circle && this.icon ? e`<slot name="circle-icon">
173
170
  <nys-icon
174
171
  size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
175
172
  name=${this.icon}
@@ -184,72 +181,72 @@ l.styles = d(v), l.shadowRootOptions = {
184
181
  ...y.shadowRootOptions,
185
182
  delegatesFocus: !0
186
183
  }, l.formAssociated = !0;
187
- let t = l;
184
+ let o = l;
188
185
  n([
189
186
  r({ type: String, reflect: !0 })
190
- ], t.prototype, "id");
187
+ ], o.prototype, "id");
191
188
  n([
192
189
  r({ type: String, reflect: !0 })
193
- ], t.prototype, "name");
190
+ ], o.prototype, "name");
194
191
  n([
195
192
  r({ type: String, reflect: !0 })
196
- ], t.prototype, "size");
193
+ ], o.prototype, "size");
197
194
  n([
198
195
  r({ type: Boolean, reflect: !0 })
199
- ], t.prototype, "fullWidth");
196
+ ], o.prototype, "fullWidth");
200
197
  n([
201
198
  r({ type: String, reflect: !0 })
202
- ], t.prototype, "variant");
199
+ ], o.prototype, "variant");
203
200
  n([
204
201
  r({ type: Boolean, reflect: !0 })
205
- ], t.prototype, "inverted");
202
+ ], o.prototype, "inverted");
206
203
  n([
207
204
  r({ type: String })
208
- ], t.prototype, "label");
205
+ ], o.prototype, "label");
209
206
  n([
210
207
  r({ type: String })
211
- ], t.prototype, "ariaLabel");
208
+ ], o.prototype, "ariaLabel");
212
209
  n([
213
210
  r({ type: String })
214
- ], t.prototype, "ariaControls");
211
+ ], o.prototype, "ariaControls");
215
212
  n([
216
213
  r({ type: String })
217
- ], t.prototype, "prefixIcon");
214
+ ], o.prototype, "prefixIcon");
218
215
  n([
219
216
  r({ type: String })
220
- ], t.prototype, "suffixIcon");
217
+ ], o.prototype, "suffixIcon");
221
218
  n([
222
219
  r({ type: Boolean, reflect: !0 })
223
- ], t.prototype, "circle");
220
+ ], o.prototype, "circle");
224
221
  n([
225
222
  r({ type: String })
226
- ], t.prototype, "icon");
223
+ ], o.prototype, "icon");
227
224
  n([
228
225
  r({ type: Boolean, reflect: !0 })
229
- ], t.prototype, "disabled");
226
+ ], o.prototype, "disabled");
230
227
  n([
231
228
  r({ type: String, reflect: !0 })
232
- ], t.prototype, "form");
229
+ ], o.prototype, "form");
233
230
  n([
234
231
  r({ type: String })
235
- ], t.prototype, "value");
232
+ ], o.prototype, "value");
236
233
  n([
237
234
  r({ type: String })
238
- ], t.prototype, "ariaDescription");
235
+ ], o.prototype, "ariaDescription");
239
236
  n([
240
237
  r({ type: String, reflect: !0 })
241
- ], t.prototype, "type");
238
+ ], o.prototype, "type");
242
239
  n([
243
240
  r({ attribute: !1 })
244
- ], t.prototype, "onClick");
241
+ ], o.prototype, "onClick");
245
242
  n([
246
243
  r({ type: String })
247
- ], t.prototype, "href");
244
+ ], o.prototype, "href");
248
245
  n([
249
246
  r({ type: String, reflect: !0 })
250
- ], t.prototype, "target");
251
- customElements.get("nys-button") || customElements.define("nys-button", t);
247
+ ], o.prototype, "target");
248
+ customElements.get("nys-button") || customElements.define("nys-button", o);
252
249
  export {
253
- t as NysButton
250
+ o as NysButton
254
251
  };
255
252
  //# sourceMappingURL=nys-button.js.map
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 `text` variant or `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 `text` variant or `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 public async getButtonElement(): Promise<HTMLElement | null> {\n await this.updateComplete; // Wait for the component to finish rendering\n\n // if it's a link button\n const linkEl =\n this.shadowRoot?.querySelector<HTMLAnchorElement>(\"a.nys-button\") || null;\n if (linkEl) return linkEl;\n\n // Otherwise return the native button\n const btnEl =\n this.shadowRoot?.querySelector<HTMLButtonElement>(\"button.nys-button\") ||\n null;\n if (btnEl) return btnEl;\n\n return null;\n }\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 * Vanilla JS & Native HTML keydown solution:\n * The <nys-button onClick=\"doFunction();\"></nys-button> onClick is an attribute here.\n * Thus, we call it here. Otherwise, at this point, this.onClick is null as it isn't props, but a string attribute\n * In vanilla HTML/JS, clicking with execute the attribute function, BUT now with keydown, hence this solution.\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 Methods\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 && this.variant !== \"text\"\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 && this.variant !== \"text\"\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 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 && this.variant !== \"text\"\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 && this.variant !== \"text\"\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","linkEl","btnEl","form","event","e","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 `text` variant or `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 `text` variant or `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 Methods\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 && this.variant !== \"text\"\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 && this.variant !== \"text\"\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 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 && this.variant !== \"text\"\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 && this.variant !== \"text\"\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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-button",
3
- "version": "1.15.1",
3
+ "version": "1.16.0-alpha5",
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.15.1"
26
+ "@nysds/nys-icon": "^1.16.0-alpha5"
27
27
  },
28
28
  "devDependencies": {
29
29
  "lit": "^3.3.1",