@tcn/ui 0.8.1 → 0.10.0

package/src/stacks/box/box.tsx

@@ -1,16 +1,16 @@
-import { useForkRef } from '../../utils/index.js';
+import { clsx } from 'clsx';
 import React, { CSSProperties, HTMLAttributes, useRef } from 'react';
-import { LeftResizeHandle } from './left_resize_handle.js';
-import { RightResizeHandle } from './right_resize_handle.js';
+import { useForkRef } from '../../utils/index.js';
+import styles from '../stack.module.css';
+import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
+import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
 import { BottomResizeHandle } from './bottom_resize_handle.js';
 import { EndResizeHandle } from './end_resize_handle.js';
+import { HandleProps } from './handle_props.js';
+import { LeftResizeHandle } from './left_resize_handle.js';
+import { RightResizeHandle } from './right_resize_handle.js';
 import { StartResizeHandle } from './start_resize_handle.js';
 import { TopResizeHandle } from './top_resize_handle.js';
-import { clsx } from 'clsx';
-import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
-import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
-import styles from '../stack.module.css';
-import { HandleProps } from './handle_props.js';
 
 export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
   as?: string;
@@ -45,16 +45,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (
-    width: number
-    // origin: 'left' | 'right'
-  ) => void;
-  onHeightResize?: (
-    height: number
-    // origin: 'top' | 'bottom'
-  ) => void;
-  onWidthResizeEnd?: (width: number) => void;
-  onHeightResizeEnd?: (width: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 
 export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(

package/src/stacks/box/end_resize_handle.tsx

@@ -1,16 +1,15 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './end_resize_handle.module.css';
+import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
-import { clsx } from 'clsx';
-import type { HandleProps } from './handle_props.js';
 
 export interface EndResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
-
 export function EndResizeHandle({
   targetRef,
   handleProps,
@@ -20,7 +19,8 @@ export function EndResizeHandle({
   const resizeHandler = createHorizontalResizeHandler(
     targetRef,
     onWidthResize,
-    onWidthResizeEnd
+    onWidthResizeEnd,
+    'right'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/left_resize_handle.tsx

@@ -1,14 +1,14 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { HandleProps } from './handle_props.js';
 import styles from './left_resize_handle.module.css';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
-import { clsx } from 'clsx';
 
 export interface LeftResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function LeftResizeHandle({
   targetRef,
@@ -20,6 +20,7 @@ export function LeftResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
+    'left',
     true,
     true
   );

package/src/stacks/box/resize_handlers.ts

@@ -9,8 +9,9 @@ function createVeil() {
 
 export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onWidthResize?: (value: number) => void,
-  onWidthResizeEnd?: (value: number) => void,
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void,
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void,
+  origin: 'left' | 'right' = 'right',
   invert = false,
   disableDirection = false
 ) {
@@ -40,7 +41,7 @@ export function createHorizontalResizeHandler(
       width = newWidth;
 
       box.style.width = `${newWidth}px`;
-      onWidthResize && onWidthResize(newWidth);
+      onWidthResize?.(newWidth, origin, deltaX);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -60,7 +61,7 @@ export function createHorizontalResizeHandler(
       event.stopPropagation();
       event.preventDefault();
 
-      onWidthResizeEnd && onWidthResizeEnd(width);
+      onWidthResizeEnd?.(width, origin);
     };
 
     document.body.addEventListener('mousemove', drag);
@@ -73,9 +74,10 @@ export function createHorizontalResizeHandler(
 
 export function createVerticalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onHeightResize?: (value: number) => void,
-  onHeightResizeEnd?: (value: number) => void,
-  invert = false
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void,
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,
+  invert = false,
+  origin: 'top' | 'bottom' = 'bottom'
 ) {
   const direction = invert ? -1 : 1;
   return function startVerticalResize(event: React.MouseEvent) {
@@ -97,7 +99,7 @@ export function createVerticalResizeHandler(
       const newHeight = startRect.height + deltaY;
       height = newHeight;
       box.style.height = `${newHeight}px`;
-      onHeightResize && onHeightResize(newHeight);
+      onHeightResize?.(newHeight, origin, deltaY);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -117,7 +119,7 @@ export function createVerticalResizeHandler(
       event.stopPropagation();
       event.preventDefault();
 
-      onHeightResizeEnd && onHeightResizeEnd(height);
+      onHeightResizeEnd?.(height, origin);
     };
 
     document.body.addEventListener('mousemove', drag);

package/src/stacks/box/right_resize_handle.tsx

@@ -1,14 +1,14 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './right_resize_handle.module.css';
-import { clsx } from 'clsx';
 
 export interface RightResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function RightResizeHandle({
   targetRef,
@@ -20,6 +20,7 @@ export function RightResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
+    'right',
     false,
     true
   );

package/src/stacks/box/start_resize_handle.tsx

@@ -7,8 +7,8 @@ import { clsx } from 'clsx';
 export interface StartResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function StartResizeHandle({
   targetRef,
@@ -20,7 +20,7 @@ export function StartResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    true
+    'left'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/top_resize_handle.tsx

@@ -7,8 +7,8 @@ import { clsx } from 'clsx';
 export interface TopResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onHeightResize?: (value: number) => void;
-  onHeightResizeEnd?: (value: number) => void;
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 export function TopResizeHandle({
   targetRef,
@@ -20,7 +20,8 @@ export function TopResizeHandle({
     targetRef,
     onHeightResize,
     onHeightResizeEnd,
-    true
+    true,
+    'top'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/collapsible_box.stories.tsx

@@ -1,13 +1,13 @@
+import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
+import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 import React from 'react';
 import { Button, SlimButton } from '../actions/index.js';
-import { HCollapsibleBox as HComponent } from './h_collapsible_box.js';
-import { VCollapsibleBox as VComponent } from './v_collapsible_box.js';
 import { Title } from '../typography/index.js';
-import { Spacer } from './spacer.js';
+import { HCollapsibleBox } from './h_collapsible_box.js';
 import { HStack } from './h_stack.js';
+import { Spacer } from './spacer.js';
+import { VCollapsibleBox } from './v_collapsible_box.js';
 import { VStack } from './v_stack.js';
-import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
-import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 
 export default {
   title: 'Stacks/Collapsible Box',
@@ -49,13 +49,13 @@ export function CollapsibleBox() {
           <Button onClick={() => setVHopen(c => !c)}>toggle vertical collapse</Button>
           <Button onClick={() => setHOpen(c => !c)}>toggle horizontal collapse</Button>
         </VStack>
-        <VComponent open={vOpen} enableResizeOnTop>
+        <VCollapsibleBox open={vOpen} enableResizeOnTop>
           <MyPanel />
-        </VComponent>
+        </VCollapsibleBox>
       </VStack>
-      <HComponent open={hOpen} enableResizeOnStart>
+      <HCollapsibleBox open={hOpen} enableResizeOnStart>
         <MyPanel />
-      </HComponent>
+      </HCollapsibleBox>
     </HStack>
   );
 }
@@ -67,9 +67,9 @@ export function VerticalCollapsibleBox() {
       <HStack height="flex" hAlign="end" gap="16px">
         <Button onClick={() => setOpen(c => !c)}>toggle collapse</Button>
       </HStack>
-      <VComponent open={open} enableResizeOnTop defaultHeight="300px">
+      <VCollapsibleBox open={open} enableResizeOnTop defaultHeight="300px">
         <MyPanel />
-      </VComponent>
+      </VCollapsibleBox>
     </VStack>
   );
 }

package/src/stacks/h_collapsible_box.tsx

@@ -1,6 +1,6 @@
+import { clsx } from 'clsx';
 import React, { useLayoutEffect } from 'react';
 import { useForkRef } from '../utils/index.js';
-import { clsx } from 'clsx';
 import { Box, BoxProps } from './box/box.js';
 import styles from './collapsible_box.module.css';
 import { useIsCollapsed } from './utils/use_is_collapsed.js';
@@ -32,13 +32,13 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="horizontal"
       data-is-resizing={resizing}
-      onWidthResize={width => {
+      onWidthResize={(width, origin, delta) => {
         setIsResizing(true);
-        props.onWidthResize?.(width);
+        props.onWidthResize?.(width, origin, delta);
       }}
-      onWidthResizeEnd={width => {
+      onWidthResizeEnd={(width, origin) => {
         setIsResizing(false);
-        props.onWidthResizeEnd?.(width);
+        props.onWidthResizeEnd?.(width, origin);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);
       }}
       className={clsx(

package/src/stacks/v_collapsible_box.tsx

@@ -32,14 +32,14 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="vertical"
       data-is-resizing={resizing}
-      onHeightResize={height => {
+      onHeightResize={(height, origin, delta) => {
         setIsResizing(true);
-        props.onHeightResize?.(height);
+        props.onHeightResize?.(height, origin, delta);
       }}
-      onHeightResizeEnd={height => {
+      onHeightResizeEnd={(height, origin) => {
         setIsResizing(false);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
-        props.onHeightResizeEnd?.(height);
+        props.onHeightResizeEnd?.(height, origin);
       }}
       className={clsx(
         props.className,

package/src/surfaces/index.ts

@@ -3,8 +3,7 @@ export * from './card/card.js';
 export * from './confirm/confirm.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
-export * from './panel/h_panel.js';
-export * from './panel/v_panel.js';
+export * from './panel/panel.js';
 export * from './popover/popover.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';

package/src/surfaces/panel/__stories__/panel.stories.tsx

@@ -6,7 +6,7 @@ import { Heading, Section, VBody } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
 import { Box, HStack, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
-import { VPanel } from '../v_panel.js';
+import { Panel } from '../panel.js';
 // Styles
 import styles from './panel_stories.module.css';
 import { TTable, TBody, TD, TH, THead, TR } from '../../../layouts/table/table.js';
@@ -23,7 +23,7 @@ import { BodyText } from '../../../typography/index.js';
 
 export default {
   title: 'Surfaces/Panel',
-  component: VPanel,
+  component: Panel,
   tags: ['autodocs'],
 };
 
@@ -71,8 +71,8 @@ const UtilGroupExample = () => {
 
 export const Default = () => {
   return (
-    <div className={styles['stories-container']}>
-      <VPanel maxHeight="600px">
+    <Box className={styles['stories-container']}>
+      <Panel maxHeight="600px">
         <Header>
           <Title emphasis="strong">Panel Primary Header</Title>
           <Spacer />
@@ -109,16 +109,16 @@ export const Default = () => {
           <Button hierarchy="secondary">Secondary</Button>
           <Button hierarchy="primary">Primary</Button>
         </Footer>
-      </VPanel>
-    </div>
+      </Panel>
+    </Box>
   );
 };
 
 export const WithTable = () => {
   return (
-    <div className={styles['stories-container']}>
+    <Box className={styles['stories-container']}>
       <HStack gap="16px" maxHeight="600px" height="100%" maxWidth="1440px">
-        <VPanel minWidth="300px">
+        <Panel minWidth="300px">
           <Header>
             <Title emphasis="strong">Table Title</Title>
             <Spacer />
@@ -190,8 +190,8 @@ export const WithTable = () => {
               </Button>
             </HStack>
           </Footer>
-        </VPanel>
-        <VPanel maxHeight="600px" width="300px" minWidth="300px">
+        </Panel>
+        <Panel maxHeight="600px" width="300px" minWidth="300px">
           <Header>
             <Title emphasis="strong">John Doe</Title>
             <Spacer />
@@ -210,8 +210,8 @@ export const WithTable = () => {
               <BodyText>Email: john.doe@example.com</BodyText>
             </Section>
           </VBody>
-        </VPanel>
+        </Panel>
       </HStack>
-    </div>
+    </Box>
   );
 };

package/src/surfaces/panel/__stories__/panel_stories.module.css

@@ -19,8 +19,8 @@
 
 .stories-container {
   width: 100%;
-  height: 100%;
-  padding: 16px;
+  height: 100vh;
+  min-height: 400px;
   background-color: #ccc;
-  overflow: auto;
+  padding: 16px;
 }

package/src/surfaces/panel/panel.module.css

@@ -1,10 +1,5 @@
 @layer tcn-system {
-  :where(.panel-stack) {
-    width: 100%;
+  .panel {
     height: 100%;
-    overflow: auto;
   }
-  /* .page-stack > :global(.stack) {
-  gap: var(--gap);
-} */
 }

package/src/surfaces/panel/panel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
+
+import styles from './panel.module.css';
+
+export type PanelProps = ScaffoldProps;
+
+export const Panel = React.forwardRef<HTMLElement, PanelProps>(function Panel(
+  { children, className, ...props }: PanelProps,
+  ref
+) {
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx(styles['panel'], 'tcn-surface', 'tcn-panel', className)}
+      {...props}
+    >
+      {children}
+    </Scaffold>
+  );
+});

package/src/themes/theme.tsx

@@ -10,9 +10,10 @@ import layers from '../css/layers.css?raw';
 export interface ThemeProps extends BoxProps {
   styleSheets: CSSStyleSheet[];
   children: React.ReactNode;
+  className?: string;
 }
 
-export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
+export function Theme({ styleSheets, children, className, ...boxProps }: ThemeProps) {
   useLayoutEffect(() => {
     document.adoptedStyleSheets = styleSheets;
   }, [styleSheets]);
@@ -33,7 +34,10 @@ export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
   }, []);
 
   return (
-    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>
+    <Box
+      className={clsx('tcn-theme-root', styles['tcn-theme-provider'], className)}
+      {...boxProps}
+    >
       {children}
     </Box>
   );

package/src/themes/themes/ergo/__stories__/material.stories.tsx

@@ -3,10 +3,9 @@ import { VStack } from '../../../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { Divider, Footer, Header, VBody } from '../../../../layouts/index.js';
-import { VPanel } from '../../../../surfaces/index.js';
+import { Panel } from '../../../../surfaces/index.js';
 import { Button } from '../../../../actions/button/button/button.js';
 import { Spacer } from '../../../../stacks/spacer.js';
-import { SlimButton } from '../../../../actions/button/slim_button/slim_button.js';
 import { SB_TonePicker } from './components/tone_picker/sb_tone_picker.js';
 import { formatHSLString, getContrastText, parseHSL } from './utils.js';
 import { SB_MaterialPicker } from './components/material_picker/sb_material_picker.js';
@@ -86,7 +85,7 @@ export const DynamicSurface = (args: {
         <Title>Ergo Theme: Materials and Surfaces</Title>
       </Header>
       <SB_MaterialPicker handleSurfaceClick={handleSurfaceClick} />
-      <VPanel
+      <Panel
         minHeight="200px"
         maxHeight="700px"
         height="100%"
@@ -95,30 +94,30 @@ export const DynamicSurface = (args: {
         <Header>
           Enabled Utilities
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <PlusIcon />
-          </SlimButton>
-          <SlimButton hierarchy="secondary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <PlusIcon />
-          </SlimButton>
+          </Button>
           <Divider vertical length="md" />
-          <SlimButton hierarchy="primary">
+          <Button utility hierarchy="primary">
             <PlusIcon />
-          </SlimButton>
+          </Button>
         </Header>
         <Header>
           Disabled Utilities
           <Spacer />
-          <SlimButton hierarchy="tertiary" disabled>
+          <Button utility hierarchy="tertiary" disabled>
             <PlusIcon />
-          </SlimButton>
-          <SlimButton hierarchy="secondary" disabled>
+          </Button>
+          <Button utility hierarchy="secondary" disabled>
             <PlusIcon />
-          </SlimButton>
+          </Button>
           <Divider vertical length="md" />
-          <SlimButton hierarchy="primary" disabled>
+          <Button utility hierarchy="primary" disabled>
             <PlusIcon />
-          </SlimButton>
+          </Button>
         </Header>
         <VBody>
           <SB_TonePicker />
@@ -143,7 +142,7 @@ export const DynamicSurface = (args: {
           <Button hierarchy="secondary">Secondary</Button>
           <Button hierarchy="primary">Primary</Button>
         </Footer>
-      </VPanel>
+      </Panel>
       <Header></Header>
     </VStack>
   );

package/src/themes/themes/ergo/ergo_theme.css

@@ -579,6 +579,18 @@
     color: var(--on-material);
   }
 
+  /* Divider: use material-line; emphasis variants for strong/faint */
+  .tcn-divider-line,
+  .tcn-divider-line[data-emphasis="normal"] {
+    background: var(--material-line);
+  }
+  .tcn-divider-line[data-emphasis="strong"] {
+    background: color-mix(in srgb, var(--material-line) 80%, black 20%);
+  }
+  .tcn-divider-line[data-emphasis="faint"] {
+    background: color-mix(in srgb, var(--material-line) 80%, white 20%);
+  }
+
   /* ===== SURFACES ===== */
   .tcn-draggable[data-is-draggable="true"] {
     .tcn-drag-handle {
@@ -606,7 +618,22 @@
       border-radius: var(--shape-radius-medium);
     }
   }
+  /* Rail: */
+  .tcn-utility-strip {
+    min-width: var(--bar-md);
+  }
+
+  .tcn-utility-strip,
+  .tcn-side {
+    padding-block: var(--padding-medium);
+    gap: var(--gap-medium);
+  }
 
+  .tcn-rail {
+    :where(.tcn-body) {
+      gap: var(--gap-medium);
+    }
+  }
   /* Scaffold: */
   .tcn-footer,
   .tcn-header,

package/src/typography/body_text/body_text.tsx

@@ -20,22 +20,25 @@ export interface BodyTextOwnProps {
 
 export type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;
 
-export function BodyText({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-  breakWords = false,
-}: BodyTextProps) {
+export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+    breakWords = false,
+  }: BodyTextProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -62,6 +65,7 @@ export function BodyText({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -73,4 +77,4 @@ export function BodyText({
       {children}
     </div>
   );
-}
+});