@nysds/components 1.13.1 → 1.15.0

package/dist/packages/nys-accordion/src/nys-accordion.d.ts

@@ -11,6 +11,10 @@ import "./nys-accordionitem";
  *
  * @slot - Default slot for `nys-accordionitem` elements.
  *
+ * @cssprop [--nys-accordion-background-color--header] - Background color of the accordion header.
+ * @cssprop [--nys-accordion-background-color--header--hover] - Background hover color of the accordion header.
+ * @cssprop [--nys-accordion-content-max-width] - Maximum readable width of accordion content. Defaults to a character-based width (80ch) for readability.
+ *
  * @example Basic accordion
  * ```html
  * <nys-accordion>

package/dist/packages/nys-button/src/nys-button.d.ts

@@ -59,6 +59,14 @@ import { LitElement } from "lit";
  */
 export declare class NysButton extends LitElement {
     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.
      */

package/dist/packages/nys-checkbox/src/nys-checkbox.d.ts

@@ -15,6 +15,7 @@ import "./nys-checkboxgroup";
  * @fires nys-change - Fired when checked state changes. Detail: `{id, checked, name, value}`.
  * @fires nys-focus - Fired when checkbox gains focus.
  * @fires nys-blur - Fired when checkbox loses focus.
+ * @fires nys-other-input - Fired when "other" text input value changes. Detail: `{id, name, value}`.
  *
  * @example Single checkbox
  * ```html
@@ -31,6 +32,14 @@ import "./nys-checkboxgroup";
  */
 export declare class NysCheckbox extends LitElement {
     static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /** Whether checkbox is checked. */
     checked: boolean;
     /** Prevents interaction. */
@@ -66,6 +75,10 @@ export declare class NysCheckbox extends LitElement {
      * @default "md"
      */
     size: "sm" | "md";
+    other: boolean;
+    showOtherError: boolean;
+    private isMobile;
+    private _hasUserInteracted;
     getInputElement(): Promise<HTMLInputElement | null>;
     private _internals;
     /**
@@ -93,14 +106,21 @@ export declare class NysCheckbox extends LitElement {
     checkValidity(): boolean;
     private _handleInvalid;
     private _manageLabelClick;
+    get _hasDescription(): boolean;
+    private _handleResize;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
      */
     private _emitChangeEvent;
+    private _emitOtherInputEvent;
     private _handleChange;
     private _handleFocus;
     private _handleBlur;
+    private _handleTextInputBlur;
     private _handleKeydown;
+    private _handleTextInput;
+    private _validateOtherAndEmitError;
+    private _dispatchClearError;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-checkbox/src/nys-checkboxgroup.d.ts

@@ -22,6 +22,14 @@ import { LitElement } from "lit";
  */
 export declare class NysCheckboxgroup extends LitElement {
     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. Set on group, not individual checkboxes. */
@@ -52,6 +60,8 @@ export declare class NysCheckboxgroup extends LitElement {
      */
     size: "sm" | "md";
     private _slottedDescriptionText;
+    private _hasOtherError;
+    private _otherErrorCheckbox;
     private _internals;
     /**
      * Lifecycle methods
@@ -67,9 +77,11 @@ export declare class NysCheckboxgroup extends LitElement {
      * Functions
      * --------------------------------------------------------------------------
      */
+    private _hasAtLeastOneChecked;
     private _setGroupExist;
     private _setupCheckboxRequired;
     private _manageRequire;
+    private _setCustomOtherError;
     private _updateCheckboxSize;
     private _updateCheckboxTile;
     private _updateCheckboxInvert;
@@ -83,5 +95,8 @@ export declare class NysCheckboxgroup extends LitElement {
      * --------------------------------------------------------------------------
      */
     private _handleCheckboxChange;
+    private _handleChildError;
+    private _handleChildErrorClear;
+    private _checkOtherInputs;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-combobox/src/index.d.ts

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

package/dist/packages/nys-combobox/src/nys-combobox.d.ts

@@ -0,0 +1,118 @@
+import { LitElement } from "lit";
+/**
+ * `<nys-combobox>` is a form-enabled combo box combining text input with a filterable dropdown.
+ *
+ * Features:
+ * - Type to filter options
+ * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Mouse and keyboard interaction
+ * - Clears non-selected text on blur
+ * - Clear button when value is selected
+ * - Integrates with forms via ElementInternals
+ * - Supports native <option> and <optgroup> elements
+ * - Accessible per W3C ARIA Authoring Practices
+ *
+ * @slot description - Optional custom description content below the label.
+ * @slot default - Options (<option>, <optgroup>) to populate the dropdown
+ *
+ * @fires nys-change - Fired when selection changes. Detail: `{ id, value }`.
+ * @fires nys-input - Fired on input change. Detail: `{ id, value }`.
+ * @fires nys-focus - Fired when combobox receives focus.
+ * @fires nys-blur - Fired when combobox loses focus.
+ */
+export declare class NysCombobox extends LitElement {
+    static styles: import("lit").CSSResult;
+    id: string;
+    name: string;
+    label: string;
+    description: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    optional: boolean;
+    tooltip: string;
+    form: string | null;
+    width: "md" | "lg" | "full";
+    inverted: boolean;
+    showError: boolean;
+    errorMessage: string;
+    private _isOpen;
+    private _filterText;
+    private _highlightedIndex;
+    private _options;
+    private _filteredOptions;
+    private _dropdownAbove;
+    private _announcement;
+    private _input;
+    private _listbox?;
+    private _originalErrorMessage;
+    private _hasUserInteracted;
+    private _internals;
+    private _selectedLabel;
+    private _defaultValue;
+    /**
+     * Lifecycle methods
+     * --------------------------------------------------------------------------
+     */
+    static formAssociated: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Slot handling
+     * --------------------------------------------------------------------------
+     */
+    private _handleSlotChange;
+    /**
+     * Form Integration
+     * --------------------------------------------------------------------------
+     */
+    private _setValue;
+    private _manageRequire;
+    private _setValidityMessage;
+    private _validate;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    private _handleInvalid;
+    /**
+     * Dropdown positioning
+     * --------------------------------------------------------------------------
+     */
+    private _positionDropdown;
+    /**
+     * Filtering
+     * --------------------------------------------------------------------------
+     */
+    private _filterOptions;
+    /**
+     * Keyboard navigation
+     * --------------------------------------------------------------------------
+     */
+    private _scrollToHighlighted;
+    private _handleKeyDown;
+    private _moveHighlight;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleDocumentClick;
+    private _handleIconClick;
+    private _handleClearClick;
+    private _handleOptionClick;
+    private _handleOptionMouseEnter;
+    private _selectOption;
+    private _handleChange;
+    private _openDropdown;
+    private _closeDropdown;
+    /**
+     * Render helpers
+     * --------------------------------------------------------------------------
+     */
+    private _renderOptions;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/packages/nys-combobox/src/nys-combobox.figma.d.ts

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

package/dist/packages/nys-datepicker/src/nys-datepicker.d.ts

@@ -1,35 +1,97 @@
 import { LitElement } from "lit";
 /**
- * `<nys-datepicker>` is a form-associated, accessible date picker component.
- * Optionally wraps a `<wc-datepicker>` for custom calendar UI.
+ * Date picker with calendar popup and form validation. Falls back to native date input
+ * on Safari and mobile.
  *
- * Events:
- * @fires nys-blur - Dispatched when input or calendar loses focus
- * @fires nys-input - Dispatched when user selects or types a valid date
+ * @summary Date picker with calendar popup and native fallback.
+ * @element nys-datepicker
  *
- * Notes:
- * - Uses native date input on Safari or mobile devices (custom calendar removed for these scenarios)
+ * @fires nys-blur - Fired when input or calendar loses focus. Triggers validation.
+ * @fires nys-input - Fired on date selection. Detail: `{id, value}`.
+ *
+ * @example Basic date picker
+ * ```html
+ * <nys-datepicker label="Birth Date" required></nys-datepicker>
+ * ```
+ *
+ * @example With width and description
+ * ```html
+ * <nys-datepicker
+ *   label="Event Date"
+ *   description="Select the date of your event"
+ *   width="lg">
+ * </nys-datepicker>
+ * ```
+ *
+ * @example Hide buttons, set start date
+ * ```html
+ * <nys-datepicker
+ *   label="Appointment"
+ *   hideTodayButton
+ *   hideClearButton
+ *   startDate="2024-01-01">
+ * </nys-datepicker>
+ * ```
+ *
+ * @example With validation error message
+ * ```html
+ * <nys-datepicker
+ *   label="Start Date"
+ *   required
+ *   errorMessage="Please select a valid start date">
+ * </nys-datepicker>
+ * ```
  */
 export declare class NysDatepicker extends LitElement {
     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;
+    /**
+     * Input width: `md` (200px), `lg` (384px), `full` (100%).
+     * @default "md"
+     */
     width: "md" | "lg" | "full";
+    /** Hide the "Today" button in calendar popup. */
     hideTodayButton: boolean;
+    /** Hide the "Clear" button in calendar popup. */
     hideClearButton: boolean;
+    /** Disable interaction. */
     disabled: boolean;
+    /** Mark as required. Shows "Required" flag and validates on blur. */
     required: boolean;
+    /** Show "Optional" flag. Use when most fields are required. */
     optional: boolean;
+    /** Show error state. */
     showError: boolean;
+    /** Error message text. */
     errorMessage: string;
+    /** Form `id` to associate with when input is outside form. */
     form: string | null;
+    /** Tooltip text on info icon hover. */
     tooltip: string;
+    /** Input type. Currently only supports `date`. */
     type: string;
+    /** Label text. Required for accessibility. */
     label: string;
+    /** Helper text below label. */
     description: string;
+    /** Initial date when calendar opens (YYYY-MM-DD). */
     startDate: string;
+    /** Dark background mode. */
     inverted: boolean;
+    /** Selected date. Accepts Date object or ISO string (YYYY-MM-DD). */
     value: string | Date | undefined;
+    private datepickerIsOpen;
     private _hasUserInteracted;
     private _internals;
     /**
@@ -84,6 +146,9 @@ export declare class NysDatepicker extends LitElement {
     private _replaceButtonSVG;
     private _addMonthDropdownIcon;
     private _parseLocalDate;
+    private _setTodayDate;
+    private _setFocusOnTodayDate;
+    private _dispatchInputEvent;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
@@ -91,6 +156,7 @@ export declare class NysDatepicker extends LitElement {
     private _handleInputKeydown;
     private _handleBlur;
     private _onDocumentClick;
+    private _onKeydownEsc;
     private _toggleDatepicker;
     private _openDatepicker;
     private _handleDateChange;
@@ -98,6 +164,7 @@ export declare class NysDatepicker extends LitElement {
     private _handleClearClick;
     private _handleInputChange;
     private _getValidDateFromInput;
+    private _handleFocusTrap;
     private _isSafari;
     /**
      * Determines whether the current device uses a coarse pointer.

package/dist/packages/nys-dropdownmenu/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./nys-dropdownmenu";
+export * from "./nys-dropdownmenuitem";

package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenu.d.ts

@@ -0,0 +1,110 @@
+import { LitElement } from "lit";
+import "./nys-dropdownmenuitem";
+/**
+ * Dropdown menus enable users to select an action from a list of options.
+ * They’re commonly used to save space by grouping related actions, or to provide actions in a confined space.
+ *
+ * @summary Action menu with auto-positioning, keyboard support, and screen reader integration.
+ * @element nys-dropdownmenu
+ *
+ * @example Basic dropdown
+ * ```html
+ * <button id="my-trigger">Actions</button>
+ * <nys-dropdownmenu for="my-trigger">
+ *   <nys-dropdownmenuitem label="Edit" link="/edit"></nys-dropdownmenuitem>
+ *   <nys-dropdownmenuitem label="Delete" link="/delete"></nys-dropdownmenuitem>
+ * </nys-dropdownmenu>
+ * ```
+ *
+ * @example Positioned dropdown
+ * ```html
+ * <button id="settings-btn">Settings</button>
+ * <nys-dropdownmenu for="settings-btn" position="top-start">
+ *   <nys-dropdownmenuitem label="Profile" link="/profile"></nys-dropdownmenuitem>
+ *   <nys-dropdownmenuitem label="Logout" link="/logout"></nys-dropdownmenuitem>
+ * </nys-dropdownmenu>
+ * ```
+ */
+type Position = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+export declare class NysDropdownMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+    for: string;
+    showDropdown: boolean;
+    /**
+     * Preferred position relative to trigger.
+     * @default "bottom-start"
+     */
+    position: Position | null;
+    private _trigger;
+    private _menuElement;
+    private _ariaTarget;
+    private readonly GAP;
+    /**
+     * Lifecycle Methods
+     * --------------------------------------------------------------------------
+     */
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): Promise<void>;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
+    private _findTrigger;
+    private _connectTrigger;
+    private _toggleDropdown;
+    private _closeDropdown;
+    private _getMenuItems;
+    private _handleDocumentClick;
+    private _focusOnFirstItem;
+    private applyInverseTransform;
+    /**
+     * Position Logic
+     * --------------------------------------------------------------------------
+     */
+    /**
+     * The controller function for positioning the dropdown menu.
+     * The logic diverts to if user sets position or we auto position the dropdown menu
+     */
+    private _positionMenu;
+    private _setUserPosition;
+    /**
+     * Auto Positioning of the dropdown menu relies on the best surrounding space available
+     * to select the desirable position.
+     */
+    private _autoPosition;
+    /**
+     * Checks if the dropdown menu fits inside the viewport on the given side of the trigger.
+     * Overrides user set position for auto-positioning if user's desire space is not available
+     */
+    private _checkSpaceAvailable;
+    private _checkPositionFits;
+    /**
+     * This position is called for when user's set position didn't fit OR auto positioning when default position doesn't fit
+     * We look for the best alternative positions in order of preference base on the set position (e.g. bottom-start => bottom-end).
+     * @param userPosition
+     * @param space
+     * @param menuRect
+     */
+    private _findBestAlternative;
+    private _findMostAvailableSpace;
+    /**
+     * A valid ideal position has been chosen.
+     * This function calculates the coordinate of the trigger to properly position the dropdown menu.
+     * @param position
+     * @returns
+     */
+    private _calculateCoordinates;
+    private _applyPosition;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _handleTriggerKeydown;
+    private _handleMenuKeydown;
+    private _handleWindowResize;
+    private _handleWindowScroll;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenu.figma.d.ts

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

package/dist/packages/nys-dropdownmenu/src/nys-dropdownmenuitem.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+/**
+ * **Slotted component.** Displays an individual dropdown item within `nys-dropdown` with label.
+ *
+ * The `nys-dropdownitem` is used as customizable item within the dropdown so users don't have to raw code <ul>, <li>, <a href>
+ * and have the benefit of default customization.
+ *
+ * @summary Dropdown item to display label and provide href link.
+ * @element nys-dropdownmenuitem
+ *
+ * @example Basic item
+ * ```html
+ * <nys-dropdownmenuitem label="Edit" link="/edit"></nys-dropdownmenuitem>
+ * ```
+ *
+ * @example Disabled item
+ * ```html
+ * <nys-dropdownmenuitem label="Delete" link="/delete" disabled></nys-dropdownmenuitem>
+ * ```
+ */
+export declare class NysDropdownMenuItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    label: string;
+    href: string;
+    disabled: boolean;
+    target: string;
+    prefixIcon: string;
+    divider: string;
+    connectedCallback(): void;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/packages/nys-fileinput/src/nys-fileinput.d.ts

@@ -25,6 +25,14 @@ import "./nys-fileitem";
  */
 export declare class NysFileinput extends LitElement {
     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. */

package/dist/packages/nys-fileinput/src/nys-fileitem.d.ts

@@ -12,6 +12,14 @@ import { LitElement } from "lit";
  */
 export declare class NysFileItem extends LitElement {
     static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /** Name of the file being displayed. */
     filename: string;
     /**

package/dist/packages/nys-label/src/nys-label.d.ts

@@ -26,5 +26,10 @@ export declare class NysLabel extends LitElement {
     get tooltip(): string;
     set tooltip(value: string);
     private _tooltip;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _handleLabelClick;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-radiobutton/src/nys-radiobutton.d.ts

@@ -14,6 +14,7 @@ import "./nys-radiogroup";
  * @fires nys-change - Fired when selection changes. Detail: `{id, checked, name, value}`.
  * @fires nys-focus - Fired when radio gains focus.
  * @fires nys-blur - Fired when radio loses focus.
+ * @fires nys-other-input - Fired when "other" text input value changes. Detail: `{id, name, value}`.
  *
  * @example Radio group
  * ```html
@@ -25,6 +26,14 @@ import "./nys-radiogroup";
  */
 export declare class NysRadiobutton extends LitElement {
     static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /** Whether this radio is selected. Only one per group can be checked. */
     checked: boolean;
     /** Prevents interaction. */
@@ -52,6 +61,10 @@ export declare class NysRadiobutton extends LitElement {
     size: "sm" | "md";
     /** Renders as tile with larger clickable area. */
     tile: boolean;
+    other: boolean;
+    showOtherError: boolean;
+    private isMobile;
+    private _hasUserInteracted;
     static buttonGroup: Record<string, NysRadiobutton>;
     /**
      * Lifecycle methods
@@ -66,14 +79,21 @@ export declare class NysRadiobutton extends LitElement {
      */
     getInputElement(): Promise<HTMLInputElement | null>;
     formResetUpdate(): void;
+    private _handleResize;
+    private _clearOtherState;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
      */
     private _emitChangeEvent;
+    private _emitOtherInputEvent;
     private _handleChange;
     private _handleFocus;
     private _handleBlur;
     private _callInputHandling;
+    private _handleTextInput;
+    private _handleTextInputBlur;
+    private _validateOtherAndEmitError;
+    private _handleOtherKeydown;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-radiobutton/src/nys-radiogroup.d.ts

@@ -23,6 +23,14 @@ import { LitElement } from "lit";
  */
 export declare class NysRadiogroup extends LitElement {
     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. Auto-populated from child radiobuttons. */
@@ -95,5 +103,6 @@ export declare class NysRadiogroup extends LitElement {
      */
     private _handleRadioButtonChange;
     private _handleInvalid;
+    private _handleChildError;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-select/src/nys-select.d.ts

@@ -37,6 +37,14 @@ import { LitElement } from "lit";
  */
 export declare class NysSelect extends LitElement {
     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. */