@dxos/react-ui 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.5ad4a44",
+  "version": "0.8.4-main.66e292d",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -56,7 +56,7 @@
     "@radix-ui/react-portal": "1.1.4",
     "@radix-ui/react-presence": "1.1.2",
     "@radix-ui/react-primitive": "2.0.2",
-    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-separator": "1.1.2",
     "@radix-ui/react-slot": "1.1.2",
@@ -74,32 +74,35 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.5ad4a44",
-    "@dxos/lit-ui": "0.8.4-main.5ad4a44",
-    "@dxos/log": "0.8.4-main.5ad4a44",
-    "@dxos/react-hooks": "0.8.4-main.5ad4a44",
-    "@dxos/react-input": "0.8.4-main.5ad4a44",
-    "@dxos/react-list": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-types": "0.8.4-main.5ad4a44",
-    "@dxos/util": "0.8.4-main.5ad4a44"
+    "@dxos/async": "0.8.4-main.66e292d",
+    "@dxos/invariant": "0.8.4-main.66e292d",
+    "@dxos/debug": "0.8.4-main.66e292d",
+    "@dxos/lit-ui": "0.8.4-main.66e292d",
+    "@dxos/react-hooks": "0.8.4-main.66e292d",
+    "@dxos/react-input": "0.8.4-main.66e292d",
+    "@dxos/log": "0.8.4-main.66e292d",
+    "@dxos/react-list": "0.8.4-main.66e292d",
+    "@dxos/react-ui-types": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.5ad4a44",
-    "@dxos/util": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44"
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44"
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 

package/src/components/{Buttons → Button}/Button.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { withSurfaceVariantsLayout } from '../../testing';
+import { withLayoutVariants } from '../../testing';
 import { Icon } from '../Icon';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
@@ -36,7 +36,7 @@ const meta = {
   title: 'ui/react-ui-core/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme, withSurfaceVariantsLayout()],
+  decorators: [withTheme, withLayoutVariants()],
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/components/{Buttons → Button}/IconButton.tsx

@@ -18,15 +18,23 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     noTooltip?: boolean;
     caretDown?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
-    tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
   };
 
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
+  props.iconOnly ? (
+    <IconOnlyButton {...props} ref={forwardedRef} />
+  ) : (
+    <LabelledIconButton {...props} ref={forwardedRef} />
+  ),
+);
+
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
+
     return (
       <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
@@ -35,8 +43,9 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
+// TODO(burdon): Inherit size from container/density.
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  ({ icon, size = 5, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
@@ -48,14 +57,6 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
-  props.iconOnly ? (
-    <IconOnlyButton {...props} ref={forwardedRef} />
-  ) : (
-    <LabelledIconButton {...props} ref={forwardedRef} />
-  ),
-);
-
 export { IconButton };
 
 export type { IconButtonProps };

package/src/components/{Buttons → Button}/Toggle.stories.tsx

@@ -8,11 +8,9 @@ import React from 'react';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
-import { Toggle } from './Toggle';
+import { Toggle, type ToggleProps } from './Toggle';
 
-type StorybookToggleProps = {};
-
-const DefaultStory = (props: StorybookToggleProps) => {
+const DefaultStory = (props: ToggleProps) => {
   return (
     <Toggle {...props}>
       <Icon icon='ph--text-b--regular' />
@@ -25,6 +23,9 @@ const meta = {
   component: Toggle,
   render: DefaultStory,
   decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
 } satisfies Meta<typeof Toggle>;
 
 export default meta;

package/src/components/Clipboard/CopyButton.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { Button, type ButtonProps, IconButton } from '../Buttons';
+import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';

package/src/components/{Dialogs → Dialog}/AlertDialog.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 import { Toolbar } from '../Toolbar';
 
 import { AlertDialog } from './AlertDialog';

package/src/components/{Dialogs → Dialog}/Dialog.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Dialog } from './Dialog';
 

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type FC, type ReactElement, type SVGProps, forwardRef } from 'react';
+
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { withTheme } from '../../testing';
+
+import { Icon } from './Icon';
+
+/**
+ * Create icon from serializable data.
+ * https://github.com/phosphor-icons/react#custom-icons
+ * https://github.com/phosphor-icons/core/tree/main/assets
+ */
+const createIcon = ({
+  name,
+  weights,
+}: {
+  name: string;
+  weights: Record<string, SVGProps<SVGPathElement>[]>;
+}): FC<IconProps> => {
+  const CustomIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+    <IconBase
+      ref={ref}
+      {...props}
+      weights={
+        new Map<IconWeight, ReactElement>(
+          Object.entries(weights).map(
+            ([key, paths]) =>
+              [
+                key,
+                <>
+                  {paths.map((props, i) => (
+                    <path key={`${key}-${i}`} {...props} />
+                  ))}
+                </>,
+              ] as [IconWeight, ReactElement],
+          ),
+        )
+      }
+    />
+  ));
+
+  CustomIcon.displayName = name;
+  return CustomIcon;
+};
+
+const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
+  return (
+    <div className='grid grid-cols-2 gap-8'>
+      <CustomIcon weight={'regular'} className={mx(getSize(16))} />
+      <Icon icon='ph--github-logo--regular' classNames={mx(getSize(16))} />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/Icon',
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    CustomIcon: createIcon({
+      name: 'GithubLogo',
+      weights: {
+        // https://github.com/phosphor-icons/core/tree/main/assets
+        // <path d="M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        // <path d="M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        // <path d="M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        regular: [
+          {
+            d: 'M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+          {
+            d: 'M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+          {
+            d: 'M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+        ],
+      },
+    }),
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -16,7 +16,7 @@ export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.s
 };
 
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const href = useIconHref(icon);
     return (

package/src/components/{Lists → List}/List.stories.tsx

@@ -229,7 +229,7 @@ export const SelectableListbox: Story = {
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='flex pis-1 pie-1 items-center grow truncate'>{text}</ListItem.Heading>
+            <ListItem.Heading classNames='flex pli-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>

package/src/components/{Lists → List}/ListDropIndicator.tsx

@@ -18,7 +18,7 @@ const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['classN
   horizontal:
     'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
   vertical:
-    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
+    'is-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {

package/src/components/Main/Main.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Main, useSidebars } from './Main';
 

package/src/components/Main/Main.tsx

@@ -31,22 +31,12 @@ import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider'
 
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 
+const MAIN_NAME = 'Main';
 const MAIN_ROOT_NAME = 'MainRoot';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
 const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
-const MAIN_NAME = 'Main';
 const GENERIC_CONSUMER_NAME = 'GenericConsumer';
 
-type SidebarState = 'expanded' | 'collapsed' | 'closed';
-
-type MainContextValue = {
-  resizing: boolean;
-  navigationSidebarState: SidebarState;
-  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-  complementarySidebarState: SidebarState;
-  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-};
-
 const landmarkAttr = 'data-main-landmark';
 
 /**
@@ -72,8 +62,8 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
     [propsOnKeyDown],
   );
 
-  // TODO(thure): This was disconnected once before in #8818, if this should change again to support the browser
-  //  extension, please ensure the change doesn’t break web, desktop and mobile.
+  // TODO(thure): This was disconnected once before in #8818;
+  //  if this should change again to support the browser extension, please ensure the change doesn’t break web, desktop and mobile.
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
 
   return {
@@ -84,6 +74,16 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
   };
 };
 
+type SidebarState = 'expanded' | 'collapsed' | 'closed';
+
+type MainContextValue = {
+  resizing: boolean;
+  navigationSidebarState: SidebarState;
+  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+  complementarySidebarState: SidebarState;
+  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+};
+
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: 'closed',

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { DropdownMenu } from './DropdownMenu';
 

package/src/components/Menus/DropdownMenu.tsx

@@ -25,6 +25,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from 'react';
 
@@ -42,7 +43,7 @@ const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
 type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
 const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
-const useMenuScope = createMenuScope();
+const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
@@ -234,19 +235,35 @@ interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionBoundary={computedCollisionBoundary}
         collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
@@ -621,7 +638,9 @@ export const DropdownMenu = {
   SubContent: DropdownMenuSubContent,
 };
 
-const useDropdownMenuMenuScope = useMenuScope;
+type DropdownMenuScope = Scope;
+
+const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
 
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 

package/src/components/Popover/Popover.stories.tsx

@@ -8,7 +8,7 @@ import React, { type PropsWithChildren, type ReactNode, useRef, useState } from
 import { faker } from '@dxos/random';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Popover } from './Popover';
 

package/src/components/Popover/Popover.tsx

@@ -31,6 +31,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -396,6 +397,7 @@ type PopoverContentImplElement = ElementRef<typeof PopperPrimitive.Content>;
 type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
 type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
 type PopperContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Content>>;
+
 interface PopoverContentImplProps
   extends Omit<PopperContentProps, 'onPlaced'>,
     Omit<DismissableLayerProps, 'onDismiss'> {
@@ -431,6 +433,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onFocusOutside,
       onInteractOutside,
       collisionPadding = 8,
+      collisionBoundary,
       classNames,
       ...contentProps
     } = props;
@@ -440,10 +443,23 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     const elevation = useElevationContext();
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
 
-    // Make sure the whole tree has focus guards as our `Popover` may be
-    // the last element in the DOM (because of the `Portal`)
+    // Make sure the whole tree has focus guards as our `Popover` may be the last element in the DOM (because of the `Portal`)
     useFocusGuards();
 
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <FocusScope
         asChild
@@ -468,11 +484,12 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             {...popperScope}
             {...contentProps}
             collisionPadding={safeCollisionPadding}
+            collisionBoundary={computedCollisionBoundary}
             className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
               ...contentProps.style,
-              // re-namespace exposed content custom properties
+              // Re-namespace exposed content custom properties.
               ...{
                 '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
                 '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -34,7 +34,7 @@ const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Scroll area',
+  title: 'ui/react-ui-core/ScrollArea',
   component: ScrollArea as any,
   render: DefaultStory,
   decorators: [withTheme],

package/src/components/ScrollContainer/ScrollContainer.stories.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { faker } from '@dxos/random';
+
+import { withLayout, withTheme } from '../../testing';
+import { Button } from '../Button';
+import { Toolbar } from '../Toolbar';
+
+import { ScrollContainer, type ScrollContainerRootProps, type ScrollController } from './ScrollContainer';
+
+const DefaultStory = (props: ScrollContainerRootProps) => {
+  const [lines, setLines] = useState<string[]>([]);
+  const [running, setRunning] = useState(true);
+  const scroller = useRef<ScrollController>(null);
+  useEffect(() => {
+    if (!running) {
+      return;
+    }
+
+    const i = setInterval(() => {
+      setLines((lines) => [...lines, faker.lorem.paragraph()]);
+    }, 500);
+
+    return () => clearInterval(i);
+  }, [running]);
+
+  return (
+    <div className='flex flex-col bs-full overflow-hidden'>
+      <Toolbar.Root>
+        <Button onClick={() => setRunning((running) => !running)}>{running ? 'Stop' : 'Start'}</Button>
+        <Button onClick={() => scroller.current?.scrollToBottom()}>Scroll to bottom</Button>
+        <div className='flex-1' />
+        <div>{lines.length}</div>
+      </Toolbar.Root>
+      <ScrollContainer.Root {...props} ref={scroller}>
+        <ScrollContainer.Viewport>
+          {lines.map((line, index) => (
+            <div key={index} className='p-2'>
+              {line}
+            </div>
+          ))}
+        </ScrollContainer.Viewport>
+      </ScrollContainer.Root>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/ScrollContainer',
+  component: ScrollContainer.Root,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-[30rem]' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    pin: true,
+    fade: true,
+  },
+};