@dxos/react-ui 0.8.4-main.dedc0f3 → 0.8.4-main.e250131250

package/src/components/Link/Link.tsx

@@ -18,7 +18,7 @@ export type LinkProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.a
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ asChild, variant, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.a;
-    return <Root {...props} className={tx('link.root', 'link', { variant }, classNames)} ref={forwardedRef} />;
+    const Comp = asChild ? Slot : Primitive.a;
+    return <Comp {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
   },
 );

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

@@ -2,23 +2,14 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactNode, useState } from 'react';
+import React, { type ReactNode, useCallback, useState } from 'react';
 
-import {
-  getSize,
-  ghostHover,
-  ghostSelected,
-  ghostSelectedTrackingInterFromNormal,
-  mx,
-  surfaceShadow,
-} from '@dxos/react-ui-theme';
+import { getSize, ghostHover, mx, surfaceShadow } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
@@ -26,10 +17,9 @@ import { Icon } from '../Icon';
 import { List, ListItem, type ListScopedProps } from './List';
 
 const meta = {
-  title: 'ui/react-ui-core/List',
+  title: 'ui/react-ui-core/components/List',
   component: List,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme()],
 } satisfies Meta<typeof List>;
 
 export default meta;
@@ -47,11 +37,11 @@ const UniformListItem = ({ id, text }: { id: string; text: string }) => {
       style={{ transform: CSS.Transform.toString(transform) }}
     >
       <ListItem.Endcap>
-        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
-      <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
+      <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
       <ListItem.Endcap>
-        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -66,16 +56,20 @@ export const UniformSizeDraggable: Story = {
       })),
     );
 
-    const handleDragEnd = (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        setItems((items) => {
-          const oldIndex = items.findIndex((item) => item.id === active.id);
-          const newIndex = items.findIndex((item) => item.id === over?.id);
-          return arrayMove(items, oldIndex, newIndex);
-        });
-      }
-    };
+    const handleDragEnd = useCallback(
+      (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (active.id !== over?.id) {
+          setItems((items) => {
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over?.id);
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+      },
+      [items],
+    );
+
     return (
       <DndContext onDragEnd={handleDragEnd}>
         <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
@@ -109,13 +103,13 @@ const ManySizesDraggableListItem = ({
       style={{ transform: CSS.Translate.toString(transform) }}
     >
       <ListItem.Endcap>
-        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
-      <ListItem.Heading classNames='grow pbs-2' asChild>
+      <ListItem.Heading classNames='grow pt-2' asChild>
         {text}
       </ListItem.Heading>
       <ListItem.Endcap>
-        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -129,9 +123,9 @@ export const ManySizesDraggable: Story = {
         text: (
           <p
             className={mx(
-              index % 3 === 0 ? 'bs-20' : index % 2 === 0 ? 'bs-12' : 'bs-8',
+              index % 3 === 0 ? 'h-20' : index % 2 === 0 ? 'h-12' : 'h-8',
               surfaceShadow({ elevation: 'positioned' }),
-              'mbe-2 p-2 bg-white dark:bg-neutral-800 rounded',
+              'mb-2 p-2 bg-white dark:bg-neutral-800 rounded-sm',
             )}
           >{`List item ${index + 1}`}</p>
         ),
@@ -185,9 +179,9 @@ export const Collapsible: Story = {
           <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
             <div role='none' className='grow flex'>
               {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
-              <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
+              <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>
-                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
               </ListItem.Endcap>
             </div>
             {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}
@@ -198,7 +192,6 @@ export const Collapsible: Story = {
   },
   args: {
     variant: 'unordered',
-    // toggleOpenLabel: 'Open/close storybook list item', // TODO(burdon): ???
   },
 };
 
@@ -229,11 +222,11 @@ export const SelectableListbox: Story = {
             key={id}
             tabIndex={0}
             selected={selectedId === id}
-            classNames={mx('items-center', ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            classNames={mx(ghostHover, 'dx-selected')}
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='grow'>Lorem ipsum dolor sit amet</ListItem.Heading>
+            <ListItem.Heading classNames='flex px-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>

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

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
@@ -23,7 +24,8 @@ import {
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
-import { type Density } from '@dxos/react-ui-types';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { type Density } from '@dxos/ui-types';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -32,15 +34,16 @@ import { Icon } from '../Icon';
 
 import { ListDropIndicator } from './ListDropIndicator';
 
-type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
+type ListProps = ThemedClassName<ListPrimitiveProps & { density?: Density }>;
 
-const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ...props }, forwardedRef) => {
+const List = composable<HTMLOListElement, ListProps>(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
+  const { className, ...rest } = composableProps(props);
 
   return (
     <DensityProvider density={density}>
-      <ListPrimitive {...props} className={tx('list.root', 'list', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...rest} className={tx('list.root', {}, className)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -51,18 +54,18 @@ type ListItemEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
 
 const ListItemEndcap = forwardRef<HTMLDivElement, ListItemEndcapProps>(
   ({ children, classNames, asChild, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
+    const Comp = asChild ? Slot : Primitive.div;
     const density = useDensityContext();
     const { tx } = useThemeContext();
     return (
-      <Root
+      <Comp
         {...(!asChild && { role: 'none' })}
         {...props}
-        className={tx('list.item.endcap', 'list__listItem__endcap', { density }, classNames)}
+        className={tx('list.item.endcap', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -73,13 +76,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return (
-    <div
-      role='none'
-      {...props}
-      className={tx('list.item.openTrigger', 'list__listItem__openTrigger--mock', { density }, classNames)}
-    />
-  );
+  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -91,7 +88,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
     return (
       <ListPrimitiveItemHeading
         {...props}
-        className={tx('list.item.heading', 'list__listItem__heading', { density }, classNames)}
+        className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -110,14 +107,14 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
-        className={tx('list.item.openTrigger', 'list__listItem__openTrigger', { density }, classNames)}
+        className={tx('list.item.openTrigger', { density }, classNames)}
         ref={forwardedRef}
       >
         {children || (
           <Icon
             size={3}
             icon={open ? 'ph--caret-down--bold' : 'ph--caret-right--bold'}
-            classNames={tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {})}
+            classNames={tx('list.item.openTriggerIcon', {})}
           />
         )}
       </ListPrimitiveItemOpenTrigger>
@@ -134,7 +131,7 @@ const ListItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>(
     return (
       <ListPrimitiveItem
         {...props}
-        className={tx('list.item.root', 'list__listItem', { density, collapsible: props.collapsible }, classNames)}
+        className={tx('list.item.root', { density, collapsible: props.collapsible }, classNames)}
         ref={forwardedRef}
       >
         {children}

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

@@ -16,16 +16,16 @@ const edgeToOrientationMap: Record<Edge, Orientation> = {
 
 const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
   horizontal:
-    'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
+    '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]',
+    'w-(--line-thickness) top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-(--line-inset) before:top-(--terminal-inset)',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
-  top: 'top-[--line-offset] before:top-[--offset-terminal]',
-  right: 'right-[--line-offset] before:right-[--offset-terminal]',
-  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',
-  left: 'left-[--line-offset] before:left-[--offset-terminal]',
+  top: 'top-(--line-offset) before:top-(--offset-terminal)',
+  right: 'right-(--line-offset) before:right-(--offset-terminal)',
+  bottom: 'bottom-(--line-offset) before:bottom-(--offset-terminal)',
+  left: 'left-(--line-offset) before:left-(--offset-terminal)',
 };
 
 const strokeSize = 2;
@@ -64,7 +64,7 @@ export const ListDropIndicator = ({
           '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
         } as CSSProperties
       }
-      className={`absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
+      className={`absolute z-10 pointer-events-none bg-accent-surface before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-surface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
     />
   );
 };

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

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -27,7 +25,7 @@ const createKey = (key: string, prefix?: string) => (prefix === undefined ? key
 const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
   const keys = Array.isArray(data) ? Array.from(data.keys()) : Object.keys(data);
   return (
-    <Tree.Root density='fine'>
+    <Tree.Root>
       {keys.map((key) => {
         const id = createKey(String(key), prefix);
         const value = data[key as keyof typeof data];
@@ -37,10 +35,10 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
           <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
             <div role='none' className='grow flex'>
               {valueIsScalar ? <TreeItem.MockOpenTrigger /> : <TreeItem.OpenTrigger />}
-              <TreeItem.Heading classNames='grow pbs-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
+              <TreeItem.Heading classNames='grow pt-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
             </div>
             {!valueIsScalar && (
-              <TreeItem.Body className='pis-2'>
+              <TreeItem.Body className='ps-2'>
                 <Tree.Branch>
                   <StorybookTreeItem data={value} prefix={id} />
                 </Tree.Branch>
@@ -58,11 +56,10 @@ const DefaultStory = ({ data }: StorybookTreeProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Tree',
+  title: 'ui/react-ui-core/components/Tree',
   component: Tree as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -21,14 +21,14 @@ const edgeToOrientationMap: Record<InstructionType, Orientation> = {
 const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
   // TODO(wittjosiah): Stop using left/right here.
   sibling:
-    'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',
-  child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',
+    'h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-surface before:left-(--negative-terminal-size)',
+  child: 'inset-0 border-[length:var(--line-thickness)] before:invisible',
 };
 
 const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
-  'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',
-  'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',
-  'make-child': 'border-accentSurface',
+  'reorder-above': 'top-(--line-offset) before:top-(--offset-terminal)',
+  'reorder-below': 'bottom-(--line-offset) before:bottom-(--offset-terminal)',
+  'make-child': 'border-accent-surface',
   // TODO(wittjosiah): This is not occurring in the current implementation.
   reparent: '',
 };
@@ -64,7 +64,7 @@ export const TreeDropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps)
           '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
         } as CSSProperties
       }
-      className={`absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${instructionStyles[desiredInstruction.type]}`}
+      className={`absolute z-10 pointer-events-none before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-surface before:rounded-full ${orientationStyles[orientation]} ${instructionStyles[desiredInstruction.type]}`}
     ></div>
   );
 };

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

@@ -133,7 +133,7 @@ const DefaultStory = () => {
             {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
           >
             <Treegrid.Cell indent classNames='flex items-center'>
-              {node.icon && <Icon icon={node.icon} classNames='is-[1em] bs-[1em] mlb-1' />}
+              {node.icon && <Icon icon={node.icon} classNames='w-[1em] h-[1em] my-1' />}
               {node.title}
             </Treegrid.Cell>
           </Treegrid.Row>
@@ -144,10 +144,10 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Treegrid',
+  title: 'ui/react-ui-core/components/Treegrid',
   component: Treegrid.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -2,12 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import React, {
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+} from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -39,20 +45,66 @@ type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.
 const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
   ({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical', tabbable: false, circular: true });
+    const Comp = asChild ? Slot : Primitive.div;
+    const { findFirstFocusable } = useFocusFinders();
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLDivElement>) => {
+        switch (event.key) {
+          case 'ArrowDown':
+          case 'ArrowUp': {
+            const direction = event.key === 'ArrowDown' ? 'down' : 'up';
+            const target = event.target as HTMLElement;
+
+            // Find ancestor with data-arrow-keys containing the relevant direction.
+            const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
+
+            // If no ancestor with data-arrow-keys found, proceed with row navigation.
+            if (!ancestorWithArrowKeys) {
+              // Find the closest row
+              const currentRow = target.closest('[role="row"]');
+              if (currentRow) {
+                // Find the treegrid container.
+                const treegrid = currentRow.closest('[role="treegrid"]');
+                if (treegrid) {
+                  // Get all rows in the treegrid.
+                  const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
+                  const currentIndex = rows.indexOf(currentRow as Element);
+
+                  // Find next or previous row.
+                  const nextIndex = direction === 'down' ? currentIndex + 1 : currentIndex - 1;
+                  const targetRow = rows[nextIndex];
+
+                  if (targetRow) {
+                    // Focus the first focusable element in the target row.
+                    const firstFocusable = findFirstFocusable(targetRow as HTMLElement);
+                    if (firstFocusable) {
+                      event.preventDefault();
+                      firstFocusable.focus();
+                    }
+                  }
+                }
+              }
+            }
+            break;
+          }
+        }
+        props.onKeyDown?.(event);
+      },
+      [findFirstFocusable],
+    );
 
     return (
-      <Root
+      <Comp
         role='treegrid'
-        {...arrowNavigationAttrs}
         {...props}
-        className={tx('treegrid.root', 'treegrid', {}, classNames)}
+        className={tx('treegrid.root', {}, classNames)}
         style={{ ...style, gridTemplateColumns }}
+        onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -83,7 +135,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     const pathParts = id.split(PATH_SEPARATOR);
     const level = pathParts.length - 1;
     const [open, onOpenChange] = useControllableState({
@@ -91,31 +143,20 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
       onChange: propsOnOpenChange,
       defaultProp: defaultOpen,
     });
-    const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
-    const arrowGroupAttrs = useArrowNavigationGroup({
-      axis: 'horizontal',
-      tabbable: false,
-      circular: false,
-      memorizeCurrent: false,
-    });
 
     return (
       <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
-        <Root
+        <Comp
           role='row'
           aria-level={level}
-          className={tx('treegrid.row', 'treegrid__row', { level }, classNames)}
+          className={tx('treegrid.row', { level }, classNames)}
           {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
-          tabIndex={0}
-          {...focusableGroupAttrs}
           {...props}
           id={id}
           ref={forwardedRef}
         >
-          <div role='none' className='contents' {...arrowGroupAttrs}>
-            {children}
-          </div>
-        </Root>
+          {children}
+        </Comp>
       </TreegridRowProvider>
     );
   },
@@ -127,12 +168,7 @@ const TreegridCell = forwardRef<HTMLDivElement, TreegridCellProps>(
   ({ classNames, children, indent, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <div
-        role='gridcell'
-        className={tx('treegrid.cell', 'treegrid__cell', { indent }, classNames)}
-        {...props}
-        ref={forwardedRef}
-      >
+      <div role='gridcell' className={tx('treegrid.cell', { indent }, classNames)} {...props} ref={forwardedRef}>
         {children}
       </div>
     );

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

@@ -2,58 +2,76 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Toolbar } from '../Toolbar';
 
 import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};
 
-const NavigationSidebarToggle = () => {
+const NavigationSidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-left--regular' : 'ph--caret-right--regular'}
+      iconOnly
+      label='Toggle navigation sidebar'
+      onClick={toggleNavigationSidebar}
+    />
+  );
 };
 
-const ComplementarySidebarToggle = () => {
+const ComplementarySidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-right--regular' : 'ph--caret-left--regular'}
+      iconOnly
+      label='Toggle complementary sidebar'
+      onClick={toggleComplementarySidebar}
+    />
+  );
 };
 
 const DefaultStory = (_args: StoryMainArgs) => {
   return (
-    <Main.Root>
+    <Main.Root defaultComplementarySidebarState='closed' defaultNavigationSidebarState='closed'>
       <Main.Overlay />
-      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
-        <p>Navigation sidebar content, hi!</p>
-        <NavigationSidebarToggle />
+      <Main.NavigationSidebar label='Navigation'>
+        <Toolbar.Root>
+          <h1>Navigation</h1>
+          <Toolbar.Separator />
+          <NavigationSidebarToggle close />
+        </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content>
-        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
-          <ComplementarySidebarToggle />
-          <p>Main content, hello!</p>
+      <Main.Content classNames='w-full'>
+        <Toolbar.Root>
           <NavigationSidebarToggle />
-        </div>
+          <div className='flex items-center grow justify-center'>Main</div>
+          <ComplementarySidebarToggle />
+        </Toolbar.Root>
       </Main.Content>
-      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
-        <p>Complementary sidebar content, hello!</p>
-        <ComplementarySidebarToggle />
+      <Main.ComplementarySidebar label='Complementary'>
+        <Toolbar.Root>
+          <ComplementarySidebarToggle close />
+          <Toolbar.Separator />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Main',
+  title: 'ui/react-ui-core/components/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
-    chromatic: { disableSnapshot: false },
     layout: 'fullscreen',
   },
 } satisfies Meta<typeof DefaultStory>;