@nysds/components 1.11.4 → 1.13.0

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

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+/**
+ * `<nys-table>` is a responsive table component that can display native HTML tables,
+ * supports striped and bordered styling, sortable columns, and CSV download.
+ *
+ * @slot - Accepts a `<table>` element. Only the first table is rendered.
+ *
+ * @fires nys-click - Fired when the download button or sortable headers are clicked.
+ *
+ * @method downloadFile - Triggers download of the CSV file if `download` is set.
+ */
+export declare class NysTable extends LitElement {
+    static styles: import("lit").CSSResult;
+    id: string;
+    name: string;
+    striped: boolean;
+    sortable: boolean;
+    bordered: boolean;
+    download: string;
+    private _sortColumn;
+    private _sortDirection;
+    private _captionText;
+    /**************** Lifecycle Methods ****************/
+    constructor();
+    connectedCallback(): void;
+    /******************** Functions ********************/
+    firstUpdated(): void;
+    _handleSlotChange(): void;
+    _normalizeTable(table: HTMLTableElement): void;
+    _addSortIcons(table: HTMLTableElement): void;
+    _updateSortIcons(table: HTMLTableElement): void;
+    _onSortClick(columnIndex: number, table: HTMLTableElement): void;
+    _sortTable(table: HTMLTableElement, columnIndex: number, direction: "asc" | "desc"): void;
+    _updateSortedColumnStyles(table: HTMLTableElement): void;
+    downloadFile(): void;
+    /****************** Event Handlers ******************/
+    render(): import("lit-html").TemplateResult<1>;
+}

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

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

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

@@ -1,4 +1,16 @@
 import { LitElement } from "lit";
+/**
+ * `<nys-textarea>` is a form-enabled textarea with validation, accessibility support,
+ * and live error messages. Integrates with forms via ElementInternals.
+ *
+ * @slot description - Optional slot for custom description content below the label.
+ *
+ * @fires nys-input - Fired on input, detail: `{ id, value }`
+ * @fires nys-focus - Fired on focus.
+ * @fires nys-blur - Fired on blur.
+ * @fires nys-select - Fired on text selection, detail: `{ id, value }`
+ * @fires nys-selectionchange - Fired on selection change, detail: `{ id, value }`
+ */
 export declare class NysTextarea extends LitElement {
     static styles: import("lit").CSSResult;
     id: string;
@@ -11,38 +23,46 @@ export declare class NysTextarea extends LitElement {
     readonly: boolean;
     required: boolean;
     optional: boolean;
-    _tooltip: string;
+    tooltip: string;
     inverted: boolean;
     form: string | null;
     maxlength: number | null;
-    private static readonly VALID_WIDTHS;
-    width: (typeof NysTextarea.VALID_WIDTHS)[number];
+    width: "sm" | "md" | "lg" | "full";
     rows: number;
-    private static readonly VALID_RESIZE;
-    private _resize;
-    get resize(): (typeof NysTextarea.VALID_RESIZE)[number];
-    set resize(value: string);
+    resize: "vertical" | "none";
     showError: boolean;
     errorMessage: string;
     updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
     private _hasUserInteracted;
     private _internals;
-    /********************** Lifecycle updates **********************/
+    /**
+     * Lifecycle methods
+     * --------------------------------------------------------------------------
+     */
     static formAssociated: boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    formResetCallback(): void;
-    /********************** Form Integration **********************/
+    /**
+     * Form Integration
+     * --------------------------------------------------------------------------
+     */
     private _setValue;
     private _manageRequire;
     private _setValidityMessage;
     private _validate;
-    /********************** Functions **********************/
+    formResetCallback(): void;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
     checkValidity(): boolean;
     private _handleInvalid;
-    /******************** Event Handlers ********************/
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
     private _handleInput;
     private _handleFocus;
     private _handleBlur;

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

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

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

@@ -1,12 +1,22 @@
 import { LitElement } from "lit";
+/**
+ * `<nys-textinput>` is a form-enabled text input with validation, optional
+ * masking, password toggle, accessibility support, and live error messages.
+ * Works with forms via ElementInternals.
+ *
+ * @slot description - Optional custom description content below the label.
+ * @slot startButton - Slot for a single <nys-button> at the start of the input.
+ * @slot endButton - Slot for a single <nys-button> at the end of the input.
+ *
+ * @fires nys-input - Fired on input change. Detail: `{ id, value }`.
+ * @fires nys-focus - Fired when input receives focus.
+ * @fires nys-blur - Fired when input loses focus.
+ */
 export declare class NysTextinput extends LitElement {
     static styles: import("lit").CSSResult;
     id: string;
     name: string;
-    private static readonly VALID_TYPES;
-    private _type;
-    get type(): (typeof NysTextinput.VALID_TYPES)[number];
-    set type(value: string);
+    type: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
     label: string;
     description: string;
     placeholder: string;
@@ -15,12 +25,11 @@ export declare class NysTextinput extends LitElement {
     readonly: boolean;
     required: boolean;
     optional: boolean;
-    _tooltip: string;
+    tooltip: string;
     form: string | null;
     pattern: string;
     maxlength: number | null;
-    private static readonly VALID_WIDTHS;
-    width: (typeof NysTextinput.VALID_WIDTHS)[number];
+    width: "sm" | "md" | "lg" | "full";
     step: number | null;
     min: number | null;
     max: number | null;
@@ -32,26 +41,38 @@ export declare class NysTextinput extends LitElement {
     private _hasUserInteracted;
     private _internals;
     private _maskPatterns;
-    /********************** Lifecycle updates **********************/
+    /**
+     * Lifecycle methods
+     * --------------------------------------------------------------------------
+     */
     static formAssociated: boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
-    formResetCallback(): void;
-    /********************** Form Integration **********************/
+    /**
+     * Form Integration
+     * --------------------------------------------------------------------------
+     */
     private _setValue;
     private _manageRequire;
     private _setValidityMessage;
     private _validate;
-    /********************** Functions **********************/
+    formResetCallback(): void;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
     checkValidity(): boolean;
     private _handleInvalid;
     private _togglePasswordVisibility;
     private _updateOverlay;
     private _applyMask;
-    /******************** Event Handlers ********************/
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
     private _handleInput;
     private _handleFocus;
     private _handleBlur;

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

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

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

@@ -1,4 +1,15 @@
 import { LitElement } from "lit";
+/**
+ * `<nys-toggle>` is a form-associated toggle switch with label, description,
+ * size variants, inverted styles, and optional icons. Supports keyboard
+ * interaction and integrates with forms via ElementInternals.
+ *
+ * @slot description - Optional slot to provide additional description below the label.
+ *
+ * @fires nys-change - Fired when toggle changes state. Detail: `{ id, checked }`.
+ * @fires nys-focus - Fired when toggle receives focus.
+ * @fires nys-blur - Fired when toggle loses focus.
+ */
 export declare class NysToggle extends LitElement {
     static styles: import("lit").CSSResult;
     id: string;
@@ -11,18 +22,24 @@ export declare class NysToggle extends LitElement {
     disabled: boolean;
     noIcon: boolean;
     inverted: boolean;
-    private static readonly VALID_SIZES;
-    private _size;
-    get size(): (typeof NysToggle.VALID_SIZES)[number];
-    set size(value: string);
+    size: "sm" | "md";
     private _internals;
-    /********************** Lifecycle updates **********************/
+    /**
+     * Lifecycle methods
+     * --------------------------------------------------------------------------
+     */
     static formAssociated: boolean;
     constructor();
     connectedCallback(): void;
-    /********************** Form Integration **********************/
+    /**
+     * Form Integration
+     * --------------------------------------------------------------------------
+     */
     updated(changedProperties: Map<string, any>): void;
-    /********************** Event Handlers **********************/
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
     private _emitChangeEvent;
     private _handleFocus;
     private _handleBlur;

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

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

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

@@ -1,37 +1,77 @@
 import { LitElement } from "lit";
+/**
+ * `<nys-tooltip>` is a custom tooltip component for NYS design system elements.
+ * It supports dynamic positioning, screen-reader accessibility, keyboard interaction,
+ * and viewport overflow handling.
+ *
+ * The tooltip automatically positions itself relative to a target element specified
+ * via the `for` attribute, but can also respect a user-defined position.
+ *
+ * @fires nys-focus - Dispatched when the reference element receives focus (via keyboard or programmatically).
+ * @fires nys-blur - Dispatched when the reference element loses focus or mouse leaves the tooltip.
+ *
+ * Notes:
+ * - Tooltip visibility is automatically managed on hover/focus of the reference element.
+ * - The component adjusts position dynamically to prevent overflow off-screen.
+ * - Supports keyboard dismissal with the Escape key.
+ */
 export declare class NysTooltip extends LitElement {
     static styles: import("lit").CSSResult;
     id: string;
     text: string;
     inverted: boolean;
-    focusable: boolean;
+    for: string;
     private _active;
     private _userHasSetPosition;
     private _originalUserPosition;
     private _internallyUpdatingPosition;
-    /********************* Position Logic *********************/
+    private _hideTimeout;
     private _position;
     get position(): "right" | "top" | "bottom" | "left" | null;
     set position(value: "right" | "top" | "bottom" | "left" | null);
-    /**************** Lifecycle Methods ****************/
+    /**
+     * Lifecycle Methods
+     * --------------------------------------------------------------------------
+     */
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private get _firstAssignedEl();
-    firstUpdated(): void;
+    firstUpdated(): Promise<void>;
     updated(changedProps: Map<string, unknown>): void;
-    /******************** Event Handlers ********************/
-    private _handleTooltipEnter;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _showTooltip;
     private _handleBlurOrMouseLeave;
+    private _triggerFadeOut;
+    private _cancelFadeOut;
     private _addScrollListeners;
     private _removeScrollListeners;
     private _handleScrollOrResize;
     private _handleEscapeKey;
-    /******************** Functions ********************/
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
+    private _getReferenceElement;
     private _passAria;
+    /**
+     * In React, the reference element found is often the native HTML element within the nys-component.
+     * Therefore, this function accounts for the closest NYS component ancestor that supports a tooltip prop.
+     */
+    private _applyTooltipPropToFormComponent;
     private _applyFocusBehavior;
+    /**
+     * Checks if the tooltip fits inside the viewport on the given side of the trigger.
+     * Used for auto-positioning. Ignores text overflow for now.
+     */
     private _doesPositionFit;
-    private autoPositionTooltip;
+    private _userPositionTooltip;
+    private _autoPositionTooltip;
+    private _positionStartingBase;
+    private _positionTooltipElement;
+    private applyInverseTransform;
     private _setInternalPosition;
     private _shiftTooltipIntoViewport;
     private _resetTooltipPositioningStyles;

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

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

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

@@ -1,7 +1,18 @@
 import { LitElement } from "lit";
+/**
+ * `<nys-unavfooter>` is a footer component for New York State websites.
+ * It displays the official NYS logo linking to ny.gov and a set of primary navigation links.
+ *
+ * Features:
+ * - Renders the NYS logo as an inline SVG linking to https://www.ny.gov
+ * - Provides key navigation links
+ */
 export declare class NysUnavFooter extends LitElement {
     static styles: import("lit").CSSResult;
-    /**************** Functions ****************/
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
     private _getNysLogo;
     render(): import("lit-html").TemplateResult<1>;
 }

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

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

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

@@ -1,4 +1,14 @@
 import { LitElement } from "lit";
+/**
+ * `<nys-unavheader>` is a universal header for New York State websites.
+ *
+ * Features:
+ * - Trust bar indicating official NYS site status, with expandable details
+ * - NYS logo linking to the homepage
+ * - Search bar with dropdown behavior for mobile and desktop
+ * - Language translation dropdown supporting multiple languages
+ * - Accessible interactions with ARIA attributes and keyboard handling
+ */
 export declare class NysUnavHeader extends LitElement {
     static styles: import("lit").CSSResult;
     trustbarVisible: boolean;
@@ -8,6 +18,16 @@ export declare class NysUnavHeader extends LitElement {
     hideTranslate: boolean;
     hideSearch: boolean;
     private languages;
+    /**
+     * Lifecycle Methods
+     * --------------------------------------------------------------------------
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
     private _getNysLogo;
     private _toggleTrustbar;
     private _toggleLanguageList;
@@ -17,7 +37,5 @@ export declare class NysUnavHeader extends LitElement {
     private _handleSearchKeyup;
     private _handleSearchButton;
     private _handleSearch;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

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

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ 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-datepicker/src/index";
 export * from "../packages/nys-divider/src/index";
 export * from "../packages/nys-errormessage/src/index";
 export * from "../packages/nys-fileinput/src/index";
@@ -16,6 +17,7 @@ export * from "../packages/nys-radiobutton/src/index";
 export * from "../packages/nys-select/src/index";
 export * from "../packages/nys-skipnav/src/index";
 export * from "../packages/nys-stepper/src/index";
+export * from "../packages/nys-table/src/index";
 export * from "../packages/nys-textarea/src/index";
 export * from "../packages/nys-textinput/src/index";
 export * from "../packages/nys-toggle/src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.11.4",
+  "version": "1.13.0",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -23,13 +23,13 @@
   "scripts": {
     "dev": "vite",
     "gen": "plop",
-    "build": "npm run lint && tsc --emitDeclarationOnly && vite build",
+    "build": "tsc --emitDeclarationOnly && vite build",
     "build:umd": "tsc --emitDeclarationOnly && vite build --config vite.config.umd.js",
-    "build:packages": "npm run lint && node src/scripts/build-order.js",
-    "build:all": "npm run clean:dist && NODE_ENV=production npm run build:packages && NODE_ENV=production npm run build && NODE_ENV=production npm run build:umd && npm run cem",
+    "build:packages": "node src/scripts/build-order.js",
+    "build:all": "npm run clean:dist && npm run lit-analyze && npm run lint && NODE_ENV=production npm run build:packages && NODE_ENV=production npm run build && NODE_ENV=production npm run build:umd && npm run cem",
     "build:link": "npm run build:all && npm link",
-    "lint": "eslint src/ packages/**/*.{ts,js}",
-    "lint:fix": "eslint src/ packages/**/*.{ts,js} --fix",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "lit-analyze": "lit-analyzer $(find ./packages -name '*.ts' ! -name '*.figma.*')",
     "release": "NODE_ENV=production npm run build:all && NODE_ENV=production npm run test && npm run cem && NODE_ENV=production npm publish --workspaces --access public && NODE_ENV=production npm publish --access public",
     "release:dry-run": "NODE_ENV=production npm run build:all && NODE_ENV=production npm run test && npm run cem && node src/scripts/publish-dry-run.js",
@@ -40,8 +40,8 @@
     "storybook:build:all": "NODE_ENV=production npm run build:all && npm run storybook",
     "build-storybook": "npm run build:packages && storybook build",
     "storybook:cibuild": "storybook build",
-    "clean:node": "rm -rf node_modules && rm -rf packages/*/node_modules",
-    "clean:dist": "rm -rf dist && rm -rf packages/*/dist",
+    "clean:node": "rm -rf node_modules && rm -rf packages/*/node_modules && rm -rf packages/**/*/node_modules",
+    "clean:dist": "rm -rf storybook-static && rm -rf coverage && rm -rf packages/*/coverage && rm -rf dist && rm -rf packages/*/dist && rm -rf packages/**/*/dist",
     "clean:all": "npm run clean:dist && npm run clean:node",
     "code-connect": "dotenv -- npx figma connect publish",
     "cem": "npx cem analyze --config 'custom-elements-manifest.config.mjs'"
@@ -57,15 +57,15 @@
   },
   "homepage": "https://designsystem.ny.gov/",
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
+    "@chromatic-com/storybook": "^5.0.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@figma/code-connect": "^1.3.7",
     "@floating-ui/dom": "^1.7.4",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "10.0.8",
-    "@storybook/addon-docs": "10.0.8",
-    "@storybook/addon-links": "10.0.8",
-    "@storybook/web-components-vite": "10.0.8",
+    "@storybook/addon-a11y": "10.2.0",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/addon-links": "10.2.0",
+    "@storybook/web-components-vite": "10.2.0",
     "@types/mocha": "^10.0.10",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
@@ -80,7 +80,7 @@
     "eslint": "^9.38.0",
     "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-storybook": "10.0.8",
+    "eslint-plugin-storybook": "10.2.0",
     "i": "^0.3.7",
     "lit": "^3.3.1",
     "lit-analyzer": "^2.0.3",
@@ -90,7 +90,7 @@
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.94.0",
     "sinon": "^21.0.0",
-    "storybook": "10.0.8",
+    "storybook": "10.2.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "vite": "^7.2.2"
@@ -103,5 +103,8 @@
   "overrides": {
     "storybook": "$storybook"
   },
-  "customElements": "dist/custom-elements.json"
+  "customElements": "dist/custom-elements.json",
+  "dependencies": {
+    "wc-datepicker": "^0.9.2"
+  }
 }