@dxos/react-ui 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/components/Status/Status.tsx

@@ -4,14 +4,17 @@
 
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
+import { type StatusStyleProps } from '@dxos/ui-theme';
+
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-type StatusProps = ThemedClassName<ComponentPropsWithRef<'span'>> & {
-  indeterminate?: boolean;
-  variant?: 'default' | 'main-bottom';
-  progress?: number;
-};
+type StatusProps = ThemedClassName<
+  ComponentPropsWithRef<'span'> &
+    StatusStyleProps & {
+      progress?: number;
+    }
+>;
 
 const Status = forwardRef<HTMLSpanElement, StatusProps>(
   ({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {

package/src/components/Tag/Tag.stories.tsx

@@ -9,7 +9,6 @@ import { hues } from '@dxos/ui-theme';
 import { type ChromaticPalette, type MessageValence } from '@dxos/ui-types';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { Tag } from './Tag';
 
 const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...hues] as (ChromaticPalette | MessageValence)[];

package/src/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { withLayout, withTheme } from '../../testing';
-
 import { ThemeProvider } from './ThemeProvider';
 
 const meta = {

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -11,7 +11,6 @@ import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
-
 import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 
 export type ThemeContextValue = {
@@ -43,7 +42,8 @@ export const ThemeProvider = ({
   tx = (_path, _styleProps, ..._options) => undefined,
   themeMode = 'dark',
   rootDensity = 'fine',
-  ...rest
+  noCache,
+  platform,
 }: ThemeProviderProps) => {
   useEffect(() => {
     if (document.defaultView) {
@@ -54,9 +54,10 @@ export const ThemeProvider = ({
   }, []);
 
   const safeAreaPadding = useSafeArea();
+  // Destructure all props explicitly so useMemo deps are stable primitives, not a new `rest` object every render.
   const contextValue = useMemo(
-    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, ...rest }),
-    [tx, themeMode, safeAreaPadding, rest],
+    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, noCache, platform }),
+    [tx, themeMode, safeAreaPadding, noCache, platform],
   );
 
   return (

package/src/components/ThemeProvider/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types';
+export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types/translations';
 
 export * from './ThemeProvider';
 export { useTranslation } from './TranslationsProvider';

package/src/components/Toast/Toast.stories.tsx

@@ -7,7 +7,6 @@ import React, { type ReactNode, useState } from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Toast } from './Toast';
 
 type ActionTriggerProps = { altText: string; trigger: ReactNode };

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -9,7 +9,6 @@ import { withTheme } from '../../testing';
 import { Toggle } from '../Button';
 import { Icon } from '../Icon';
 import { Select } from '../Select';
-
 import { Toolbar } from './Toolbar';
 
 type StorybookToolbarProps = {};

package/src/components/Toolbar/Toolbar.tsx

@@ -6,15 +6,15 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import React, { Fragment, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { composableProps, type ToolbarStyleProps } from '@dxos/ui-theme';
+import { composable, composableProps, slottable, type ToolbarStyleProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useThemeContext } from '../../hooks';
-import { translationKey } from '../../translations';
-import { type ThemedClassName } from '../../util';
 import {
   Button,
   ButtonGroup,
@@ -34,16 +34,18 @@ import { Separator, type SeparatorProps } from '../Separator';
 // Root
 //
 
-type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps & ToolbarStyleProps>;
+type ToolbarRootProps = ToolbarPrimitive.ToolbarProps & ToolbarStyleProps;
 
-const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
+const ToolbarRoot = composable<HTMLDivElement, ToolbarRootProps>(
   ({ children, density, disabled, layoutManaged, orientation, ...props }, forwardedRef) => {
-    const { className, dir: _, ...rest } = composableProps(props);
+    const { className, role, ...rest } = composableProps(props);
     const { tx } = useThemeContext();
 
     return (
       <ToolbarPrimitive.Root
         {...rest}
+        // Only pass role when explicitly set; radix provides role="toolbar" by default.
+        {...(role !== 'none' && { role })}
         orientation={orientation}
         data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}
         className={tx('toolbar.root', { density, disabled, layoutManaged }, className)}
@@ -59,9 +61,9 @@ const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
 // Text
 //
 
-type ToolbarTextProps = SlottableProps<HTMLDivElement>;
+type ToolbarTextProps = SlottableProps;
 
-const ToolbarText = forwardRef<HTMLDivElement, ToolbarTextProps>(({ children, asChild, ...props }, forwardedRef) => {
+const ToolbarText = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
@@ -159,7 +161,7 @@ const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupI
 type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
 
 const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupIconItemProps>(
-  ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  ({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
     return (
       <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
         <IconButton
@@ -171,6 +173,7 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
             icon,
             label,
             iconOnly,
+            iconClassNames,
           }}
           ref={forwardedRef}
         />
@@ -189,7 +192,7 @@ const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
   ({ variant = 'gap', ...props }, forwardedRef) => {
     return variant === 'line' ? (
       <ToolbarPrimitive.Separator asChild>
-        <Separator {...props} ref={forwardedRef} />
+        <Separator orientation='vertical' {...props} ref={forwardedRef} />
       </ToolbarPrimitive.Separator>
     ) : (
       <ToolbarPrimitive.Separator className='grow' ref={forwardedRef} />
@@ -209,12 +212,13 @@ const ToolbarDragHandle = forwardRef<HTMLButtonElement, ToolbarDragHandleProps>(
     return (
       <ToolbarIconButton
         data-testid={testId}
+        tabIndex={-1}
         noTooltip
         iconOnly
         icon='ph--dots-six-vertical--regular'
         variant='ghost'
-        label={label ?? t('toolbar drag handle label')}
-        classNames='cursor-pointer'
+        label={label ?? t('toolbar-drag-handle.label')}
+        classNames='dx-focus-ring-none cursor-pointer'
         disabled={!forwardedRef}
         ref={forwardedRef}
       />
@@ -237,7 +241,7 @@ const ToolbarCloseIconButton = forwardRef<HTMLButtonElement, ToolbarCloseIconBut
         iconOnly
         icon='ph--x--regular'
         variant='ghost'
-        label={label ?? t('toolbar close label')}
+        label={label ?? t('toolbar-close.label')}
         classNames='cursor-pointer'
         onClick={onClick}
         ref={forwardedRef}
@@ -271,7 +275,7 @@ const ToolbarMenu = <T extends any | void = void>({ context, items }: ToolbarMen
           iconOnly
           variant='ghost'
           icon='ph--dots-three-vertical--regular'
-          label={t('toolbar menu label')}
+          label={t('toolbar-menu.label')}
         />
       </DropdownMenu.Trigger>
       {(items?.length ?? 0) > 0 && (

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -5,22 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Tooltip } from './Tooltip';
 
-type StoryProps = {
+type DefaultStoryProps = {
   tooltips: { label: string; content: string }[];
   defaultOpen?: boolean;
 };
 
-const DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => {
+const DefaultStory = ({ tooltips, defaultOpen }: DefaultStoryProps) => {
   return (
     <Tooltip.Provider defaultOpen={defaultOpen}>
-      <div role='none' className='w-32'>
+      <div className='w-32'>
         {tooltips.map(({ label, content }, i) => (
           <Tooltip.Trigger asChild key={i} content={content} side='right'>
             <Button classNames='block w-full'>{label}</Button>
@@ -74,10 +73,10 @@ export const DefaultOpen: Story = {
 export const StressTest: Story = {
   args: {
     defaultOpen: true,
-    tooltips: faker.helpers.multiple(
+    tooltips: random.helpers.multiple(
       () => ({
-        label: faker.lorem.words(2),
-        content: faker.lorem.words(5),
+        label: random.lorem.words(2),
+        content: random.lorem.words(5),
       }),
       { count: 32 },
     ),

package/src/components/Tooltip/Tooltip.tsx

@@ -54,7 +54,7 @@ type TooltipContextValue = {
   open: boolean;
   stateAttribute: 'closed' | 'delayed-open' | 'instant-open';
   trigger: TooltipTriggerElement | null;
-  onTriggerChange(trigger: TooltipTriggerElement | null): void;
+  onTriggerChange(trigger: TooltipTriggerElement | null, content?: ReactNode, side?: TooltipSide): void;
   onTriggerEnter(): void;
   onTriggerLeave(): void;
   onOpen(): void;
@@ -111,15 +111,18 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
 
   const popperScope = usePopperScope(__scopeTooltip);
   const [trigger, setTrigger] = useState<HTMLButtonElement | null>(null);
-  const [content, setContent] = useState<string>('');
+  const [content, setContent] = useState<ReactNode>(null);
   const [side, setSide] = useState<TooltipSide | undefined>(undefined);
   const triggerRef = useRef<HTMLButtonElement | null>(trigger);
-  const handleTriggerChange = useCallback((nextTrigger: HTMLButtonElement | null) => {
-    setTrigger(nextTrigger);
-    triggerRef.current = nextTrigger;
-    setContent(nextTrigger?.getAttribute('data-tooltip-content') ?? '');
-    setSide((nextTrigger?.getAttribute('data-tooltip-side') as TooltipSide | null) ?? undefined);
-  }, []);
+  const handleTriggerChange = useCallback(
+    (nextTrigger: HTMLButtonElement | null, nextContent?: ReactNode, nextSide?: TooltipSide) => {
+      setTrigger(nextTrigger);
+      triggerRef.current = nextTrigger;
+      setContent(nextContent ?? null);
+      setSide(nextSide);
+    },
+    [],
+  );
   const contentId = useId();
   const openTimerRef = useRef(0);
   const wasOpenDelayedRef = useRef(false);
@@ -248,9 +251,9 @@ const TRIGGER_NAME = 'TooltipTrigger';
 
 type TooltipTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-type TooltipTriggerProps = PrimitiveButtonProps &
+type TooltipTriggerProps = Omit<PrimitiveButtonProps, 'content'> &
   Pick<TooltipProps, 'delayDuration'> & {
-    content?: string;
+    content?: ReactNode;
     side?: TooltipSide;
     onInteract?: (event: SyntheticEvent) => void;
   };
@@ -283,8 +286,6 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
         // commonly anchors and the anchor `type` attribute signifies MIME type.
         aria-describedby={context.open ? context.contentId : undefined}
         data-state={context.stateAttribute}
-        data-tooltip-content={content}
-        data-tooltip-side={side}
         {...triggerProps}
         ref={composedRefs}
         onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {
@@ -296,7 +297,7 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
             if (event.defaultPrevented) {
               return;
             }
-            context.onTriggerChange(ref.current);
+            context.onTriggerChange(ref.current, content, side);
             context.onTriggerEnter();
             hasPointerMoveOpenedRef.current = true;
           }

package/src/components/index.ts

@@ -10,15 +10,18 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Clipboard';
 export * from './Dialog';
 export * from './ErrorFallback';
+export * from './Focus';
 export * from './Icon';
 export * from './Image';
 export * from './Input';
 export * from './Link';
 export * from './List';
 export * from './Main';
+export * from './MediaPlayer';
 export * from './Menu';
 export * from './Message';
 export * from './Popover';

package/src/exemplars/generics.stories.tsx

@@ -3,13 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactElement, type Ref, forwardRef } from 'react';
+import React from 'react';
 
-import { type SlottableProps } from '@dxos/ui-types';
+import { slottable } from '@dxos/ui-theme';
 
 import { withTheme } from '../testing';
 
-const ComponentInner = forwardRef<HTMLDivElement, ComponentProps>(({ children, ...props }, forwardedRef) => {
+/**
+ * Generic component pattern using the slottable factory.
+ */
+const Component = slottable<HTMLDivElement>(({ children, ...props }, forwardedRef) => {
   return (
     <div {...props} ref={forwardedRef}>
       {children}
@@ -17,21 +20,10 @@ const ComponentInner = forwardRef<HTMLDivElement, ComponentProps>(({ children, .
   );
 });
 
-ComponentInner.displayName = 'Component';
-
-/**
- * Generic component pattern.
- */
-type ComponentProps<P extends HTMLElement = any> = SlottableProps<P>;
-
-const Component = ComponentInner as <P extends HTMLElement>(
-  props: SlottableProps<P> & { ref?: Ref<P> },
-) => ReactElement;
-
 const meta = {
   title: 'ui/react-ui-core/exemplars/generics',
   component: Component,
-  render: (props) => <Component<HTMLDivElement> {...props} />,
+  render: (props) => <Component {...props} />,
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',

package/src/exemplars/slot.stories.tsx

@@ -3,84 +3,64 @@
 //
 
 import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { HTMLAttributes, type PropsWithChildren, forwardRef } from 'react';
+import React, { PropsWithChildren } from 'react';
 
-import { composableProps } from '@dxos/ui-theme';
-import { type ComposableProps, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
+import { composable, composableProps, mx, slottable } from '@dxos/ui-theme';
 
 import { withTheme } from '../testing';
-import { Slot } from '@radix-ui/react-slot';
+import { ThemedClassName } from '../util';
 
 /**
- * Composition
- *
+ * Radix-style composition.
  * All Radix primitive parts that render a DOM element accept an asChild prop.
- * When asChild is set to true, Radix will not render a default DOM element, instead cloning the part's child and passing it the props and behavior required to make it functional.
+ * When asChild is set to true, Radix will not render a default DOM element,
+ * instead cloning the part's child and passing it the props and behavior required to make it functional.
  * https://www.radix-ui.com/primitives/docs/guides/composition
  */
 
-const Outer = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
-  ({ children, asChild, ...props }, forwardedRef) => {
+const Outer = slottable<HTMLDivElement, { priority?: number }>(
+  ({ children, asChild, priority, ...props }, forwardedRef) => {
     const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Comp {...composableProps<HTMLDivElement>(props, { role: 'none' })} ref={forwardedRef}>
+      <Comp
+        {...composableProps<HTMLDivElement>(props, { classNames: 'p-2 border border-red-500 rounded' })}
+        ref={forwardedRef}
+      >
         {children}
       </Comp>
     );
   },
 );
 
-const Middle = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
-  ({ children, asChild, ...props }, forwardedRef) => {
-    const Comp = asChild ? Slot : Primitive.div;
-    return (
-      <Comp {...composableProps<HTMLDivElement>(props, { role: 'none' })} ref={forwardedRef}>
-        {children}
-      </Comp>
-    );
-  },
-);
-
-const Leaf = forwardRef<HTMLButtonElement, ComposableProps<HTMLButtonElement>>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <button {...composableProps<HTMLButtonElement>(props, { role: 'none' })} ref={forwardedRef}>
-        {children}
-      </button>
-    );
-  },
-);
-
-const TestSingle = (props: ThemedClassName<{ role?: string }>) => {
+const Middle = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot : Primitive.div;
   return (
-    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
-      <Leaf>Single asChild (non-compliant — see console)</Leaf>
-    </Outer>
+    <Comp
+      {...composableProps<HTMLDivElement>(props, { classNames: 'p-2 border border-red-500 rounded' })}
+      ref={forwardedRef}
+    >
+      {children}
+    </Comp>
   );
-};
+});
 
-const TestNested = (props: ThemedClassName<{ role?: string }>) => {
+const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
   return (
-    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
-      <Middle asChild>
-        <Leaf>Nested asChild</Leaf>
-      </Middle>
-    </Outer>
+    <button
+      {...composableProps<HTMLButtonElement>(props, { classNames: 'p-2 border border-red-500 rounded' })}
+      ref={forwardedRef}
+    >
+      {children}
+    </button>
   );
-};
+});
 
-const TestInner = (props: ThemedClassName<{ role?: string }>) => {
-  return (
-    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
-      <Middle asChild>
-        <Leaf>
-          <div role='none'>Leaf</div>
-        </Leaf>
-      </Middle>
-    </Outer>
-  );
-};
+/** This isn't a valid child for a `slottable` component. */
+const Simple = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => (
+  <div className={mx(classNames)}>{children}</div>
+);
 
 const meta = {
   title: 'ui/react-ui-core/exemplars/slot',
@@ -95,13 +75,41 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Single: Story = {
-  render: () => <TestSingle role='listitem' classNames='border-red-500' />,
+  render: () => (
+    <Outer asChild role='article' classNames='border-green-500' priority={1}>
+      <Leaf>Single asChild (non-compliant — see console)</Leaf>
+    </Outer>
+  ),
 };
 
 export const Nested: Story = {
-  render: () => <TestNested role='listitem' classNames='border-green-500' />,
+  render: () => (
+    <Outer asChild role='article' classNames='border-blue-500'>
+      <Middle asChild>
+        <Leaf>Nested asChild</Leaf>
+      </Middle>
+    </Outer>
+  ),
 };
 
 export const Inner: Story = {
-  render: () => <TestInner role='listitem' classNames='border-blue-500' />,
+  render: () => (
+    <Outer asChild role='article' classNames='border-orange-500'>
+      <Middle asChild>
+        <Leaf>
+          <div>Leaf</div>
+        </Leaf>
+      </Middle>
+    </Outer>
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <Outer asChild role='none' classNames='p-2 border border-green-500 rounded'>
+      <Middle asChild>
+        <Simple>Simple</Simple>
+      </Middle>
+    </Outer>
+  ),
 };

package/src/exemplars/tabster.stories.tsx

@@ -43,7 +43,7 @@ const Column = forwardRef<HTMLDivElement, { items: string[] }>(({ items }, ref)
   const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
 
   return (
-    <ScrollArea.Root tabIndex={0} orientation='vertical' classNames={mx('w-[25rem]', border)}>
+    <ScrollArea.Root orientation='vertical' classNames={mx('w-[25rem]', border)}>
       <ScrollArea.Viewport {...tabsterAttrs} classNames='p-4 gap-4' ref={ref}>
         {items.map((item) => (
           <Item key={item} value={item} />

package/src/exemplars/virtualizer.stories.tsx

@@ -6,11 +6,11 @@ import { type Meta } from '@storybook/react-vite';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-faker.seed(999);
+random.seed(999);
 
 type TestItem = {
   name: string;
@@ -37,7 +37,7 @@ export const Default = {
     const items = useMemo<TestItem[]>(
       () =>
         Array.from({ length: NUM_ITEMS }, () => ({
-          name: faker.lorem.paragraph(),
+          name: random.lorem.paragraph(),
         })),
       [],
     );
@@ -63,10 +63,9 @@ export const Default = {
           <ScrollToolbar items={items} index={index} setIndex={setIndex} />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <ScrollArea.Root orientation='vertical' margin>
+          <ScrollArea.Root orientation='vertical' centered>
             <ScrollArea.Viewport classNames='p-2' ref={setViewport}>
               <div
-                role='none'
                 style={{
                   position: 'relative',
                   height: virtualizer.getTotalSize(),

package/src/hooks/useDensityContext.ts

@@ -8,7 +8,7 @@ import { type Density } from '@dxos/ui-types';
 
 import { DensityContext } from '../components';
 
-export const useDensityContext = (propsDensity?: Density) => {
+export const useDensityContext = (densityProp?: Density): Density | undefined => {
   const { density } = useContext(DensityContext);
-  return propsDensity ?? density;
+  return densityProp ?? density;
 };

package/src/playground/Custom.stories.tsx

@@ -20,15 +20,14 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--atom--regular' size={7} density='coarse' />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='coarse' />
           </div>
           <div className='flex justify-center'>
             <IconButton
               {...args}
               label='Test'
-              icon='ph--atom--regular'
+              icon='ph--circle--regular'
               iconOnly
-              size={6}
               density='coarse'
               classNames='px-1.5'
             />
@@ -43,13 +42,13 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--atom--regular' density='fine' classNames='px-2' />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='fine' classNames='px-2' />
           </div>
           <div className='flex justify-center'>
             <IconButton
               {...args}
               label='Test'
-              icon='ph--atom--regular'
+              icon='ph--circle--regular'
               iconOnly
               density='fine'
               classNames='py-1 px-1.5'
@@ -68,9 +67,8 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
             <IconButton
               {...args}
               label='Test'
-              icon='ph--atom--regular'
+              icon='ph--circle--regular'
               density='fine'
-              size={4}
               classNames={'!h-[24px] !text-[14px] p-1 min-h-0 gap-0.5'}
             />
           </div>
@@ -78,10 +76,9 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
             <IconButton
               {...args}
               label='Test'
-              icon='ph--atom--regular'
+              icon='ph--circle--regular'
               iconOnly
               density='fine'
-              size={4}
               classNames={'!h-[24px] !text-[14px] p-1 min-h-0'}
             />
           </div>