npm - @cobwds/cob-button - Versions diffs - 1.19.3 → 1.23.1 - Mend

@cobwds/cob-button 1.19.3 → 1.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/cob-button.d.ts +338 -0
package/dist/cob-button.figma.d.ts +1 -0
package/dist/cob-button.js +187 -76
package/dist/cob-button.js.map +1 -1
package/dist/index.d.ts +1 -0
package/package.json +5 -4

package/dist/cob-button.d.ts ADDED Viewed

@@ -0,0 +1,338 @@
+import { CobFormControlElement } from "@cobwds/internals";
+import "@cobwds/cob-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 `<cob-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 cob-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 [--cob-button-color] - Text color of the button label.
+ * @cssprop [--cob-button-color--hover] - Text color when hovered.
+ * @cssprop [--cob-button-color--active] - Text color when active/pressed.
+ * @cssprop [--cob-button-background-color] - Background color of the button.
+ * @cssprop [--cob-button-background-color--hover] - Background color when hovered.
+ * @cssprop [--cob-button-background-color--active] - Background color when active/pressed.
+ * @cssprop [--cob-button-border-color] - Border color of the button.
+ * @cssprop [--cob-button-border-color--hover] - Border color when hovered.
+ * @cssprop [--cob-button-border-color--active] - Border color when active/pressed.
+ *
+ * @fires {Event} cob-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.
+ * @fires {Event} cob-focus - Fired when the button receives focus.
+ * @fires {Event} cob-blur - Fired when the button loses focus.
+ *
+ * @usage
+ * - Use for the most important actions you want users to take, such as "Download", "Sign up", or "Log out".
+ * - Use `variant="fill"` for the primary action on the page. There should be only one primary action per page.
+ * - Use `variant="outline"` for secondary actions, placed next to the primary Fill button.
+ * - Use `variant="ghost"` buttons for additional actions beyond primary and secondary.
+ * - Use `variant="text"` buttons when an action needs to appear within a text block. If clicking takes the user somewhere else, use a Link instead.
+ * - Always set the `type` attribute (`submit`, `button`, or `reset`). The default is `button`.
+ * - Use sentence case for button labels, only capitalizing the first word.
+ * - Place a `chevron_down icon` on the right for buttons that open a dropdown.
+ * - Don't use buttons for navigation. Use an `<a>` element or Text button for links that take users somewhere else.
+ * - Don't use icons in buttons without a text label. Very few icons are universally understood.
+ * - Don't create custom button styles (color, shape, size). Consistency helps users recognize buttons and predict behavior.
+ *
+ * @example Basic
+ * ```html
+ * <cob-button label="Button" variant="filled"></cob-button>
+ * ```
+ *
+ * @example Variant Outline
+ * ```html
+ * <cob-button label="Button" variant="outline"></cob-button>
+ * ```
+ *
+ * @example Variant Ghost
+ * ```html
+ * <cob-button label="Button" variant="ghost"></cob-button>
+ * ```
+ *
+ * @example Variant Text
+ * ```html
+ * <cob-button label="Button" variant="text"></cob-button>
+ * ```
+ *
+ * @example Prefix Icon
+ * ```html
+ * <cob-button label="Previous" prefixIcon="chevron_left"></cob-button>
+ * ```
+ *
+ * @example Suffix Icon
+ * ```html
+ * <cob-button label="Next" suffixIcon="chevron_right"></cob-button>
+ * ```
+ *
+ * @example Slotted Icons
+ * ```html
+ * <cob-button label="Slotted icons">
+ *   <cob-icon color="#db117d" slot="prefix-icon" name="chevron_left"></cob-icon>
+ *   <cob-icon color="#db117d" slot="suffix-icon" name="chevron_right"></cob-icon>
+ * </cob-button>
+ * ```
+ *
+ * @example Circle icon button
+ * ```html
+ * <cob-button circle icon="close" label="Close dialog"></cob-button>
+ * ```
+ *
+ * @example Size Small
+ * ```html
+ * <cob-button label="Small" size="sm"></cob-button>
+ * ```
+ * @example Size Large
+ * ```html
+ * <cob-button label="Large" size="lg"></cob-button>
+ * ```
+ *
+ * @example Full width
+ * ```html
+ * <cob-button label="Full width" fullWidth></cob-button>
+ * ```
+ *
+ * @example Inverted
+ * ```html
+ * <cob-button label="Inverted" inverted></cob-button>
+ * ```
+ * @render Inverted
+ * ```html
+ * <div style="background: #1b1b1b; padding: 1rem;">
+ *   <cob-button label="Inverted" inverted></cob-button>
+ * </div>
+ * ```
+ *
+ * @example Disabled
+ * ```html
+ * <cob-button label="Disabled" disabled></cob-button>
+ * ```
+ *
+ * @example Href
+ * ```html
+ * <cob-button label="Visit Boston.gov" href="https://www.boston.gov/" target="_blank" suffixIcon="open_in_new"></cob-button>
+ * ```
+ *
+ * @example Type
+ * ```html
+ * <cob-button type="submit" label="Save Changes" variant="filled"></cob-button>
+ * ```
+ *
+ * @example Disclosure trigger
+ * ```html
+ * <cob-button
+ *   label="Here's how you know"
+ *   ariaExpanded="false"
+ *   ariaControls="trust-bar"
+ * ></cob-button>
+ * ```
+ */
+export declare class CobButton extends CobFormControlElement {
+    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 `<cob-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 `<cob-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
+     * <cob-button
+     *   label="Here's how you know"
+     *   ariaExpanded="false"
+     *   ariaControls="trust-bar"
+     * ></cob-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 `<cob-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
+     * <cob-button label="3" ariaCurrent="page"></cob-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 the form data, mirroring a native submit button.
+     *
+     * When `type="submit"` and both `name` and `value` are set, the entry
+     * `name=value` is included in the form's data only for submissions this
+     * button triggers. It is not included when the form is submitted another
+     * way (Enter in a text field, another button, `form.requestSubmit()`),
+     * and it is not readable from `new FormData(form)` outside a submission,
+     * matching native submitter semantics.
+     *
+     * A form-associated custom element cannot act as a native submitter, so
+     * the value is staged through `ElementInternals.setFormValue()` for the
+     * duration of the submission and cleared afterward.
+     */
+    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.
+     *
+     * @deprecated Listen for the `cob-click` event instead. `cob-click`
+     * bubbles, is composed, and fires for both mouse and keyboard activation
+     * but never while disabled. This property still works but is excluded
+     * from generated framework wrappers and goes away in 2.0.
+     */
+    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
+     * CobFormControlElement (@cobwds/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/cob-button.figma.d.ts ADDED Viewed

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

package/dist/cob-button.js CHANGED Viewed

@@ -1,38 +1,147 @@
-import { LitElement as v, unsafeCSS as h, html as b } from "lit";
-import { property as c, state as u } from "lit/decorators.js";
-import { ifDefined as a } from "lit/directives/if-defined.js";
+import { LitElement as p, unsafeCSS as g, html as n } from "lit";
+import { property as c, state as v } from "lit/decorators.js";
+import { ifDefined as i } from "lit/directives/if-defined.js";
+import "@cobwds/cob-icon";
 /*!
    * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Button Component v1.19.3
+   * Button Component v1.23.1
    * Part of the City of Boston Web Design System
    * Repository: https://github.com/CityOfBoston/nywds-poc
    * License: MIT
 */
-const _ = ':host{--_cob-button-width: fit-content;--_cob-button-height: var(--cob-size-600, 48px);--_cob-button-border-radius: var(--cob-radius-xl, 12px);--_cob-button-padding--y: calc( var(--cob-space-150, 12px) - var(--cob-border-width-md, 2px) );--_cob-button-cursor: pointer;--_cob-button-padding--x: calc( var(--cob-space-250, 20px) - var(--cob-border-width-md, 2px) );--_cob-button-gap: var(--cob-space-100, 8px);--_cob-button-justify-content: center;--_cob-button-border-style: solid;--_cob-button-border-width: var(--cob-border-width-md, 2px);--_cob-button-outline-width: var(--cob-border-width-md, 2px);--_cob-button-outline-offset: var(--cob-space-2px, 2px);--_cob-button-outline-color: var(--cob-color-focus, #004dd1);--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-theme, #1871bd) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-theme-strong, #125084) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-theme-stronger, #091f2f) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-neutral-10, #f6f6f6 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00);--_cob-button-font-size: var(--cob-font-size-ui-md, 16px);--_cob-button-font-weight: var(--cob-font-weight-semibold, 600);--_cob-button-line-height: var(--cob-font-lineheight-ui-md, 24px);--_cob-button-font-family: var( --cob-font-family-ui, var(--cob-font-family-serif, "Lora", "Georgia", "Times New Roman", serif) );--_cob-button-text-decoration: none;display:inline-flex;width:var(--_cob-button-width);vertical-align:middle}:host([size=sm]){--_cob-button-height: var(--cob-size-500, 40px);--_cob-button-padding--y: calc( var(--cob-space-100, 8px) - var(--cob-border-width-md, 2px) );--_cob-button-padding--x: calc( var(--cob-space-200, 16px) - var(--cob-border-width-md, 2px) )}:host([size=lg]){--_cob-button-height: var(--cob-size-700, 56px);--_cob-button-padding--y: calc( var(--cob-space-200, 16px) - var(--cob-border-width-md, 2px) );--_cob-button-padding--x: calc( var(--cob-space-300, 24px) - var(--cob-border-width-md, 2px) )}:host([fullWidth]){width:100%}:host([fullWidth]) .cob-button__linkwrapper{width:100%}:host([fullWidth]) .cob-button{width:100%}:host([variant=filled]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-theme, #1871bd) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-theme-strong, #125084) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--hover: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-theme-stronger, #091f2f) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-neutral-10, #f6f6f6 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1)}:host([variant=outline]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-surface, #ffffff) );--_cob-button-color: var(--cob-button-color, var(--cob-color-theme, #1871bd));--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-theme, #1871bd) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-theme-weaker, #d0e9fc) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-theme, #1871bd) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-theme, #1871bd) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-theme-weak, #cddde9) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-theme, #1871bd) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-theme, #1871bd) );--_cob-button-background-color--disabled: var(--cob-color-surface, #ffffff);--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-neutral-100, #d0d0ce)}:host([variant=text]){--_cob-button-height: fit-content;--_cob-button-border-radius: var(--cob-radius-md, 4px);--_cob-button-padding--y: var(--cob-space-2px, 2px);--_cob-button-padding--x: 0;--_cob-button-border-width: 0px;--_cob-button-text-decoration: underline;--_cob-button-text-decoration-thickness: var( --cob-font-decoration-thickness-regular, 7% );--_cob-button-text-decoration-thickness--hover: var( --cob-font-decoration-thickness-strong, 14% );--_cob-button-text-decoration-thickness--active: var( --cob-font-decoration-thickness-strong, 14% );--_cob-button-gap: var(--cob-space-50, 4px);--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var(--cob-button-color, var(--cob-color-link, #004dd1));--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-link-strong, #003ba1) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-link-strongest, #002971) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([variant=ghost]){--_cob-button-gap: var(--cob-space-50, 4px);--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var(--cob-button-color, var(--cob-color-text, #1b1b1b));--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-black-transparent-100, #0000001a) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text, #1b1b1b) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-black-transparent-200, #00000033) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text, #1b1b1b) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([variant=filled][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-surface, #ffffff) );--_cob-button-color: var(--cob-button-color, var(--cob-color-text, #1b1b1b));--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00);--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-neutral-100, #d0d0ce) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text, #1b1b1b) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-neutral-300, #a7a9ab) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text, #1b1b1b) );--_cob-button-background-color--disabled: var(--cob-color-text, #1b1b1b);--_cob-button-color--disabled: var(--cob-color-text-disabled, #62666a)}:host([variant=outline][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-surface-reverse, #1b1b1b) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-ink-reverse, #ffffff) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-surface-reverse, #1b1b1b) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse-weak, #d0d0ce) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-neutral-100, #d0d0ce) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-surface-reverse, #1b1b1b) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse-weaker, #bec0c1) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-neutral-300, #a7a9ab) );--_cob-button-background-color--disabled: var( --cob-color-surface-reverse, #1b1b1b );--_cob-button-color--disabled: var( --cob-color-text-reverse-disabled, #62666a );--_cob-button-border-color--disabled: var(--cob-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var( --cob-button-color, var(--cob-color-link-reverse, #a7a9ab) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-link-reverse-strong, #ededed) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-reverse-strongest, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var( --cob-color-text-reverse-disabled, #62666a );--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([variant=ghost][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-white-transparent-200, #ffffff33) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-white-transparent-300, #ffffff4d) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #62666a);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([inverted]){--_cob-button-outline-color: var(--cob-color-focus-reverse, #7aa5e7)}:host([circle]){--_cob-button-width: var(--_cob-button-height);--_cob-button-border-radius: var(--cob-radius-round, 1776px);--_cob-button-padding--y: 0;--_cob-button-padding--x: 0}:host([circle]) .cob-button{max-width:var(--_cob-button-height);max-height:var(--_cob-button-height)}.cob-button{width:var(--_cob-button-width);min-height:var(--_cob-button-height);border-radius:var(--_cob-button-border-radius);padding:var(--_cob-button-padding--y) var(--_cob-button-padding--x);display:flex;align-items:center;justify-content:var(--_cob-button-justify-content);gap:var(--_cob-button-gap);font-family:var(--_cob-button-font-family);font-size:var(--_cob-button-font-size);font-weight:var(--_cob-button-font-weight);line-height:var(--_cob-button-line-height);text-decoration:var(--_cob-button-text-decoration);box-sizing:border-box;background-color:var(--_cob-button-background-color);color:var(--_cob-button-color);border-color:var(--_cob-button-border-color);border-style:var(--_cob-button-border-style);border-width:var(--_cob-button-border-width);cursor:var(--_cob-button-cursor)}.cob-button:hover{background-color:var(--_cob-button-background-color--hover);color:var(--_cob-button-color--hover);border-color:var(--_cob-button-border-color--hover);text-decoration-thickness:var(--_cob-button-text-decoration-thickness--hover, auto)}.cob-button:active,.cob-button.active{background-color:var(--_cob-button-background-color--active);color:var(--_cob-button-color--active);border-color:var(--_cob-button-border-color--active);text-decoration-thickness:var(--_cob-button-text-decoration-thickness--active, auto)}.cob-button:disabled,a[disabled]{background-color:var(--_cob-button-background-color--disabled);color:var(--_cob-button-color--disabled);border-color:var(--_cob-button-border-color--disabled);--_cob-button-cursor: not-allowed}a[disabled]{pointer-events:none}.cob-button:focus-visible{outline-offset:var(--_cob-button-outline-offset);outline:solid var(--_cob-button-outline-width) var(--_cob-button-outline-color)}.cob-button__text{display:flex;align-items:center;-webkit-user-select:none;user-select:none}';
-var p = Object.defineProperty, r = (f, o, e, i) => {
-  for (var n = void 0, s = f.length - 1, d; s >= 0; s--)
-    (d = f[s]) && (n = d(o, e, n) || n);
-  return n && p(o, e, n), n;
+/*!
+  * City of Boston Web Design System v1.23.1
+  * Description: A web design system for the City of Boston's digital products.
+  * Repository: https://github.com/CityOfBoston/nywds-poc
+  * License: MIT
+*/
+let x = 0;
+function k(a) {
+  return `${a}-${Date.now()}-${x++}`;
+}
+function y(a, o, e) {
+  a.dispatchEvent(
+    new CustomEvent(o, { detail: e, bubbles: !0, composed: !0 })
+  );
+}
+function _(a, o) {
+  a.dispatchEvent(
+    new Event(`cob-${o}`, { bubbles: !0, composed: !0 })
+  );
+}
+const m = (a) => {
+  class o extends a {
+    get idPrefix() {
+      return this.localName || "cob-element";
+    }
+    ensureId() {
+      this.id || (this.id = k(this.idPrefix));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.ensureId();
+    }
+  }
+  return o;
+}, $ = (a) => {
+  class o extends m(a) {
+    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, b) {
+      const s = this.internals;
+      if (s && l in s) {
+        s[l] = b;
+        return;
+      }
+      const u = S(l);
+      b === null ? this.removeAttribute(u) : this.setAttribute(u, b);
+    }
+    reflectDefaultSemantics() {
+      const l = this.defaultRole;
+      l && this.setHostAria("role", l);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.reflectDefaultSemantics();
+    }
+  }
+  return o;
+};
+function S(a) {
+  if (a === "role") return "role";
+  const o = a.replace(/^aria/, "");
+  return "aria-" + o.charAt(0).toLowerCase() + o.slice(1);
+}
+const w = (a) => {
+  const o = class extends $(a) {
+    constructor() {
+      super(...arguments), this.__internalValidationMessage = "";
+    }
+    get internalValidationMessage() {
+      return this.__internalValidationMessage;
+    }
+    set internalValidationMessage(b) {
+      b !== this.__internalValidationMessage && (this.__internalValidationMessage = b, this.requestUpdate("internalValidationMessage"));
+    }
+    resolvedErrorMessage() {
+      return this.errorMessage || this.internalValidationMessage;
+    }
+    setFormValue(b) {
+      this.internals?.setFormValue(b ?? null);
+    }
+    setValidityFromState(b, s, u) {
+      const f = this.internals;
+      if (!f) return;
+      const h = Object.values(b).some(Boolean);
+      h ? f.setValidity(b, s ?? "Invalid value", u) : f.setValidity({}), this.setHostAria("ariaInvalid", h ? "true" : "false");
+    }
+    clearValidity() {
+      this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
+    }
+    checkValidity() {
+      return this.internals?.checkValidity() ?? !0;
+    }
+    reportValidity() {
+      return this.internals?.reportValidity() ?? !0;
+    }
+    formResetCallback() {
+      this.internalValidationMessage = "", this.clearValidity();
+    }
+  };
+  return o.formAssociated = !0, o;
+}, C = /* @__PURE__ */ w(p), V = ':host{--_cob-button-width: fit-content;--_cob-button-height: var(--cob-size-600, 48px);--_cob-button-border-radius: var(--cob-radius-xl, 12px);--_cob-button-padding--y: calc( var(--cob-space-150, 12px) - var(--cob-border-width-md, 2px) );--_cob-button-cursor: pointer;--_cob-button-padding--x: calc( var(--cob-space-250, 20px) - var(--cob-border-width-md, 2px) );--_cob-button-gap: var(--cob-space-100, 8px);--_cob-button-justify-content: center;--_cob-button-border-style: solid;--_cob-button-border-width: var(--cob-border-width-md, 2px);--_cob-button-outline-width: var(--cob-border-width-md, 2px);--_cob-button-outline-offset: var(--cob-space-2px, 2px);--_cob-button-outline-color: var(--cob-color-focus, #004dd1);--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-theme, #1871bd) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-theme-strong, #125084) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-theme-stronger, #091f2f) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-neutral-10, #f6f6f6 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00);--_cob-button-font-size: var(--cob-font-size-ui-md, 16px);--_cob-button-font-weight: var(--cob-font-weight-semibold, 600);--_cob-button-line-height: var(--cob-font-lineheight-ui-md, 24px);--_cob-button-font-family: var( --cob-font-family-ui, var(--cob-font-family-serif, "Lora", "Georgia", "Times New Roman", serif) );--_cob-button-text-decoration: none;display:inline-flex;width:var(--_cob-button-width);vertical-align:middle}:host([size=sm]){--_cob-button-height: var(--cob-size-500, 40px);--_cob-button-padding--y: calc( var(--cob-space-100, 8px) - var(--cob-border-width-md, 2px) );--_cob-button-padding--x: calc( var(--cob-space-200, 16px) - var(--cob-border-width-md, 2px) )}:host([size=lg]){--_cob-button-height: var(--cob-size-700, 56px);--_cob-button-padding--y: calc( var(--cob-space-200, 16px) - var(--cob-border-width-md, 2px) );--_cob-button-padding--x: calc( var(--cob-space-300, 24px) - var(--cob-border-width-md, 2px) )}:host([fullWidth]){width:100%}:host([fullWidth]) .cob-button__linkwrapper{width:100%}:host([fullWidth]) .cob-button{width:100%}:host([variant=filled]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-theme, #1871bd) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-theme-strong, #125084) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--hover: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-theme-stronger, #091f2f) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-neutral-10, #f6f6f6 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1)}:host([variant=outline]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-surface, #ffffff) );--_cob-button-color: var(--cob-button-color, var(--cob-color-theme, #1871bd));--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-theme, #1871bd) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-theme-weaker, #d0e9fc) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-theme-strong, #125084) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-theme-strong, #125084) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-theme-weak, #cddde9) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-theme-strong, #125084) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-theme-strong, #125084) );--_cob-button-background-color--disabled: var(--cob-color-surface, #ffffff);--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-neutral-100, #d0d0ce)}:host([variant=text]){--_cob-button-height: fit-content;--_cob-button-border-radius: var(--cob-radius-md, 4px);--_cob-button-padding--y: var(--cob-space-2px, 2px);--_cob-button-padding--x: 0;--_cob-button-border-width: 0px;--_cob-button-text-decoration: var(--cob-button-text-decoration, underline);--_cob-button-text-decoration-thickness: var( --cob-font-decoration-thickness-regular, 7% );--_cob-button-text-decoration-thickness--hover: var( --cob-font-decoration-thickness-strong, 14% );--_cob-button-text-decoration-thickness--active: var( --cob-font-decoration-thickness-strong, 14% );--_cob-button-gap: var(--cob-space-50, 4px);--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var(--cob-button-color, var(--cob-color-link, #004dd1));--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-link-strong, #003ba1) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-link-strongest, #002971) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([variant=ghost]){--_cob-button-gap: var(--cob-space-50, 4px);--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var(--cob-button-color, var(--cob-color-text, #1b1b1b));--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-black-transparent-100, #0000001a) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text, #1b1b1b) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-black-transparent-200, #00000033) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text, #1b1b1b) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #bec0c1);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([variant=filled][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-surface, #ffffff) );--_cob-button-color: var(--cob-button-color, var(--cob-color-text, #1b1b1b));--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00);--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-neutral-100, #d0d0ce) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text, #1b1b1b) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-neutral-300, #a7a9ab) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text, #1b1b1b) );--_cob-button-background-color--disabled: var(--cob-color-text, #1b1b1b);--_cob-button-color--disabled: var(--cob-color-text-disabled, #62666a)}:host([variant=outline][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-surface-reverse, #1b1b1b) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-ink-reverse, #ffffff) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-surface-reverse, #1b1b1b) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse-weak, #d0d0ce) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-neutral-100, #d0d0ce) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-surface-reverse, #1b1b1b) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse-weaker, #bec0c1) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-neutral-300, #a7a9ab) );--_cob-button-background-color--disabled: var( --cob-color-surface-reverse, #1b1b1b );--_cob-button-color--disabled: var( --cob-color-text-reverse-disabled, #62666a );--_cob-button-border-color--disabled: var(--cob-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var( --cob-button-color, var(--cob-color-link-reverse, #a7a9ab) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-link-reverse-strong, #ededed) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-reverse-strongest, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var( --cob-color-text-reverse-disabled, #62666a );--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([variant=ghost][inverted]){--_cob-button-background-color: var( --cob-button-background-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-color: var( --cob-button-color, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color: var( --cob-button-border-color, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--hover: var( --cob-button-background-color--hover, var(--cob-color-white-transparent-200, #ffffff33) );--_cob-button-color--hover: var( --cob-button-color--hover, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--hover: var( --cob-button-border-color--hover, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--active: var( --cob-button-background-color--active, var(--cob-color-white-transparent-300, #ffffff4d) );--_cob-button-color--active: var( --cob-button-color--active, var(--cob-color-text-reverse, #ffffff) );--_cob-button-border-color--active: var( --cob-button-border-color--active, var(--cob-color-transparent, #ffffff00) );--_cob-button-background-color--disabled: var( --cob-color-transparent, #ffffff00 );--_cob-button-color--disabled: var(--cob-color-text-disabled, #62666a);--_cob-button-border-color--disabled: var(--cob-color-transparent, #ffffff00)}:host([inverted]){--_cob-button-outline-color: var(--cob-color-focus-reverse, #7aa5e7)}:host([circle]){--_cob-button-width: var(--_cob-button-height);--_cob-button-border-radius: var(--cob-radius-round, 1776px);--_cob-button-padding--y: 0;--_cob-button-padding--x: 0}:host([circle]) .cob-button{max-width:var(--_cob-button-height);max-height:var(--_cob-button-height)}.cob-button{width:var(--_cob-button-width);min-height:var(--_cob-button-height);border-radius:var(--_cob-button-border-radius);padding:var(--_cob-button-padding--y) var(--_cob-button-padding--x);display:flex;align-items:center;justify-content:var(--_cob-button-justify-content);gap:var(--_cob-button-gap);font-family:var(--_cob-button-font-family);font-size:var(--_cob-button-font-size);font-weight:var(--_cob-button-font-weight);line-height:var(--_cob-button-line-height);text-decoration:var(--_cob-button-text-decoration);text-decoration-thickness:var(--_cob-button-text-decoration-thickness, auto);box-sizing:border-box;background-color:var(--_cob-button-background-color);color:var(--_cob-button-color);border-color:var(--_cob-button-border-color);border-style:var(--_cob-button-border-style);border-width:var(--_cob-button-border-width);cursor:var(--_cob-button-cursor)}.cob-button:hover{background-color:var(--_cob-button-background-color--hover);color:var(--_cob-button-color--hover);border-color:var(--_cob-button-border-color--hover);text-decoration-line:var(--cob-button-text-decoration--hover, var(--_cob-button-text-decoration));text-decoration-thickness:var(--_cob-button-text-decoration-thickness--hover, auto)}.cob-button:active,.cob-button.active{background-color:var(--_cob-button-background-color--active);color:var(--_cob-button-color--active);border-color:var(--_cob-button-border-color--active);text-decoration-line:var(--cob-button-text-decoration--active, var(--cob-button-text-decoration--hover, var(--_cob-button-text-decoration)));text-decoration-thickness:var(--_cob-button-text-decoration-thickness--active, auto)}.cob-button:disabled,a[disabled]{background-color:var(--_cob-button-background-color--disabled);color:var(--_cob-button-color--disabled);border-color:var(--_cob-button-border-color--disabled);--_cob-button-cursor: not-allowed}a[disabled]{pointer-events:none}.cob-button:focus-visible,.active-focus{outline-offset:var(--_cob-button-outline-offset);outline:solid var(--_cob-button-outline-width) var(--_cob-button-outline-color)}.cob-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 I = Object.defineProperty, r = (a, o, e, l) => {
+  for (var b = void 0, s = a.length - 1, u; s >= 0; s--)
+    (u = a[s]) && (b = u(o, e, b) || b);
+  return b && I(o, e, b), b;
 };
-let g = 0;
-const l = class l extends v {
-  // allows use of elementInternals' API
+const d = class d extends C {
   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();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
+    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
+   * CobFormControlElement (@cobwds/internals). super.connectedCallback() assigns
+   * an id when one is not provided (prefix = the element's localName).
    */
-  _generateUniqueId() {
-    return `cob-button-${Date.now()}-${g++}`;
-  }
   _onPrefixSlotChange(o) {
     const e = o.target;
     this._hasPrefixSlot = e.assignedElements({ flatten: !0 }).length > 0;
@@ -47,12 +156,19 @@ const l = class l extends v {
   }
   _manageFormAction() {
     typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
-    const o = this._internals.form;
+    const o = this.internals?.form;
     if (o)
       switch (this.type) {
-        case "submit":
-          o.requestSubmit();
+        case "submit": {
+          const e = this.name !== "" && this.value !== "";
+          e && this.setFormValue(this.value);
+          try {
+            o.requestSubmit();
+          } finally {
+            e && this.setFormValue(null);
+          }
           break;
+        }
         case "reset":
           o.reset();
           break;
@@ -63,23 +179,17 @@ const l = class l extends v {
    * --------------------------------------------------------------------------
    */
   _handleFocus() {
-    this.dispatchEvent(
-      new Event("cob-focus", { bubbles: !0, composed: !0 })
-    );
+    _(this, "focus");
   }
   _handleBlur() {
-    this.shadowRoot?.querySelector(".cob-button")?.classList.remove("active-focus"), this.dispatchEvent(
-      new Event("cob-blur", { bubbles: !0, composed: !0 })
-    );
+    this.shadowRoot?.querySelector(".cob-button")?.classList.remove("active-focus"), _(this, "blur");
   }
   _handleClick(o) {
     if (this.disabled) {
       o.preventDefault();
       return;
     }
-    this._manageFormAction(), this.dispatchEvent(
-      new Event("cob-click", { bubbles: !0, composed: !0 })
-    );
+    this._manageFormAction(), y(this, "cob-click", void 0);
   }
   _handleKeydown(o) {
     if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
@@ -87,10 +197,10 @@ const l = class l extends v {
       o.preventDefault();
       const e = this.renderRoot.querySelector(".cob-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.cob-button"
         );
-        i && i.click();
+        l && l.click();
       } else
         this._handleAnyAttributeFunction(), this._handleClick(o);
     }
@@ -117,15 +227,15 @@ const l = class l extends v {
     e ? e.focus(o) : super.focus(o);
   }
   render() {
-    return b`
-      ${this.href ? b`
+    return n`
+      ${this.href ? n`
             <div class="cob-button__linkwrapper">
               <a
                 class="cob-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 +243,29 @@ const l = class l extends v {
                 @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 ? b`<cob-icon
+                  ${this.prefixIcon ? n`<cob-icon
                         size="16"
                         name=${this.prefixIcon}
                       ></cob-icon>` : ""}
                 </slot>
-                ${this.circle ? "" : this.label ? b`<div class="cob-button__text">${this.label}</div>` : b` <slot class="cob-button__default-slot"></slot> `}
+                ${this.circle ? n`<div class="cob-button__text sr-only">
+                      ${this.label}
+                    </div>` : this.label ? n`<div class="cob-button__text">${this.label}</div>` : n` <slot class="cob-button__default-slot"></slot> `}
                 <slot
                   name="suffix-icon"
                   @slotchange=${this._onSuffixSlotChange}
                   ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}
                 >
-                  ${this.suffixIcon ? b`<cob-icon
+                  ${this.suffixIcon ? n`<cob-icon
                         size="16"
                         name=${this.suffixIcon}
                       ></cob-icon>` : ""}
@@ -165,52 +275,50 @@ const l = class l extends v {
                   @slotchange=${this._onCircleSlotChange}
                   ?hidden=${!this.circle || !this.icon && !this._hasCircleSlot}
                 >
-                  ${this.icon ? b`<cob-icon
+                  ${this.icon ? n`<cob-icon
                         size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                         name=${this.icon}
                       ></cob-icon>` : ""}
                 </slot>
               </a>
             </div>
-          ` : b`
+          ` : n`
             <button
               class="cob-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 ? b`<cob-icon
+                ${this.prefixIcon ? n`<cob-icon
                       size="16"
                       name=${this.prefixIcon}
                     ></cob-icon>` : ""}
               </slot>
-              ${this.circle ? "" : this.label ? b`<div class="cob-button__text">${this.label}</div>` : b` <slot class="cob-button__default-slot"></slot> `}
+              ${this.circle ? n`<div class="cob-button__text sr-only">
+                    ${this.label}
+                  </div>` : this.label ? n`<div class="cob-button__text">${this.label}</div>` : n` <slot class="cob-button__default-slot"></slot> `}
               <slot
                 name="suffix-icon"
                 @slotchange=${this._onSuffixSlotChange}
                 ?hidden=${!this.suffixIcon && !this._hasSuffixSlot}
               >
-                ${this.suffixIcon ? b`<cob-icon
+                ${this.suffixIcon ? n`<cob-icon
                       size="16"
                       name=${this.suffixIcon}
                     ></cob-icon>` : ""}
@@ -220,7 +328,7 @@ const l = class l extends v {
                 @slotchange=${this._onCircleSlotChange}
                 ?hidden=${!this.circle || !this.icon && !this._hasCircleSlot}
               >
-                ${this.icon ? b`<cob-icon
+                ${this.icon ? n`<cob-icon
                       size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
                       name=${this.icon}
                     ></cob-icon>` : ""}
@@ -230,11 +338,11 @@ const l = class l extends v {
     `;
   }
 };
-l.styles = h(_), l.shadowRootOptions = {
-  ...v.shadowRootOptions,
+d.styles = g(V), d.shadowRootOptions = {
+  ...p.shadowRootOptions,
   delegatesFocus: !0
-}, l.formAssociated = !0;
-let t = l;
+};
+let t = d;
 r([
   c({ type: String, reflect: !0 })
 ], t.prototype, "id");
@@ -258,10 +366,13 @@ r([
 ], t.prototype, "label");
 r([
   c({ type: String })
-], t.prototype, "ariaLabel");
+], t.prototype, "ariaControls");
 r([
   c({ type: String })
-], t.prototype, "ariaControls");
+], t.prototype, "ariaExpanded");
+r([
+  c({ type: String })
+], t.prototype, "ariaCurrent");
 r([
   c({ type: String })
 ], t.prototype, "prefixIcon");
@@ -285,7 +396,7 @@ r([
 ], t.prototype, "value");
 r([
   c({ type: String })
-], t.prototype, "ariaDescription");
+], t.prototype, "ariaDescribedBy");
 r([
   c({ type: String, reflect: !0 })
 ], t.prototype, "type");
@@ -299,13 +410,13 @@ r([
   c({ type: String, reflect: !0 })
 ], t.prototype, "target");
 r([
-  u()
+  v()
 ], t.prototype, "_hasPrefixSlot");
 r([
-  u()
+  v()
 ], t.prototype, "_hasSuffixSlot");
 r([
-  u()
+  v()
 ], t.prototype, "_hasCircleSlot");
 customElements.get("cob-button") || customElements.define("cob-button", t);
 export {

package/dist/cob-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cob-button.js","sources":["../src/cob-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 \"./cob-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 cob-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 [--cob-button-color] - Text color of the button label.\n * @cssprop [--cob-button-color--hover] - Text color when hovered.\n * @cssprop [--cob-button-color--active] - Text color when active/pressed.\n * @cssprop [--cob-button-background-color] - Background color of the button.\n * @cssprop [--cob-button-background-color--hover] - Background color when hovered.\n * @cssprop [--cob-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--cob-button-border-color] - Border color of the button.\n * @cssprop [--cob-button-border-color--hover] - Border color when hovered.\n * @cssprop [--cob-button-border-color--active] - Border color when active/pressed.\n \n @fires cob-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires cob-focus - Fired when the button receives focus.\n * @fires cob-blur - Fired when the button loses focus.\n \n @example Basic\n * ```html\n * <cob-button label=\"Button\" variant=\"filled\"></cob-button>\n * ```\n \n @example Variant Outline\n * ```html\n * <cob-button label=\"Button\" variant=\"outline\"></cob-button>\n * ```\n \n @example Variant Ghost\n * ```html\n * <cob-button label=\"Button\" variant=\"ghost\"></cob-button>\n * ```\n \n @example Variant Text\n * ```html\n * <cob-button label=\"Button\" variant=\"text\"></cob-button>\n * ```\n \n @example Prefix Icon\n * ```html\n * <cob-button label=\"Previous\" prefixIcon=\"chevron_left\"></cob-button>\n * ```\n \n @example Suffix Icon\n * ```html\n * <cob-button label=\"Next\" suffixIcon=\"chevron_right\"></cob-button>\n * ```\n \n @example Slotted Icons\n * ```html\n * <cob-button label=\"Slotted icons\">\n * <cob-icon color=\"#db117d\" slot=\"prefix-icon\" name=\"chevron_left\"></cob-icon>\n * <cob-icon color=\"#db117d\" slot=\"suffix-icon\" name=\"chevron_right\"></cob-icon>\n * </cob-button>\n * ```\n \n @example Circle icon button\n * ```html\n * <cob-button circle icon=\"close\" label=\"Close dialog\"></cob-button>\n * ```\n \n @example Size Small\n * ```html\n * <cob-button label=\"Small\" size=\"sm\"></cob-button>\n * ```\n * @example Size Large\n * ```html\n * <cob-button label=\"Large\" size=\"lg\"></cob-button>\n * ```\n \n @example Full width\n * ```html\n * <cob-button label=\"Full width\" fullWidth></cob-button>\n * ```\n \n @example Inverted\n * ```html\n * <cob-button label=\"Inverted\" inverted></cob-button>\n * ```\n * @render Inverted\n * ```html\n * <div style=\"background: #1b1b1b; padding: 1rem;\">\n * <cob-button label=\"Inverted\" inverted></cob-button>\n * </div>\n * ```\n \n @example Disabled\n * ```html\n * <cob-button label=\"Disabled\" disabled></cob-button>\n * ```\n \n @example Href\n * ```html\n * <cob-button label=\"Visit Boston.gov\" href=\"https://www.boston.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></cob-button>\n * ```\n \n @example Type\n * ```html\n * <cob-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></cob-button>\n * ```\n /\n\nexport class CobButton 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 `cob-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(\"cob-focus\", { bubbles: true, composed: true }),\n );\n }\n\n private _handleBlur() {\n const button = this.shadowRoot?.querySelector(\".cob-button\");\n button?.classList.remove(\"active-focus\");\n this.dispatchEvent(\n new Event(\"cob-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(\"cob-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(\".cob-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.cob-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(\".cob-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.cob-button\" : \"button.cob-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=\"cob-button__linkwrapper\">\n <a\n class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.prefixIcon}\n ></cob-icon>`\n : \"\"}\n </slot>\n ${!this.circle\n ? this.label\n ? html`<div class=\"cob-button__text\">${this.label}</div>`\n : html` <slot class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.suffixIcon}\n ></cob-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`<cob-icon\n size=${this.size === \"sm\"\n ? \"24\"\n : this.size === \"lg\"\n ? \"40\"\n : \"32\"}\n name=${this.icon}\n ></cob-icon>`\n : \"\"}\n </slot>\n </a>\n </div>\n `\n : html`\n <button\n class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.prefixIcon}\n ></cob-icon>`\n : \"\"}\n </slot>\n ${!this.circle\n ? this.label\n ? html`<div class=\"cob-button__text\">${this.label}</div>`\n : html` <slot class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.suffixIcon}\n ></cob-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`<cob-icon\n size=${this.size === \"sm\"\n ? \"24\"\n : this.size === \"lg\"\n ? \"40\"\n : \"32\"}\n name=${this.icon}\n ></cob-icon>`\n : \"\"}\n </slot>\n </button>\n `}\n `;\n }\n}\n\nif (!customElements.get(\"cob-button\")) {\n customElements.define(\"cob-button\", CobButton);\n}\n"],"names":["buttonIdCounter","_CobButton","LitElement","e","slot","form","event","btn","linkEl","options","innerEl","html","ifDefined","unsafeCSS","styles","CobButton","__decorateClass","property","state"],"mappings":"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"}
1	+ {"version":3,"file":"cob-button.js","sources":["../../internals/dist/index.js","../src/cob-button.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/!\n City of Boston Web Design System v1.23.1\n * Description: A web design system for the City of Boston's digital products.\n * Repository: https://github.com/CityOfBoston/nywds-poc\n * License: MIT\n /\nlet p = 0;\nfunction f(e) {\n return `${e}-${Date.now()}-${p++}`;\n}\nfunction I(e, t, n) {\n e.dispatchEvent(\n new CustomEvent(t, { detail: n, bubbles: !0, composed: !0 })\n );\n}\nfunction w(e, t) {\n e.dispatchEvent(\n new Event(`cob-${t}`, { bubbles: !0, composed: !0 })\n );\n}\nconst g = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, _ = {\n labelledby: \"ariaLabel\",\n describedby: \"ariaDescription\"\n};\nfunction y(e) {\n return \"ariaDescribedByElements\" in e;\n}\nfunction E(e) {\n return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n return e.filter((t) => !!t);\n}\nfunction A(e) {\n return e.map((t) => (t.id \|\| (t.id = f(\"cob-ref\")), t.id));\n}\nfunction x(e, t, n) {\n const r = d(n), i = E(t);\n r.length ? e.setAttribute(i, A(r).join(\" \")) : e.removeAttribute(i);\n}\nfunction L(e, t, n, r, i) {\n const s = d(r), a = g[n], l = t;\n if (a && y(t)) {\n l[a] = s.length ? s : null;\n return;\n }\n const o = _[n];\n if (!o) return;\n const c = i ?? (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 R = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, C = {\n labelledby: \"aria-label\",\n describedby: \"aria-description\"\n};\nfunction P(e, t, n) {\n const r = d(n), i = R[t], s = C[t], a = e;\n if (i && i in e && (a[i] = r.length ? r : null), !s) return;\n const l = r.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 \|\| \"cob-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}, T = / @__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(r, i) {\n const s = this.internals;\n if (s && r in s) {\n s[r] = i;\n return;\n }\n const a = V(r);\n i === null ? this.removeAttribute(a) : this.setAttribute(a, i);\n }\n reflectDefaultSemantics() {\n const r = this.defaultRole;\n r && this.setHostAria(\"role\", r);\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 O = / @__PURE__ / h(u), v = (e) => {\n const n = class n extends h(e) {\n constructor() {\n super(...arguments), this.__internalValidationMessage = \"\";\n }\n get internalValidationMessage() {\n return this.__internalValidationMessage;\n }\n set internalValidationMessage(i) {\n i !== this.__internalValidationMessage && (this.__internalValidationMessage = i, this.requestUpdate(\"internalValidationMessage\"));\n }\n resolvedErrorMessage() {\n return this.errorMessage \|\| this.internalValidationMessage;\n }\n setFormValue(i) {\n this.internals?.setFormValue(i ?? null);\n }\n setValidityFromState(i, s, a) {\n const l = this.internals;\n if (!l) return;\n const o = Object.values(i).some(Boolean);\n o ? l.setValidity(i, 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.internalValidationMessage = \"\", this.clearValidity();\n }\n };\n n.formAssociated = !0;\n let t = n;\n return t;\n}, B = / @__PURE__ / v(u);\nfunction N(e) {\n const t = e.tagName.toLowerCase(), n = / @__PURE__ / new Set(), r = (i) => {\n i.querySelectorAll(\"\").forEach((s) => {\n const a = s.tagName.toLowerCase();\n a.startsWith(\"cob-\") && a !== t && !customElements.get(a) && n.add(a), s.shadowRoot && r(s.shadowRoot);\n });\n };\n return e.shadowRoot && r(e.shadowRoot), r(e), [...n].sort();\n}\nexport {\n T as CobElement,\n B as CobFormControlElement,\n O as CobReflectsAriaElement,\n v as FormControlMixin,\n b as IdentifiedMixin,\n h as ReflectsAriaMixin,\n x as associateControl,\n P as associateControlRefs,\n L as associateHost,\n I as dispatchCobEvent,\n w as dispatchCobFocusBlur,\n N as findUnregisteredChildren,\n f as generateId,\n y 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 {\n CobFormControlElement,\n dispatchCobEvent,\n dispatchCobFocusBlur,\n} from \"@cobwds/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// cob-button is used. Importing it here (intentional side effect) guarantees\n// it always renders.\nimport \"@cobwds/cob-icon\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./cob-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 `<cob-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 cob-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 [--cob-button-color] - Text color of the button label.\n * @cssprop [--cob-button-color--hover] - Text color when hovered.\n * @cssprop [--cob-button-color--active] - Text color when active/pressed.\n * @cssprop [--cob-button-background-color] - Background color of the button.\n * @cssprop [--cob-button-background-color--hover] - Background color when hovered.\n * @cssprop [--cob-button-background-color--active] - Background color when active/pressed.\n * @cssprop [--cob-button-border-color] - Border color of the button.\n * @cssprop [--cob-button-border-color--hover] - Border color when hovered.\n * @cssprop [--cob-button-border-color--active] - Border color when active/pressed.\n \n @fires {Event} cob-click - Fired when the button is clicked (mouse or keyboard). Not fired when disabled.\n * @fires {Event} cob-focus - Fired when the button receives focus.\n * @fires {Event} cob-blur - Fired when the button loses focus.\n \n @usage\n * - Use for the most important actions you want users to take, such as \"Download\", \"Sign up\", or \"Log out\".\n * - Use `variant=\"fill\"` for the primary action on the page. There should be only one primary action per page.\n * - Use `variant=\"outline\"` for secondary actions, placed next to the primary Fill button.\n * - Use `variant=\"ghost\"` buttons for additional actions beyond primary and secondary.\n * - Use `variant=\"text\"` buttons when an action needs to appear within a text block. If clicking takes the user somewhere else, use a Link instead.\n * - Always set the `type` attribute (`submit`, `button`, or `reset`). The default is `button`.\n * - Use sentence case for button labels, only capitalizing the first word.\n * - Place a `chevron_down icon` on the right for buttons that open a dropdown.\n * - Don't use buttons for navigation. Use an `<a>` element or Text button for links that take users somewhere else.\n * - Don't use icons in buttons without a text label. Very few icons are universally understood.\n * - Don't create custom button styles (color, shape, size). Consistency helps users recognize buttons and predict behavior.\n \n @example Basic\n * ```html\n * <cob-button label=\"Button\" variant=\"filled\"></cob-button>\n * ```\n \n @example Variant Outline\n * ```html\n * <cob-button label=\"Button\" variant=\"outline\"></cob-button>\n * ```\n \n @example Variant Ghost\n * ```html\n * <cob-button label=\"Button\" variant=\"ghost\"></cob-button>\n * ```\n \n @example Variant Text\n * ```html\n * <cob-button label=\"Button\" variant=\"text\"></cob-button>\n * ```\n \n @example Prefix Icon\n * ```html\n * <cob-button label=\"Previous\" prefixIcon=\"chevron_left\"></cob-button>\n * ```\n \n @example Suffix Icon\n * ```html\n * <cob-button label=\"Next\" suffixIcon=\"chevron_right\"></cob-button>\n * ```\n \n @example Slotted Icons\n * ```html\n * <cob-button label=\"Slotted icons\">\n * <cob-icon color=\"#db117d\" slot=\"prefix-icon\" name=\"chevron_left\"></cob-icon>\n * <cob-icon color=\"#db117d\" slot=\"suffix-icon\" name=\"chevron_right\"></cob-icon>\n * </cob-button>\n * ```\n \n @example Circle icon button\n * ```html\n * <cob-button circle icon=\"close\" label=\"Close dialog\"></cob-button>\n * ```\n \n @example Size Small\n * ```html\n * <cob-button label=\"Small\" size=\"sm\"></cob-button>\n * ```\n * @example Size Large\n * ```html\n * <cob-button label=\"Large\" size=\"lg\"></cob-button>\n * ```\n \n @example Full width\n * ```html\n * <cob-button label=\"Full width\" fullWidth></cob-button>\n * ```\n \n @example Inverted\n * ```html\n * <cob-button label=\"Inverted\" inverted></cob-button>\n * ```\n * @render Inverted\n * ```html\n * <div style=\"background: #1b1b1b; padding: 1rem;\">\n * <cob-button label=\"Inverted\" inverted></cob-button>\n * </div>\n * ```\n \n @example Disabled\n * ```html\n * <cob-button label=\"Disabled\" disabled></cob-button>\n * ```\n \n @example Href\n * ```html\n * <cob-button label=\"Visit Boston.gov\" href=\"https://www.boston.gov/\" target=\"_blank\" suffixIcon=\"open_in_new\"></cob-button>\n * ```\n \n @example Type\n * ```html\n * <cob-button type=\"submit\" label=\"Save Changes\" variant=\"filled\"></cob-button>\n * ```\n \n @example Disclosure trigger\n * ```html\n * <cob-button\n * label=\"Here's how you know\"\n * ariaExpanded=\"false\"\n * ariaControls=\"trust-bar\"\n * ></cob-button>\n * ```\n /\n\nexport class CobButton extends CobFormControlElement {\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 `<cob-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 `<cob-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 * <cob-button\n * label=\"Here's how you know\"\n * ariaExpanded=\"false\"\n * ariaControls=\"trust-bar\"\n * ></cob-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 `<cob-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 * <cob-button label=\"3\" ariaCurrent=\"page\"></cob-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 the form data, mirroring a native submit button.\n \n When `type=\"submit\"` and both `name` and `value` are set, the entry\n * `name=value` is included in the form's data only for submissions this\n * button triggers. It is not included when the form is submitted another\n * way (Enter in a text field, another button, `form.requestSubmit()`),\n * and it is not readable from `new FormData(form)` outside a submission,\n * matching native submitter semantics.\n \n A form-associated custom element cannot act as a native submitter, so\n * the value is staged through `ElementInternals.setFormValue()` for the\n * duration of the submission and cleared afterward.\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 @deprecated Listen for the `cob-click` event instead. `cob-click`\n * bubbles, is composed, and fires for both mouse and keyboard activation\n * but never while disabled. This property still works but is excluded\n * from generated framework wrappers and goes away in 2.0.\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 * CobFormControlElement (@cobwds/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 // A form-associated custom element cannot act as a native\n // submitter (requestSubmit() rejects anything that is not a\n // native submit button), so requestSubmit() stays argument-less.\n // To still contribute name=value like a native submit button,\n // stage the value through ElementInternals only for the duration\n // of this submission: the entry list is constructed synchronously\n // inside requestSubmit(), and clearing afterward keeps the value\n // out of submissions this button did not trigger.\n const contributesValue = this.name !== \"\" && this.value !== \"\";\n if (contributesValue) {\n this.setFormValue(this.value);\n }\n try {\n form.requestSubmit();\n } finally {\n if (contributesValue) {\n this.setFormValue(null);\n }\n }\n break;\n }\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 dispatchCobFocusBlur(this, \"focus\");\n }\n\n private _handleBlur() {\n const button = this.shadowRoot?.querySelector(\".cob-button\");\n button?.classList.remove(\"active-focus\");\n dispatchCobFocusBlur(this, \"blur\");\n }\n\n private _handleClick(event: Event) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n this._manageFormAction();\n dispatchCobEvent(this, \"cob-click\", undefined);\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(\".cob-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.cob-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(\".cob-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.cob-button\" : \"button.cob-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=\"cob-button__linkwrapper\">\n <a\n class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.prefixIcon}\n ></cob-icon>`\n : \"\"}\n </slot>\n ${this.circle\n ? html`<div class=\"cob-button__text sr-only\">\n ${this.label}\n </div>`\n : this.label\n ? html`<div class=\"cob-button__text\">${this.label}</div>`\n : html` <slot class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.suffixIcon}\n ></cob-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`<cob-icon\n size=${this.size === \"sm\"\n ? \"24\"\n : this.size === \"lg\"\n ? \"40\"\n : \"32\"}\n name=${this.icon}\n ></cob-icon>`\n : \"\"}\n </slot>\n </a>\n </div>\n `\n : html`\n <button\n class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.prefixIcon}\n ></cob-icon>`\n : \"\"}\n </slot>\n ${this.circle\n ? html`<div class=\"cob-button__text sr-only\">\n ${this.label}\n </div>`\n : this.label\n ? html`<div class=\"cob-button__text\">${this.label}</div>`\n : html` <slot class=\"cob-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`<cob-icon\n size=\"16\"\n name=${this.suffixIcon}\n ></cob-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`<cob-icon\n size=${this.size === \"sm\"\n ? \"24\"\n : this.size === \"lg\"\n ? \"40\"\n : \"32\"}\n name=${this.icon}\n ></cob-icon>`\n : \"\"}\n </slot>\n </button>\n `}\n `;\n }\n}\n\nif (!customElements.get(\"cob-button\")) {\n customElements.define(\"cob-button\", CobButton);\n}\n"],"names":["LitElement","unsafeCSS","html","property","state","ifDefined","p","f","e","I","t","n","w","b","h","r","i","a","V","v","l","o","B","u","_CobButton","CobFormControlElement","slot","form","contributesValue","dispatchCobFocusBlur","event","dispatchCobEvent","btn","linkEl","options","innerEl","styles","CobButton","__decorateClass"],"mappings":"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"}

package/dist/index.d.ts ADDED Viewed

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

package/package.json CHANGED Viewed

@@ -1,13 +1,13 @@
 {
   "name": "@cobwds/cob-button",
-  "version": "1.19.3",
+  "version": "1.23.1",
   "description": "The Button component from the City of Boston Web Design System.",
   "module": "dist/cob-button.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/cob-button.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/cob-button.js"
     }
   },
   "type": "module",
@@ -23,9 +23,10 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@cobwds/cob-icon": "^1.19.3"
+    "@cobwds/cob-icon": "^1.23.1"
   },
   "devDependencies": {
+    "@cobwds/internals": "^1.23.1",
     "lit": "^3.3.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"