@nysds/components 1.16.1 → 1.18.0

package/packages/react/NysButton.d.ts

@@ -51,10 +51,10 @@ export interface NysButtonProps extends Pick<
   /** ID of controlled element (e.g., dropdown or modal). Sets `aria-controls`. */
   ariaControls?: NysButtonElement["ariaControls"];
 
-  /** Material Symbol icon before label. Not shown for `text` variant or `circle` mode. */
+  /** Material Symbol icon before label. Not shown for `circle` mode. */
   prefixIcon?: NysButtonElement["prefixIcon"];
 
-  /** 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?: NysButtonElement["suffixIcon"];
 
   /** Icon for circle mode. Required when `circle` is true. Scales with size (sm=24px, md=32px, lg=40px). */

package/packages/react/NysCheckbox.d.ts

@@ -40,9 +40,6 @@ export interface NysCheckboxProps extends Pick<
   /** Renders as tile with larger clickable area. Apply to group for consistency. */
   tile?: boolean;
 
-  /** Adjusts colors for dark backgrounds. */
-  inverted?: boolean;
-
   /** undefined */
   other?: boolean;
 

package/packages/react/NysCheckbox.js

@@ -11,7 +11,6 @@ export const NysCheckbox = forwardRef((props, forwardedRef) => {
     showError,
     groupExist,
     tile,
-    inverted,
     other,
     showOtherError,
     label,
@@ -66,7 +65,6 @@ export const NysCheckbox = forwardRef((props, forwardedRef) => {
       showError: props.showError ? true : undefined,
       groupExist: props.groupExist ? true : undefined,
       tile: props.tile ? true : undefined,
-      inverted: props.inverted ? true : undefined,
       other: props.other ? true : undefined,
       showOtherError: props.showOtherError ? true : undefined,
       style: { ...props.style },

package/packages/react/NysCheckboxgroup.d.ts

@@ -30,9 +30,6 @@ export interface NysCheckboxgroupProps extends Pick<
   /** Renders all checkboxes as tiles with larger clickable area. */
   tile?: boolean;
 
-  /** Adjusts colors for dark backgrounds. Applied to all children. */
-  inverted?: boolean;
-
   /** Unique identifier. Auto-generated if not provided. */
   id?: NysCheckboxgroupElement["id"];
 

package/packages/react/NysCheckboxgroup.js

@@ -7,7 +7,6 @@ export const NysCheckboxgroup = forwardRef((props, forwardedRef) => {
     optional,
     showError,
     tile,
-    inverted,
     id,
     name,
     errorMessage,
@@ -40,7 +39,6 @@ export const NysCheckboxgroup = forwardRef((props, forwardedRef) => {
       optional: props.optional ? true : undefined,
       showError: props.showError ? true : undefined,
       tile: props.tile ? true : undefined,
-      inverted: props.inverted ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/packages/react/NysErrorMessage.d.ts

@@ -24,6 +24,9 @@ export interface NysErrorMessageProps extends Pick<
   /** Shows a divider line above the error message. */
   showDivider?: boolean;
 
+  /** The "id" of the error message. */
+  id?: NysErrorMessageElement["id"];
+
   /** Error text to display. Falls back to native validation message if available. */
   errorMessage?: NysErrorMessageElement["errorMessage"];
 

package/packages/react/NysErrorMessage.js

@@ -2,12 +2,13 @@ import React, { forwardRef } from "react";
 import "../../dist/nysds.es.js";
 
 export const NysErrorMessage = forwardRef((props, forwardedRef) => {
-  const { showError, showDivider, errorMessage, ...filteredProps } = props;
+  const { showError, showDivider, id, errorMessage, ...filteredProps } = props;
 
   return React.createElement(
     "nys-errormessage",
     {
       ...filteredProps,
+      id: props.id,
       errorMessage: props.errorMessage,
       class: props.className,
       exportparts: props.exportparts,

package/packages/react/NysLabel.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
-import { NysLabel as NysLabelElement } from "../../dist/nysds.es.js";
+import {
+  NysLabel as NysLabelElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
 
-export type { NysLabelElement };
+export type { NysLabelElement, CustomEvent };
 
 export interface NysLabelProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
@@ -21,8 +24,8 @@ export interface NysLabelProps extends Pick<
   /** Adjusts colors for dark backgrounds. */
   inverted?: boolean;
 
-  /** ID of the form element this label is associated with. */
-  for?: NysLabelElement["for"];
+  /** The ID of the label. */
+  id?: NysLabelElement["id"];
 
   /** Label text displayed above the form field. */
   label?: NysLabelElement["label"];
@@ -42,6 +45,9 @@ export interface NysLabelProps extends Pick<
   /** 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;
 
@@ -53,6 +59,9 @@ export interface NysLabelProps 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 */
+  onNysLabelClick?: (event: CustomEvent) => void;
 }
 
 /**
@@ -60,6 +69,9 @@ export interface NysLabelProps extends Pick<
  * ---
  *
  *
+ * ### **Events:**
+ *  - **nys-label-click**
+ *
  * ### **Slots:**
  *  - **description** - Custom HTML description content below the label.
  */

package/packages/react/NysLabel.js

@@ -1,21 +1,35 @@
-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 NysLabel = forwardRef((props, forwardedRef) => {
-  const { inverted, label, description, flag, tooltip, ...filteredProps } =
+  const ref = useRef(null);
+  const { inverted, id, label, description, flag, tooltip, ...filteredProps } =
     props;
 
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-label-click", props.onNysLabelClick);
+
   return React.createElement(
     "nys-label",
     {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
-      for: props.for,
+      id: props.id,
       label: props.label,
       description: props.description,
       flag: props.flag,
       tooltip: props.tooltip,
       class: props.className,
       exportparts: props.exportparts,
+      for: props.htmlFor,
       part: props.part,
       tabindex: props.tabIndex,
       inverted: props.inverted ? true : undefined,

package/packages/react/NysRadiobutton.d.ts

@@ -31,9 +31,6 @@ export interface NysRadiobuttonProps extends Pick<
   /** Marks group as required. Set on radiogroup, not individual radios. */
   required?: boolean;
 
-  /** Adjusts colors for dark backgrounds. */
-  inverted?: boolean;
-
   /** Renders as tile with larger clickable area. */
   tile?: boolean;
 

package/packages/react/NysRadiobutton.js

@@ -8,7 +8,6 @@ export const NysRadiobutton = forwardRef((props, forwardedRef) => {
     checked,
     disabled,
     required,
-    inverted,
     tile,
     other,
     showOtherError,
@@ -57,7 +56,6 @@ export const NysRadiobutton = forwardRef((props, forwardedRef) => {
       checked: props.checked ? true : undefined,
       disabled: props.disabled ? true : undefined,
       required: props.required ? true : undefined,
-      inverted: props.inverted ? true : undefined,
       tile: props.tile ? true : undefined,
       other: props.other ? true : undefined,
       showOtherError: props.showOtherError ? true : undefined,

package/packages/react/NysRadiogroup.d.ts

@@ -30,9 +30,6 @@ export interface NysRadiogroupProps extends Pick<
   /** Renders all radiobuttons as tiles with larger clickable area. */
   tile?: boolean;
 
-  /** Adjusts colors for dark backgrounds. Applied to all children. */
-  inverted?: boolean;
-
   /** Unique identifier. Auto-generated if not provided. */
   id?: NysRadiogroupElement["id"];
 

package/packages/react/NysRadiogroup.js

@@ -7,7 +7,6 @@ export const NysRadiogroup = forwardRef((props, forwardedRef) => {
     optional,
     showError,
     tile,
-    inverted,
     id,
     name,
     errorMessage,
@@ -40,7 +39,6 @@ export const NysRadiogroup = forwardRef((props, forwardedRef) => {
       optional: props.optional ? true : undefined,
       showError: props.showError ? true : undefined,
       tile: props.tile ? true : undefined,
-      inverted: props.inverted ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/packages/react/NysTab.d.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import { NysTab as NysTabElement, CustomEvent } from "../../dist/nysds.es.js";
+
+export type { NysTabElement, CustomEvent };
+
+export interface NysTabProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether this tab is the currently active tab.
+Managed by `<nys-tabgroup>`; reflected for CSS attribute selectors. */
+  selected?: boolean;
+
+  /** Whether this tab is disabled.
+Reflected to the DOM attribute for CSS styling. */
+  disabled?: boolean;
+
+  /** Unique identifier for the tab element.
+Reflected to the DOM attribute so `aria-controls` references resolve. */
+  id?: NysTabElement["id"];
+
+  /** Visible text label rendered inside the inner `<span>`. */
+  label?: NysTabElement["label"];
+
+  /** 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;
+
+  /** Dispatched when the tab is activated via click or Enter / Space. Bubbles and crosses shadow DOM boundaries. `detail: { id: string, label: string }` */
+  onNysTabSelect?: (event: CustomEvent) => void;
+
+  /** Dispatched when the host receives focus. Bubbles and crosses shadow DOM boundaries. `detail: { id: string }` */
+  onNysTabFocus?: (event: CustomEvent) => void;
+
+  /** Dispatched when the host loses focus. Bubbles and crosses shadow DOM boundaries. `detail: { id: string }` */
+  onNysTabBlur?: (event: CustomEvent) => void;
+}
+
+/**
+ * `<nys-tab>` is a single tab within a `<nys-tabgroup>`.
+ *
+ * The host element carries `role="tab"`, `tabindex`, `aria-selected`,
+ * `aria-controls`, and `aria-disabled` so assistive technologies see the
+ * correct ARIA tab semantics on the element that is actually focused.
+ * `<nys-tabgroup>` manages `tabindex`, `aria-selected`, and `aria-controls`
+ * via `_applySelection`; do not set them directly on this element.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-tab-select** - Dispatched when the tab is activated via click or Enter / Space. Bubbles and crosses shadow DOM boundaries. `detail: { id: string, label: string }`
+ * - **nys-tab-focus** - Dispatched when the host receives focus. Bubbles and crosses shadow DOM boundaries. `detail: { id: string }`
+ * - **nys-tab-blur** - Dispatched when the host loses focus. Bubbles and crosses shadow DOM boundaries. `detail: { id: string }`
+ *
+ * ### **Methods:**
+ *  - **focus(options: _FocusOptions_): _void_** - Focuses the host element. The host carries `role="tab"` and `tabindex`,
+ * so it is the correct element for AT to land on.
+ *
+ * ### **Slots:**
+ *  - _default_ - No slots; content is derived from the `label` property.
+ */
+export const NysTab: React.ForwardRefExoticComponent<NysTabProps>;

package/packages/react/NysTab.js

@@ -0,0 +1,39 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysTab = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { selected, disabled, id, label, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-tab-select", props.onNysTabSelect);
+  useEventListener(ref, "nys-tab-focus", props.onNysTabFocus);
+  useEventListener(ref, "nys-tab-blur", props.onNysTabBlur);
+
+  return React.createElement(
+    "nys-tab",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      label: props.label,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      selected: props.selected ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysTabgroup.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { NysTabgroup as NysTabgroupElement } from "../../dist/nysds.es.js";
+
+export type { NysTabgroupElement };
+
+export interface NysTabgroupProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Unique identifier for the tabgroup element.
+If not provided, one is auto-generated in `connectedCallback`.
+Reflected to the DOM attribute. */
+  id?: NysTabgroupElement["id"];
+
+  /** The name of the tab group.
+Used for form submission and accessibility purposes. */
+  name?: NysTabgroupElement["name"];
+
+  /** 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;
+}
+
+/**
+ * `<nys-tabgroup>` is the container for `<nys-tab>` and `<nys-tabpanel>`
+ * elements.
+ *
+ * Accepts tabs and panels as flat light-DOM children in any order (interleaved
+ * or grouped). On slot change, children are sorted into dedicated shadow-DOM
+ * containers, ARIA relationships are wired, and the first selected (or first)
+ * tab is activated.
+ *
+ * Scroll shadows are rendered on either side of the tab list and toggled via
+ * `ResizeObserver` and a `scroll` listener so they accurately reflect whether
+ * overflow content exists in each direction.
+ *
+ * Keyboard navigation follows the
+ * https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ ARIA Tabs Pattern:
+ * - Arrow keys move focus without changing selection.
+ * - Enter / Space confirm selection on the focused tab.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Accepts `<nys-tab>` and `<nys-tabpanel>` children. Elements are moved into internal shadow-DOM containers on `slotchange`; the slot itself is not rendered visibly.
+ */
+export const NysTabgroup: React.ForwardRefExoticComponent<NysTabgroupProps>;

package/packages/react/NysTabgroup.js

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

package/packages/react/NysTabpanel.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { NysTabpanel as NysTabpanelElement } from "../../dist/nysds.es.js";
+
+export type { NysTabpanelElement };
+
+export interface NysTabpanelProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Unique identifier for the panel element.
+If not provided, one is auto-generated in `connectedCallback`.
+Reflected to the DOM attribute so `aria-controls` references on sibling
+`<nys-tab>` elements resolve correctly. */
+  id?: NysTabpanelElement["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;
+}
+
+/**
+ * `<nys-tabpanel>` is a content panel paired with a `<nys-tab>` inside a
+ * `<nys-tabgroup>`.
+ *
+ * Pairing is determined by render order: the Nth `<nys-tabpanel>` child of a
+ * `<nys-tabgroup>` corresponds to the Nth `<nys-tab>` child.
+ * `aria-labelledby` and the `hidden` attribute are managed externally by
+ * `<nys-tabgroup>` via `_applySelection`; do not set them directly.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for panel content. Rendered inside a wrapper `<div>` with the `.nys-tabpanel` class for styling.
+ */
+export const NysTabpanel: React.ForwardRefExoticComponent<NysTabpanelProps>;

package/packages/react/NysTabpanel.js

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

package/packages/react/NysVideo.d.ts

@@ -67,11 +67,17 @@ Falls back to YouTube's auto-generated thumbnail if not provided. */
 
   /** 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 user clicks the thumbnail to load the player. */
+  onNysVideoPlay?: (event: CustomEvent) => void;
 }
 
 /**
- *
+ * YouTube video player with thumbnail preview and accessibility announcements.
  * ---
  *
+ *
+ * ### **Events:**
+ *  - **nys-video-play** - Fired when the user clicks the thumbnail to load the player.
  */
 export const NysVideo: React.ForwardRefExoticComponent<NysVideoProps>;

package/packages/react/NysVideo.js

@@ -1,7 +1,9 @@
-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 NysVideo = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
   const {
     autoplay,
     disabled,
@@ -15,9 +17,20 @@ export const NysVideo = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-video-play", props.onNysVideoPlay);
+
   return React.createElement(
     "nys-video",
     {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       id: props.id,
       titleText: props.titleText,

package/packages/react/index.d.ts

@@ -4,6 +4,7 @@ export * from "./NysAlert.js";
 export * from "./NysAvatar.js";
 export * from "./NysBacktotop.js";
 export * from "./NysBadge.js";
+export * from "./NysBreadcrumbs.js";
 export * from "./NysButton.js";
 export * from "./NysCheckbox.js";
 export * from "./NysCheckboxgroup.js";
@@ -28,6 +29,9 @@ export * from "./NysSelect.js";
 export * from "./NysSkipnav.js";
 export * from "./NysStep.js";
 export * from "./NysStepper.js";
+export * from "./NysTab.js";
+export * from "./NysTabgroup.js";
+export * from "./NysTabpanel.js";
 export * from "./NysTable.js";
 export * from "./NysTextarea.js";
 export * from "./NysTextinput.js";

package/packages/react/index.js

@@ -4,6 +4,7 @@ export * from "./NysAlert.js";
 export * from "./NysAvatar.js";
 export * from "./NysBacktotop.js";
 export * from "./NysBadge.js";
+export * from "./NysBreadcrumbs.js";
 export * from "./NysButton.js";
 export * from "./NysCheckbox.js";
 export * from "./NysCheckboxgroup.js";
@@ -28,6 +29,9 @@ export * from "./NysSelect.js";
 export * from "./NysSkipnav.js";
 export * from "./NysStep.js";
 export * from "./NysStepper.js";
+export * from "./NysTab.js";
+export * from "./NysTabgroup.js";
+export * from "./NysTabpanel.js";
 export * from "./NysTable.js";
 export * from "./NysTextarea.js";
 export * from "./NysTextinput.js";