@nysds/components 1.16.0 → 1.17.0

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

@@ -0,0 +1 @@
+export * from "./nys-breadcrumbs";

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

@@ -0,0 +1,119 @@
+import { LitElement } from "lit";
+/**
+ * A breadcrumb navigation trail composed of `nys-breadcrumbitem` elements.
+ * Collapses when the trail exceeds 5 items on desktop or 3 items on mobile,
+ * showing the first, last, and item before the current page, with an ellipsis to expand.
+ * A single item renders as a back-to-parent link instead of a trail.
+ *
+ * @summary Breadcrumb navigation trail with responsive collapse support.
+ * @element nys-breadcrumbs
+ *
+ * @slot - One or more `nys-breadcrumbitem` elements defining the trail.
+ *
+ * @fires nys-breadcrumbs-expand - Fired when the user clicks the ellipsis to expand the trail.
+ *
+ * @example Full trail with current page
+ * ```html
+ * <nys-breadcrumbs>
+ *  <ol>
+ *   <li><a href="/">Home</a></li>
+ *   <li><a href="/services">Services</a></li>
+ *   <li>Current Page</li>
+ *  </ol>
+ * </nys-breadcrumbs>
+ * ```
+ *
+ * @example Trail without current page
+ * ```html
+ * <nys-breadcrumbs>
+ *  <ol>
+ *   <li><a href="/">Home</a></li>
+ *   <li><a href="/services">Services</a></li>
+ *  </ol>
+ * </nys-breadcrumbs>
+ * ```
+ *
+ * @example Single item renders as back-to-parent
+ * ```html
+ * <nys-breadcrumbs>
+ *  <ol>
+ *   <li><a href="/services">Services</a></li>
+ *  </ol>
+ * </nys-breadcrumbs>
+ * ```
+ */
+export declare class NysBreadcrumbs extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Unique identifier. Auto-generated if not provided.
+     */
+    id: string;
+    /**
+     * Accessible label for the `<nav>` landmark. Defaults to "path to this page" if not set.
+     * Override when multiple crumbs exist on the same page.
+     */
+    ariaLabel: string;
+    /**
+     * Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.
+     * @default "md"
+     */
+    size: "sm" | "md" | "";
+    /**
+     * On mobile, renders the trail as a single back-to-parent link pointing to the item before the current page.
+     * Has no effect on desktop or when only one item is present (which always renders as a back link).
+     * @default false
+     */
+    backToParent: boolean;
+    /**
+     * Forces the trail into its collapsed state.
+     * It shows only the first item, an ellipsis, and the last two items.
+     * The user can still expand the trail by clicking the ellipsis.
+     * @default false
+     */
+    collapsed: boolean;
+    /**
+     * Renders a filled light theme background bar behind the breadcrumb trail.
+     * @default false
+     */
+    backgroundBar: boolean;
+    /**
+     * Prevents interaction.
+     * @default false
+     */
+    disabled: boolean;
+    private _collapseThreshold;
+    private _manuallyExpanded;
+    private _mediaQuery;
+    /**
+     * Lifecycle methods
+     * --------------------------------------------------------------------------
+     */
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
+    private _updateCollapseThreshold;
+    private _getSlottedOl;
+    private _getSlottedItems;
+    private _getAnchor;
+    private _isCurrentPage;
+    private _createBackToParentElement;
+    private _createCrumbElement;
+    /**
+     * Main logic for cloning and handling user slots.
+     * New <ol>, <li>, and <a> tags are created and rendered out as crumbs for the breadcrumbs trail.
+     */
+    private _handleSlotChange;
+    private _moveFocusToFirstExpandCrumb;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _dispatchExpandEvent;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

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

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

@@ -108,11 +108,11 @@ export declare class NysButton extends LitElement {
      */
     ariaControls: string;
     /**
-     * Material Symbol icon before label. Not shown for `text` variant or `circle` mode.
+     * Material Symbol icon before label. Not shown for `circle` mode.
      */
     prefixIcon: string;
     /**
-     * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `text` variant or `circle` mode.
+     * Material Symbol icon after label. Use `chevron_down` for dropdowns, `open_in_new` for external links. Not shown for `circle` mode.
      */
     suffixIcon: string;
     /**

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

@@ -22,6 +22,14 @@ import { LitElement } from "lit";
  */
 export declare class NysCombobox extends LitElement {
     static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     id: string;
     name: string;
     label: string;

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

@@ -87,6 +87,10 @@ export declare class NysDatepicker extends LitElement {
     description: string;
     /** Initial date when calendar opens (YYYY-MM-DD). */
     startDate: string;
+    /** The earliest selectable date (YYYY-MM-DD). */
+    minDate: string;
+    /** The latest selectable date (YYYY-MM-DD). */
+    maxDate: string;
     /** Dark background mode. */
     inverted: boolean;
     /** Selected date. Accepts Date object or ISO string (YYYY-MM-DD). */
@@ -103,6 +107,7 @@ export declare class NysDatepicker extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): Promise<void>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private _whenWcDatepickerReady;
     /**
      * Form Integration
@@ -148,6 +153,7 @@ export declare class NysDatepicker extends LitElement {
     private _parseLocalDate;
     private _setTodayDate;
     private _setFocusOnTodayDate;
+    private _isOutOfRange;
     private _dispatchInputEvent;
     /**
      * Event Handlers

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

@@ -38,6 +38,7 @@ export declare class NysDropdownMenu extends LitElement {
     private _trigger;
     private _menuElement;
     private _ariaTarget;
+    private _lastFocusedIndex;
     private readonly GAP;
     /**
      * Lifecycle Methods
@@ -57,7 +58,7 @@ export declare class NysDropdownMenu extends LitElement {
     private _closeDropdown;
     private _getMenuItems;
     private _handleDocumentClick;
-    private _focusOnFirstItem;
+    private _focusOnItem;
     private applyInverseTransform;
     /**
      * Position Logic
@@ -101,6 +102,7 @@ export declare class NysDropdownMenu extends LitElement {
      * Event Handlers
      * --------------------------------------------------------------------------
      */
+    private _handleMenuClick;
     private _handleTriggerKeydown;
     private _handleMenuKeydown;
     private _handleWindowResize;

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

@@ -10,18 +10,18 @@ import { LitElement } from "lit";
  */
 export declare class NysErrorMessage extends LitElement {
     static styles: import("lit").CSSResult;
+    /** The "id" of the error message. */
+    id: string;
     /** Whether to display the error message. */
     showError: boolean;
     /** Error text to display. Falls back to native validation message if available. */
     errorMessage: string;
     /** Shows a divider line above the error message. */
     showDivider: boolean;
-    private _internals;
     /**
      * Lifecycle methods
      * --------------------------------------------------------------------------
      */
-    static formAssociated: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -12,8 +12,8 @@ import { LitElement } from "lit";
  */
 export declare class NysLabel extends LitElement {
     static styles: import("lit").CSSResult;
-    /** ID of the form element this label is associated with. */
-    for: string;
+    /** The ID of the label. */
+    id: string;
     /** Label text displayed above the form field. */
     label: string;
     /** Helper text displayed below the label. */
@@ -23,13 +23,16 @@ export declare class NysLabel extends LitElement {
     /** Adjusts colors for dark backgrounds. */
     inverted: boolean;
     /** Tooltip text shown on hover/focus of info icon next to label. */
-    get tooltip(): string;
-    set tooltip(value: string);
-    private _tooltip;
+    tooltip: string;
+    connectedCallback(): void;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
      */
-    private _handleLabelClick;
+    /**
+     * While most components don't need to listen for this event.
+     * Special components like "nys-fileinput" and "nys-toggle" need to listen for label to execute their specific functionalities.
+     */
+    private _dispatchLabelClick;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -83,7 +83,6 @@ export declare class NysTextarea extends LitElement {
     showError: boolean;
     /** Error message text. Shown only when `showError` is true. */
     errorMessage: string;
-    updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
     private _hasUserInteracted;
     private _internals;
     /**
@@ -95,6 +94,7 @@ export declare class NysTextarea extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
     /**
      * Form Integration
      * --------------------------------------------------------------------------

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

@@ -101,6 +101,7 @@ export declare class NysTextinput extends LitElement {
     showError: boolean;
     /** Error message text. Shown only when `showError` is true. */
     errorMessage: string;
+    private _inputEl;
     private showPassword;
     private _originalErrorMessage;
     private _hasUserInteracted;
@@ -114,7 +115,7 @@ export declare class NysTextinput extends LitElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    firstUpdated(): void;
+    firstUpdated(): Promise<void>;
     updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
     /**
      * Form Integration

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

@@ -5,6 +5,27 @@ declare global {
         onYouTubeIframeAPIReady: () => void;
     }
 }
+/**
+ * A YouTube video player with a thumbnail preview and play button.
+ * Loads the iframe only after the user clicks play, keeping initial page load light.
+ * Supports autoplay (muted), custom thumbnails, start time, lazy loading, and disabled state.
+ * Announces playback state and ad state to screen readers via a live region.
+ *
+ * For use with YouTube URLs only. Component renders nothing if the URL is invalid.
+ *
+ * @summary YouTube video player with thumbnail preview and accessibility announcements.
+ * @element nys-video
+ *
+ * @fires nys-video-play - Fired when the user clicks the thumbnail to load the player.
+ *
+ * @example Basic usage
+ * ```html
+ * <nys-video
+ *   videourl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+ *   titleText="Video Title"
+ * ></nys-video>
+ * ```
+ */
 export declare class NysVideo extends LitElement {
     static styles: import("lit").CSSResult;
     /** Full YouTube URL — required. Component will not render if invalid. */
@@ -36,6 +57,10 @@ export declare class NysVideo extends LitElement {
     private _announcement;
     /** Tracks whether an ad is currently playing to suppress false "Video is playing" announcements */
     private _adPlaying;
+    /**
+     * Lifecycle methods
+     * --------------------------------------------------------------------------
+     */
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "../packages/nys-accordion/src/index";
 export * from "../packages/nys-alert/src/index";
 export * from "../packages/nys-avatar/src/index";
 export * from "../packages/nys-backtotop/src/index";
+export * from "../packages/nys-breadcrumbs/src/index";
 export * from "../packages/nys-button/src/index";
 export * from "../packages/nys-badge/src/index";
 export * from "../packages/nys-checkbox/src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -53,7 +53,8 @@
     "mcp-server:build": "turbo run build --filter=@nysds/mcp-server",
     "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:all": "npm run clean:dist && npm run clean:node && find packages -name '*.tsbuildinfo' -delete 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",
     "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"
   },
@@ -69,15 +70,15 @@
   "homepage": "https://designsystem.ny.gov/",
   "packageManager": "npm@11.6.2",
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
+    "@chromatic-com/storybook": "^5.1.2",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@figma/code-connect": "^1.4.0",
     "@floating-ui/dom": "^1.7.4",
     "@open-wc/testing": "^4.0.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",
+    "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/web-components-vite": "10.3.5",
     "@types/mocha": "^10.0.10",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
@@ -95,7 +96,7 @@
     "eslint": "^10.0.0",
     "eslint-plugin-lit": "^2.2.1",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.2.10",
+    "eslint-plugin-storybook": "10.3.5",
     "i": "^0.3.7",
     "lit": "^3.3.1",
     "lit-analyzer": "^2.0.3",
@@ -106,7 +107,7 @@
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.94.0",
     "sinon": "^21.0.0",
-    "storybook": "10.2.10",
+    "storybook": "10.3.5",
     "stylelint": "^17.1.1",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
@@ -124,6 +125,6 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "wc-datepicker": "^0.9.2"
+    "wc-datepicker": "^0.10.0"
   }
 }

package/packages/react/NysBreadcrumbItem.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  NysBreadcrumbItem as NysBreadcrumbItemElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysBreadcrumbItemElement, CustomEvent };
+
+export interface NysBreadcrumbItemProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Private property used by nys-breadcrumbs to indicate this breadcrumb item is the last in the trail * */
+  isLast?: boolean;
+
+  /** undefined */
+  isBackToParent?: boolean;
+
+  /** undefined */
+  id?: NysBreadcrumbItemElement["id"];
+
+  /** undefined */
+  label?: NysBreadcrumbItemElement["label"];
+
+  /** undefined */
+  link?: NysBreadcrumbItemElement["link"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** 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;
+
+  /** Fired when the link is clicked. Detail: `{id, link}`. */
+  onNysBreadcrumbitemClick?: (event: CustomEvent) => void;
+}
+
+/**
+ * Single breadcrumb trail item with chevron separator and current page support.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-breadcrumbitem-click** - Fired when the link is clicked. Detail: `{id, link}`.
+ */
+export const NysBreadcrumbItem: React.ForwardRefExoticComponent<NysBreadcrumbItemProps>;

package/packages/react/NysBreadcrumbItem.js

@@ -0,0 +1,42 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysBreadcrumbItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { isLast, isBackToParent, id, label, link, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "nys-breadcrumbitem-click",
+    props.onNysBreadcrumbitemClick,
+  );
+
+  return React.createElement(
+    "nys-breadcrumbitem",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      label: props.label,
+      link: props.link,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      isLast: props.isLast ? true : undefined,
+      isBackToParent: props.isBackToParent ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysBreadcrumbs.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  NysBreadcrumbs as NysBreadcrumbsElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysBreadcrumbsElement, CustomEvent };
+
+export interface NysBreadcrumbsProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** On mobile, renders the trail as a single back-to-parent link pointing to the item before the current page.
+Has no effect on desktop or when only one item is present (which always renders as a back link). */
+  backToParent?: boolean;
+
+  /** Forces the trail into its collapsed state.
+It shows only the first item, an ellipsis, and the last two items.
+The user can still expand the trail by clicking the ellipsis. */
+  collapsed?: boolean;
+
+  /** Renders a filled light theme background bar behind the breadcrumb trail. */
+  backgroundBar?: boolean;
+
+  /** Prevents interaction. */
+  disabled?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysBreadcrumbsElement["id"];
+
+  /** Accessible label for the `<nav>` landmark. Defaults to "path to this page" if not set.
+Override when multiple crumbs exist on the same page. */
+  ariaLabel?: NysBreadcrumbsElement["ariaLabel"];
+
+  /** Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use. */
+  size?: NysBreadcrumbsElement["size"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** 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 */
+  onNysExpand?: (event: CustomEvent) => void;
+
+  /** Fired when the user clicks the ellipsis to expand the trail. */
+  onNysBreadcrumbsExpand?: (event: CustomEvent) => void;
+}
+
+/**
+ * Breadcrumb navigation trail with responsive collapse support.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-expand**
+ * - **nys-breadcrumbs-expand** - Fired when the user clicks the ellipsis to expand the trail.
+ *
+ * ### **Slots:**
+ *  - _default_ - One or more `nys-breadcrumbitem` elements defining the trail.
+ */
+export const NysBreadcrumbs: React.ForwardRefExoticComponent<NysBreadcrumbsProps>;

package/packages/react/NysBreadcrumbs.js

@@ -0,0 +1,50 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysBreadcrumbs = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    backToParent,
+    collapsed,
+    backgroundBar,
+    disabled,
+    id,
+    ariaLabel,
+    size,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-expand", props.onNysExpand);
+  useEventListener(ref, "nys-breadcrumbs-expand", props.onNysBreadcrumbsExpand);
+
+  return React.createElement(
+    "nys-breadcrumbs",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      ariaLabel: props.ariaLabel,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      backToParent: props.backToParent ? true : undefined,
+      collapsed: props.collapsed ? true : undefined,
+      backgroundBar: props.backgroundBar ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});