@nysds/components 1.18.1 → 1.19.0

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

@@ -3,15 +3,50 @@ import "./nys-step";
 /**
  * A multi-step progress indicator for forms or wizards. Manages `nys-step` children with selection and navigation.
  *
- * Add `nys-step` elements as children. Mark one step as `current` to indicate progress; previous steps become
- * navigable. Compact view on mobile expands to show all steps. Use `actions` slot for navigation buttons.
- * Do not place the stepper inside a form element.
+ * Add `nys-step` elements as children. Mark one step as `current` to indicate the progress boundary; all steps
+ * before it become navigable. Compact view on mobile expands to show all steps. Use the `actions` slot for
+ * persistent navigation buttons (e.g., Save & Exit). Do not place the stepper inside a `<form>` element —
+ * put form fields in the main content area alongside it.
+ *
+ * ## When to use
+ * - Linear, ordered forms or wizards with more than 2 sections.
+ *
+ * ## When not to use
+ * - Forms with only 1 or 2 sections — use a simpler layout.
+ * - Non-linear forms where sections can be completed in any order.
+ *
+ * ## Compact mode (mobile)
+ * On small screens the stepper collapses to a compact view: step labels are hidden and progress
+ * is shown as a bar indicator with a "Step x of y" counter. Clicking or pressing Enter/Space on
+ * the counter expands the full step list (counter text changes to "Back to Form"). Collapsing
+ * again returns the user to the form view.
+ *
+ * ## actions slot constraints
+ * The `actions` slot must contain exactly one `<div>` as its direct child. That `<div>` may only
+ * contain `<nys-button>` elements — any other element is removed with a console warning.
+ * The stepper automatically forces `size="sm"` on every button in the slot. Buttons with the
+ * `fullWidth` attribute get `flex: 1 1 0` injected so they share available width equally.
+ *
+ * ## Multiple `current` conflict
+ * If more than one `nys-step` has the `current` attribute, only the first one is kept; the rest
+ * are silently removed. Always mark exactly one step as `current`.
+ *
+ * ## id auto-generation
+ * If no `id` is provided, a unique id is generated automatically in the form
+ * `nys-stepper-{n}-{timestamp}`.
+ *
+ * ## Accessibility
+ * - The compact counter is rendered as a `role="button"` with `aria-expanded` and a descriptive
+ *   `aria-label` that announces the current step (e.g., "Expand step navigation. You are on Step 2 of 4").
+ * - Keyboard: Enter or Space toggles the compact view.
+ * - Each `nys-step` label is keyboard-focusable and activatable for navigable steps.
+ * - Visual focus indicators are provided on all interactive elements.
  *
  * @summary Multi-step progress indicator with navigation and mobile-friendly compact view.
  * @element nys-stepper
  *
- * @slot - Default slot for `nys-step` elements.
- * @slot actions - Navigation buttons (e.g., Back, Continue). Must be wrapped in a `<div>`.
+ * @slot - Default slot for `nys-step` elements. Only `nys-step` children are accepted; others are removed.
+ * @slot actions - Persistent navigation buttons. Must contain exactly one `<div>` wrapping only `<nys-button>` elements.
  *
  * @example Basic stepper
  * ```html
@@ -58,18 +93,55 @@ import "./nys-step";
  *   </div>
  * </nys-stepper>
  * ```
+ *
+ * @example SPA / programmatic navigation
+ * Two state variables drive the stepper in any framework or vanilla JS:
+ * - `currentStep` (progress boundary) → set `current` on the matching step
+ * - `viewingStep` (displayed content) → set `selected` on the matching step
+ *
+ * Always set both explicitly. Always call `e.preventDefault()` in the
+ * `nys-step-click` listener to suppress href navigation. Do NOT nest inside a
+ * `<form>` element.
+ * ```js
+ * let currentStep = 0; // furthest reached
+ * let viewingStep = 0; // currently displayed
+ *
+ * function updateStepper(steps) {
+ *   steps.forEach((step, i) => {
+ *     step.toggleAttribute('current', i === currentStep);
+ *     step.toggleAttribute('selected', i === viewingStep);
+ *   });
+ * }
+ *
+ * document.querySelector('nys-stepper').addEventListener('nys-step-click', (e) => {
+ *   e.preventDefault();
+ *   const steps = Array.from(document.querySelectorAll('nys-step'));
+ *   const clicked = e.composedPath().find(el => el.tagName?.toLowerCase() === 'nys-step');
+ *   const index = steps.indexOf(clicked);
+ *   if (index !== -1) { viewingStep = index; updateStepper(steps); }
+ * });
+ *
+ * // Advance to next step (call on form submit / "Continue" click)
+ * function advance(steps) {
+ *   if (currentStep < steps.length - 1) {
+ *     currentStep++;
+ *     viewingStep = currentStep;
+ *     updateStepper(steps);
+ *   }
+ * }
+ * ```
  */
 export declare class NysStepper extends LitElement {
     static styles: import("lit").CSSResult;
-    /** Unique identifier. */
+    /** Unique identifier. Auto-generated as `nys-stepper-{n}-{timestamp}` if not provided. */
     id: string;
     /** Name attribute for form association. */
     name: string;
-    /** Title displayed above the step counter. */
+    /** Title displayed above the step list and compact counter. */
     label: string;
-    /** Progress text (e.g., "Step 2 of 5"). Auto-updated based on selection. */
+    /** Progress text displayed in compact mode (e.g., "Step 2 of 5"). Auto-managed — do not set manually. */
     counterText: string;
-    /** Whether compact mobile view is expanded to show all steps. */
+    /** Whether compact mobile view is expanded to show all steps. Toggled by clicking the counter. */
     isCompactExpanded: boolean;
     private _stepsNumbered;
     constructor();

package/dist/packages/nys-tab/src/nys-tabgroup.d.ts

@@ -101,6 +101,7 @@ export declare class NysTabgroup extends LitElement {
      *   is resized.
      */
     firstUpdated(): void;
+    disconnectedCallback(): void;
     /**
      * Reads the current scroll state of `_tabsEl` and toggles the `is-visible`
      * class on the left and right shadow overlays accordingly.

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

@@ -36,6 +36,7 @@ export declare class NysTooltip extends LitElement {
     private _internallyUpdatingPosition;
     private _hideTimeout;
     private _position;
+    private _resizeObserver;
     /**
      * Preferred position relative to trigger. Auto-adjusts if space is insufficient.
      * @default null (auto-positioned based on available space)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -37,15 +37,18 @@
     "build:all": "npm run clean:dist && npm run lint && npm run lit-analyze || true && cross-env NODE_ENV=production npm run build:packages && npm run build:root && npm run cem && npm run build:mcp",
     "build:mcp": "npm run build -w @nysds/mcp-server",
     "build:link": "npm run build:all && npm link && cd packages/styles && npm link",
-    "lint": "eslint --cache --cache-location node_modules/.cache/eslint && stylelint **/*.scss || true",
-    "lint:fix": "eslint --fix && stylelint **/*.scss --fix",
+    "lint": "eslint --cache --cache-strategy=content --cache-location node_modules/.cache/eslint && (stylelint \"**/*.scss\" || true)",
+    "lint:fix": "bash src/scripts/lint-fix.sh",
     "lit-analyze": "find ./packages/nys-*/ -name '*.ts' ! -name '*.figma.*' | xargs lit-analyzer {}",
+    "playwright:install": "npx playwright install --with-deps",
     "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",
     "release:alpha": "npm run build && npm run build:umd && npm publish --tag next",
     "release:zip": "npm run build:all && node src/scripts/create-release-zip.js",
-    "test": "npx playwright install && wtr --node-resolve",
+    "test": "npm run playwright:install && wtr --node-resolve",
     "test:build": "npm run build:all && npm run test",
+    "test:compact": "export NYSDS_TEST_OUTPUT=compact && wtr --node-resolve",
+    "test:ai": "export NYSDS_TEST_OUTPUT=ai && wtr --node-resolve",
     "storybook": "cross-env NODE_ENV=production storybook dev -p 6006",
     "storybook:build:all": "cross-env NODE_ENV=production npm run build:all && npm run storybook",
     "build-storybook": "npm run build:packages && storybook build",
@@ -54,7 +57,8 @@
     "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 && find packages -type d -name dist ! -path '*/mcp-server/dist' -exec rm -rf {} + 2>/dev/null || true",
     "clean:turbo": "find packages -type d -name '.turbo' -exec rm -rf {} + && rm -rf .turbo",
-    "clean:all": "npm run clean:dist && npm run clean:node && find packages -name '*.tsbuildinfo' -delete 2>/dev/null || true && npm run clean:turbo",
+    "clean:cache": "rm -rf node_modules/.cache",
+    "clean:all": "npm run clean:dist && npm run clean:node && npm run clean:cache && find packages -name '*.tsbuildinfo' -delete 2>/dev/null || true && npm run clean:turbo",
     "code-connect": "dotenv -- npx figma connect publish",
     "cem": "npx cem analyze --config ./custom-elements-manifest.config.mjs && cp ./custom-elements.json dist/ && node src/scripts/patch-react-utils.js"
   },
@@ -89,8 +93,8 @@
     "@web/test-runner-playwright": "^0.11.1",
     "cem-plugin-examples": "github:its-hcd/cem-plugin-examples",
     "cross-env": "^10.1.0",
-    "custom-element-react-wrappers": "^1.7.3",
     "custom-element-jsx-integration": "^1.6.0",
+    "custom-element-react-wrappers": "^1.7.3",
     "custom-element-vs-code-integration": "^1.5.0",
     "dotenv-cli": "^10.0.0",
     "eslint": "^10.0.0",
@@ -111,6 +115,7 @@
     "stylelint": "^17.1.1",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-prettier": "^5.0.3",
     "tslib": "^2.8.1",
     "turbo": "^2.9.3",
     "typescript": "^5.9.3",
@@ -125,6 +130,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
+    "dompurify": "^3.4.7",
     "wc-datepicker": "^0.10.0"
   }
 }

package/packages/react/NysDivider.d.ts

@@ -21,6 +21,9 @@ export interface NysDividerProps extends Pick<
   /** Adjusts colors for dark backgrounds. */
   inverted?: boolean;
 
+  /** If true, the divider will use a lighter color. */
+  subtle?: boolean;
+
   /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
   className?: string;
 

package/packages/react/NysDivider.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import "../../dist/nysds.es.js";
 
 export const NysDivider = forwardRef((props, forwardedRef) => {
-  const { inverted, ...filteredProps } = props;
+  const { inverted, subtle, ...filteredProps } = props;
 
   return React.createElement(
     "nys-divider",
@@ -14,6 +14,7 @@ export const NysDivider = forwardRef((props, forwardedRef) => {
       part: props.part,
       tabindex: props.tabIndex,
       inverted: props.inverted ? true : undefined,
+      subtle: props.subtle ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/packages/react/NysIcon.d.ts

@@ -18,9 +18,12 @@ export interface NysIconProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
-  /** Icon name from Material Symbols library. Required. */
+  /** Icon name to resolve from the selected library. Required. */
   name?: NysIconElement["name"];
 
+  /** Which registered icon library to use. Defaults to the built-in NYSDS library. */
+  library?: NysIconElement["library"];
+
   /** Accessible label. When set, removes `aria-hidden` and adds `aria-label` to the SVG. */
   ariaLabel?: NysIconElement["ariaLabel"];
 
@@ -56,11 +59,17 @@ export interface NysIconProps extends Pick<
 
   /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
   tabIndex?: number;
+
+  /** Resolves when the current icon load (if any) is complete. */
+  updateComplete?: NysIconElement["updateComplete"];
 }
 
 /**
- * SVG icon from Material Symbols library with size, rotation, and color options.
+ * SVG icon with swappable library support, size, rotation, and color options.
  * ---
  *
+ *
+ * ### **Methods:**
+ *  - **redraw()** - Called by the icon library registry when the current library changes.
  */
 export const NysIcon: React.ForwardRefExoticComponent<NysIconProps>;

package/packages/react/NysIcon.js

@@ -1,15 +1,38 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../../dist/nysds.es.js";
+import { useProperties } from "./react-utils.js";
 
 export const NysIcon = forwardRef((props, forwardedRef) => {
-  const { name, ariaLabel, rotate, flip, color, size, ...filteredProps } =
-    props;
+  const ref = useRef(null);
+  const {
+    name,
+    library,
+    ariaLabel,
+    rotate,
+    flip,
+    color,
+    size,
+    updateComplete,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "updateComplete", props.updateComplete);
 
   return React.createElement(
     "nys-icon",
     {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       name: props.name,
+      library: props.library,
       ariaLabel: props.ariaLabel,
       rotate: props.rotate,
       flip: props.flip,

package/packages/react/NysRadiobutton.d.ts

@@ -1,11 +1,7 @@
 import React from "react";
-import {
-  NysRadiobutton as NysRadiobuttonElement,
-  CustomEvent,
-  Event,
-} from "../../dist/nysds.es.js";
+import { NysRadiobutton as NysRadiobuttonElement } from "../../dist/nysds.es.js";
 
-export type { NysRadiobuttonElement, CustomEvent, Event };
+export type { NysRadiobuttonElement };
 
 export interface NysRadiobuttonProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
@@ -82,41 +78,29 @@ export interface NysRadiobuttonProps extends Pick<
   /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
   tabIndex?: number;
 
-  /** undefined */
-  onNysErrorClear?: (event: CustomEvent) => void;
-
   /** Fired when selection changes. Detail: `{id, checked, name, value}`. */
   onNysChange?: (event: CustomEvent) => void;
 
-  /** Fired when "other" text input value changes. Detail: `{id, name, value}`. */
-  onNysOtherInput?: (event: CustomEvent) => void;
-
   /** Fired when radio gains focus. */
   onNysFocus?: (event: CustomEvent) => void;
 
   /** Fired when radio loses focus. */
   onNysBlur?: (event: CustomEvent) => void;
 
-  /** undefined */
-  onNysError?: (event: CustomEvent) => void;
+  /** Fired when "other" text input value changes. Detail: `{id, name, value}`. */
+  onNysOtherInput?: (event: CustomEvent) => void;
 }
 
 /**
- * Radio button for single selection from mutually exclusive options.
+ * Radio button for single selection from mutually exclusive options. This is a READONLY data component.
  * ---
  *
  *
  * ### **Events:**
- *  - **nys-error-clear**
- * - **nys-change** - Fired when selection changes. Detail: `{id, checked, name, value}`.
- * - **nys-other-input** - Fired when "other" text input value changes. Detail: `{id, name, value}`.
+ *  - **nys-change** - Fired when selection changes. Detail: `{id, checked, name, value}`.
  * - **nys-focus** - Fired when radio gains focus.
  * - **nys-blur** - Fired when radio loses focus.
- * - **nys-error**
- *
- * ### **Methods:**
- *  - **getInputElement(): _Promise<HTMLInputElement | null>_** - Functions
- * --------------------------------------------------------------------------
+ * - **nys-other-input** - Fired when "other" text input value changes. Detail: `{id, name, value}`.
  *
  * ### **Slots:**
  *  - **description** - Custom HTML description content.

package/packages/react/NysRadiobutton.js

@@ -22,12 +22,10 @@ export const NysRadiobutton = forwardRef((props, forwardedRef) => {
   } = props;
 
   /** Event listeners - run once */
-  useEventListener(ref, "nys-error-clear", props.onNysErrorClear);
   useEventListener(ref, "nys-change", props.onNysChange);
-  useEventListener(ref, "nys-other-input", props.onNysOtherInput);
   useEventListener(ref, "nys-focus", props.onNysFocus);
   useEventListener(ref, "nys-blur", props.onNysBlur);
-  useEventListener(ref, "nys-error", props.onNysError);
+  useEventListener(ref, "nys-other-input", props.onNysOtherInput);
 
   return React.createElement(
     "nys-radiobutton",

package/packages/react/NysRadiogroup.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
-import { NysRadiogroup as NysRadiogroupElement } from "../../dist/nysds.es.js";
+import {
+  NysRadiogroup as NysRadiogroupElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
 
-export type { NysRadiogroupElement };
+export type { NysRadiogroupElement, CustomEvent };
 
 export interface NysRadiogroupProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
@@ -30,6 +33,9 @@ export interface NysRadiogroupProps extends Pick<
   /** Renders all radiobuttons as tiles with larger clickable area. */
   tile?: boolean;
 
+  /** undefined */
+  _showOtherError?: boolean;
+
   /** Unique identifier. Auto-generated if not provided. */
   id?: NysRadiogroupElement["id"];
 
@@ -74,6 +80,12 @@ export interface NysRadiogroupProps extends Pick<
 
   /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
   tabIndex?: number;
+
+  /** undefined */
+  onNysChange?: (event: CustomEvent) => void;
+
+  /** undefined */
+  onNysOtherInput?: (event: CustomEvent) => void;
 }
 
 /**
@@ -81,6 +93,10 @@ export interface NysRadiogroupProps extends Pick<
  * ---
  *
  *
+ * ### **Events:**
+ *  - **nys-change**
+ * - **nys-other-input**
+ *
  * ### **Slots:**
  *  - _default_ - Default slot for `nys-radiobutton` elements.
  * - **description** - Custom HTML description content.

package/packages/react/NysRadiogroup.js

@@ -1,12 +1,15 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
 
 export const NysRadiogroup = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
   const {
     required,
     optional,
     showError,
     tile,
+    _showOtherError,
     id,
     name,
     errorMessage,
@@ -18,9 +21,21 @@ export const NysRadiogroup = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-change", props.onNysChange);
+  useEventListener(ref, "nys-other-input", props.onNysOtherInput);
+
   return React.createElement(
     "nys-radiogroup",
     {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       id: props.id,
       name: props.name,
@@ -39,6 +54,7 @@ export const NysRadiogroup = forwardRef((props, forwardedRef) => {
       optional: props.optional ? true : undefined,
       showError: props.showError ? true : undefined,
       tile: props.tile ? true : undefined,
+      _showOtherError: props._showOtherError ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/packages/react/NysStep.d.ts

@@ -18,24 +18,22 @@ export interface NysStepProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
-  /** Whether this step is currently being viewed. Set by parent stepper. */
+  /** Which step is currently being displayed. If not set, defaults to the `current` step.
+Setting this on a step after `current` is silently corrected to match `current`.
+When controlling state from a framework, always set this explicitly. */
   selected?: boolean;
 
-  /** Marks the furthest reached step. Steps before this are navigable. */
+  /** The furthest step the user has reached (progress boundary). Steps before this are navigable. */
   current?: boolean;
 
-  /** Internal: Whether parent stepper's compact view is expanded. */
-  isCompactExpanded?: boolean;
-
   /** Step label text displayed alongside the step number. */
   label?: NysStepElement["label"];
 
-  /** URL for page navigation when step is clicked. Optional for SPA routing. */
+  /** URL navigated to when the step is activated, via `window.location.href`.
+Navigation is suppressed if the `nys-step-click` listener calls `e.preventDefault()`.
+Omit for SPA/framework routing and handle navigation in the event listener instead. */
   href?: NysStepElement["href"];
 
-  /** Step number (1-indexed). Auto-assigned by parent stepper. */
-  stepNumber?: NysStepElement["stepNumber"];
-
   /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
   className?: string;
 
@@ -57,10 +55,10 @@ export interface NysStepProps extends Pick<
   /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
   tabIndex?: number;
 
-  /** Custom click handler. Called before `nys-step-click` event. */
+  /** Optional function called before `nys-step-click` is dispatched. Use for pre-navigation logic. */
   onClick?: NysStepElement["onClick"];
 
-  /** Fired when a navigable step is clicked. Detail: `{href, label}`. Cancelable. */
+  /** Fired when a navigable (`previous` or `current`) non-selected step is clicked or activated by keyboard. Detail: `{ href: string, label: string }`. Cancelable — call `e.preventDefault()` to suppress `window.location.href` navigation. */
   onNysStepClick?: (event: CustomEvent) => void;
 }
 
@@ -70,6 +68,6 @@ export interface NysStepProps extends Pick<
  *
  *
  * ### **Events:**
- *  - **nys-step-click** - Fired when a navigable step is clicked. Detail: `{href, label}`. Cancelable.
+ *  - **nys-step-click** - Fired when a navigable (`previous` or `current`) non-selected step is clicked or activated by keyboard. Detail: `{ href: string, label: string }`. Cancelable — call `e.preventDefault()` to suppress `window.location.href` navigation.
  */
 export const NysStep: React.ForwardRefExoticComponent<NysStepProps>;

package/packages/react/NysStep.js

@@ -4,16 +4,7 @@ import { useEventListener, useProperties } from "./react-utils.js";
 
 export const NysStep = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const {
-    selected,
-    current,
-    isCompactExpanded,
-    label,
-    href,
-    stepNumber,
-    onClick,
-    ...filteredProps
-  } = props;
+  const { selected, current, label, href, onClick, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, "nys-step-click", props.onNysStepClick);
@@ -35,7 +26,6 @@ export const NysStep = forwardRef((props, forwardedRef) => {
       ...filteredProps,
       label: props.label,
       href: props.href,
-      stepNumber: props.stepNumber,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
@@ -43,7 +33,6 @@ export const NysStep = forwardRef((props, forwardedRef) => {
       tabindex: props.tabIndex,
       selected: props.selected ? true : undefined,
       current: props.current ? true : undefined,
-      isCompactExpanded: props.isCompactExpanded ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/packages/react/NysStepper.d.ts

@@ -18,19 +18,19 @@ export interface NysStepperProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
-  /** Whether compact mobile view is expanded to show all steps. */
+  /** Whether compact mobile view is expanded to show all steps. Toggled by clicking the counter. */
   isCompactExpanded?: boolean;
 
-  /** Unique identifier. */
+  /** Unique identifier. Auto-generated as `nys-stepper-{n}-{timestamp}` if not provided. */
   id?: NysStepperElement["id"];
 
   /** Name attribute for form association. */
   name?: NysStepperElement["name"];
 
-  /** Title displayed above the step counter. */
+  /** Title displayed above the step list and compact counter. */
   label?: NysStepperElement["label"];
 
-  /** Progress text (e.g., "Step 2 of 5"). Auto-updated based on selection. */
+  /** Progress text displayed in compact mode (e.g., "Step 2 of 5"). Auto-managed — do not set manually. */
   counterText?: NysStepperElement["counterText"];
 
   /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
@@ -61,7 +61,7 @@ export interface NysStepperProps extends Pick<
  *
  *
  * ### **Slots:**
- *  - _default_ - Default slot for `nys-step` elements.
- * - **actions** - Navigation buttons (e.g., Back, Continue). Must be wrapped in a `<div>`.
+ *  - _default_ - Default slot for `nys-step` elements. Only `nys-step` children are accepted; others are removed.
+ * - **actions** - Persistent navigation buttons. Must contain exactly one `<div>` wrapping only `<nys-button>` elements.
  */
 export const NysStepper: React.ForwardRefExoticComponent<NysStepperProps>;