@nysds/components 1.14.0 → 1.15.0

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. */
@@ -104,6 +113,7 @@ export declare class NysCheckbox extends LitElement {
      * --------------------------------------------------------------------------
      */
     private _emitChangeEvent;
+    private _emitOtherInputEvent;
     private _handleChange;
     private _handleFocus;
     private _handleBlur;

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. */

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

@@ -44,6 +44,14 @@ import { LitElement } from "lit";
  */
 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. */
@@ -140,6 +148,7 @@ export declare class NysDatepicker extends LitElement {
     private _parseLocalDate;
     private _setTodayDate;
     private _setFocusOnTodayDate;
+    private _dispatchInputEvent;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------

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-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. */
@@ -77,6 +86,7 @@ export declare class NysRadiobutton extends LitElement {
      * --------------------------------------------------------------------------
      */
     private _emitChangeEvent;
+    private _emitOtherInputEvent;
     private _handleChange;
     private _handleFocus;
     private _handleBlur;

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. */

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. */

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

@@ -28,6 +28,14 @@ import { LitElement } from "lit";
  */
 export declare class NysTextarea 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-textinput/src/nys-textinput.d.ts

@@ -41,6 +41,14 @@ import { LitElement } from "lit";
  */
 export declare class NysTextinput 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. */
@@ -108,7 +116,6 @@ export declare class NysTextinput extends LitElement {
     disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
-    focus(): void;
     /**
      * Form Integration
      * --------------------------------------------------------------------------

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

@@ -26,6 +26,14 @@ import { LitElement } from "lit";
  */
 export declare class NysToggle 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. */
@@ -72,7 +80,8 @@ export declare class NysToggle extends LitElement {
     private _emitChangeEvent;
     private _handleFocus;
     private _handleBlur;
-    private _handleChange;
+    private _handleClick;
+    private _handleSliderClick;
     private _handleKeyDown;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -20,6 +20,11 @@ import { LitElement } from "lit";
  * <nys-unavheader hideSearch></nys-unavheader>
  * ```
  */
+interface Language {
+    code: string;
+    label: string;
+    url?: string;
+}
 export declare class NysUnavHeader extends LitElement {
     static styles: import("lit").CSSResult;
     /** Internal: Whether trust bar panel is expanded. */
@@ -34,8 +39,10 @@ export declare class NysUnavHeader extends LitElement {
     hideTranslate: boolean;
     /** Hides the search functionality. */
     hideSearch: boolean;
+    /** The URL endpoint of the search, make sure to include the query param. */
     searchUrl: string;
-    private languages;
+    /** The list of languages this site can be translated to, default to use Smartling */
+    languages: Language[];
     /**
      * Lifecycle Methods
      * --------------------------------------------------------------------------
@@ -50,6 +57,7 @@ export declare class NysUnavHeader extends LitElement {
     private _toggleTrustbar;
     private _toggleLanguageList;
     private _toggleSearchDropdown;
+    private _handleLanguageSelect;
     private _handleSearchFocus;
     private _handleSearchBlur;
     private _handleSearchKeyup;
@@ -57,3 +65,4 @@ export declare class NysUnavHeader extends LitElement {
     private _handleSearch;
     render(): import("lit-html").TemplateResult<1>;
 }
+export {};

package/dist/src/index.d.ts

@@ -5,8 +5,10 @@ export * from "../packages/nys-backtotop/src/index";
 export * from "../packages/nys-button/src/index";
 export * from "../packages/nys-badge/src/index";
 export * from "../packages/nys-checkbox/src/index";
+export * from "../packages/nys-combobox/src/index";
 export * from "../packages/nys-datepicker/src/index";
 export * from "../packages/nys-divider/src/index";
+export * from "../packages/nys-dropdownmenu/src/index";
 export * from "../packages/nys-errormessage/src/index";
 export * from "../packages/nys-fileinput/src/index";
 export * from "../packages/nys-icon/src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [

package/dist/nys-stepper/newsletter.html

@@ -1,4 +0,0 @@
-<div style="padding: 2rem;">
-  <h2>Newsletter Opt-In</h2>
-  <p>Subscribe to our newsletter to stay updated on the latest features and offers.</p>
-</div>

package/dist/nys-stepper/personal.html

@@ -1,6 +0,0 @@
-<div style="padding: 2rem;">
-  <h2>Personal Details</h2>
-  <p>This is the form to enter your personal information. Fill in your name, address, and contact details here.</p>
-  <nys-textinput label="Name" required width="md"></nys-textinput>
-  <nys-textinput label="Agency Email" required width="md"></nys-textinput>
-</div>

package/dist/nys-stepper/survey.html

@@ -1,5 +0,0 @@
-<div style="padding: 2rem;">
-  <h2>Usage Survey</h2>
-  <p>Tell us how you plan to use this application. Your feedback helps us improve.</p>
-  <nys-textarea label="Project Details" resize="none"></nys-textarea>
-</div>

package/dist/nys-stepper/team.html

@@ -1,6 +0,0 @@
-<div style="padding: 2rem;">
-  <h2>Team Information</h2>
-  <p>Provide details about your team. Who are you working with? What is your role?</p>
-  <nys-textinput label="Agency Name" required width="md"></nys-textinput>
-  <nys-textinput label="Team Name" required width="md"></nys-textinput>
-</div>