@nysds/components 1.14.0 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -8,7 +8,8 @@
   ],
   "files": [
     "dist/",
-    "custom-elements.json"
+    "custom-elements.json",
+    "packages/react/"
   ],
   "main": "dist/nysds.js",
   "module": "dist/nysds.es.js",
@@ -18,6 +19,10 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/nysds.es.js",
       "require": "./dist/nysds.js"
+    },
+    "./react": {
+      "import": "./packages/react/index.js",
+      "types": "./packages/react/index.d.ts"
     }
   },
   "customElements": "custom-elements.json",
@@ -25,29 +30,31 @@
     "dev": "vite",
     "gen": "plop",
     "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 && npm run mcp-server:build",
+    "build:umd": "cross-env BUILD_FORMAT=umd vite build",
+    "tsc:packages": "tsc -b tsconfig.build.json",
+    "build:packages": "npm run tsc:packages && turbo run build --filter='./packages/*'",
+    "build:root": "cross-env NODE_ENV=production npm run build && cross-env NODE_ENV=production npm run build:umd",
+    "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 mcp-server:build",
     "build:link": "npm run build:all && npm link",
-    "lint": "eslint && stylelint **/*.scss || true",
+    "lint": "eslint --cache --cache-location node_modules/.cache/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",
     "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:build": "npm run build:all && npm run test",
     "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",
     "storybook:cibuild": "storybook build",
-    "mcp-server:build": "node src/scripts/build-mcp-server.js",
+    "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",
+    "clean:all": "npm run clean:dist && npm run clean:node && find packages -name '*.tsbuildinfo' -delete 2>/dev/null || true",
     "code-connect": "dotenv -- npx figma connect publish",
-    "cem": "npx cem analyze --config ./custom-elements-manifest.config.mjs",
-    "cem:copy": "cp ./custom-elements.json dist/"
+    "cem": "npx cem analyze --config ./custom-elements-manifest.config.mjs && cp ./custom-elements.json dist/ && node src/scripts/patch-react-utils.js"
   },
   "repository": {
     "type": "git",
@@ -59,6 +66,7 @@
     "url": "https://github.com/ITS-HCD/nysds/issues"
   },
   "homepage": "https://designsystem.ny.gov/",
+  "packageManager": "npm@11.6.2",
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
     "@custom-elements-manifest/analyzer": "^0.11.0",
@@ -99,6 +107,7 @@
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "tslib": "^2.8.1",
+    "turbo": "^2.8.19",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },

package/packages/react/NysAccordion.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+import { NysAccordion as NysAccordionElement } from "../../dist/nysds.es.js";
+
+export type { NysAccordionElement };
+
+export interface NysAccordionProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Only one item can be expanded at a time. Expanding one collapses others. */
+  singleSelect?: boolean;
+
+  /** Adds borders around each accordion item. Propagates to all children. */
+  bordered?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysAccordionElement["id"];
+
+  /** 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;
+}
+
+/**
+ * Container for accordion items with optional single-select and bordered styling.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for `nys-accordionitem` elements.
+ *
+ * ### **CSS Properties:**
+ *  - **--nys-accordion-background-color--header** - Background color of the accordion header. _(default: undefined)_
+ * - **--nys-accordion-background-color--header--hover** - Background hover color of the accordion header. _(default: undefined)_
+ * - **--nys-accordion-content-max-width** - Maximum readable width of accordion content. Defaults to a character-based width (80ch) for readability. _(default: undefined)_
+ */
+export const NysAccordion: React.ForwardRefExoticComponent<NysAccordionProps>;

package/packages/react/NysAccordion.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysAccordion = forwardRef((props, forwardedRef) => {
+  const { singleSelect, bordered, id, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-accordion",
+    {
+      ...filteredProps,
+      id: props.id,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      singleSelect: props.singleSelect ? true : undefined,
+      bordered: props.bordered ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysAccordionItem.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  NysAccordionItem as NysAccordionItemElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysAccordionItemElement, CustomEvent };
+
+export interface NysAccordionItemProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether the content panel is visible. Toggle via click or keyboard. */
+  expanded?: boolean;
+
+  /** Adds border styling. Set by parent `nys-accordion`, not directly. */
+  bordered?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysAccordionItemElement["id"];
+
+  /** Heading text displayed in the clickable toggle button. */
+  heading?: NysAccordionItemElement["heading"];
+
+  /** 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 expanded state changes. Detail: `{id, heading, expanded}`. */
+  onNysAccordionitemToggle?: (event: CustomEvent) => void;
+}
+
+/**
+ * Collapsible panel for use within nys-accordion with keyboard support.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-accordionitem-toggle** - Fired when expanded state changes. Detail: `{id, heading, expanded}`.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for panel content shown when expanded.
+ */
+export const NysAccordionItem: React.ForwardRefExoticComponent<NysAccordionItemProps>;

package/packages/react/NysAccordionItem.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysAccordionItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { expanded, bordered, id, heading, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "nys-accordionitem-toggle",
+    props.onNysAccordionitemToggle,
+  );
+
+  return React.createElement(
+    "nys-accordionitem",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      heading: props.heading,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      expanded: props.expanded ? true : undefined,
+      bordered: props.bordered ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysAlert.d.ts

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  NysAlert as NysAlertElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysAlertElement, CustomEvent };
+
+export interface NysAlertProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Shows close button allowing users to dismiss the alert. */
+  dismissible?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysAlertElement["id"];
+
+  /** Bold heading text displayed at the top of the alert. */
+  heading?: NysAlertElement["heading"];
+
+  /** Custom icon name. Defaults to type-appropriate icon if not set. */
+  icon?: NysAlertElement["icon"];
+
+  /** Auto-dismiss after specified milliseconds. Set to 0 to disable. */
+  duration?: NysAlertElement["duration"];
+
+  /** Body text content. Ignored if slot content is provided. */
+  text?: NysAlertElement["text"];
+
+  /** URL for the primary action link. */
+  primaryAction?: NysAlertElement["primaryAction"];
+
+  /** URL for the secondary action link. */
+  secondaryAction?: NysAlertElement["secondaryAction"];
+
+  /** Label text for primary action link. */
+  primaryLabel?: NysAlertElement["primaryLabel"];
+
+  /** Label text for secondary action link. */
+  secondaryLabel?: NysAlertElement["secondaryLabel"];
+
+  /** Semantic alert type affecting color and ARIA role. `danger`/`emergency` use assertive live region. */
+  type?: NysAlertElement["type"];
+
+  /** 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;
+
+  /** Returns ARIA role and label based on alert type.
+- 'alert' => assertive live region (implied)
+- 'status' => polite live region
+- 'region' => generic, requires aria-label */
+  ariaAttributes?: NysAlertElement["ariaAttributes"];
+
+  /** Returns live-region type for screen readers if applicable.
+- 'polite' for status role
+- undefined for alert (since it's implicitly assertive) or region */
+  liveRegion?: NysAlertElement["liveRegion"];
+
+  /** Fired when alert is dismissed. Detail: `{id, type, label}`. */
+  onNysClose?: (event: CustomEvent) => void;
+}
+
+/**
+ * Alert for contextual feedback with semantic types and live region support.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-close** - Fired when alert is dismissed. Detail: `{id, type, label}`.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for custom body content. Overrides `text` prop when provided.
+ */
+export const NysAlert: React.ForwardRefExoticComponent<NysAlertProps>;

package/packages/react/NysAlert.js

@@ -0,0 +1,63 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener, useProperties } from "./react-utils.js";
+
+export const NysAlert = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    dismissible,
+    id,
+    heading,
+    icon,
+    duration,
+    text,
+    primaryAction,
+    secondaryAction,
+    primaryLabel,
+    secondaryLabel,
+    type,
+    ariaAttributes,
+    liveRegion,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-close", props.onNysClose);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "ariaAttributes", props.ariaAttributes);
+  useProperties(ref, "liveRegion", props.liveRegion);
+
+  return React.createElement(
+    "nys-alert",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      heading: props.heading,
+      icon: props.icon,
+      duration: props.duration,
+      text: props.text,
+      primaryAction: props.primaryAction,
+      secondaryAction: props.secondaryAction,
+      primaryLabel: props.primaryLabel,
+      secondaryLabel: props.secondaryLabel,
+      type: props.type,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      dismissible: props.dismissible ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysAvatar.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import { NysAvatar as NysAvatarElement } from "../../dist/nysds.es.js";
+
+export type { NysAvatarElement };
+
+export interface NysAvatarProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Makes avatar clickable with button role and focus ring. */
+  interactive?: boolean;
+
+  /** Prevents interaction when `interactive` is true. */
+  disabled?: boolean;
+
+  /** Enables lazy loading for the image. */
+  lazy?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysAvatarElement["id"];
+
+  /** Accessible label for screen readers. Required when no image `alt` is available. */
+  ariaLabel?: NysAvatarElement["ariaLabel"];
+
+  /** Image URL. Takes priority over initials and icon. */
+  image?: NysAvatarElement["image"];
+
+  /** 1-2 character initials. Used when no image is provided. */
+  initials?: NysAvatarElement["initials"];
+
+  /** Custom icon name. Falls back to `account_circle` if not set. */
+  icon?: NysAvatarElement["icon"];
+
+  /** Background color. Foreground auto-adjusts for contrast. Accepts CSS values or variables. */
+  color?: NysAvatarElement["color"];
+
+  /** 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;
+}
+
+/**
+ * User avatar with image, initials, or icon fallback and contrast-aware colors.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Custom icon content. Overrides default icon when no image or initials.
+ */
+export const NysAvatar: React.ForwardRefExoticComponent<NysAvatarProps>;

package/packages/react/NysAvatar.js

@@ -0,0 +1,40 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysAvatar = forwardRef((props, forwardedRef) => {
+  const {
+    interactive,
+    disabled,
+    lazy,
+    id,
+    ariaLabel,
+    image,
+    initials,
+    icon,
+    color,
+    ...filteredProps
+  } = props;
+
+  return React.createElement(
+    "nys-avatar",
+    {
+      ...filteredProps,
+      id: props.id,
+      ariaLabel: props.ariaLabel,
+      image: props.image,
+      initials: props.initials,
+      icon: props.icon,
+      color: props.color,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      interactive: props.interactive ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      lazy: props.lazy ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysBacktotop.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { NysBacktotop as NysBacktotopElement } from "../../dist/nysds.es.js";
+
+export type { NysBacktotopElement };
+
+export interface NysBacktotopProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Force button visibility. Overrides auto-show scroll behavior. */
+  visible?: boolean;
+
+  /** Horizontal position: `left` or `right`. */
+  position?: NysBacktotopElement["position"];
+
+  /** 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;
+}
+
+/**
+ * Floating back-to-top button with auto-show behavior and smooth scroll.
+ * ---
+ *
+ */
+export const NysBacktotop: React.ForwardRefExoticComponent<NysBacktotopProps>;

package/packages/react/NysBacktotop.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysBacktotop = forwardRef((props, forwardedRef) => {
+  const { visible, position, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-backtotop",
+    {
+      ...filteredProps,
+      position: props.position,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      visible: props.visible ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});