@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/src/progress/__tests__/__snapshots__/LinearProgress.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`LinearProgress should allow the transition to be disabled for determinate progress bars 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -18,6 +19,7 @@ exports[`LinearProgress should allow the transition to be disabled for determina
 
 exports[`LinearProgress should allow the transition to be disabled for determinate progress bars 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -33,6 +35,7 @@ exports[`LinearProgress should allow the transition to be disabled for determina
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -47,6 +50,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color custom-class-name"
@@ -62,6 +66,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -78,6 +83,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should be able to render as any of the theme colors 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -92,6 +98,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 1`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-secondary-color"
@@ -106,6 +113,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 2`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-warning-color"
@@ -120,6 +128,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 3`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-success-color"
@@ -134,6 +143,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 4`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 5`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-error-color"
@@ -148,6 +158,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 5`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 6`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate"
@@ -162,6 +173,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 6`]
 
 exports[`LinearProgress should be able to render vertically 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -177,6 +189,7 @@ exports[`LinearProgress should be able to render vertically 1`] = `
 
 exports[`LinearProgress should be able to render vertically 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -192,6 +205,7 @@ exports[`LinearProgress should be able to render vertically 2`] = `
 
 exports[`LinearProgress should be able to render vertically 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -207,6 +221,7 @@ exports[`LinearProgress should be able to render vertically 3`] = `
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -221,6 +236,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -236,6 +252,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -253,6 +270,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -270,6 +288,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should render as a determinate progress bar when the value is provided 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -286,6 +305,7 @@ exports[`LinearProgress should render as a determinate progress bar when the val
 
 exports[`LinearProgress should render as a determinate progress bar when the value is provided 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"

package/src/segmented-button/_segmented-button.scss

@@ -4,11 +4,13 @@
 @use "../icon/icon";
 @use "../interaction/interaction";
 @use "../typography/typography";
+@use "../transition/transition";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../theme/theme";
 
 $disable-everything: false !default;
+$disable-selected-icon: false !default;
 
 $light-theme-color: colors.$black !default;
 $light-theme-outline-color: #79747e !default;
@@ -201,6 +203,9 @@ $var-lookup: (
       }
 
       &--selected {
+        @if not $disable-selected-icon {
+          @include transition.transition-set-var(max-width, icon.get-var(size));
+        }
         @include use-var(background-color, selected-background-color);
         @include use-var(color, selected-color);
       }

package/src/snackbar/__tests__/Snackbar.tsx

@@ -33,9 +33,9 @@ describe("Snackbar", () => {
       "aria-label": "Notifications",
       ref,
     } as const;
-    const { getByRole, rerender } = render(<Snackbar {...props} />);
+    const { rerender } = render(<Snackbar {...props} />);
 
-    const snackbar = getByRole("status", { name: "Notifications" });
+    const snackbar = screen.getByRole("status", { name: "Notifications" });
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(snackbar);
     expect(snackbar).toMatchSnapshot();

package/src/snackbar/__tests__/Toast.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it, jest } from "@jest/globals";
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import { createRef, type ReactElement } from "react";
 import {
   rmdRender as baseRender,
@@ -8,6 +8,7 @@ import {
 } from "../../test-utils/index.js";
 
 import { FontIcon } from "../../icon/FontIcon.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { Typography } from "../../typography/Typography.js";
 import { Toast } from "../Toast.js";
 import { CurrentToastActionsProvider } from "../useCurrentToastActions.js";
@@ -30,6 +31,10 @@ const render = (ui: ReactElement): RenderResult =>
   });
 
 describe("Toast", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<HTMLDivElement>();
     const props = {
@@ -89,12 +94,12 @@ describe("Toast", () => {
   });
 
   it("should not be in the dom while not visible", () => {
-    const { getByTestId } = render(
+    render(
       <Toast data-testid="toast" visible={false}>
         Hello
       </Toast>
     );
 
-    expect(() => getByTestId("toast")).toThrow();
+    expect(() => screen.getByTestId("toast")).toThrow();
   });
 });

package/src/snackbar/__tests__/ToastActionButton.tsx

@@ -27,13 +27,13 @@ describe("ToastActionButton", () => {
       startRemoveTimeout: jest.fn(),
       resumeRemoveTimeout: jest.fn(),
     };
-    const { getByRole, rerender } = render(
+    const { rerender } = render(
       <CurrentToastActionsProvider value={actions}>
         <ToastActionButton {...props} />
       </CurrentToastActionsProvider>
     );
 
-    const button = getByRole("button", { name: "Button" });
+    const button = screen.getByRole("button", { name: "Button" });
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     expect(ref.current).toBe(button);
     expect(button).toMatchSnapshot();

package/src/snackbar/__tests__/ToastCloseButton.tsx

@@ -26,13 +26,13 @@ describe("ToastCloseButton", () => {
       startRemoveTimeout: jest.fn(),
       resumeRemoveTimeout: jest.fn(),
     };
-    const { getByRole, rerender } = render(
+    const { rerender } = render(
       <CurrentToastActionsProvider value={actions}>
         <ToastCloseButton {...props} />
       </CurrentToastActionsProvider>
     );
 
-    const button = getByRole("button", { name: "Close" });
+    const button = screen.getByRole("button", { name: "Close" });
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     expect(ref.current).toBe(button);
     expect(button).toMatchSnapshot();

package/src/snackbar/__tests__/ToastManagerProvider.tsx

@@ -18,6 +18,7 @@ import {
 
 import { type ReactElement, type ReactNode } from "react";
 import { Button } from "../../button/Button.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { Snackbar, type SnackbarProps } from "../Snackbar.js";
 import {
   ToastManager,
@@ -84,6 +85,10 @@ function SimpleTest(props: SimpleTestProps): ReactElement {
 
 describe("ToastManagerProvider", () => {
   describe("default toast manager", () => {
+    beforeEach(() => {
+      TRANSITION_CONFIG.disabled = false;
+    });
+
     afterEach(() => {
       toastManager.clearToasts(true);
     });
@@ -202,6 +207,7 @@ describe("ToastManagerProvider", () => {
   describe("toast queue", () => {
     beforeEach(() => {
       jest.useFakeTimers();
+      TRANSITION_CONFIG.disabled = false;
     });
 
     afterEach(() => {
@@ -210,7 +216,9 @@ describe("ToastManagerProvider", () => {
     });
 
     const init = async (props?: SimpleTestProps) => {
+      // eslint-disable-next-line testing-library/await-async-events
       const user = userEvent.setup({ delay: null });
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const result = renderWithManager(<SimpleTest {...props} />);
       const button = screen.getByRole("button", { name: "Button" });
       const snackbar = screen.getByRole("status");

package/src/suspense/CircularProgressSuspense.tsx

@@ -8,6 +8,10 @@ import {
  * @remarks \@since 6.0.0
  */
 export interface CircularProgressSuspenseProps extends CircularProgressProps {
+  /**
+   * @defaultValue `"Loading"`
+   */
+  "aria-label"?: string;
   children: ReactNode;
 }
 
@@ -40,9 +44,22 @@ export interface CircularProgressSuspenseProps extends CircularProgressProps {
 export function CircularProgressSuspense(
   props: CircularProgressSuspenseProps
 ): ReactElement {
-  const { children, ...progressProps } = props;
+  const {
+    children,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Loading",
+    ...progressProps
+  } = props;
   return (
-    <Suspense fallback={<CircularProgress {...progressProps} />}>
+    <Suspense
+      fallback={
+        <CircularProgress
+          aria-label={ariaLabel as string}
+          aria-labelledby={ariaLabelledBy}
+          {...progressProps}
+        />
+      }
+    >
       {children}
     </Suspense>
   );

package/src/table/Table.tsx

@@ -1,12 +1,11 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo, type TableHTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
 import {
   TableConfigProvider,
   type TableConfigContext,
   type TableConfiguration,
 } from "./TableConfigurationProvider.js";
+import { table } from "./tableStyles.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -28,28 +27,6 @@ declare module "react" {
   }
 }
 
-const styles = bem("rmd-table");
-
-/** @remarks \@since 6.0.0 */
-export interface TableClassNameOptions {
-  className?: string;
-
-  /** @defaultValue `false` */
-  dense?: boolean;
-
-  /** @defaultValue `false` */
-  fullWidth?: boolean;
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function table(options: TableClassNameOptions = {}): string {
-  const { dense = false, fullWidth = false, className } = options;
-
-  return cnb(styles({ dense, "full-width": fullWidth }), className);
-}
-
 export interface TableProps
   extends TableHTMLAttributes<HTMLTableElement>,
     TableConfiguration {}

package/src/table/TableCell.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   type ButtonHTMLAttributes,
@@ -9,13 +8,16 @@ import {
 } from "react";
 import { getIcon } from "../icon/iconConfig.js";
 import { type PropsWithRef } from "../types.js";
-import { TableCellContent, type SortOrder } from "./TableCellContent.js";
+import {
+  TableCellContent,
+  type SortOrder,
+  type TableCellContentsIconRotatorProps,
+} from "./TableCellContent.js";
 import {
   useTableConfig,
   type TableCellConfig,
-  type TableCellHorizontalAlignment,
-  type TableCellVerticalAlignment,
 } from "./TableConfigurationProvider.js";
+import { tableCell } from "./tableCellStyles.js";
 
 export type TableCellAttributes = Omit<
   | TdHTMLAttributes<HTMLTableCellElement>
@@ -59,7 +61,7 @@ export interface TableCellOptions extends TableCellConfig {
    * @internal
    * @defaultValue `false`
    */
-  checkbox?: boolean;
+  inputToggle?: boolean;
 }
 
 /**
@@ -122,6 +124,14 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
     HTMLButtonElement
   >;
 
+  /**
+   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop
+   * has been provided.
+   *
+   * @remarks \@since 6.0.0
+   */
+  iconRotatorProps?: TableCellContentsIconRotatorProps;
+
   /**
    * Since providing an `aria-sort` prop will wrap the `children` in an
    * `UnstyledButton`, you can use this prop to render another button within the
@@ -190,81 +200,6 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
   afterChildren?: ReactNode;
 }
 
-/** @remarks \@since 6.0.0 */
-export interface TableCellClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` if the cell is rendered as a `<th>` so that the correct
-   * sticky styles can be applied.
-   */
-  header: boolean;
-
-  /**
-   * Set this to true if the cell is rendered in a `<thead>` so that the correct
-   * sticky styles can be applied.
-   */
-  isInTableHeader: boolean;
-
-  /** @defaultValue `false` */
-  grow?: boolean;
-
-  /** @defaultValue `false` */
-  sticky?: boolean;
-
-  /** @defaultValue `false` */
-  checkbox?: boolean;
-
-  hAlign?: TableCellHorizontalAlignment;
-  vAlign?: TableCellVerticalAlignment;
-
-  /** @defaultValue `true` */
-  lineWrap?: boolean;
-
-  /**
-   * @defaultValue `"horizontal"`
-   */
-  padding?: "horizontal" | "vertical" | "none";
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function tableCell(options: TableCellClassNameOptions): string {
-  const {
-    grow,
-    sticky,
-    header,
-    checkbox,
-    hAlign,
-    vAlign,
-    lineWrap = true,
-    padding = "horizontal",
-    isInTableHeader,
-    className,
-  } = options;
-
-  // using `&&` instead of `bem` since the latest version of typescript does not
-  // support setting the same object key (empty string)
-  const p = "rmd-table-cell--";
-  return cnb(
-    "rmd-table-cell",
-    grow && `${p}grow`,
-    header && `${p}header`,
-    sticky && `${p}sticky`,
-    checkbox && `${p}checkbox`,
-    sticky && (!isInTableHeader || checkbox) && `${p}sticky-cell`,
-    sticky && isInTableHeader && `${p}sticky-header`,
-    sticky && isInTableHeader && checkbox && `${p}header-cell`,
-    hAlign && hAlign !== "left" && `${p}${hAlign}`,
-    vAlign && vAlign !== "middle" && `${p}${vAlign}`,
-    !lineWrap && `${p}no-wrap`,
-    padding === "vertical" && `${p}v-padding`,
-    padding === "none" && `${p}no-padding`,
-    className
-  );
-}
-
 /**
  * **Client Component**
  *
@@ -272,9 +207,9 @@ export function tableCell(options: TableCellClassNameOptions): string {
  * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a
  * child of the `TableHeader` component.
  *
- * Note: If you have a checkbox column in the `TableHeader` without any labels,
- * you will need to manually set the `header={false}` prop for that cell since
- * it is invalid to have a `<th>` without any readable content for screen
+ * Note: If you have a checkbox/radio column in the `TableHeader` without any
+ * labels, you will need to manually set the `header={false}` prop for that cell
+ * since it is invalid to have a `<th>` without any readable content for screen
  * readers.
  */
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
@@ -288,7 +223,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       vAlign: propVAlign,
       header: propHeader,
       lineWrap: propDisableLineWrap,
-      checkbox,
+      inputToggle,
       children,
       beforeChildren,
       afterChildren,
@@ -296,6 +231,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       sortIcon: propSortIcon,
       sortIconAfter = false,
       sortIconRotated,
+      iconRotatorProps,
       padding = "horizontal",
       contentProps,
       ...remaining
@@ -335,7 +271,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           grow,
           header,
           sticky,
-          checkbox,
+          inputToggle,
           hAlign,
           vAlign,
           lineWrap: !sortOrder && lineWrap,
@@ -349,6 +285,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           {...contentProps}
           icon={sortIcon}
           iconAfter={sortIconAfter}
+          iconRotatorProps={iconRotatorProps}
           sortOrder={sortOrder}
           hAlign={hAlign}
           rotated={sortIconRotated}

package/src/table/TableCellContent.tsx

@@ -1,12 +1,20 @@
 import { cnb } from "cnbuilder";
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
-import { IconRotator } from "../icon/IconRotator.js";
+import { IconRotator, type IconRotatorProps } from "../icon/IconRotator.js";
 import { bem } from "../utils/bem.js";
 import { type TableCellHorizontalAlignment } from "./TableConfigurationProvider.js";
 
 export type SortOrder = "ascending" | "descending" | "none" | "other";
 
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableCellContentsIconRotatorProps = Omit<
+  IconRotatorProps,
+  "children" | "rotated"
+>;
+
 /**
  * @remarks \@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props
  * can be passed to the `ButtonUnstyled`
@@ -33,6 +41,11 @@ export interface TableCellContentProps
    */
   rotated?: boolean;
 
+  /**
+   * Any additional props to pass to the `IconRotator`.
+   */
+  iconRotatorProps?: TableCellContentsIconRotatorProps;
+
   /**
    * @remarks \@since 4.0.3
    * @see {@link TableCellHorizontalAlignment}
@@ -66,6 +79,7 @@ export const TableCellContent = forwardRef<
     rotated: propRotated,
     hAlign = "left",
     iconAfter,
+    iconRotatorProps,
     ...remaining
   } = props;
   if (!sortOrder || propIcon === null) {
@@ -76,7 +90,11 @@ export const TableCellContent = forwardRef<
   if (sortOrder !== "none") {
     const rotated = propRotated ?? sortOrder === "descending";
 
-    icon = <IconRotator rotated={rotated}>{propIcon}</IconRotator>;
+    icon = (
+      <IconRotator {...iconRotatorProps} rotated={rotated}>
+        {propIcon}
+      </IconRotator>
+    );
   }
 
   return (

package/src/table/TableCheckbox.tsx

@@ -82,7 +82,6 @@ export interface TableCheckboxProps
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -91,8 +90,9 @@ export interface TableCheckboxProps
  *   TableContainer,
  *   TableHeader,
  *   TableRow,
+ *   useCheckboxGroup
  * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * const rows = [
  *   { name: "Frozen Yogurt", type: "Ice Cream" },
@@ -179,7 +179,7 @@ export const TableCheckbox = forwardRef<
       {...remaining}
       ref={ref}
       header={false}
-      checkbox
+      inputToggle
       onClick={(event) => {
         event.stopPropagation();
         onClick(event);

package/src/table/TableContainer.tsx

@@ -1,18 +1,11 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo, type HTMLAttributes } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import {
   TableContainerProvider,
   type TableContainerContext,
 } from "./TableContainerProvider.js";
-
-/**
- * @remarks \@since 6.0.0
- */
-export function tableContainer({ className }: { className?: string }): string {
-  return cnb("rmd-table-container", className);
-}
+import { tableContainer } from "./tableContainerStyles.js";
 
 export type TableContainerProps = HTMLAttributes<HTMLDivElement>;