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

package/coverage/lcov-report/src/table/TableCellContent.tsx.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">78.63% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>78/99</span>
+                <span class='fraction'>92/117</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">78.63% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>78/99</span>
+                <span class='fraction'>92/117</span>
             </div>
         
             
@@ -162,7 +162,25 @@
 <a name='L97'></a><a href='#L97'>97</a>
 <a name='L98'></a><a href='#L98'>98</a>
 <a name='L99'></a><a href='#L99'>99</a>
-<a name='L100'></a><a href='#L100'>100</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -221,20 +239,36 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -256,20 +290,30 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
-<span class="cline-any cline-yes">135x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
+<span class="cline-any cline-yes">145x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">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";
 &nbsp;
 export type SortOrder = "ascending" | "descending" | "none" | "other";
 &nbsp;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableCellContentsIconRotatorProps = Omit&lt;
+  IconRotatorProps,
+  "children" | "rotated"
+&gt;;
+&nbsp;
 /**
  * @remarks \@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props
  * can be passed to the `ButtonUnstyled`
@@ -295,6 +339,11 @@ export interface TableCellContentProps
    * Boolean if the icon should be rotated.
    */
   rotated?: boolean;
+&nbsp;
+  /**
+   * Any additional props to pass to the `IconRotator`.
+   */
+  iconRotatorProps?: TableCellContentsIconRotatorProps;
 &nbsp;
   /**
    * @remarks \@since 4.0.3
@@ -329,6 +378,7 @@ export const TableCellContent = forwardRef&lt;
     rotated: propRotated,
     hAlign = "left",
     iconAfter,
+    iconRotatorProps,
     ...remaining
   } = props;
   if (!<span class="branch-0 cbranch-no" title="branch not covered" >sortOrder || propIcon === null) {</span>
@@ -339,7 +389,11 @@ export const TableCellContent = forwardRef&lt;
 <span class="cstat-no" title="statement not covered" >  if (sortOrder !== "none") {</span>
 <span class="cstat-no" title="statement not covered" >    const rotated = propRotated ?? sortOrder === "descending";</span>
 <span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >    icon = &lt;IconRotator rotated={rotated}&gt;{propIcon}&lt;/IconRotator&gt;;</span>
+<span class="cstat-no" title="statement not covered" >    icon = (</span>
+<span class="cstat-no" title="statement not covered" >      &lt;IconRotator {...iconRotatorProps} rotated={rotated}&gt;</span>
+<span class="cstat-no" title="statement not covered" >        {propIcon}</span>
+<span class="cstat-no" title="statement not covered" >      &lt;/IconRotator&gt;</span>
+<span class="cstat-no" title="statement not covered" >    );</span>
 <span class="cstat-no" title="statement not covered" >  }</span>
 <span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >  return (</span>
@@ -367,7 +421,7 @@ export const TableCellContent = forwardRef&lt;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/table/TableCheckbox.tsx.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>208/208</span>
+                <span class='fraction'>210/210</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>208/208</span>
+                <span class='fraction'>210/210</span>
             </div>
         
             
@@ -271,7 +271,11 @@
 <a name='L206'></a><a href='#L206'>206</a>
 <a name='L207'></a><a href='#L207'>207</a>
 <a name='L208'></a><a href='#L208'>208</a>
-<a name='L209'></a><a href='#L209'>209</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -479,7 +483,8 @@
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { forwardRef, type TdHTMLAttributes } from "react";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
+import { forwardRef, type TdHTMLAttributes } from "react";
 import { Checkbox } from "../form/Checkbox.js";
 import { type CheckboxProps } from "../form/InputToggle.js";
 import { type PropsWithRef } from "../types.js";
@@ -557,13 +562,13 @@ export interface TableCheckboxProps
 }
 &nbsp;
 /**
- * **Server Component**
- * This might actually be a client component.
+ * **Client Component**
+ * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying
+ * some minimal styles.
  *
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -572,8 +577,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" },
@@ -660,7 +666,7 @@ export const TableCheckbox = forwardRef&lt;
       {...remaining}
       ref={ref}
       header={false}
-      checkbox
+      inputToggle
       onClick={(event) =&gt; {
         event.stopPropagation();
         onClick(event);
@@ -694,7 +700,7 @@ export const TableCheckbox = forwardRef&lt;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/table/TableConfigurationProvider.tsx.html

@@ -303,25 +303,25 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
-<span class="cline-any cline-yes">283x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
+<span class="cline-any cline-yes">310x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -469,7 +469,7 @@ export const { Provider: TableConfigProvider } = context;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/table/TableContainer.tsx.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>52/52</span>
+                <span class='fraction'>45/45</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>52/52</span>
+                <span class='fraction'>45/45</span>
             </div>
         
             
@@ -108,18 +108,7 @@
 <a name='L43'></a><a href='#L43'>43</a>
 <a name='L44'></a><a href='#L44'>44</a>
 <a name='L45'></a><a href='#L45'>45</a>
-<a name='L46'></a><a href='#L46'>46</a>
-<a name='L47'></a><a href='#L47'>47</a>
-<a name='L48'></a><a href='#L48'>48</a>
-<a name='L49'></a><a href='#L49'>49</a>
-<a name='L50'></a><a href='#L50'>50</a>
-<a name='L51'></a><a href='#L51'>51</a>
-<a name='L52'></a><a href='#L52'>52</a>
-<a name='L53'></a><a href='#L53'>53</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<a name='L46'></a><a href='#L46'>46</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -128,9 +117,6 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -168,20 +154,13 @@
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"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";
-&nbsp;
-/**
- * @remarks \@since 6.0.0
- */
-export function tableContainer({ className }: { className?: string }): string {
-  return cnb("rmd-table-container", className);
-}
+import { tableContainer } from "./tableContainerStyles.js";
 &nbsp;
 export type TableContainerProps = HTMLAttributes&lt;HTMLDivElement&gt;;
 &nbsp;
@@ -226,7 +205,7 @@ export const TableContainer = forwardRef&lt;HTMLDivElement, TableContainerProps&
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/table/TableContainerProvider.tsx.html

@@ -178,7 +178,7 @@ export function useTableContainer(): Readonly<TableContainerContext> {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/table/TableFooter.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">98.61% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>142/144</span>
+                <span class='fraction'>151/151</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.44% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>17/18</span>
+                <span class='fraction'>18/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">98.61% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>142/144</span>
+                <span class='fraction'>151/151</span>
             </div>
         
             
@@ -207,7 +207,16 @@
 <a name='L142'></a><a href='#L142'>142</a>
 <a name='L143'></a><a href='#L143'>143</a>
 <a name='L144'></a><a href='#L144'>144</a>
-<a name='L145'></a><a href='#L145'>145</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -232,6 +241,20 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -260,6 +283,8 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
@@ -311,16 +336,6 @@
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
@@ -350,9 +365,7 @@
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   useCallback,
@@ -362,7 +375,6 @@ import {
 } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import {
   TableConfigProvider,
   useTableConfig,
@@ -370,10 +382,26 @@ import {
   type TableConfigContext,
 } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-import { type TableStickySectionProps } from "./types.js";
+import { tableFooter } from "./tableFooterStyles.js";
+import {
+  type IsStickyTableSectionActive,
+  type TableStickySectionProps,
+} from "./types.js";
 &nbsp;
-const styles = bem("rmd-tfoot");
+/**
+ * @remarks \@since 6.0.0
+ */
+export const isTableFooterStickyActive: IsStickyTableSectionActive = (
+  entry,
+  isInTableContainer
+) =&gt; {
+  const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
+  if (isInTableContainer) {
+    return !isIntersecting;
+  }
 &nbsp;
+  return intersectionRatio &lt; 1 &amp;&amp; boundingClientRect.top &gt;= 0;
+};
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
  */
@@ -389,6 +417,9 @@ export interface TableFooterProps
    * @defaultValue `false`
    */
   hoverable?: boolean;
+&nbsp;
+  /** @defaultValue {@link isTableFooterStickyActive} */
+  isStickyActive?: IsStickyTableSectionActive;
 }
 &nbsp;
 /**
@@ -411,8 +442,9 @@ export const TableFooter = forwardRef&lt;
     children,
     sticky = false,
     stickyOptions,
-    isStickyActive,
+    isStickyActive = isTableFooterStickyActive,
     disableStickyStyles = false,
+    stickyActiveClassName,
     ...remaining
   } = props;
 &nbsp;
@@ -454,17 +486,7 @@ export const TableFooter = forwardRef&lt;
     }, [exists, tfootRef]),
     onUpdate: useCallback(
       ([entry]) =&gt; {
-        if (typeof isStickyActive === "function") <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
-<span class="cstat-no" title="statement not covered" >          return isStickyActive(entry);</span>
-<span class="cstat-no" title="statement not covered" >        }</span>
-&nbsp;
-        const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
-        if (exists) {
-          setStickyActive(!isIntersecting);
-          return;
-        }
-&nbsp;
-        setStickyActive(intersectionRatio &lt; 1 &amp;&amp; boundingClientRect.top &gt;= 0);
+        setStickyActive(isStickyActive(entry, exists));
       },
       [exists, isStickyActive]
     ),
@@ -482,13 +504,12 @@ export const TableFooter = forwardRef&lt;
       &lt;tfoot
         {...remaining}
         ref={exists ? tfootRefCallback : targetRef}
-        className={cnb(
-          styles({
-            sticky,
-            "sticky-active": stickyActive,
-          }),
-          className
-        )}
+        className={tableFooter({
+          className,
+          sticky,
+          stickyActive,
+          stickyActiveClassName,
+        })}
       &gt;
         {children}
       &lt;/tfoot&gt;
@@ -502,7 +523,7 @@ export const TableFooter = forwardRef&lt;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>