@dxos/react-ui 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/src/components/List/List.stories.tsx

@@ -9,18 +9,10 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useCallback, useState } from 'react';
 
-import {
-  getSize,
-  ghostHover,
-  ghostSelected,
-  ghostSelectedTrackingInterFromNormal,
-  mx,
-  surfaceShadow,
-} from '@dxos/ui-theme';
+import { getSize, ghostHover, mx, surfaceShadow } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
-
 import { List, ListItem, type ListScopedProps } from './List';
 
 const meta = {
@@ -44,11 +36,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>
   );
@@ -110,13 +102,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>
   );
@@ -130,9 +122,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>
         ),
@@ -184,11 +176,11 @@ export const Collapsible: Story = {
       <List {...args}>
         {items.map(({ id, text, body }, index) => (
           <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
-            <div role='none' className='grow flex'>
+            <div 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>}
@@ -229,11 +221,11 @@ export const SelectableListbox: Story = {
             key={id}
             tabIndex={0}
             selected={selectedId === id}
-            classNames={mx(ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            classNames={mx(ghostHover, 'dx-selected')}
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='flex pli-1 items-center grow truncate'>{text}</ListItem.Heading>
+            <ListItem.Heading classNames='flex px-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>

package/src/components/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,24 +24,25 @@ import {
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { type Density } from '@dxos/ui-types';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 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', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...rest} className={tx('list.root', {}, className)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -51,18 +53,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', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -73,7 +75,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
+  return <div {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -88,7 +90,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
         className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
-        {children}
+        <span>{children}</span>
       </ListPrimitiveItemHeading>
     );
   },

package/src/components/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:
-    'is-[--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;
@@ -52,7 +52,6 @@ export const ListDropIndicator = ({
 
   return (
     <div
-      role='none'
       style={
         {
           '--line-thickness': `${strokeSize}px`,
@@ -64,7 +63,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/List/Tree.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { Tree, TreeItem } from './Tree';
 
 type StorybookTreeProps = {
@@ -25,7 +24,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];
@@ -33,12 +32,12 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
 
         return (
           <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
-            <div role='none' className='grow flex'>
+            <div 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>

package/src/components/List/Tree.tsx

@@ -5,7 +5,6 @@
 import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import { type ThemedClassName } from '../../util';
-
 import {
   LIST_ITEM_NAME,
   List,

package/src/components/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/List/Treegrid.stories.tsx

@@ -5,14 +5,13 @@
 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 { Icon } from '../Icon';
+import { Treegrid, TREEGRID_PARENT_OF_SEPARATOR, TREEGRID_PATH_SEPARATOR } from './Treegrid';
 
-import { Treegrid } from './Treegrid';
-
-faker.seed(1234);
+random.seed(1234);
 
 type StorybookNode = {
   id: string;
@@ -32,33 +31,33 @@ const content = {
   title: 'Root',
   nodes: [
     {
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       title: 'Personal Space',
       icon: 'ph--house--regular',
       nodes: [
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
           nodes: [
             {
-              id: faker.string.uuid(),
-              title: faker.commerce.productName(),
+              id: random.string.uuid(),
+              title: random.commerce.productName(),
               nodes: [
                 {
-                  id: faker.string.uuid(),
-                  title: faker.commerce.productName(),
+                  id: random.string.uuid(),
+                  title: random.commerce.productName(),
                 },
                 {
-                  id: faker.string.uuid(),
-                  title: faker.commerce.productName(),
+                  id: random.string.uuid(),
+                  title: random.commerce.productName(),
                 },
               ],
             },
@@ -67,24 +66,24 @@ const content = {
       ],
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--planet--regular',
       nodes: [
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
       ],
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--sailboat--regular',
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--planet--regular',
     },
   ],
@@ -129,11 +128,11 @@ const DefaultStory = () => {
         return (
           <Treegrid.Row
             key={node.id}
-            id={path.join(Treegrid.PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
+            id={path.join(TREEGRID_PATH_SEPARATOR)}
+            {...(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>

package/src/components/List/Treegrid.tsx

@@ -15,10 +15,12 @@ import React, {
   useCallback,
 } from 'react';
 
+import { composable, composableProps } from '@dxos/ui-theme';
+
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-// TODO(thure): A lot of the accessible affordances for this kind of thing need to be implemented per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
+// TODO(thure): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
 
 const TREEGRID_ROW_NAME = 'TreegridRow';
 
@@ -34,18 +36,20 @@ type TreegridRowContextValue = {
 const [TreegridRowProvider, useTreegridRowContext] =
   createTreegridRowContext<TreegridRowContextValue>(TREEGRID_ROW_NAME);
 
-const PATH_SEPARATOR = '~';
-const PARENT_OF_SEPARATOR = ' ';
+// TODO(burdon): Replace with functions.
+export const TREEGRID_PATH_SEPARATOR = '~';
+export const TREEGRID_PARENT_OF_SEPARATOR = ' ';
 
 type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   gridTemplateColumns: CSSProperties['gridTemplateColumns'];
   asChild?: boolean;
 };
 
-const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
-  ({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+const TreegridRoot = composable<HTMLDivElement, TreegridRootProps>(
+  ({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const { className, role: _role, ...rest } = composableProps<HTMLDivElement>(props, { classNames });
+    const Comp = asChild ? Slot : Primitive.div;
     const { findFirstFocusable } = useFocusFinders();
 
     const handleKeyDown = useCallback(
@@ -89,22 +93,22 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
             break;
           }
         }
-        props.onKeyDown?.(event);
+        onKeyDownProp?.(event);
       },
-      [findFirstFocusable],
+      [findFirstFocusable, onKeyDownProp],
     );
 
     return (
-      <Root
+      <Comp
         role='treegrid'
-        {...props}
-        className={tx('treegrid.root', {}, classNames)}
+        {...rest}
+        className={tx('treegrid.root', {}, className)}
         style={{ ...style, gridTemplateColumns }}
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -135,8 +139,8 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    const pathParts = id.split(PATH_SEPARATOR);
+    const Comp = asChild ? Slot : Primitive.div;
+    const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
     const level = pathParts.length - 1;
     const [open, onOpenChange] = useControllableState({
       prop: propsOpen,
@@ -146,7 +150,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
 
     return (
       <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
-        <Root
+        <Comp
           role='row'
           aria-level={level}
           className={tx('treegrid.row', { level }, classNames)}
@@ -156,7 +160,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
           ref={forwardedRef}
         >
           {children}
-        </Root>
+        </Comp>
       </TreegridRowProvider>
     );
   },
@@ -181,8 +185,4 @@ export const Treegrid = {
   Root: TreegridRoot,
   Row: TreegridRow,
   Cell: TreegridCell,
-  PARENT_OF_SEPARATOR,
-  PATH_SEPARATOR,
-  createTreegridRowScope,
-  useTreegridRowContext,
 };

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

@@ -8,7 +8,6 @@ import React from 'react';
 import { withLayout, withTheme } from '../../testing';
 import { IconButton } from '../Button';
 import { Toolbar } from '../Toolbar';
-
 import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};
@@ -44,11 +43,11 @@ const DefaultStory = (_args: StoryMainArgs) => {
       <Main.NavigationSidebar label='Navigation'>
         <Toolbar.Root>
           <h1>Navigation</h1>
-          <Toolbar.Separator variant='gap' classNames='grow' />
+          <Toolbar.Separator />
           <NavigationSidebarToggle close />
         </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content classNames='is-full'>
+      <Main.Content classNames='w-full'>
         <Toolbar.Root>
           <NavigationSidebarToggle />
           <div className='flex items-center grow justify-center'>Main</div>
@@ -58,7 +57,7 @@ const DefaultStory = (_args: StoryMainArgs) => {
       <Main.ComplementarySidebar label='Complementary'>
         <Toolbar.Root>
           <ComplementarySidebarToggle close />
-          <Toolbar.Separator variant='gap' classNames='grow' />
+          <Toolbar.Separator />
           <h1>Complementary</h1>
         </Toolbar.Root>
       </Main.ComplementarySidebar>
@@ -73,9 +72,6 @@ const meta = {
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
-    chromatic: {
-      disableSnapshot: false,
-    },
   },
 } satisfies Meta<typeof DefaultStory>;
 

package/src/components/Main/Main.tsx

@@ -25,12 +25,11 @@ import React, {
 import { addEventListener } from '@dxos/async';
 import { log } from '@dxos/log';
 import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
-import { type MainStyleProps } from '@dxos/ui-theme';
+import { type MainStyleProps, osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
-
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 
 const MAIN_NAME = 'Main';
@@ -40,7 +39,7 @@ const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
 const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
 
 const handleOpenAutoFocus = (event: Event) => {
-  !document.body.hasAttribute('data-is-keyboard') && event.preventDefault();
+  !document.body.hasAttribute('data-w-keyboard') && event.preventDefault();
 };
 
 //
@@ -270,7 +269,7 @@ type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogConte
   state?: SidebarState;
   resizing?: boolean;
   onStateChange?: (nextState: SidebarState) => void;
-  side: 'inline-start' | 'inline-end';
+  side: 'w-start' | 'w-end';
   label: Label;
 };
 
@@ -281,7 +280,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   ) => {
     const [isLg] = useMediaQuery('lg');
     const { tx } = useThemeContext();
-    const { t } = useTranslation();
+    const { t } = useTranslation(osTranslations);
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
 
@@ -313,7 +312,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...(state === 'closed' && { inert: true })}
           {...props}
-          data-side={side === 'inline-end' ? 'ie' : 'is'}
+          data-side={side === 'w-end' ? 'ie' : 'is'}
           data-state={state}
           data-resizing={resizing ? 'true' : 'false'}
           className={tx('main.sidebar', {}, classNames)}
@@ -344,7 +343,7 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
       state={navigationSidebarState}
       onStateChange={setNavigationSidebarState}
       resizing={resizing}
-      side='inline-start'
+      side='w-start'
       ref={forwardedRef}
     />
   );
@@ -370,7 +369,7 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
       state={complementarySidebarState}
       onStateChange={setComplementarySidebarState}
       resizing={resizing}
-      side='inline-end'
+      side='w-end'
       ref={forwardedRef}
     />
   );
@@ -393,22 +392,22 @@ const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
   ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainContentProps, forwardedRef) => {
     const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : role ? 'div' : 'main';
+    const Comp = asChild ? Slot : role ? Primitive.div : 'main';
     const mover = useLandmarkMover(props.onKeyDown, '1');
 
     return (
-      <Root
-        role={role}
+      <Comp
         {...(handlesFocus && { ...mover })}
         {...props}
-        data-sidebar-inline-start-state={navigationSidebarState}
-        data-sidebar-inline-end-state={complementarySidebarState}
+        role={role}
+        data-sidebar-left-state={navigationSidebarState}
+        data-sidebar-right-state={complementarySidebarState}
         data-handles-focus={handlesFocus}
         className={tx('main.content', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );

package/src/components/Menu/ContextMenu.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { ContextMenu } from './ContextMenu';
 
 const DefaultStory = () => {