@nysds/nys-button 1.11.4 → 1.12.0

package/dist/nys-button.js

@@ -1,64 +1,31 @@
-import { LitElement as d, unsafeCSS as v, html as a } from "lit";
+import { LitElement as y, unsafeCSS as d, html as s } from "lit";
 import { property as r } from "lit/decorators.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-const f = ':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-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 ) )}: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]){--_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-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);--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) )}: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-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);--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}: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-100, #ffffff1a) );--_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-200, #ffffff33) );--_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:center;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}';
-var h = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (y, o, s, i) => {
-  for (var l = i > 1 ? void 0 : i ? _(o, s) : o, b = y.length - 1, u; b >= 0; b--)
-    (u = y[b]) && (l = (i ? u(o, s, l) : u(l)) || l);
-  return i && l && h(o, s, l), l;
+import { ifDefined as a } from "lit/directives/if-defined.js";
+const v = ':host{display:block;width:fit-content;height:fit-content;--_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-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 ) )}: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]){--_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-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);--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) )}: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-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);--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}: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-100, #ffffff1a) );--_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-200, #ffffff33) );--_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:center;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}';
+var f = Object.defineProperty, n = (b, o, e, p) => {
+  for (var c = void 0, i = b.length - 1, u; i >= 0; i--)
+    (u = b[i]) && (c = u(o, e, c) || c);
+  return c && f(o, e, c), c;
 };
-let p = 0;
-var e;
-const t = (e = class extends d {
+let h = 0;
+const l = class l extends y {
   // allows use of elementInternals' API
   constructor() {
-    super(), this.id = "", this.name = "", this._size = "md", this.fullWidth = !1, this._variant = "filled", this.inverted = !1, this.label = "", this.ariaLabel = "", this.ariaControls = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescription = "", this._type = "button", this.onClick = null, this.href = "", this._target = "_self", this._internals = this.attachInternals();
-  }
-  get size() {
-    return this._size;
-  }
-  set size(o) {
-    this._size = e.VALID_SIZES.includes(
-      o
-    ) ? o : "md";
-  }
-  get variant() {
-    return this._variant;
-  }
-  set variant(o) {
-    this._variant = e.VALID_VARIANTS.includes(
-      o
-    ) ? o : "filled";
-  }
-  get type() {
-    return this._type;
-  }
-  set type(o) {
-    this._type = e.VALID_TYPES.includes(
-      o
-    ) ? o : "button";
-  }
-  get target() {
-    return this._target;
-  }
-  set target(o) {
-    this._target = e.VALID_TARGETS.includes(
-      o
-    ) ? o : "_self";
+    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();
   }
   async getButtonElement() {
     await this.updateComplete;
     const o = this.shadowRoot?.querySelector("a.nys-button") || null;
     if (o) return o;
-    const s = this.shadowRoot?.querySelector("button.nys-button") || null;
-    return s || null;
+    const e = this.shadowRoot?.querySelector("button.nys-button") || null;
+    return e || null;
   }
   connectedCallback() {
     super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
   }
-  /******************** Functions ********************/
+  // Functions
   _generateUniqueId() {
-    return `nys-button-${Date.now()}-${p++}`;
+    return `nys-button-${Date.now()}-${h++}`;
   }
   _manageFormAction() {
     typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
@@ -73,7 +40,7 @@ const t = (e = class extends d {
           break;
       }
   }
-  /******************** Event Handlers ********************/
+  // Event Handlers
   // Handle focus event
   _handleFocus() {
     this.dispatchEvent(new Event("nys-focus"));
@@ -94,10 +61,10 @@ const t = (e = class extends d {
     if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
       if (this.disabled) return;
       if (o.preventDefault(), this.href) {
-        const s = this.renderRoot.querySelector(
+        const e = this.renderRoot.querySelector(
           "a.nys-button"
         );
-        s && s.click();
+        e && e.click();
       } else
         this._handleAnyAttributeFunction(), this._handleClick(o);
     }
@@ -112,44 +79,43 @@ const t = (e = class extends d {
     const o = this.getAttribute("onClick");
     o && new Function("return " + o)();
   }
-  /******************** Public Methods ********************/
+  // Public Methods
   focus(o) {
-    const s = this.renderRoot.querySelector(
+    const e = this.renderRoot.querySelector(
       this.href ? "a.nys-button" : "button.nys-button"
     );
-    s ? s.focus(o) : super.focus(o);
+    e ? e.focus(o) : super.focus(o);
   }
   render() {
-    return a`
-      ${this.href ? a`
+    return s`
+      ${this.href ? s`
             <div class="nys-button__linkwrapper">
               <a
                 class="nys-button"
-                name=${c(this.name ? this.name : void 0)}
+                name=${a(this.name ? this.name : void 0)}
                 ?disabled=${this.disabled}
                 aria-disabled="${this.disabled ? "true" : "false"}"
-                value=${c(this.value ? this.value : void 0)}
+                value=${a(this.value ? this.value : void 0)}
                 href=${this.href}
                 target=${this.target}
-                aria-label=${c(
-      this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
-    )}
-                aria-description=${c(this.ariaDescription || void 0)}
                 @click=${this._handleClick}
                 @focus="${this._handleFocus}"
                 @blur="${this._handleBlur}"
                 @keydown="${this._handleKeydown}"
-                role="button"
                 tabindex="${this.disabled ? -1 : 0}"
+                aria-label=${a(
+      this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
+    )}
+                aria-description=${a(this.ariaDescription || void 0)}
               >
-                ${this.prefixIcon && this.variant !== "text" ? a`<slot name="prefix-icon">
+                ${this.prefixIcon && this.variant !== "text" ? s`<slot name="prefix-icon">
                       <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
                     </slot>` : ""}
-                ${this.label && !this.circle ? a`<div class="nys-button__text">${this.label}</div>` : ""}
-                ${this.suffixIcon && this.variant !== "text" ? a`<slot name="suffix-icon">
+                ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
+                ${this.suffixIcon && this.variant !== "text" ? s`<slot name="suffix-icon">
                       <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
                     </slot>` : ""}
-                ${this.circle && this.icon ? a`<slot name="circle-icon"
+                ${this.circle && this.icon ? s`<slot name="circle-icon"
                       ><nys-icon
                         size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                         name=${this.icon}
@@ -157,33 +123,34 @@ const t = (e = class extends d {
                     ></slot>` : ""}
               </a>
             </div>
-          ` : a`
+          ` : s`
             <button
               class="nys-button"
-              name=${c(this.name ? this.name : void 0)}
+              name=${a(this.name ? this.name : void 0)}
               ?disabled=${this.disabled}
-              form=${c(this.form || void 0)}
-              value=${c(this.value ? this.value : void 0)}
+              form=${a(this.form || void 0)}
+              value=${a(this.value ? this.value : void 0)}
               type=${this.type}
-              aria-controls=${c(this.ariaControls || void 0)}
-              aria-label=${c(
-      this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
-    )}
-              aria-description=${c(this.ariaDescription || void 0)}
+              aria-controls=${a(this.ariaControls || void 0)}
               @click=${this._handleClick}
               @focus="${this._handleFocus}"
               @blur="${this._handleBlur}"
               @keydown="${this._handleKeydown}"
+              tabindex="${this.disabled ? -1 : 0}"
+              aria-label=${a(
+      this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
+    )}
+              aria-description=${a(this.ariaDescription || void 0)}
               role="button"
             >
-              ${this.prefixIcon && this.variant !== "text" ? a`<slot name="prefix-icon">
+              ${this.prefixIcon && this.variant !== "text" ? s`<slot name="prefix-icon">
                     <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
                   </slot>` : ""}
-              ${this.label && !this.circle ? a`<div class="nys-button__text">${this.label}</div>` : ""}
-              ${this.suffixIcon && this.variant !== "text" ? a`<slot name="suffix-icon">
+              ${this.label && !this.circle ? s`<div class="nys-button__text">${this.label}</div>` : ""}
+              ${this.suffixIcon && this.variant !== "text" ? s`<slot name="suffix-icon">
                     <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
                   </slot>` : ""}
-              ${this.circle && this.icon ? a`<slot name="circle-icon">
+              ${this.circle && this.icon ? s`<slot name="circle-icon">
                     <nys-icon
                       size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                       name=${this.icon}
@@ -193,84 +160,74 @@ const t = (e = class extends d {
           `}
     `;
   }
-}, e.styles = v(f), e.VALID_SIZES = ["sm", "md", "lg"], e.VALID_VARIANTS = [
-  "filled",
-  "outline",
-  "ghost",
-  "text"
-], e.VALID_TYPES = ["submit", "reset", "button"], e.VALID_TARGETS = [
-  "_self",
-  "_blank",
-  "_parent",
-  "_top",
-  "framename"
-], e.formAssociated = !0, e);
+};
+l.styles = d(v), l.formAssociated = !0;
+let t = l;
 n([
   r({ type: String, reflect: !0 })
-], t.prototype, "id", 2);
+], t.prototype, "id");
 n([
   r({ type: String, reflect: !0 })
-], t.prototype, "name", 2);
+], t.prototype, "name");
 n([
-  r({ reflect: !0 })
-], t.prototype, "size", 1);
+  r({ type: String, reflect: !0 })
+], t.prototype, "size");
 n([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "fullWidth", 2);
+], t.prototype, "fullWidth");
 n([
-  r({ reflect: !0 })
-], t.prototype, "variant", 1);
+  r({ type: String, reflect: !0 })
+], t.prototype, "variant");
 n([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "inverted", 2);
+], t.prototype, "inverted");
 n([
   r({ type: String })
-], t.prototype, "label", 2);
+], t.prototype, "label");
 n([
   r({ type: String })
-], t.prototype, "ariaLabel", 2);
+], t.prototype, "ariaLabel");
 n([
   r({ type: String })
-], t.prototype, "ariaControls", 2);
+], t.prototype, "ariaControls");
 n([
   r({ type: String })
-], t.prototype, "prefixIcon", 2);
+], t.prototype, "prefixIcon");
 n([
   r({ type: String })
-], t.prototype, "suffixIcon", 2);
+], t.prototype, "suffixIcon");
 n([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "circle", 2);
+], t.prototype, "circle");
 n([
   r({ type: String })
-], t.prototype, "icon", 2);
+], t.prototype, "icon");
 n([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
+], t.prototype, "disabled");
 n([
   r({ type: String, reflect: !0 })
-], t.prototype, "form", 2);
+], t.prototype, "form");
 n([
   r({ type: String })
-], t.prototype, "value", 2);
+], t.prototype, "value");
 n([
   r({ type: String })
-], t.prototype, "ariaDescription", 2);
+], t.prototype, "ariaDescription");
 n([
-  r({ reflect: !0 })
-], t.prototype, "type", 1);
+  r({ type: String, reflect: !0 })
+], t.prototype, "type");
 n([
   r({ attribute: !1 })
-], t.prototype, "onClick", 2);
+], t.prototype, "onClick");
 n([
   r({ type: String })
-], t.prototype, "href", 2);
+], t.prototype, "href");
 n([
-  r({ reflect: !0 })
-], t.prototype, "target", 1);
-let g = t;
-customElements.get("nys-button") || customElements.define("nys-button", g);
+  r({ type: String, reflect: !0 })
+], t.prototype, "target");
+customElements.get("nys-button") || customElements.define("nys-button", t);
 export {
-  g as NysButton
+  t as NysButton
 };
 //# sourceMappingURL=nys-button.js.map

package/dist/nys-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-button.js","sources":["../src/nys-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } 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; // Counter for generating unique IDs\n\nexport class NysButton extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String, reflect: true }) name = \"\";\n  // size\n  private static readonly VALID_SIZES = [\"sm\", \"md\", \"lg\"] as const;\n  private _size: (typeof NysButton.VALID_SIZES)[number] = \"md\";\n  @property({ reflect: true })\n  get size(): (typeof NysButton.VALID_SIZES)[number] {\n    return this._size;\n  }\n  set size(value: string) {\n    this._size = NysButton.VALID_SIZES.includes(\n      value as (typeof NysButton.VALID_SIZES)[number],\n    )\n      ? (value as (typeof NysButton.VALID_SIZES)[number])\n      : \"md\";\n  }\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n  // variant\n  private static readonly VALID_VARIANTS = [\n    \"filled\",\n    \"outline\",\n    \"ghost\",\n    \"text\",\n  ] as const;\n  private _variant: (typeof NysButton.VALID_VARIANTS)[number] = \"filled\";\n  @property({ reflect: true })\n  get variant(): (typeof NysButton.VALID_VARIANTS)[number] {\n    return this._variant;\n  }\n  set variant(value: string) {\n    this._variant = NysButton.VALID_VARIANTS.includes(\n      value as (typeof NysButton.VALID_VARIANTS)[number],\n    )\n      ? (value as (typeof NysButton.VALID_VARIANTS)[number])\n      : \"filled\";\n  }\n  @property({ type: Boolean, reflect: true }) inverted = false; //used on dark text\n  @property({ type: String }) label = \"\";\n  @property({ type: String }) ariaLabel = \"\";\n  @property({ type: String }) ariaControls = \"\";\n  @property({ type: String }) prefixIcon = \"\";\n  @property({ type: String }) suffixIcon = \"\";\n  @property({ type: Boolean, reflect: true }) circle = false;\n  @property({ type: String }) icon = \"\";\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: String, reflect: true }) form: string | null = null;\n  @property({ type: String }) value = \"\";\n  @property({ type: String }) ariaDescription = \"\";\n  // type\n  private static readonly VALID_TYPES = [\"submit\", \"reset\", \"button\"] as const;\n  private _type: (typeof NysButton.VALID_TYPES)[number] = \"button\";\n  @property({ reflect: true })\n  get type(): (typeof NysButton.VALID_TYPES)[number] {\n    return this._type;\n  }\n  set type(value: string) {\n    this._type = NysButton.VALID_TYPES.includes(\n      value as (typeof NysButton.VALID_TYPES)[number],\n    )\n      ? (value as (typeof NysButton.VALID_TYPES)[number])\n      : \"button\";\n  }\n  @property({ attribute: false }) onClick: ((event: Event) => void) | null =\n    null;\n  @property({ type: String }) href = \"\";\n  // target\n  private static readonly VALID_TARGETS = [\n    \"_self\",\n    \"_blank\",\n    \"_parent\",\n    \"_top\",\n    \"framename\",\n  ] as const;\n  private _target: (typeof NysButton.VALID_TARGETS)[number] = \"_self\";\n  @property({ reflect: true })\n  get target(): (typeof NysButton.VALID_TARGETS)[number] {\n    return this._target;\n  }\n  set target(value: string) {\n    this._target = NysButton.VALID_TARGETS.includes(\n      value as (typeof NysButton.VALID_TARGETS)[number],\n    )\n      ? (value as (typeof NysButton.VALID_TARGETS)[number])\n      : \"_self\";\n  }\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  /**************** Lifecycle Methods ****************/\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  /******************** Functions ********************/\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  /******************** Event Handlers ********************/\n  // Handle focus event\n  private _handleFocus() {\n    this.dispatchEvent(new Event(\"nys-focus\"));\n  }\n\n  // Handle blur event\n  private _handleBlur() {\n    const button = this.shadowRoot?.querySelector(\".nys-button\");\n    button?.classList.remove(\"active-focus\");\n    this.dispatchEvent(new Event(\"nys-blur\"));\n  }\n\n  private _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this._manageFormAction();\n    this.dispatchEvent(new Event(\"nys-click\"));\n  }\n\n  // Handle keydown for keyboard accessibility\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                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                @click=${this._handleClick}\n                @focus=\"${this._handleFocus}\"\n                @blur=\"${this._handleBlur}\"\n                @keydown=\"${this._handleKeydown}\"\n                role=\"button\"\n                tabindex=\"${this.disabled ? -1 : 0}\"\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              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              @click=${this._handleClick}\n              @focus=\"${this._handleFocus}\"\n              @blur=\"${this._handleBlur}\"\n              @keydown=\"${this._handleKeydown}\"\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","_a","LitElement","value","linkEl","btnEl","form","event","e","onClickAttr","options","innerEl","html","ifDefined","unsafeCSS","styles","__decorateClass","property","NysButton"],"mappings":";;;;;;;;;AAMA,IAAIA,IAAkB;;AAEf,MAAMC,KAANC,IAAA,cAAwBC,EAAW;AAAA;AAAA,EA+GxC,cAAc;AACZ,UAAA,GA7GyC,KAAA,KAAK,IACL,KAAA,OAAO,IAGlD,KAAQ,QAAgD,MAYZ,KAAA,YAAY,IAQxD,KAAQ,WAAsD,UAYlB,KAAA,WAAW,IAC3B,KAAA,QAAQ,IACR,KAAA,YAAY,IACZ,KAAA,eAAe,IACf,KAAA,aAAa,IACb,KAAA,aAAa,IACG,KAAA,SAAS,IACzB,KAAA,OAAO,IACS,KAAA,WAAW,IACZ,KAAA,OAAsB,MACrC,KAAA,QAAQ,IACR,KAAA,kBAAkB,IAG9C,KAAQ,QAAgD,UAYxB,KAAA,UAC9B,MAC0B,KAAA,OAAO,IASnC,KAAQ,UAAoD,SAqC1D,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAzGA,IAAI,OAA+C;AACjD,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,KAAKC,GAAe;AACtB,SAAK,QAAQF,EAAU,YAAY;AAAA,MACjCE;AAAA,IAAA,IAEGA,IACD;AAAA,EACN;AAAA,EAWA,IAAI,UAAqD;AACvD,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,QAAQA,GAAe;AACzB,SAAK,WAAWF,EAAU,eAAe;AAAA,MACvCE;AAAA,IAAA,IAEGA,IACD;AAAA,EACN;AAAA,EAiBA,IAAI,OAA+C;AACjD,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,KAAKA,GAAe;AACtB,SAAK,QAAQF,EAAU,YAAY;AAAA,MACjCE;AAAA,IAAA,IAEGA,IACD;AAAA,EACN;AAAA,EAcA,IAAI,SAAmD;AACrD,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,OAAOA,GAAe;AACxB,SAAK,UAAUF,EAAU,cAAc;AAAA,MACrCE;AAAA,IAAA,IAEGA,IACD;AAAA,EACN;AAAA,EAEA,MAAa,mBAAgD;AAC3D,UAAM,KAAK;AAGX,UAAMC,IACJ,KAAK,YAAY,cAAiC,cAAc,KAAK;AACvE,QAAIA,EAAQ,QAAOA;AAGnB,UAAMC,IACJ,KAAK,YAAY,cAAiC,mBAAmB,KACrE;AACF,WAAIA,KAEG;AAAA,EACT;AAAA,EAYA,oBAAoB;AAClB,UAAM,kBAAA,GAGD,KAAK,OACR,KAAK,KAAK,KAAK,kBAAA;AAAA,EAEnB;AAAA;AAAA,EAGQ,oBAAoB;AAC1B,WAAO,cAAc,KAAK,IAAA,CAAK,IAAIN,GAAiB;AAAA,EACtD;AAAA,EAEQ,oBAAoB;AAE1B,IAAI,OAAO,KAAK,WAAY,cAAc,KAAK,YAAY,QACzD,KAAK,QAAQ,IAAI,MAAM,OAAO,CAAC;AAIjC,UAAMO,IAAO,KAAK,WAAW;AAE7B,QAAIA;AACF,cAAQ,KAAK,MAAA;AAAA,QACX,KAAK;AACH,UAAAA,EAAK,cAAA;AACL;AAAA,QACF,KAAK;AACH,UAAAA,EAAK,MAAA;AACL;AAAA,MACG;AAAA,EAGX;AAAA;AAAA;AAAA,EAIQ,eAAe;AACrB,SAAK,cAAc,IAAI,MAAM,WAAW,CAAC;AAAA,EAC3C;AAAA;AAAA,EAGQ,cAAc;AAEpB,IADe,KAAK,YAAY,cAAc,aAAa,GACnD,UAAU,OAAO,cAAc,GACvC,KAAK,cAAc,IAAI,MAAM,UAAU,CAAC;AAAA,EAC1C;AAAA,EAEQ,aAAaC,GAAc;AACjC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAM,eAAA;AACN;AAAA,IACF;AACA,SAAK,kBAAA,GACL,KAAK,cAAc,IAAI,MAAM,WAAW,CAAC;AAAA,EAC3C;AAAA;AAAA,EAGQ,eAAeC,GAAkB;AACvC,QACEA,EAAE,SAAS,WACXA,EAAE,SAAS,WACXA,EAAE,QAAQ,OACVA,EAAE,QAAQ,SACV;AACA,UAAI,KAAK,SAAU;AAInB,UAFAA,EAAE,eAAA,GAEE,KAAK,MAAM;AAEb,cAAMJ,IAAS,KAAK,WAAW;AAAA,UAC7B;AAAA,QAAA;AAEF,QAAIA,KACFA,EAAO,MAAA;AAAA,MAEX;AACE,aAAK,4BAAA,GACL,KAAK,aAAaI,CAAC;AAAA,IAEvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,8BAA8B;AACpC,UAAMC,IAAc,KAAK,aAAa,SAAS;AAC/C,IAAIA,KACe,IAAI,SAAS,YAAYA,CAAW,EACrD;AAAA,EAEJ;AAAA;AAAA,EAGO,MAAMC,GAAwB;AACnC,UAAMC,IAAU,KAAK,WAAW;AAAA,MAC9B,KAAK,OAAO,iBAAiB;AAAA,IAAA;AAG/B,IAAIA,IACFA,EAAQ,MAAMD,CAAO,IAGrB,MAAM,MAAMA,CAAO;AAAA,EAEvB;AAAA,EAEA,SAAS;AACP,WAAOE;AAAA,QACH,KAAK,OACHA;AAAA;AAAA;AAAA;AAAA,uBAIaC,EAAU,KAAK,OAAO,KAAK,OAAO,MAAS,CAAC;AAAA,4BACvC,KAAK,QAAQ;AAAA,iCACR,KAAK,WAAW,SAAS,OAAO;AAAA,wBACzCA,EAAU,KAAK,QAAQ,KAAK,QAAQ,MAAS,CAAC;AAAA,uBAC/C,KAAK,IAAI;AAAA,yBACP,KAAK,MAAM;AAAA,6BACPA;AAAA,MACX,KAAK,aACH,KAAK,UACJ,KAAK,SAAS,KAAK,OAAO,SAC3B;AAAA,IAAA,CACH;AAAA,mCACkBA,EAAU,KAAK,mBAAmB,MAAS,CAAC;AAAA,yBACtD,KAAK,YAAY;AAAA,0BAChB,KAAK,YAAY;AAAA,yBAClB,KAAK,WAAW;AAAA,4BACb,KAAK,cAAc;AAAA;AAAA,4BAEnB,KAAK,WAAW,KAAK,CAAC;AAAA;AAAA,kBAEhC,KAAK,cAAc,KAAK,YAAY,SAClCD;AAAA,iDAC6B,KAAK,UAAU;AAAA,+BAE5C,EAAE;AAAA,kBACJ,KAAK,SAAS,CAAC,KAAK,SAClBA,kCAAqC,KAAK,KAAK,WAC/C,EAAE;AAAA,kBACJ,KAAK,cAAc,KAAK,YAAY,SAClCA;AAAA,iDAC6B,KAAK,UAAU;AAAA,+BAE5C,EAAE;AAAA,kBACJ,KAAK,UAAU,KAAK,OAClBA;AAAA;AAAA,+BAEW,KAAK,SAAS,OACjB,OACA,KAAK,SAAS,OACZ,OACA,IAAI;AAAA,+BACH,KAAK,IAAI;AAAA;AAAA,gCAGpB,EAAE;AAAA;AAAA;AAAA,cAIZA;AAAA;AAAA;AAAA,qBAGWC,EAAU,KAAK,OAAO,KAAK,OAAO,MAAS,CAAC;AAAA,0BACvC,KAAK,QAAQ;AAAA,qBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,sBAChCA,EAAU,KAAK,QAAQ,KAAK,QAAQ,MAAS,CAAC;AAAA,qBAC/C,KAAK,IAAI;AAAA,8BACAA,EAAU,KAAK,gBAAgB,MAAS,CAAC;AAAA,2BAC5CA;AAAA,MACX,KAAK,aACH,KAAK,UACJ,KAAK,SAAS,KAAK,OAAO,SAC3B,KAAK,cACL,KAAK,cACL;AAAA,IAAA,CACH;AAAA,iCACkBA,EAAU,KAAK,mBAAmB,MAAS,CAAC;AAAA,uBACtD,KAAK,YAAY;AAAA,wBAChB,KAAK,YAAY;AAAA,uBAClB,KAAK,WAAW;AAAA,0BACb,KAAK,cAAc;AAAA;AAAA;AAAA,gBAG7B,KAAK,cAAc,KAAK,YAAY,SAClCD;AAAA,+CAC6B,KAAK,UAAU;AAAA,6BAE5C,EAAE;AAAA,gBACJ,KAAK,SAAS,CAAC,KAAK,SAClBA,kCAAqC,KAAK,KAAK,WAC/C,EAAE;AAAA,gBACJ,KAAK,cAAc,KAAK,YAAY,SAClCA;AAAA,+CAC6B,KAAK,UAAU;AAAA,6BAE5C,EAAE;AAAA,gBACJ,KAAK,UAAU,KAAK,OAClBA;AAAA;AAAA,6BAEW,KAAK,SAAS,OACjB,OACA,KAAK,SAAS,OACZ,OACA,IAAI;AAAA,6BACH,KAAK,IAAI;AAAA;AAAA,6BAGpB,EAAE;AAAA;AAAA,WAET;AAAA;AAAA,EAET;AACF,GAhVEX,EAAO,SAASa,EAAUC,CAAM,GAKhCd,EAAwB,cAAc,CAAC,MAAM,MAAM,IAAI,GAevDA,EAAwB,iBAAiB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GA2BFA,EAAwB,cAAc,CAAC,UAAU,SAAS,QAAQ,GAiBlEA,EAAwB,gBAAgB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAmCFA,EAAO,iBAAiB,IA7GnBA;AAGsCe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BjB,EAGgC,WAAA,MAAA,CAAA;AACAgB,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BjB,EAIgC,WAAA,QAAA,CAAA;AAKvCgB,EAAA;AAAA,EADHC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GARhBjB,EASP,WAAA,QAAA,CAAA;AAUwCgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnB/BjB,EAmBiC,WAAA,aAAA,CAAA;AAUxCgB,EAAA;AAAA,EADHC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5BhBjB,EA6BP,WAAA,WAAA,CAAA;AAUwCgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvC/BjB,EAuCiC,WAAA,YAAA,CAAA;AAChBgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxCfjB,EAwCiB,WAAA,SAAA,CAAA;AACAgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzCfjB,EAyCiB,WAAA,aAAA,CAAA;AACAgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1CfjB,EA0CiB,WAAA,gBAAA,CAAA;AACAgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3CfjB,EA2CiB,WAAA,cAAA,CAAA;AACAgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5CfjB,EA4CiB,WAAA,cAAA,CAAA;AACgBgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7C/BjB,EA6CiC,WAAA,UAAA,CAAA;AAChBgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9CfjB,EA8CiB,WAAA,QAAA,CAAA;AACgBgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/C/BjB,EA+CiC,WAAA,YAAA,CAAA;AACDgB,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhD9BjB,EAgDgC,WAAA,QAAA,CAAA;AACfgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjDfjB,EAiDiB,WAAA,SAAA,CAAA;AACAgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlDfjB,EAkDiB,WAAA,mBAAA,CAAA;AAKxBgB,EAAA;AAAA,EADHC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtDhBjB,EAuDP,WAAA,QAAA,CAAA;AAU4BgB,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAjEnBjB,EAiEqB,WAAA,WAAA,CAAA;AAEJgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfjB,EAmEiB,WAAA,QAAA,CAAA;AAWxBgB,EAAA;AAAA,EADHC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7EhBjB,EA8EP,WAAA,UAAA,CAAA;AA9EC,IAAMkB,IAANlB;AAmVF,eAAe,IAAI,YAAY,KAClC,eAAe,OAAO,cAAckB,CAAS;"}
+{"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; // Counter for generating unique IDs\n\nexport class NysButton extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  @property({ type: String, reflect: true }) id = \"\";\n  @property({ type: String, reflect: true }) name = \"\";\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n  @property({ type: String, reflect: true }) variant:\n    | \"filled\"\n    | \"outline\"\n    | \"ghost\"\n    | \"text\" = \"filled\";\n  @property({ type: Boolean, reflect: true }) inverted = false; //used on dark text\n  @property({ type: String }) label = \"\";\n  @property({ type: String }) ariaLabel = \"\";\n  @property({ type: String }) ariaControls = \"\";\n  @property({ type: String }) prefixIcon = \"\";\n  @property({ type: String }) suffixIcon = \"\";\n  @property({ type: Boolean, reflect: true }) circle = false;\n  @property({ type: String }) icon = \"\";\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: String, reflect: true }) form: string | null = null;\n  @property({ type: String }) value = \"\";\n  @property({ type: String }) ariaDescription = \"\";\n  @property({ type: String, reflect: true }) type:\n    | \"submit\"\n    | \"reset\"\n    | \"button\" = \"button\";\n  @property({ attribute: false }) onClick: ((event: Event) => void) | null =\n    null;\n  @property({ type: String }) href = \"\";\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  // Lifecycle Methods\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  // Functions\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  // Event Handlers\n  // Handle focus event\n  private _handleFocus() {\n    this.dispatchEvent(new Event(\"nys-focus\"));\n  }\n\n  // Handle blur event\n  private _handleBlur() {\n    const button = this.shadowRoot?.querySelector(\".nys-button\");\n    button?.classList.remove(\"active-focus\");\n    this.dispatchEvent(new Event(\"nys-blur\"));\n  }\n\n  private _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this._manageFormAction();\n    this.dispatchEvent(new Event(\"nys-click\"));\n  }\n\n  // Handle keydown for keyboard accessibility\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-button",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "description": "The Button component from the NYS Design System.",
   "module": "dist/nys-button.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.11.4"
+    "@nysds/nys-icon": "^1.12.0"
   },
   "devDependencies": {
     "lit": "^3.3.1",