@nysds/nys-button 1.19.4 → 1.20.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./nys-button";

package/dist/nys-button.d.ts

@@ -0,0 +1,309 @@
+import { NysFormControlElement } from "@nysds/internals";
+import "@nysds/nys-icon";
+/**
+ * A button for actions like saving, submitting, or navigating. Form-associated with full keyboard support.
+ *
+ * Use `filled` for primary actions (one per section), `outline` for secondary, `ghost` for tertiary,
+ * `text` for inline. Set `href` to render as a navigation link.
+ *
+ * ARIA belongs on the component's props, not on the `<nys-button>` host. The host has no role,
+ * so attributes placed there are not mapped into the accessibility tree and never reach the
+ * internal `<button>`. For a disclosure trigger use `ariaExpanded` together with `ariaControls`.
+ *
+ * @summary Button for actions and CTAs with variants, sizes, and icon support.
+ * @element nys-button
+ *
+ * @slot - Button label text. Use as fallback when `label` prop is not provided.
+ * @slot prefix-icon - Icon before label. Not shown for `text` variant.
+ * @slot suffix-icon - Icon after label. Not shown for `text` variant.
+ * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.
+ *
+ * @cssprop [--nys-button-color] - Text color of the button label.
+ * @cssprop [--nys-button-color--hover] - Text color when hovered.
+ * @cssprop [--nys-button-color--active] - Text color when active/pressed.
+ * @cssprop [--nys-button-background-color] - Background color of the button.
+ * @cssprop [--nys-button-background-color--hover] - Background color when hovered.
+ * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.
+ * @cssprop [--nys-button-border-color] - Border color of the button.
+ * @cssprop [--nys-button-border-color--hover] - Border color when hovered.
+ * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.
+ *
+ * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.
+ * @fires nys-focus - Fired when the button receives focus.
+ * @fires nys-blur - Fired when the button loses focus.
+ *
+ * @example Basic
+ * ```html
+ * <nys-button label="Button" variant="filled"></nys-button>
+ * ```
+ *
+ * @example Variant Outline
+ * ```html
+ * <nys-button label="Button" variant="outline"></nys-button>
+ * ```
+ *
+ * @example Variant Ghost
+ * ```html
+ * <nys-button label="Button" variant="ghost"></nys-button>
+ * ```
+ *
+ * @example Variant Text
+ * ```html
+ * <nys-button label="Button" variant="text"></nys-button>
+ * ```
+ *
+ * @example Prefix Icon
+ * ```html
+ * <nys-button label="Previous" prefixIcon="chevron_left"></nys-button>
+ * ```
+ *
+ * @example Suffix Icon
+ * ```html
+ * <nys-button label="Next" suffixIcon="chevron_right"></nys-button>
+ * ```
+ *
+ * @example Slotted Icons
+ * ```html
+ * <nys-button label="Slotted icons">
+ *   <nys-icon color="#db117d" slot="prefix-icon" name="chevron_left"></nys-icon>
+ *   <nys-icon color="#db117d" slot="suffix-icon" name="chevron_right"></nys-icon>
+ * </nys-button>
+ * ```
+ *
+ * @example Circle icon button
+ * ```html
+ * <nys-button circle icon="close" label="Close dialog"></nys-button>
+ * ```
+ *
+ * @example Size Small
+ * ```html
+ * <nys-button label="Small" size="sm"></nys-button>
+ * ```
+ * @example Size Large
+ * ```html
+ * <nys-button label="Large" size="lg"></nys-button>
+ * ```
+ *
+ * @example Full width
+ * ```html
+ * <nys-button label="Full width" fullWidth></nys-button>
+ * ```
+ *
+ * @example Inverted
+ * ```html
+ * <nys-button label="Inverted" inverted></nys-button>
+ * ```
+ * @render Inverted
+ * ```html
+ * <div style="background: #1b1b1b; padding: 1rem;">
+ *   <nys-button label="Inverted" inverted></nys-button>
+ * </div>
+ * ```
+ *
+ * @example Disabled
+ * ```html
+ * <nys-button label="Disabled" disabled></nys-button>
+ * ```
+ *
+ * @example Href
+ * ```html
+ * <nys-button label="Visit NY.gov" href="https://www.ny.gov/" target="_blank" suffixIcon="open_in_new"></nys-button>
+ * ```
+ *
+ * @example Type
+ * ```html
+ * <nys-button type="submit" label="Save Changes" variant="filled"></nys-button>
+ * ```
+ *
+ * @example Disclosure trigger
+ * ```html
+ * <nys-button
+ *   label="Here's how you know"
+ *   ariaExpanded="false"
+ *   ariaControls="trust-bar"
+ * ></nys-button>
+ * ```
+ */
+export declare class NysButton extends NysFormControlElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Unique identifier. Auto-generated if not provided.
+     */
+    id: string;
+    /**
+     * Name for form submission.
+     */
+    name: string;
+    /**
+     * Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.
+     * @default "md"
+     */
+    size: "sm" | "md" | "lg";
+    /**
+     * Expands button to fill container width. Use for mobile layouts or stacked button groups.
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.
+     * @default "filled"
+     */
+    variant: "filled" | "outline" | "ghost" | "text";
+    /**
+     * Adjusts colors for dark backgrounds.
+     * @default false
+     */
+    inverted: boolean;
+    /**
+     * Visible button text. Use sentence case, action-oriented text (e.g., "Save Draft"). In `circle` mode it is visually hidden but still exposed to assistive tech as the accessible name.
+     */
+    label: string;
+    /**
+     * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.
+     *
+     * Set this on `<nys-button>` rather than putting `aria-controls` on the host:
+     * the host has no role, so ARIA placed there is not mapped into the
+     * accessibility tree and never reaches the internal `<button>`.
+     */
+    ariaControls: string;
+    /**
+     * Disclosure state for buttons that show/hide content. Sets `aria-expanded`
+     * on the internal `<button>`/`<a>`.
+     *
+     * Use `"false"` when the controlled content is collapsed and `"true"` when it
+     * is expanded, updating it every time the content toggles. Leave unset for
+     * buttons that are not disclosure triggers — an `aria-expanded` that never
+     * changes is worse than none. Pair with `ariaControls` pointing at the
+     * element being shown or hidden.
+     *
+     * Setting `aria-expanded` directly on the `<nys-button>` host does nothing:
+     * a custom element with no role does not map its ARIA attributes into the
+     * accessibility tree, and host ARIA does not cross into the shadow root.
+     *
+     * @example
+     * ```html
+     * <nys-button
+     *   label="Here's how you know"
+     *   ariaExpanded="false"
+     *   ariaControls="trust-bar"
+     * ></nys-button>
+     * ```
+     */
+    ariaExpanded: "true" | "false" | "";
+    /**
+     * Marks this button as the current item within a set of related controls — the current
+     * page of a pagination control, the current step of a wizard. Sets `aria-current` on the
+     * internal `<button>`/`<a>`.
+     *
+     * Use `"page"` inside a pagination landmark, `"step"` inside a step indicator, and
+     * `"true"` when no more specific token fits. Only one control in a set is ever current:
+     * leave the property unset on all the others rather than setting `"false"`, which the
+     * spec reads as "explicitly not current" and adds nothing.
+     *
+     * Setting `aria-current` directly on the `<nys-button>` host does nothing: a custom
+     * element with no role does not map its ARIA attributes into the accessibility tree,
+     * and host ARIA does not cross into the shadow root.
+     *
+     * @example
+     * ```html
+     * <nys-button label="3" ariaCurrent="page"></nys-button>
+     * ```
+     */
+    ariaCurrent: "page" | "step" | "location" | "date" | "time" | "true" | "false" | "";
+    /**
+     * Material Symbol icon before label. Not shown for `circle` mode.
+     */
+    prefixIcon: string;
+    /**
+     * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.
+     */
+    suffixIcon: string;
+    /**
+     * Renders circular icon-only button. Requires `icon` prop. `label` is rendered as visually-hidden text for the accessible name.
+     * @default false
+     */
+    circle: boolean;
+    /**
+     * Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).
+     */
+    icon: string;
+    /**
+     * Prevents interaction. Avoid disabling without explanation—show validation errors instead.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Form `id` to associate with. Use when button is outside the form element.
+     */
+    form: string | null;
+    /**
+     * Value submitted with form data. Only used when `type="submit"`.
+     */
+    value: string;
+    /**
+     * ID(s) of element(s) describing this button. Sets `aria-describedby`.
+     */
+    ariaDescribedBy: string;
+    /**
+     * Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.
+     * @default "button"
+     */
+    type: "submit" | "reset" | "button";
+    /**
+     * Click handler. Use instead of `@click` to ensure keyboard accessibility.
+     */
+    onClick: ((event: Event) => void) | null;
+    /**
+     * URL to navigate to. Renders as `<a>` tag. Omit for action buttons.
+     */
+    href: string;
+    /**
+     * Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon="open_in_new"`), `_parent`, `_top`, or frame name.
+     * @default "_self"
+     */
+    target: "_self" | "_blank" | "_parent" | "_top" | "framename";
+    private _hasPrefixSlot;
+    private _hasSuffixSlot;
+    private _hasCircleSlot;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     *
+     * Form association, ElementInternals, and id generation are provided by
+     * NysFormControlElement (@nysds/internals). super.connectedCallback() assigns
+     * an id when one is not provided (prefix = the element's localName).
+     */
+    private _onPrefixSlotChange;
+    private _onSuffixSlotChange;
+    private _onCircleSlotChange;
+    private _manageFormAction;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _handleFocus;
+    private _handleBlur;
+    private _handleClick;
+    private _handleKeydown;
+    private _handleKeyup;
+    /**
+     * Handles inline onclick attributes for keyboard activation.
+     *
+     * Native clicks execute inline onclick attributes automatically, but
+     * keyboard activation of the custom element does not trigger that native
+     * behavior. Dispatching a synthetic click lets the browser's own inline
+     * event handler mechanism execute any onclick attribute safely without
+     * eval() or new Function().
+     */
+    private _handleAnyAttributeFunction;
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/nys-button.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/nys-button.js

@@ -1,60 +1,147 @@
-import { LitElement as d, unsafeCSS as v, html as s } from "lit";
-import { property as n, state as u } from "lit/decorators.js";
-import { ifDefined as a } from "lit/directives/if-defined.js";
+import { LitElement as h, unsafeCSS as _, html as a } from "lit";
+import { property as n, state as d } from "lit/decorators.js";
+import { ifDefined as i } from "lit/directives/if-defined.js";
+import "@nysds/nys-icon";
 /*!
    * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Button Component v1.19.4
+   * Button Component v1.20.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
 */
-const h = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius: var(--nys-radius-xl, 12px);--_nys-button-padding--y: calc( var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px) );--_nys-button-cursor: pointer;--_nys-button-padding--x: calc( var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px) );--_nys-button-gap: var(--nys-space-100, 8px);--_nys-button-justify-content: center;--_nys-button-border-style: solid;--_nys-button-border-width: var(--nys-border-width-md, 2px);--_nys-button-outline-width: var(--nys-border-width-md, 2px);--_nys-button-outline-offset: var(--nys-space-2px, 2px);--_nys-button-outline-color: var(--nys-color-focus, #004dd1);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-font-size: var(--nys-font-size-ui-md, 16px);--_nys-button-font-weight: var(--nys-font-weight-semibold, 600);--_nys-button-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-button-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-button-text-decoration: none;display:inline-flex;width:var(--_nys-button-width);vertical-align:middle}:host([size=sm]){--_nys-button-height: var(--nys-size-500, 40px);--_nys-button-padding--y: calc( var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) )}:host([size=lg]){--_nys-button-height: var(--nys-size-700, 56px);--_nys-button-padding--y: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px) )}:host([fullWidth]){width:100%}:host([fullWidth]) .nys-button__linkwrapper{width:100%}:host([fullWidth]) .nys-button{width:100%}:host([variant=filled]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1)}:host([variant=outline]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var(--nys-button-color, var(--nys-color-theme, #154973));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-theme, #154973) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-weaker, #eff6fb) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-theme, #154973) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-theme, #154973) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-weak, #cddde9) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-theme, #154973) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-theme, #154973) );--_nys-button-background-color--disabled: var(--nys-color-surface, #ffffff);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-100, #d0d0ce)}:host([variant=text]){--_nys-button-height: fit-content;--_nys-button-border-radius: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: 0;--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-text-decoration-thickness: var( --nys-font-decoration-thickness-regular, 7% );--_nys-button-text-decoration-thickness--hover: var( --nys-font-decoration-thickness-strong, 14% );--_nys-button-text-decoration-thickness--active: var( --nys-font-decoration-thickness-strong, 14% );--_nys-button-gap: var(--nys-space-50, 4px);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var(--nys-button-color, var(--nys-color-link, #004dd1));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-strong, #003ba1) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-link-strongest, #002971) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost]){--_nys-button-gap: var(--nys-space-50, 4px);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-black-transparent-100, #0000001a) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-black-transparent-200, #00000033) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=filled][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--disabled: var(--nys-color-text, #1b1b1b);--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a)}:host([variant=outline][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-ink-reverse, #ffffff) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse-weak, #d0d0ce) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse-weaker, #bec0c1) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-background-color--disabled: var( --nys-color-surface-reverse, #1b1b1b );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-link-reverse, #a7a9ab) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-reverse-strong, #ededed) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-reverse-strongest, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-white-transparent-200, #ffffff33) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-white-transparent-300, #ffffff4d) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([inverted]){--_nys-button-outline-color: var(--nys-color-focus-reverse, #7aa5e7)}:host([circle]){--_nys-button-width: var(--_nys-button-height);--_nys-button-border-radius: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-radius:var(--_nys-button-border-radius);padding:var(--_nys-button-padding--y) var(--_nys-button-padding--x);display:flex;align-items:center;justify-content:var(--_nys-button-justify-content);gap:var(--_nys-button-gap);font-family:var(--_nys-button-font-family);font-size:var(--_nys-button-font-size);font-weight:var(--_nys-button-font-weight);line-height:var(--_nys-button-line-height);text-decoration:var(--_nys-button-text-decoration);box-sizing:border-box;background-color:var(--_nys-button-background-color);color:var(--_nys-button-color);border-color:var(--_nys-button-border-color);border-style:var(--_nys-button-border-style);border-width:var(--_nys-button-border-width);cursor:var(--_nys-button-cursor)}.nys-button:hover{background-color:var(--_nys-button-background-color--hover);color:var(--_nys-button-color--hover);border-color:var(--_nys-button-border-color--hover);text-decoration-thickness:var(--_nys-button-text-decoration-thickness--hover, auto)}.nys-button:active,.nys-button.active{background-color:var(--_nys-button-background-color--active);color:var(--_nys-button-color--active);border-color:var(--_nys-button-border-color--active);text-decoration-thickness:var(--_nys-button-text-decoration-thickness--active, auto)}.nys-button:disabled,a[disabled]{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled);--_nys-button-cursor: not-allowed}a[disabled]{pointer-events:none}.nys-button:focus-visible{outline-offset:var(--_nys-button-outline-offset);outline:solid var(--_nys-button-outline-width) var(--_nys-button-outline-color)}.nys-button__text{display:flex;align-items:center;-webkit-user-select:none;user-select:none}';
-var _ = Object.defineProperty, r = (y, o, e, i) => {
-  for (var c = void 0, b = y.length - 1, f; b >= 0; b--)
-    (f = y[b]) && (c = f(o, e, c) || c);
-  return c && _(o, e, c), c;
-};
+/*!
+  * New York State Design System v1.20.1
+  * Description: A design system for New York State's digital products.
+  * Repository: https://github.com/its-hcd/nysds
+  * License: MIT
+*/
 let p = 0;
-const l = class l extends d {
-  // allows use of elementInternals' API
-  constructor() {
-    super(), this.id = "", this.name = "", this.size = "md", this.fullWidth = !1, this.variant = "filled", this.inverted = !1, this.label = "", this.ariaLabel = "", this.ariaControls = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescription = "", this.type = "button", this.onClick = null, this.href = "", this.target = "_self", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1, this._hasCircleSlot = !1, this._internals = this.attachInternals();
+function g(c) {
+  return `${c}-${Date.now()}-${p++}`;
+}
+const x = (c) => {
+  class t extends c {
+    get idPrefix() {
+      return this.localName || "nys-element";
+    }
+    ensureId() {
+      this.id || (this.id = g(this.idPrefix));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.ensureId();
+    }
   }
-  connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
+  return t;
+}, k = (c) => {
+  class t extends x(c) {
+    constructor() {
+      super(...arguments), this.__internals = null;
+    }
+    get internals() {
+      if (this.__internals) return this.__internals;
+      if (typeof this.attachInternals == "function")
+        try {
+          this.__internals = this.attachInternals();
+        } catch {
+          this.__internals = null;
+        }
+      return this.__internals;
+    }
+    get defaultRole() {
+      return null;
+    }
+    setHostAria(l, s) {
+      const b = this.internals;
+      if (b && l in b) {
+        b[l] = s;
+        return;
+      }
+      const u = m(l);
+      s === null ? this.removeAttribute(u) : this.setAttribute(u, s);
+    }
+    reflectDefaultSemantics() {
+      const l = this.defaultRole;
+      l && this.setHostAria("role", l);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.reflectDefaultSemantics();
+    }
+  }
+  return t;
+};
+function m(c) {
+  if (c === "role") return "role";
+  const t = c.replace(/^aria/, "");
+  return "aria-" + t.charAt(0).toLowerCase() + t.slice(1);
+}
+const $ = (c) => {
+  const t = class extends k(c) {
+    setFormValue(s) {
+      this.internals?.setFormValue(s ?? null);
+    }
+    setValidityFromState(s, b, u) {
+      const f = this.internals;
+      if (!f) return;
+      const v = Object.values(s).some(Boolean);
+      v ? f.setValidity(s, b ?? "Invalid value", u) : f.setValidity({}), this.setHostAria("ariaInvalid", v ? "true" : "false");
+    }
+    clearValidity() {
+      this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
+    }
+    checkValidity() {
+      return this.internals?.checkValidity() ?? !0;
+    }
+    reportValidity() {
+      return this.internals?.reportValidity() ?? !0;
+    }
+    formResetCallback() {
+      this.clearValidity();
+    }
+  };
+  return t.formAssociated = !0, t;
+}, S = /* @__PURE__ */ $(h), w = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius: var(--nys-radius-xl, 12px);--_nys-button-padding--y: calc( var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px) );--_nys-button-cursor: pointer;--_nys-button-padding--x: calc( var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px) );--_nys-button-gap: var(--nys-space-100, 8px);--_nys-button-justify-content: center;--_nys-button-border-style: solid;--_nys-button-border-width: var(--nys-border-width-md, 2px);--_nys-button-outline-width: var(--nys-border-width-md, 2px);--_nys-button-outline-offset: var(--nys-space-2px, 2px);--_nys-button-outline-color: var(--nys-color-focus, #004dd1);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-font-size: var(--nys-font-size-ui-md, 16px);--_nys-button-font-weight: var(--nys-font-weight-semibold, 600);--_nys-button-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-button-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-button-text-decoration: none;display:inline-flex;width:var(--_nys-button-width);vertical-align:middle}:host([size=sm]){--_nys-button-height: var(--nys-size-500, 40px);--_nys-button-padding--y: calc( var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) )}:host([size=lg]){--_nys-button-height: var(--nys-size-700, 56px);--_nys-button-padding--y: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px) )}:host([fullWidth]){width:100%}:host([fullWidth]) .nys-button__linkwrapper{width:100%}:host([fullWidth]) .nys-button{width:100%}:host([variant=filled]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1)}:host([variant=outline]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var(--nys-button-color, var(--nys-color-theme, #154973));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-theme, #154973) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-weaker, #eff6fb) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-theme, #154973) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-theme, #154973) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-weak, #cddde9) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-theme, #154973) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-theme, #154973) );--_nys-button-background-color--disabled: var(--nys-color-surface, #ffffff);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-100, #d0d0ce)}:host([variant=text]){--_nys-button-height: fit-content;--_nys-button-border-radius: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: 0;--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-text-decoration-thickness: var( --nys-font-decoration-thickness-regular, 7% );--_nys-button-text-decoration-thickness--hover: var( --nys-font-decoration-thickness-strong, 14% );--_nys-button-text-decoration-thickness--active: var( --nys-font-decoration-thickness-strong, 14% );--_nys-button-gap: var(--nys-space-50, 4px);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var(--nys-button-color, var(--nys-color-link, #004dd1));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-strong, #003ba1) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-link-strongest, #002971) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost]){--_nys-button-gap: var(--nys-space-50, 4px);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-black-transparent-100, #0000001a) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-black-transparent-200, #00000033) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=filled][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--disabled: var(--nys-color-text, #1b1b1b);--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a)}:host([variant=outline][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-ink-reverse, #ffffff) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse-weak, #d0d0ce) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse-weaker, #bec0c1) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-background-color--disabled: var( --nys-color-surface-reverse, #1b1b1b );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-link-reverse, #a7a9ab) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-reverse-strong, #ededed) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-reverse-strongest, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-white-transparent-200, #ffffff33) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-white-transparent-300, #ffffff4d) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([inverted]){--_nys-button-outline-color: var(--nys-color-focus-reverse, #7aa5e7)}:host([circle]){--_nys-button-width: var(--_nys-button-height);--_nys-button-border-radius: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-radius:var(--_nys-button-border-radius);padding:var(--_nys-button-padding--y) var(--_nys-button-padding--x);display:flex;align-items:center;justify-content:var(--_nys-button-justify-content);gap:var(--_nys-button-gap);font-family:var(--_nys-button-font-family);font-size:var(--_nys-button-font-size);font-weight:var(--_nys-button-font-weight);line-height:var(--_nys-button-line-height);text-decoration:var(--_nys-button-text-decoration);box-sizing:border-box;background-color:var(--_nys-button-background-color);color:var(--_nys-button-color);border-color:var(--_nys-button-border-color);border-style:var(--_nys-button-border-style);border-width:var(--_nys-button-border-width);cursor:var(--_nys-button-cursor)}.nys-button:hover{background-color:var(--_nys-button-background-color--hover);color:var(--_nys-button-color--hover);border-color:var(--_nys-button-border-color--hover);text-decoration-thickness:var(--_nys-button-text-decoration-thickness--hover, auto)}.nys-button:active,.nys-button.active{background-color:var(--_nys-button-background-color--active);color:var(--_nys-button-color--active);border-color:var(--_nys-button-border-color--active);text-decoration-thickness:var(--_nys-button-text-decoration-thickness--active, auto)}.nys-button:disabled,a[disabled]{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled);--_nys-button-cursor: not-allowed}a[disabled]{pointer-events:none}.nys-button:focus-visible,.active-focus{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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}';
+var C = Object.defineProperty, r = (c, t, e, l) => {
+  for (var s = void 0, b = c.length - 1, u; b >= 0; b--)
+    (u = c[b]) && (s = u(t, e, s) || s);
+  return s && C(t, e, s), s;
+};
+const y = class y extends S {
+  constructor() {
+    super(...arguments), this.id = "", this.name = "", this.size = "md", this.fullWidth = !1, this.variant = "filled", this.inverted = !1, this.label = "", this.ariaControls = "", this.ariaExpanded = "", this.ariaCurrent = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescribedBy = "", this.type = "button", this.onClick = null, this.href = "", this.target = "_self", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1, this._hasCircleSlot = !1;
   }
   /**
    * Functions
    * --------------------------------------------------------------------------
+   *
+   * Form association, ElementInternals, and id generation are provided by
+   * NysFormControlElement (@nysds/internals). super.connectedCallback() assigns
+   * an id when one is not provided (prefix = the element's localName).
    */
-  _generateUniqueId() {
-    return `nys-button-${Date.now()}-${p++}`;
-  }
-  _onPrefixSlotChange(o) {
-    const e = o.target;
+  _onPrefixSlotChange(t) {
+    const e = t.target;
     this._hasPrefixSlot = e.assignedElements({ flatten: !0 }).length > 0;
   }
-  _onSuffixSlotChange(o) {
-    const e = o.target;
+  _onSuffixSlotChange(t) {
+    const e = t.target;
     this._hasSuffixSlot = e.assignedElements({ flatten: !0 }).length > 0;
   }
-  _onCircleSlotChange(o) {
-    const e = o.target;
+  _onCircleSlotChange(t) {
+    const e = t.target;
     this._hasCircleSlot = e.assignedElements({ flatten: !0 }).length > 0;
   }
   _manageFormAction() {
     typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
-    const o = this._internals.form;
-    if (o)
+    const t = this.internals?.form;
+    if (t)
       switch (this.type) {
         case "submit":
-          o.requestSubmit();
+          t.requestSubmit();
           break;
         case "reset":
-          o.reset();
+          t.reset();
           break;
       }
   }
@@ -72,31 +159,31 @@ const l = class l extends d {
       new Event("nys-blur", { bubbles: !0, composed: !0 })
     );
   }
-  _handleClick(o) {
+  _handleClick(t) {
     if (this.disabled) {
-      o.preventDefault();
+      t.preventDefault();
       return;
     }
     this._manageFormAction(), this.dispatchEvent(
       new Event("nys-click", { bubbles: !0, composed: !0 })
     );
   }
-  _handleKeydown(o) {
-    if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
+  _handleKeydown(t) {
+    if (t.code === "Space" || t.code === "Enter" || t.key === " " || t.key === "Enter") {
       if (this.disabled) return;
-      o.preventDefault();
+      t.preventDefault();
       const e = this.renderRoot.querySelector(".nys-button");
       if (e?.classList.add("active"), setTimeout(() => e?.classList.remove("active"), 150), this.href) {
-        const i = this.renderRoot.querySelector(
+        const l = this.renderRoot.querySelector(
           "a.nys-button"
         );
-        i && i.click();
+        l && l.click();
       } else
-        this._handleAnyAttributeFunction(), this._handleClick(o);
+        this._handleAnyAttributeFunction(), this._handleClick(t);
     }
   }
-  _handleKeyup(o) {
-    (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") && this.renderRoot.querySelector(".nys-button")?.classList.remove("active");
+  _handleKeyup(t) {
+    (t.code === "Space" || t.code === "Enter" || t.key === " " || t.key === "Enter") && this.renderRoot.querySelector(".nys-button")?.classList.remove("active");
   }
   /**
    * Handles inline onclick attributes for keyboard activation.
@@ -110,22 +197,22 @@ const l = class l extends d {
   _handleAnyAttributeFunction() {
     this.click();
   }
-  focus(o) {
+  focus(t) {
     const e = this.renderRoot.querySelector(
       this.href ? "a.nys-button" : "button.nys-button"
     );
-    e ? e.focus(o) : super.focus(o);
+    e ? e.focus(t) : super.focus(t);
   }
   render() {
-    return s`
-      ${this.href ? s`
+    return a`
+      ${this.href ? a`
             <div class="nys-button__linkwrapper">
               <a
                 class="nys-button"
-                name=${a(this.name ? this.name : void 0)}
+                name=${i(this.name ? this.name : void 0)}
                 ?disabled=${this.disabled}
                 aria-disabled="${this.disabled ? "true" : "false"}"
-                value=${a(this.value ? this.value : void 0)}
+                value=${i(this.value ? this.value : void 0)}
                 href=${this.href}
                 target=${this.target}
                 @click=${this._handleClick}
@@ -133,29 +220,29 @@ const l = class l extends d {
                 @blur="${this._handleBlur}"
                 @keydown="${this._handleKeydown}"
                 @keyup="${this._handleKeyup}"
-                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)}
+                aria-describedby=${i(this.ariaDescribedBy || void 0)}
+                aria-expanded=${i(this.ariaExpanded || void 0)}
+                aria-current=${i(this.ariaCurrent || void 0)}
               >
                 <slot
                   name="prefix-icon"
                   @slotchange=${this._onPrefixSlotChange}
                   ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}
                 >
-                  ${this.prefixIcon ? s`<nys-icon
+                  ${this.prefixIcon ? a`<nys-icon
                         size="16"
                         name=${this.prefixIcon}
                       ></nys-icon>` : ""}
                 </slot>
-                ${this.circle ? "" : this.label ? s`<div class="nys-button__text">${this.label}</div>` : s` <slot class="nys-button__default-slot"></slot> `}
+                ${this.circle ? a`<div class="nys-button__text sr-only">
+                      ${this.label}
+                    </div>` : this.label ? a`<div class="nys-button__text">${this.label}</div>` : a` <slot class="nys-button__default-slot"></slot> `}
                 <slot
                   name="suffix-icon"
                   @slotchange=${this._onSuffixSlotChange}
                   ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}
                 >
-                  ${this.suffixIcon ? s`<nys-icon
+                  ${this.suffixIcon ? a`<nys-icon
                         size="16"
                         name=${this.suffixIcon}
                       ></nys-icon>` : ""}
@@ -165,52 +252,50 @@ const l = class l extends d {
                   @slotchange=${this._onCircleSlotChange}
                   ?hidden=${!this.circle || !this.icon && !this._hasCircleSlot}
                 >
-                  ${this.icon ? s`<nys-icon
+                  ${this.icon ? a`<nys-icon
                         size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                         name=${this.icon}
                       ></nys-icon>` : ""}
                 </slot>
               </a>
             </div>
-          ` : s`
+          ` : a`
             <button
               class="nys-button"
-              name=${a(this.name ? this.name : void 0)}
+              name=${i(this.name ? this.name : void 0)}
               ?disabled=${this.disabled}
-              aria-disabled="${this.disabled ? "true" : "false"}"
-              form=${a(this.form || void 0)}
-              value=${a(this.value ? this.value : void 0)}
+              form=${i(this.form || void 0)}
+              value=${i(this.value ? this.value : void 0)}
               type=${this.type}
-              aria-controls=${a(this.ariaControls || void 0)}
+              aria-controls=${i(this.ariaControls || void 0)}
               @click=${this._handleClick}
-              @focus="${this._handleFocus}"
-              @blur="${this._handleBlur}"
-              @keydown="${this._handleKeydown}"
-              @keyup="${this._handleKeyup}"
-              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"
+              @focus=${this._handleFocus}
+              @blur=${this._handleBlur}
+              @keydown=${this._handleKeydown}
+              @keyup=${this._handleKeyup}
+              aria-describedby=${i(this.ariaDescribedBy || void 0)}
+              aria-expanded=${i(this.ariaExpanded || void 0)}
+              aria-current=${i(this.ariaCurrent || void 0)}
             >
               <slot
                 name="prefix-icon"
                 @slotchange=${this._onPrefixSlotChange}
                 ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}
               >
-                ${this.prefixIcon ? s`<nys-icon
+                ${this.prefixIcon ? a`<nys-icon
                       size="16"
                       name=${this.prefixIcon}
                     ></nys-icon>` : ""}
               </slot>
-              ${this.circle ? "" : this.label ? s`<div class="nys-button__text">${this.label}</div>` : s` <slot class="nys-button__default-slot"></slot> `}
+              ${this.circle ? a`<div class="nys-button__text sr-only">
+                    ${this.label}
+                  </div>` : this.label ? a`<div class="nys-button__text">${this.label}</div>` : a` <slot class="nys-button__default-slot"></slot> `}
               <slot
                 name="suffix-icon"
                 @slotchange=${this._onSuffixSlotChange}
                 ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}
               >
-                ${this.suffixIcon ? s`<nys-icon
+                ${this.suffixIcon ? a`<nys-icon
                       size="16"
                       name=${this.suffixIcon}
                     ></nys-icon>` : ""}
@@ -220,7 +305,7 @@ const l = class l extends d {
                 @slotchange=${this._onCircleSlotChange}
                 ?hidden=${!this.circle || !this.icon && !this._hasCircleSlot}
               >
-                ${this.icon ? s`<nys-icon
+                ${this.icon ? a`<nys-icon
                       size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                       name=${this.icon}
                     ></nys-icon>` : ""}
@@ -230,85 +315,88 @@ const l = class l extends d {
     `;
   }
 };
-l.styles = v(h), l.shadowRootOptions = {
-  ...d.shadowRootOptions,
+y.styles = _(w), y.shadowRootOptions = {
+  ...h.shadowRootOptions,
   delegatesFocus: !0
-}, l.formAssociated = !0;
-let t = l;
+};
+let o = y;
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "id");
+], o.prototype, "id");
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "name");
+], o.prototype, "name");
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "size");
+], o.prototype, "size");
 r([
   n({ type: Boolean, reflect: !0 })
-], t.prototype, "fullWidth");
+], o.prototype, "fullWidth");
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "variant");
+], o.prototype, "variant");
 r([
   n({ type: Boolean, reflect: !0 })
-], t.prototype, "inverted");
+], o.prototype, "inverted");
+r([
+  n({ type: String })
+], o.prototype, "label");
 r([
   n({ type: String })
-], t.prototype, "label");
+], o.prototype, "ariaControls");
 r([
   n({ type: String })
-], t.prototype, "ariaLabel");
+], o.prototype, "ariaExpanded");
 r([
   n({ type: String })
-], t.prototype, "ariaControls");
+], o.prototype, "ariaCurrent");
 r([
   n({ type: String })
-], t.prototype, "prefixIcon");
+], o.prototype, "prefixIcon");
 r([
   n({ type: String })
-], t.prototype, "suffixIcon");
+], o.prototype, "suffixIcon");
 r([
   n({ type: Boolean, reflect: !0 })
-], t.prototype, "circle");
+], o.prototype, "circle");
 r([
   n({ type: String })
-], t.prototype, "icon");
+], o.prototype, "icon");
 r([
   n({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
+], o.prototype, "disabled");
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "form");
+], o.prototype, "form");
 r([
   n({ type: String })
-], t.prototype, "value");
+], o.prototype, "value");
 r([
   n({ type: String })
-], t.prototype, "ariaDescription");
+], o.prototype, "ariaDescribedBy");
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "type");
+], o.prototype, "type");
 r([
   n({ attribute: !1 })
-], t.prototype, "onClick");
+], o.prototype, "onClick");
 r([
   n({ type: String })
-], t.prototype, "href");
+], o.prototype, "href");
 r([
   n({ type: String, reflect: !0 })
-], t.prototype, "target");
+], o.prototype, "target");
 r([
-  u()
-], t.prototype, "_hasPrefixSlot");
+  d()
+], o.prototype, "_hasPrefixSlot");
 r([
-  u()
-], t.prototype, "_hasSuffixSlot");
+  d()
+], o.prototype, "_hasSuffixSlot");
 r([
-  u()
-], t.prototype, "_hasCircleSlot");
-customElements.get("nys-button") || customElements.define("nys-button", t);
+  d()
+], o.prototype, "_hasCircleSlot");
+customElements.get("nys-button") || customElements.define("nys-button", o);
 export {
-  t as NysButton
+  o 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, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-button.scss?inline\";\n\nlet buttonIdCounter = 0;\n\n/**\n * A button for actions like saving, submitting, or navigating. Form-associated with full keyboard support.\n *\n * Use `filled` for primary actions (one per section), `outline` for secondary, `ghost` for tertiary,\n * `text` for inline. Set `href` to render as a navigation link.\n *\n * @summary Button for actions and CTAs with variants, sizes, and icon support.\n * @element nys-button\n *\n * @slot - Button label text. Use as fallback when `label` prop is not provided.\n * @slot prefix-icon - Icon before label. Not shown for `text` variant.\n * @slot suffix-icon - Icon after label. Not shown for `text` variant.\n * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.\n *\n * @cssprop [--nys-button-color] - Text color of the button label.\n * @cssprop [--nys-button-color--hover] - Text color when hovered.\n * @cssprop [--nys-button-color--active] - Text color when active/pressed.\n * @cssprop [--nys-button-background-color] - Background color of the button.\n * @cssprop [--nys-button-background-color--hover] - Background color when hovered.\n * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--nys-button-border-color] - Border color of the button.\n * @cssprop [--nys-button-border-color--hover] - Border color when hovered.\n * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.\n *\n * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires nys-focus - Fired when the button receives focus.\n * @fires nys-blur - Fired when the button loses focus.\n *\n * @example Basic\n * ```html\n * <nys-button label=\"Button\" variant=\"filled\"></nys-button>\n * ```\n *\n * @example Variant Outline\n * ```html\n * <nys-button label=\"Button\" variant=\"outline\"></nys-button>\n * ```\n *\n * @example Variant Ghost\n * ```html\n * <nys-button label=\"Button\" variant=\"ghost\"></nys-button>\n * ```\n *\n * @example Variant Text\n * ```html\n * <nys-button label=\"Button\" variant=\"text\"></nys-button>\n * ```\n *\n * @example Prefix Icon\n * ```html\n * <nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>\n * ```\n *\n * @example Suffix Icon\n * ```html\n * <nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>\n * ```\n *\n * @example Slotted Icons\n * ```html\n * <nys-button label=\"Slotted icons\">\n *   <nys-icon color=\"#db117d\" slot=\"prefix-icon\" name=\"chevron_left\"></nys-icon>\n *   <nys-icon color=\"#db117d\" slot=\"suffix-icon\" name=\"chevron_right\"></nys-icon>\n * </nys-button>\n * ```\n *\n * @example Circle icon button\n * ```html\n * <nys-button circle icon=\"close\" label=\"Close dialog\"></nys-button>\n * ```\n *\n * @example Size Small\n * ```html\n * <nys-button label=\"Small\" size=\"sm\"></nys-button>\n * ```\n * @example Size Large\n * ```html\n * <nys-button label=\"Large\" size=\"lg\"></nys-button>\n * ```\n *\n * @example Full width\n * ```html\n * <nys-button label=\"Full width\" fullWidth></nys-button>\n * ```\n *\n * @example Inverted\n * ```html\n * <nys-button label=\"Inverted\" inverted></nys-button>\n * ```\n * @render Inverted\n * ```html\n * <div style=\"background: #1b1b1b; padding: 1rem;\">\n *   <nys-button label=\"Inverted\" inverted></nys-button>\n * </div>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-button label=\"Disabled\" disabled></nys-button>\n * ```\n *\n * @example Href\n * ```html\n * <nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>\n * ```\n *\n * @example Type\n * ```html\n * <nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>\n * ```\n */\n\nexport class NysButton extends LitElement {\n  static styles = unsafeCSS(styles);\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Unique identifier. Auto-generated if not provided.\n   */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /**\n   * Name for form submission.\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /**\n   * Button height: `sm` (40px) for dense UIs, `md` (48px, default) for standard use, `lg` (56px) for prominent CTAs.\n   * @default \"md\"\n   */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n  /**\n   * Expands button to fill container width. Use for mobile layouts or stacked button groups.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /**\n   * Visual style: `filled` for primary (one per section), `outline` for secondary, `ghost` for tertiary, `text` for inline actions. Avoid `text` for navigation.\n   * @default \"filled\"\n   */\n  @property({ type: String, reflect: true }) variant:\n    | \"filled\"\n    | \"outline\"\n    | \"ghost\"\n    | \"text\" = \"filled\";\n\n  /**\n   * Adjusts colors for dark backgrounds.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n\n  /**\n   * Visible button text. Use sentence case, action-oriented text (e.g., \"Save Draft\"). Becomes aria-label in `circle` mode.\n   */\n  @property({ type: String }) label = \"\";\n\n  /**\n   * Screen reader label. Required for icon-only buttons if `label` is not set.\n   */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**\n   * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.\n   */\n  @property({ type: String }) ariaControls = \"\";\n\n  /**\n   * Material Symbol icon before label. Not shown for `circle` mode.\n   */\n  @property({ type: String }) prefixIcon = \"\";\n\n  /**\n   * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.\n   */\n  @property({ type: String }) suffixIcon = \"\";\n\n  /**\n   * Renders circular icon-only button. Requires `icon` prop. `label` becomes aria-label.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) circle = false;\n\n  /**\n   * Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px).\n   */\n  @property({ type: String }) icon = \"\";\n\n  /**\n   * Prevents interaction. Avoid disabling without explanation—show validation errors instead.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Form `id` to associate with. Use when button is outside the form element.\n   */\n  @property({ type: String, reflect: true }) form: string | null = null;\n\n  /**\n   * Value submitted with form data. Only used when `type=\"submit\"`.\n   */\n  @property({ type: String }) value = \"\";\n\n  /**\n   * Additional screen reader description. Sets `aria-description`.\n   */\n  @property({ type: String }) ariaDescription = \"\";\n\n  /**\n   * Form behavior: `button` (default, no form action), `submit` (submits form), `reset` (resets form). Always set explicitly to avoid unintended submissions.\n   * @default \"button\"\n   */\n  @property({ type: String, reflect: true }) type:\n    | \"submit\"\n    | \"reset\"\n    | \"button\" = \"button\";\n\n  /**\n   * Click handler. Use instead of `@click` to ensure keyboard accessibility.\n   */\n  @property({ attribute: false }) onClick: ((event: Event) => void) | null =\n    null;\n\n  /**\n   * URL to navigate to. Renders as `<a>` tag. Omit for action buttons.\n   */\n  @property({ type: String }) href = \"\";\n\n  /**\n   * Link target: `_self` (same tab), `_blank` (new tab—add `suffixIcon=\"open_in_new\"`), `_parent`, `_top`, or frame name.\n   * @default \"_self\"\n   */\n  @property({ type: String, reflect: true }) target:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | \"framename\" = \"_self\";\n\n  private _internals: ElementInternals;\n\n  @state() private _hasPrefixSlot = false;\n  @state() private _hasSuffixSlot = false;\n  @state() private _hasCircleSlot = false;\n\n  /**\n   * Lifecycle methods\n   * --------------------------------------------------------------------------\n   */\n\n  static formAssociated = true; // allows use of elementInternals' API\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Generate a unique ID if not provided\n    if (!this.id) {\n      this.id = this._generateUniqueId();\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _generateUniqueId() {\n    return `nys-button-${Date.now()}-${buttonIdCounter++}`;\n  }\n\n  private _onPrefixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onSuffixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onCircleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasCircleSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _manageFormAction() {\n    // If an onClick function is provided, call it\n    if (typeof this.onClick === \"function\" && this.onClick !== null) {\n      this.onClick(new Event(\"click\")); // Call user-provided onClick function with a fake click event\n    }\n\n    // If part of a form, perform the corresponding action based on button's \"type\"\n    const form = this._internals.form;\n\n    if (form) {\n      switch (this.type) {\n        case \"submit\":\n          form.requestSubmit();\n          break;\n        case \"reset\":\n          form.reset();\n          break;\n        case \"button\":\n      }\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private _handleFocus() {\n    this.dispatchEvent(\n      new Event(\"nys-focus\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleBlur() {\n    const button = this.shadowRoot?.querySelector(\".nys-button\");\n    button?.classList.remove(\"active-focus\");\n    this.dispatchEvent(\n      new Event(\"nys-blur\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this._manageFormAction();\n    this.dispatchEvent(\n      new Event(\"nys-click\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      if (this.disabled) return;\n\n      e.preventDefault();\n      const btn = this.renderRoot.querySelector(\".nys-button\");\n      btn?.classList.add(\"active\");\n      setTimeout(() => btn?.classList.remove(\"active\"), 150);\n\n      if (this.href) {\n        // Click the internal <a> so native navigation happens\n        const linkEl = this.renderRoot.querySelector(\n          \"a.nys-button\",\n        ) as HTMLAnchorElement;\n        if (linkEl) {\n          linkEl.click();\n        }\n      } else {\n        this._handleAnyAttributeFunction();\n        this._handleClick(e);\n      }\n    }\n  }\n\n  private _handleKeyup(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      this.renderRoot.querySelector(\".nys-button\")?.classList.remove(\"active\");\n    }\n  }\n\n  /**\n   * Handles inline onclick attributes for keyboard activation.\n   *\n   * Native clicks execute inline onclick attributes automatically, but\n   * keyboard activation of the custom element does not trigger that native\n   * behavior. Dispatching a synthetic click lets the browser's own inline\n   * event handler mechanism execute any onclick attribute safely without\n   * eval() or new Function().\n   */\n  private _handleAnyAttributeFunction() {\n    this.click();\n  }\n\n  public focus(options?: FocusOptions) {\n    const innerEl = this.renderRoot.querySelector(\n      this.href ? \"a.nys-button\" : \"button.nys-button\",\n    ) as HTMLElement | null;\n\n    if (innerEl) {\n      innerEl.focus(options);\n    } else {\n      // fallback: focus host\n      super.focus(options);\n    }\n  }\n\n  render() {\n    return html`\n      ${this.href\n        ? html`\n            <div class=\"nys-button__linkwrapper\">\n              <a\n                class=\"nys-button\"\n                name=${ifDefined(this.name ? this.name : undefined)}\n                ?disabled=${this.disabled}\n                aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n                value=${ifDefined(this.value ? this.value : undefined)}\n                href=${this.href}\n                target=${this.target}\n                @click=${this._handleClick}\n                @focus=\"${this._handleFocus}\"\n                @blur=\"${this._handleBlur}\"\n                @keydown=\"${this._handleKeydown}\"\n                @keyup=\"${this._handleKeyup}\"\n                tabindex=\"${this.disabled ? -1 : 0}\"\n                aria-label=${ifDefined(\n                  this.ariaLabel ||\n                    this.label ||\n                    (this.circle ? this.icon : null) ||\n                    \"button\",\n                )}\n                aria-description=${ifDefined(this.ariaDescription || undefined)}\n              >\n                <slot\n                  name=\"prefix-icon\"\n                  @slotchange=${this._onPrefixSlotChange}\n                  ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n                >\n                  ${this.prefixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.prefixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                ${!this.circle\n                  ? this.label\n                    ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                    : html` <slot class=\"nys-button__default-slot\"></slot> `\n                  : \"\"}\n                <slot\n                  name=\"suffix-icon\"\n                  @slotchange=${this._onSuffixSlotChange}\n                  ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n                >\n                  ${this.suffixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.suffixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                <slot\n                  name=\"circle-icon\"\n                  @slotchange=${this._onCircleSlotChange}\n                  ?hidden=${!this.circle ||\n                  (!this.icon && !this._hasCircleSlot)}\n                >\n                  ${this.icon\n                    ? html`<nys-icon\n                        size=${this.size === \"sm\"\n                          ? \"24\"\n                          : this.size === \"lg\"\n                            ? \"40\"\n                            : \"32\"}\n                        name=${this.icon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n              </a>\n            </div>\n          `\n        : html`\n            <button\n              class=\"nys-button\"\n              name=${ifDefined(this.name ? this.name : undefined)}\n              ?disabled=${this.disabled}\n              aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n              form=${ifDefined(this.form || undefined)}\n              value=${ifDefined(this.value ? this.value : undefined)}\n              type=${this.type}\n              aria-controls=${ifDefined(this.ariaControls || undefined)}\n              @click=${this._handleClick}\n              @focus=\"${this._handleFocus}\"\n              @blur=\"${this._handleBlur}\"\n              @keydown=\"${this._handleKeydown}\"\n              @keyup=\"${this._handleKeyup}\"\n              tabindex=\"${this.disabled ? -1 : 0}\"\n              aria-label=${ifDefined(\n                this.ariaLabel ||\n                  this.label ||\n                  (this.circle ? this.icon : null) ||\n                  this.prefixIcon ||\n                  this.suffixIcon ||\n                  \"button\",\n              )}\n              aria-description=${ifDefined(this.ariaDescription || undefined)}\n              role=\"button\"\n            >\n              <slot\n                name=\"prefix-icon\"\n                @slotchange=${this._onPrefixSlotChange}\n                ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n              >\n                ${this.prefixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.prefixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              ${!this.circle\n                ? this.label\n                  ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                  : html` <slot class=\"nys-button__default-slot\"></slot> `\n                : \"\"}\n              <slot\n                name=\"suffix-icon\"\n                @slotchange=${this._onSuffixSlotChange}\n                ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n              >\n                ${this.suffixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.suffixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              <slot\n                name=\"circle-icon\"\n                @slotchange=${this._onCircleSlotChange}\n                ?hidden=${!this.circle || (!this.icon && !this._hasCircleSlot)}\n              >\n                ${this.icon\n                  ? html`<nys-icon\n                      size=${this.size === \"sm\"\n                        ? \"24\"\n                        : this.size === \"lg\"\n                          ? \"40\"\n                          : \"32\"}\n                      name=${this.icon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n            </button>\n          `}\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-button\")) {\n  customElements.define(\"nys-button\", NysButton);\n}\n"],"names":["buttonIdCounter","_NysButton","LitElement","e","slot","form","event","btn","linkEl","options","innerEl","html","ifDefined","unsafeCSS","styles","NysButton","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"nys-button.js","sources":["../../internals/dist/index.js","../src/nys-button.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/*!\n   * New York State Design System v1.20.1\n   * Description: A design system for New York State's digital products.\n   * Repository: https://github.com/its-hcd/nysds\n   * License: MIT\n */\nlet y = 0;\nfunction f(e) {\n  return `${e}-${Date.now()}-${y++}`;\n}\nconst p = {\n  labelledby: \"ariaLabelledByElements\",\n  describedby: \"ariaDescribedByElements\"\n}, A = {\n  labelledby: \"ariaLabel\",\n  describedby: \"ariaDescription\"\n};\nfunction R(e) {\n  return \"ariaDescribedByElements\" in e;\n}\nfunction _(e) {\n  return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n  return e.filter((t) => !!t);\n}\nfunction E(e) {\n  return e.map((t) => (t.id || (t.id = f(\"nys-ref\")), t.id));\n}\nfunction V(e, t, n) {\n  const i = d(n), r = _(t);\n  i.length ? e.setAttribute(r, E(i).join(\" \")) : e.removeAttribute(r);\n}\nfunction x(e, t, n, i, r) {\n  const s = d(i), a = p[n], l = t;\n  if (a && R(t)) {\n    l[a] = s.length ? s : null;\n    return;\n  }\n  const o = A[n];\n  if (!o) return;\n  const c = r ?? (s.length ? s.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n  o in l ? l[o] = c || null : c ? e.setAttribute(\n    n === \"labelledby\" ? \"aria-label\" : \"aria-description\",\n    c\n  ) : e.removeAttribute(\n    n === \"labelledby\" ? \"aria-label\" : \"aria-description\"\n  );\n}\nconst g = {\n  labelledby: \"ariaLabelledByElements\",\n  describedby: \"ariaDescribedByElements\"\n}, C = {\n  labelledby: \"aria-label\",\n  describedby: \"aria-description\"\n};\nfunction L(e, t, n) {\n  const i = d(n), r = g[t], s = C[t], a = e;\n  if (r && r in e && (a[r] = i.length ? i : null), !s) return;\n  const l = i.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n  l ? e.setAttribute(s, l) : e.removeAttribute(s);\n}\nconst b = (e) => {\n  class t extends e {\n    get idPrefix() {\n      return this.localName || \"nys-element\";\n    }\n    ensureId() {\n      this.id || (this.id = f(this.idPrefix));\n    }\n    connectedCallback() {\n      super.connectedCallback(), this.ensureId();\n    }\n  }\n  return t;\n}, P = /* @__PURE__ */ b(u), h = (e) => {\n  class t extends b(e) {\n    constructor() {\n      super(...arguments), this.__internals = null;\n    }\n    get internals() {\n      if (this.__internals) return this.__internals;\n      if (typeof this.attachInternals == \"function\")\n        try {\n          this.__internals = this.attachInternals();\n        } catch {\n          this.__internals = null;\n        }\n      return this.__internals;\n    }\n    get defaultRole() {\n      return null;\n    }\n    setHostAria(i, r) {\n      const s = this.internals;\n      if (s && i in s) {\n        s[i] = r;\n        return;\n      }\n      const a = v(i);\n      r === null ? this.removeAttribute(a) : this.setAttribute(a, r);\n    }\n    reflectDefaultSemantics() {\n      const i = this.defaultRole;\n      i && this.setHostAria(\"role\", i);\n    }\n    connectedCallback() {\n      super.connectedCallback(), this.reflectDefaultSemantics();\n    }\n  }\n  return t;\n};\nfunction v(e) {\n  if (e === \"role\") return \"role\";\n  const t = e.replace(/^aria/, \"\");\n  return \"aria-\" + t.charAt(0).toLowerCase() + t.slice(1);\n}\nconst T = /* @__PURE__ */ h(u), I = (e) => {\n  const n = class n extends h(e) {\n    setFormValue(r) {\n      this.internals?.setFormValue(r ?? null);\n    }\n    setValidityFromState(r, s, a) {\n      const l = this.internals;\n      if (!l) return;\n      const o = Object.values(r).some(Boolean);\n      o ? l.setValidity(r, s ?? \"Invalid value\", a) : l.setValidity({}), this.setHostAria(\"ariaInvalid\", o ? \"true\" : \"false\");\n    }\n    clearValidity() {\n      this.internals?.setValidity({}), this.setHostAria(\"ariaInvalid\", \"false\");\n    }\n    checkValidity() {\n      return this.internals?.checkValidity() ?? !0;\n    }\n    reportValidity() {\n      return this.internals?.reportValidity() ?? !0;\n    }\n    formResetCallback() {\n      this.clearValidity();\n    }\n  };\n  n.formAssociated = !0;\n  let t = n;\n  return t;\n}, w = /* @__PURE__ */ I(u);\nfunction O(e) {\n  const t = e.tagName.toLowerCase(), n = /* @__PURE__ */ new Set(), i = (r) => {\n    r.querySelectorAll(\"*\").forEach((s) => {\n      const a = s.tagName.toLowerCase();\n      a.startsWith(\"nys-\") && a !== t && !customElements.get(a) && n.add(a), s.shadowRoot && i(s.shadowRoot);\n    });\n  };\n  return e.shadowRoot && i(e.shadowRoot), i(e), [...n].sort();\n}\nexport {\n  I as FormControlMixin,\n  b as IdentifiedMixin,\n  P as NysElement,\n  w as NysFormControlElement,\n  T as NysReflectsAriaElement,\n  h as ReflectsAriaMixin,\n  V as associateControl,\n  L as associateControlRefs,\n  x as associateHost,\n  O as findUnregisteredChildren,\n  f as generateId,\n  R as supportsElementRefs\n};\n//# sourceMappingURL=index.js.map\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { NysFormControlElement } from \"@nysds/internals\";\n// This element is rendered inside this component's shadow DOM as the default\n// prefix/suffix/circle icon content, so it must be registered whenever\n// nys-button is used. Importing it here (intentional side effect) guarantees\n// it always renders.\nimport \"@nysds/nys-icon\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-button.scss?inline\";\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 * ARIA belongs on the component's props, not on the `<nys-button>` host. The host has no role,\n * so attributes placed there are not mapped into the accessibility tree and never reach the\n * internal `<button>`. For a disclosure trigger use `ariaExpanded` together with `ariaControls`.\n *\n * @summary Button for actions and CTAs with variants, sizes, and icon support.\n * @element nys-button\n *\n * @slot - Button label text. Use as fallback when `label` prop is not provided.\n * @slot prefix-icon - Icon before label. Not shown for `text` variant.\n * @slot suffix-icon - Icon after label. Not shown for `text` variant.\n * @slot circle-icon - Icon for circle mode. Overrides `icon` prop.\n *\n * @cssprop [--nys-button-color] - Text color of the button label.\n * @cssprop [--nys-button-color--hover] - Text color when hovered.\n * @cssprop [--nys-button-color--active] - Text color when active/pressed.\n * @cssprop [--nys-button-background-color] - Background color of the button.\n * @cssprop [--nys-button-background-color--hover] - Background color when hovered.\n * @cssprop [--nys-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--nys-button-border-color] - Border color of the button.\n * @cssprop [--nys-button-border-color--hover] - Border color when hovered.\n * @cssprop [--nys-button-border-color--active] - Border color when active/pressed.\n *\n * @fires nys-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires nys-focus - Fired when the button receives focus.\n * @fires nys-blur - Fired when the button loses focus.\n *\n * @example Basic\n * ```html\n * <nys-button label=\"Button\" variant=\"filled\"></nys-button>\n * ```\n *\n * @example Variant Outline\n * ```html\n * <nys-button label=\"Button\" variant=\"outline\"></nys-button>\n * ```\n *\n * @example Variant Ghost\n * ```html\n * <nys-button label=\"Button\" variant=\"ghost\"></nys-button>\n * ```\n *\n * @example Variant Text\n * ```html\n * <nys-button label=\"Button\" variant=\"text\"></nys-button>\n * ```\n *\n * @example Prefix Icon\n * ```html\n * <nys-button label=\"Previous\" prefixIcon=\"chevron_left\"></nys-button>\n * ```\n *\n * @example Suffix Icon\n * ```html\n * <nys-button label=\"Next\" suffixIcon=\"chevron_right\"></nys-button>\n * ```\n *\n * @example Slotted Icons\n * ```html\n * <nys-button label=\"Slotted icons\">\n *   <nys-icon color=\"#db117d\" slot=\"prefix-icon\" name=\"chevron_left\"></nys-icon>\n *   <nys-icon color=\"#db117d\" slot=\"suffix-icon\" name=\"chevron_right\"></nys-icon>\n * </nys-button>\n * ```\n *\n * @example Circle icon button\n * ```html\n * <nys-button circle icon=\"close\" label=\"Close dialog\"></nys-button>\n * ```\n *\n * @example Size Small\n * ```html\n * <nys-button label=\"Small\" size=\"sm\"></nys-button>\n * ```\n * @example Size Large\n * ```html\n * <nys-button label=\"Large\" size=\"lg\"></nys-button>\n * ```\n *\n * @example Full width\n * ```html\n * <nys-button label=\"Full width\" fullWidth></nys-button>\n * ```\n *\n * @example Inverted\n * ```html\n * <nys-button label=\"Inverted\" inverted></nys-button>\n * ```\n * @render Inverted\n * ```html\n * <div style=\"background: #1b1b1b; padding: 1rem;\">\n *   <nys-button label=\"Inverted\" inverted></nys-button>\n * </div>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-button label=\"Disabled\" disabled></nys-button>\n * ```\n *\n * @example Href\n * ```html\n * <nys-button label=\"Visit NY.gov\" href=\"https://www.ny.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></nys-button>\n * ```\n *\n * @example Type\n * ```html\n * <nys-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></nys-button>\n * ```\n *\n * @example Disclosure trigger\n * ```html\n * <nys-button\n *   label=\"Here's how you know\"\n *   ariaExpanded=\"false\"\n *   ariaControls=\"trust-bar\"\n * ></nys-button>\n * ```\n */\n\nexport class NysButton extends NysFormControlElement {\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\"). In `circle` mode it is visually hidden but still exposed to assistive tech as the accessible name.\n   */\n  @property({ type: String }) label = \"\";\n\n  /**\n   * ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`.\n   *\n   * Set this on `<nys-button>` rather than putting `aria-controls` on the host:\n   * the host has no role, so ARIA placed there is not mapped into the\n   * accessibility tree and never reaches the internal `<button>`.\n   */\n  @property({ type: String }) ariaControls = \"\";\n\n  /**\n   * Disclosure state for buttons that show/hide content. Sets `aria-expanded`\n   * on the internal `<button>`/`<a>`.\n   *\n   * Use `\"false\"` when the controlled content is collapsed and `\"true\"` when it\n   * is expanded, updating it every time the content toggles. Leave unset for\n   * buttons that are not disclosure triggers — an `aria-expanded` that never\n   * changes is worse than none. Pair with `ariaControls` pointing at the\n   * element being shown or hidden.\n   *\n   * Setting `aria-expanded` directly on the `<nys-button>` host does nothing:\n   * a custom element with no role does not map its ARIA attributes into the\n   * accessibility tree, and host ARIA does not cross into the shadow root.\n   *\n   * @example\n   * ```html\n   * <nys-button\n   *   label=\"Here's how you know\"\n   *   ariaExpanded=\"false\"\n   *   ariaControls=\"trust-bar\"\n   * ></nys-button>\n   * ```\n   */\n  @property({ type: String }) ariaExpanded: \"true\" | \"false\" | \"\" = \"\";\n\n  /**\n   * Marks this button as the current item within a set of related controls — the current\n   * page of a pagination control, the current step of a wizard. Sets `aria-current` on the\n   * internal `<button>`/`<a>`.\n   *\n   * Use `\"page\"` inside a pagination landmark, `\"step\"` inside a step indicator, and\n   * `\"true\"` when no more specific token fits. Only one control in a set is ever current:\n   * leave the property unset on all the others rather than setting `\"false\"`, which the\n   * spec reads as \"explicitly not current\" and adds nothing.\n   *\n   * Setting `aria-current` directly on the `<nys-button>` host does nothing: a custom\n   * element with no role does not map its ARIA attributes into the accessibility tree,\n   * and host ARIA does not cross into the shadow root.\n   *\n   * @example\n   * ```html\n   * <nys-button label=\"3\" ariaCurrent=\"page\"></nys-button>\n   * ```\n   */\n  @property({ type: String }) ariaCurrent:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | \"true\"\n    | \"false\"\n    | \"\" = \"\";\n\n  /**\n   * Material Symbol icon before label. Not shown for `circle` mode.\n   */\n  @property({ type: String }) prefixIcon = \"\";\n\n  /**\n   * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.\n   */\n  @property({ type: String }) suffixIcon = \"\";\n\n  /**\n   * Renders circular icon-only button. Requires `icon` prop. `label` is rendered as visually-hidden text for the accessible name.\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   * ID(s) of element(s) describing this button. Sets `aria-describedby`.\n   */\n  @property({ type: String }) ariaDescribedBy = \"\";\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  @state() private _hasPrefixSlot = false;\n  @state() private _hasSuffixSlot = false;\n  @state() private _hasCircleSlot = false;\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   *\n   * Form association, ElementInternals, and id generation are provided by\n   * NysFormControlElement (@nysds/internals). super.connectedCallback() assigns\n   * an id when one is not provided (prefix = the element's localName).\n   */\n\n  private _onPrefixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onSuffixSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _onCircleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasCircleSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _manageFormAction() {\n    // If an onClick function is provided, call it\n    if (typeof this.onClick === \"function\" && this.onClick !== null) {\n      this.onClick(new Event(\"click\")); // Call user-provided onClick function with a fake click event\n    }\n\n    // If part of a form, perform the corresponding action based on button's \"type\"\n    const form = this.internals?.form;\n\n    if (form) {\n      switch (this.type) {\n        case \"submit\":\n          form.requestSubmit();\n          break;\n        case \"reset\":\n          form.reset();\n          break;\n        case \"button\":\n      }\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private _handleFocus() {\n    this.dispatchEvent(\n      new Event(\"nys-focus\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleBlur() {\n    const button = this.shadowRoot?.querySelector(\".nys-button\");\n    button?.classList.remove(\"active-focus\");\n    this.dispatchEvent(\n      new Event(\"nys-blur\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this._manageFormAction();\n    this.dispatchEvent(\n      new Event(\"nys-click\", { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      if (this.disabled) return;\n\n      e.preventDefault();\n      const btn = this.renderRoot.querySelector(\".nys-button\");\n      btn?.classList.add(\"active\");\n      setTimeout(() => btn?.classList.remove(\"active\"), 150);\n\n      if (this.href) {\n        // Click the internal <a> so native navigation happens\n        const linkEl = this.renderRoot.querySelector(\n          \"a.nys-button\",\n        ) as HTMLAnchorElement;\n        if (linkEl) {\n          linkEl.click();\n        }\n      } else {\n        this._handleAnyAttributeFunction();\n        this._handleClick(e);\n      }\n    }\n  }\n\n  private _handleKeyup(e: KeyboardEvent) {\n    if (\n      e.code === \"Space\" ||\n      e.code === \"Enter\" ||\n      e.key === \" \" ||\n      e.key === \"Enter\"\n    ) {\n      this.renderRoot.querySelector(\".nys-button\")?.classList.remove(\"active\");\n    }\n  }\n\n  /**\n   * Handles inline onclick attributes for keyboard activation.\n   *\n   * Native clicks execute inline onclick attributes automatically, but\n   * keyboard activation of the custom element does not trigger that native\n   * behavior. Dispatching a synthetic click lets the browser's own inline\n   * event handler mechanism execute any onclick attribute safely without\n   * eval() or new Function().\n   */\n  private _handleAnyAttributeFunction() {\n    this.click();\n  }\n\n  public focus(options?: FocusOptions) {\n    const innerEl = this.renderRoot.querySelector(\n      this.href ? \"a.nys-button\" : \"button.nys-button\",\n    ) as HTMLElement | null;\n\n    if (innerEl) {\n      innerEl.focus(options);\n    } else {\n      // fallback: focus host\n      super.focus(options);\n    }\n  }\n\n  render() {\n    return html`\n      ${this.href\n        ? html`\n            <div class=\"nys-button__linkwrapper\">\n              <a\n                class=\"nys-button\"\n                name=${ifDefined(this.name ? this.name : undefined)}\n                ?disabled=${this.disabled}\n                aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n                value=${ifDefined(this.value ? this.value : undefined)}\n                href=${this.href}\n                target=${this.target}\n                @click=${this._handleClick}\n                @focus=\"${this._handleFocus}\"\n                @blur=\"${this._handleBlur}\"\n                @keydown=\"${this._handleKeydown}\"\n                @keyup=\"${this._handleKeyup}\"\n                aria-describedby=${ifDefined(this.ariaDescribedBy || undefined)}\n                aria-expanded=${ifDefined(this.ariaExpanded || undefined)}\n                aria-current=${ifDefined(this.ariaCurrent || undefined)}\n              >\n                <slot\n                  name=\"prefix-icon\"\n                  @slotchange=${this._onPrefixSlotChange}\n                  ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n                >\n                  ${this.prefixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.prefixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                ${this.circle\n                  ? html`<div class=\"nys-button__text sr-only\">\n                      ${this.label}\n                    </div>`\n                  : this.label\n                    ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                    : html` <slot class=\"nys-button__default-slot\"></slot> `}\n                <slot\n                  name=\"suffix-icon\"\n                  @slotchange=${this._onSuffixSlotChange}\n                  ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n                >\n                  ${this.suffixIcon\n                    ? html`<nys-icon\n                        size=\"16\"\n                        name=${this.suffixIcon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n                <slot\n                  name=\"circle-icon\"\n                  @slotchange=${this._onCircleSlotChange}\n                  ?hidden=${!this.circle ||\n                  (!this.icon && !this._hasCircleSlot)}\n                >\n                  ${this.icon\n                    ? html`<nys-icon\n                        size=${this.size === \"sm\"\n                          ? \"24\"\n                          : this.size === \"lg\"\n                            ? \"40\"\n                            : \"32\"}\n                        name=${this.icon}\n                      ></nys-icon>`\n                    : \"\"}\n                </slot>\n              </a>\n            </div>\n          `\n        : html`\n            <button\n              class=\"nys-button\"\n              name=${ifDefined(this.name ? this.name : undefined)}\n              ?disabled=${this.disabled}\n              form=${ifDefined(this.form || undefined)}\n              value=${ifDefined(this.value ? this.value : undefined)}\n              type=${this.type}\n              aria-controls=${ifDefined(this.ariaControls || undefined)}\n              @click=${this._handleClick}\n              @focus=${this._handleFocus}\n              @blur=${this._handleBlur}\n              @keydown=${this._handleKeydown}\n              @keyup=${this._handleKeyup}\n              aria-describedby=${ifDefined(this.ariaDescribedBy || undefined)}\n              aria-expanded=${ifDefined(this.ariaExpanded || undefined)}\n              aria-current=${ifDefined(this.ariaCurrent || undefined)}\n            >\n              <slot\n                name=\"prefix-icon\"\n                @slotchange=${this._onPrefixSlotChange}\n                ?hidden=${!this.prefixIcon && !this._hasPrefixSlot}\n              >\n                ${this.prefixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.prefixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              ${this.circle\n                ? html`<div class=\"nys-button__text sr-only\">\n                    ${this.label}\n                  </div>`\n                : this.label\n                  ? html`<div class=\"nys-button__text\">${this.label}</div>`\n                  : html` <slot class=\"nys-button__default-slot\"></slot> `}\n              <slot\n                name=\"suffix-icon\"\n                @slotchange=${this._onSuffixSlotChange}\n                ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}\n              >\n                ${this.suffixIcon\n                  ? html`<nys-icon\n                      size=\"16\"\n                      name=${this.suffixIcon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n              <slot\n                name=\"circle-icon\"\n                @slotchange=${this._onCircleSlotChange}\n                ?hidden=${!this.circle || (!this.icon && !this._hasCircleSlot)}\n              >\n                ${this.icon\n                  ? html`<nys-icon\n                      size=${this.size === \"sm\"\n                        ? \"24\"\n                        : this.size === \"lg\"\n                          ? \"40\"\n                          : \"32\"}\n                      name=${this.icon}\n                    ></nys-icon>`\n                  : \"\"}\n              </slot>\n            </button>\n          `}\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-button\")) {\n  customElements.define(\"nys-button\", NysButton);\n}\n"],"names":["LitElement","unsafeCSS","html","property","state","ifDefined","y","f","e","b","h","i","r","s","a","v","I","n","l","o","w","u","_NysButton","NysFormControlElement","slot","form","event","btn","linkEl","options","innerEl","styles","NysButton","__decorateClass"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-button",
-  "version": "1.19.4",
+  "version": "1.20.1",
   "description": "The Button component from the NYS Design System.",
   "module": "dist/nys-button.js",
   "types": "dist/index.d.ts",
@@ -23,9 +23,10 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.19.4"
+    "@nysds/nys-icon": "^1.20.1"
   },
   "devDependencies": {
+    "@nysds/internals": "^1.20.1",
     "lit": "^3.3.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"