@nysds/components 1.13.1 → 1.14.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-checkbox/src/nys-checkbox.d.ts

@@ -66,6 +66,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,6 +97,8 @@ export declare class NysCheckbox extends LitElement {
     checkValidity(): boolean;
     private _handleInvalid;
     private _manageLabelClick;
+    get _hasDescription(): boolean;
+    private _handleResize;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
@@ -101,6 +107,10 @@ export declare class NysCheckbox extends LitElement {
     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

@@ -52,6 +52,8 @@ export declare class NysCheckboxgroup extends LitElement {
      */
     size: "sm" | "md";
     private _slottedDescriptionText;
+    private _hasOtherError;
+    private _otherErrorCheckbox;
     private _internals;
     /**
      * Lifecycle methods
@@ -67,9 +69,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 +87,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-datepicker/src/nys-datepicker.d.ts

@@ -1,35 +1,89 @@
 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;
+    /** 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 +138,8 @@ export declare class NysDatepicker extends LitElement {
     private _replaceButtonSVG;
     private _addMonthDropdownIcon;
     private _parseLocalDate;
+    private _setTodayDate;
+    private _setFocusOnTodayDate;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
@@ -91,6 +147,7 @@ export declare class NysDatepicker extends LitElement {
     private _handleInputKeydown;
     private _handleBlur;
     private _onDocumentClick;
+    private _onKeydownEsc;
     private _toggleDatepicker;
     private _openDatepicker;
     private _handleDateChange;
@@ -98,6 +155,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-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

@@ -52,6 +52,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,6 +70,8 @@ export declare class NysRadiobutton extends LitElement {
      */
     getInputElement(): Promise<HTMLInputElement | null>;
     formResetUpdate(): void;
+    private _handleResize;
+    private _clearOtherState;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
@@ -75,5 +81,9 @@ export declare class NysRadiobutton extends LitElement {
     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

@@ -95,5 +95,6 @@ export declare class NysRadiogroup extends LitElement {
      */
     private _handleRadioButtonChange;
     private _handleInvalid;
+    private _handleChildError;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -22,7 +22,7 @@ import { LitElement } from "lit";
  * <nys-textinput label="Full Name" required></nys-textinput>
  * ```
  *
- * @example Email with validation
+ * @example Required Email
  * ```html
  * <nys-textinput type="email" label="Email Address" required></nys-textinput>
  * ```
@@ -74,6 +74,8 @@ export declare class NysTextinput extends LitElement {
     pattern: string;
     /** Maximum character length. */
     maxlength: number | null;
+    /** Accessible label. When set, assuming "label" isn't provided for private special cases (i.e., <checkbox other>). */
+    ariaLabel: string;
     /**
      * Input width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).
      * @default "full"
@@ -106,6 +108,7 @@ export declare class NysTextinput extends LitElement {
     disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
+    focus(): void;
     /**
      * Form Integration
      * --------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -27,10 +27,10 @@
     "build": "tsc --emitDeclarationOnly && vite build",
     "build:umd": "tsc --emitDeclarationOnly && vite build --config vite.config.umd.js",
     "build:packages": "node src/scripts/build-order.js",
-    "build:all": "npm run clean:dist && npm run lint && cross-env NODE_ENV=production npm run build:packages && cross-env NODE_ENV=production npm run build && cross-env NODE_ENV=production npm run build:umd && npm run lit-analyze || true && npm run cem && npm run cem:copy",
+    "build:all": "npm run clean:dist && npm run lint && cross-env NODE_ENV=production npm run build:packages && cross-env NODE_ENV=production npm run build && cross-env NODE_ENV=production npm run build:umd && npm run lit-analyze || true && npm run cem && npm run cem:copy && npm run mcp-server:build",
     "build:link": "npm run build:all && npm link",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix",
+    "lint": "eslint && stylelint **/*.scss || true",
+    "lint:fix": "eslint --fix && stylelint **/*.scss --fix",
     "lit-analyze": "find ./packages/nys-*/ -name '*.ts' ! -name '*.figma.*' | xargs lit-analyzer {}",
     "release": "cross-env NODE_ENV=production npm run build:all && cross-env NODE_ENV=production npm run test && npm run cem && cross-env NODE_ENV=production npm publish --workspaces --access public && cross-env NODE_ENV=production npm publish --access public",
     "release:dry-run": "cross-env NODE_ENV=production npm run build:all && cross-env NODE_ENV=production npm run test && npm run cem && node src/scripts/publish-dry-run.js",
@@ -41,8 +41,9 @@
     "storybook:build:all": "cross-env NODE_ENV=production npm run build:all && npm run storybook",
     "build-storybook": "npm run build:packages && storybook build",
     "storybook:cibuild": "storybook build",
+    "mcp-server:build": "node src/scripts/build-mcp-server.js",
     "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:dist": "rm -rf storybook-static && rm -rf coverage && rm -rf packages/*/coverage && rm -rf dist && find packages -type d -name dist ! -path '*/mcp-server/dist' -exec rm -rf {} + 2>/dev/null || true",
     "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",
@@ -59,15 +60,15 @@
   },
   "homepage": "https://designsystem.ny.gov/",
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
+    "@chromatic-com/storybook": "^5.0.1",
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@figma/code-connect": "^1.3.7",
+    "@figma/code-connect": "^1.4.0",
     "@floating-ui/dom": "^1.7.4",
     "@open-wc/testing": "^4.0.0",
-    "@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",
+    "@storybook/addon-a11y": "10.2.10",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-links": "10.2.10",
+    "@storybook/web-components-vite": "10.2.10",
     "@types/mocha": "^10.0.10",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
@@ -80,10 +81,10 @@
     "custom-element-react-wrappers": "^1.7.3",
     "custom-element-vs-code-integration": "^1.5.0",
     "dotenv-cli": "^10.0.0",
-    "eslint": "^9.38.0",
-    "eslint-plugin-lit": "^2.1.1",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-storybook": "10.2.0",
+    "eslint": "^10.0.0",
+    "eslint-plugin-lit": "^2.2.1",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-storybook": "10.2.10",
     "i": "^0.3.7",
     "lit": "^3.3.1",
     "lit-analyzer": "^2.0.3",
@@ -93,10 +94,13 @@
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.94.0",
     "sinon": "^21.0.0",
-    "storybook": "10.2.0",
+    "storybook": "10.2.10",
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2"
+    "vite": "^7.3.1"
   },
   "eslintConfig": {
     "extends": [