@nysds/components 1.18.3 → 1.19.1-alpha-1

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

@@ -160,6 +160,8 @@ export declare class NysButton extends LitElement {
      */
     target: "_self" | "_blank" | "_parent" | "_top" | "framename";
     private _internals;
+    private _hasPrefixSlot;
+    private _hasSuffixSlot;
     /**
      * Lifecycle methods
      * --------------------------------------------------------------------------
@@ -172,6 +174,8 @@ export declare class NysButton extends LitElement {
      * --------------------------------------------------------------------------
      */
     private _generateUniqueId;
+    private _onPrefixSlotChange;
+    private _onSuffixSlotChange;
     private _manageFormAction;
     /**
      * Event Handlers

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

@@ -18,6 +18,8 @@ export declare class NysDivider extends LitElement {
     static styles: import("lit").CSSResult;
     /** Adjusts colors for dark backgrounds. */
     inverted: boolean;
+    /** If true, the divider will use a lighter color. */
+    subtle: boolean;
     constructor();
     connectedCallback(): void;
     /**

package/dist/packages/nys-icon/src/icon-cache.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Icon Cache
+ *
+ * Shared SVG fetch and parse cache. Deduplicates concurrent requests
+ * for the same icon URL. Each consumer gets a cloned SVGElement via
+ * `cloneNode(true)` so DOM nodes are never shared.
+ */
+/** Fetch and parse an SVG from a URL. Returns a cloned SVGElement (safe for multiple consumers). */
+export declare function fetchIcon(url: string): Promise<SVGElement>;
+/** Clear one or all entries from the cache. */
+export declare function clearIconCache(url?: string): void;

package/dist/packages/nys-icon/src/icon-library-registry.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Icon Library Registry
+ *
+ * Global registry for icon libraries. The "default" library resolves
+ * NYSDS icons from colocated SVG files extracted at build time.
+ * Custom libraries (Font Awesome, Material Icons, etc.) can be
+ * registered at runtime via `registerIconLibrary()`.
+ *
+ * The registry and watcher maps are stored on `window` so that even
+ * when bundlers (Storybook Vite, etc.) create duplicate module
+ * instances, every copy shares a single source of truth.
+ */
+export interface IconLibrary {
+    /** Given an icon name, return the URL to its SVG file. Return undefined if not found. */
+    resolver: (name: string) => string | undefined;
+    /** Optional post-fetch transform applied to the parsed SVGElement. */
+    mutator?: (svg: SVGElement) => void;
+}
+export interface NysIconWatcher {
+    redraw(): void;
+}
+interface NysIconGlobals {
+    __nysIconRegistry: Map<string, IconLibrary>;
+    __nysIconWatchers: Map<string, Set<NysIconWatcher>>;
+}
+declare global {
+    interface Window extends NysIconGlobals {
+    }
+}
+/** Register or replace a named icon library. All watching icons using this library will redraw.
+ * @example Register a Font Awesome library with a custom resolver:
+ * ```ts
+ * registerIconLibrary("fa", {
+ *   resolver: (name) => `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/svg/${name}.svg`
+ * });
+ * ```
+ */
+export declare function registerIconLibrary(name: string, library: IconLibrary): void;
+/** Remove a registered icon library. All watching icons using this library will redraw. */
+export declare function unregisterIconLibrary(name: string): void;
+/** Get a registered icon library by name. */
+export declare function getIconLibrary(name: string): IconLibrary | undefined;
+/** Subscribe an icon instance to library change notifications. */
+export declare function watchIconLibrary(name: string, watcher: NysIconWatcher): void;
+/** Unsubscribe an icon instance from library change notifications. */
+export declare function unwatchIconLibrary(name: string, watcher: NysIconWatcher): void;
+export {};

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

@@ -1 +1,4 @@
 export * from "./nys-icon";
+export { registerIconLibrary, unregisterIconLibrary, } from "./icon-library-registry";
+export type { IconLibrary } from "./icon-library-registry";
+export { clearIconCache } from "./icon-cache";

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

@@ -1,27 +1,39 @@
 import { LitElement } from "lit";
+import { NysIconWatcher } from "./icon-library-registry";
 /**
- * Renders SVG icons from the NYSDS icon library (Material Symbols). Decorative by default (`aria-hidden`).
+ * Renders SVG icons from a registered icon library. The built-in NYSDS icon
+ * library (Material Symbols) is the default. Custom libraries (Font Awesome,
+ * Material Icons, etc.) can be registered via `registerIconLibrary()`.
  *
- * Pass `name` to select an icon from the library. Use `ariaLabel` to make the icon accessible
- * (removes `aria-hidden`). Supports size presets, rotation, flipping, and custom colors.
+ * Pass `name` to select an icon. Use `library` to choose a registered library
+ * (defaults to `"default"` for NYSDS icons). Use `ariaLabel` to make the icon
+ * accessible (removes `aria-hidden`). Supports size presets, rotation,
+ * flipping, and custom colors.
  *
- * @summary SVG icon from Material Symbols library with size, rotation, and color options.
+ * @summary SVG icon with swappable library support, size, rotation, and color options.
  * @element nys-icon
  *
- * @example Basic icon
+ * @example Basic icon (default NYSDS library)
  * ```html
  * <nys-icon name="check_circle" size="lg"></nys-icon>
  * ```
  *
+ * @example Font Awesome icon
+ * ```html
+ * <nys-icon name="house" library="fa" size="lg"></nys-icon>
+ * ```
+ *
  * @example Accessible icon with label
  * ```html
  * <nys-icon name="warning" ariaLabel="Warning" color="var(--nys-color-warning)"></nys-icon>
  * ```
  */
-export declare class NysIcon extends LitElement {
+export declare class NysIcon extends LitElement implements NysIconWatcher {
     static styles: import("lit").CSSResult;
-    /** Icon name from Material Symbols library. Required. */
+    /** Icon name to resolve from the selected library. Required. */
     name: string;
+    /** Which registered icon library to use. Defaults to the built-in NYSDS library. */
+    library: string;
     /** Accessible label. When set, removes `aria-hidden` and adds `aria-label` to the SVG. */
     ariaLabel: string;
     /** Rotation in degrees. Applied via CSS `rotate`. */
@@ -35,11 +47,28 @@ export declare class NysIcon extends LitElement {
      * @default "md"
      */
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "40" | "50";
+    private _svg;
+    /** Monotonically increasing token so stale async fetches are discarded. */
+    private _loadSeq;
+    /** Promise for the in-flight icon load. */
+    private _loadPromise;
+    /** Resolves when the current icon load (if any) is complete. */
+    get updateComplete(): Promise<boolean>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Called by the icon library registry when the current library changes. */
+    redraw(): void;
     /**
-     * Retrieves the SVG element for the given icon name and applies
-     * accessibility, rotation, flip, color, and size classes.
-     * @returns SVGElement | null
+     * Lit calls firstUpdated after the first render, once all reactive
+     * properties (including those set from the template) are resolved.
+     * This guarantees the initial _loadIcon runs with the correct name
+     * and library values, avoiding the race where updated() might not
+     * fire for properties that equal their defaults.
      */
-    private getIcon;
+    firstUpdated(): void;
+    private static _validName;
+    updated(changedProps: Map<string, unknown>): void;
+    private _loadIcon;
+    private _applyAttributes;
     render(): import("lit-html").TemplateResult<1> | null;
 }

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

@@ -1,12 +1,11 @@
 import { LitElement } from "lit";
-import "./nys-radiogroup";
 /**
  * A radio button for single selection within a `nys-radiogroup`. Only one radio with the same `name` can be selected.
  *
  * Use within `nys-radiogroup` for 2-6 mutually exclusive options. For 7+ options, use `nys-select`.
  * For multiple selections, use `nys-checkbox`.
  *
- * @summary Radio button for single selection from mutually exclusive options.
+ * @summary Radio button for single selection from mutually exclusive options. This is a READONLY data component.
  * @element nys-radiobutton
  *
  * @slot description - Custom HTML description content.
@@ -26,14 +25,6 @@ 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. */
@@ -61,38 +52,10 @@ export declare class NysRadiobutton extends LitElement {
     tile: boolean;
     other: boolean;
     showOtherError: boolean;
-    private isMobile;
-    private _hasUserInteracted;
-    static buttonGroup: Record<string, NysRadiobutton>;
     /**
      * Lifecycle methods
      * --------------------------------------------------------------------------
      */
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    /**
-     * Functions
-     * --------------------------------------------------------------------------
-     */
-    getInputElement(): Promise<HTMLInputElement | null>;
-    formResetUpdate(): void;
-    private _handleResize;
-    private _clearOtherState;
-    private _dispatchClearErrorEvent;
-    /**
-     * 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

@@ -58,8 +58,14 @@ export declare class NysRadiogroup extends LitElement {
      * @default "md"
      */
     size: "sm" | "md";
+    _showOtherError: boolean;
     private selectedValue;
     private _slottedDescriptionText;
+    private _radios;
+    private _mobileQuery;
+    private isMobile;
+    private _hasUserInteracted;
+    private _childObserver?;
     private _internals;
     /**
      * Lifecycle methods
@@ -88,20 +94,24 @@ export declare class NysRadiogroup extends LitElement {
      * Functions
      * --------------------------------------------------------------------------
      */
+    private _handleMobileQuery;
+    private _handleSlotChange;
     private _initializeChildAttributes;
     private _updateRadioButtonsSize;
-    private _updateRadioButtonsTile;
-    private _updateRadioButtonsShowError;
-    private _updateRadioButtonsForm;
+    private _selectRadio;
     private _getSlotDescriptionForAria;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
      */
-    private _handleRadioButtonChange;
     private _handleInvalid;
-    private _handleChildError;
-    private _handleChildErrorClear;
-    private _handleOtherInput;
+    private _handleTextInput;
+    private _handleTextInputBlur;
+    private _validateOtherAndEmitError;
+    private _handleOtherKeydown;
+    private _handleGroupFocusout;
+    private _handleRadiobtnClick;
+    private _handleRadiobtnFocus;
+    private _handleRadiobtnBlur;
     render(): import("lit-html").TemplateResult<1>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.18.3",
+  "version": "1.19.1-alpha-1",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -37,17 +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 && npx playwright install && wtr --node-resolve",
-    "test:ai": "export NYSDS_TEST_OUTPUT=ai && npx playwright install && wtr --node-resolve",
+    "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",
@@ -56,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"
   },
@@ -91,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",
@@ -113,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",
@@ -127,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,