@dxos/react-ui 0.7.4 → 0.7.5-feature-compute.4d9d99a

package/src/components/Input/Input.stories.tsx

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { baseSurface, modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { baseSurface, modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
 import { Input } from './Input';
@@ -61,10 +61,10 @@ const StoryInput = (props: StoryInputProps) => {
       <div className={mx(baseSurface, 'p-4')}>
         <StoryInputContent {...props} />
       </div>
-      <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'group' }))}>
+      <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
         <StoryInputContent {...props} />
       </div>
-      <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceElevation({ elevation: 'chrome' }))}>
+      <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'dialog' }))}>
         <StoryInputContent {...props} />
       </div>
     </div>
@@ -214,8 +214,6 @@ export const Switch = {
   args: {
     label: 'This is a switch',
     type: 'switch',
-    description: 'It’s checked, indeterminate, or unchecked',
-    size: 5,
-    weight: 'bold',
+    description: 'It’s either off... or on.',
   },
 };

package/src/components/Input/Input.tsx

@@ -2,19 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Check, type IconWeight, Minus } from '@phosphor-icons/react';
-import {
-  Root as CheckboxPrimitive,
-  type CheckboxProps as CheckboxPrimitiveProps,
-  Indicator as CheckboxIndicatorPrimitive,
-} from '@radix-ui/react-checkbox';
-import {
-  Root as SwitchPrimitive,
-  Thumb as SwitchThumbPrimitive,
-  type SwitchProps as SwitchPrimitiveProps,
-} from '@radix-ui/react-switch';
+import { type IconWeight } from '@phosphor-icons/react';
+import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { forwardRef, type ForwardRefExoticComponent, Fragment, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, type ForwardRefExoticComponent, useCallback } from 'react';
 
 import {
   InputRoot,
@@ -41,6 +32,7 @@ import { type Density, type Elevation, type ClassNameValue, type Size } from '@d
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 
 type InputVariant = 'default' | 'subdued';
 
@@ -262,7 +254,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
     });
     const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
     const { tx } = useThemeContext();
-    const Icon = checked === 'indeterminate' ? Minus : checked ? Check : Fragment;
+
     return (
       <CheckboxPrimitive
         {...{
@@ -279,63 +271,56 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
         }}
         ref={forwardedRef}
       >
-        <CheckboxIndicatorPrimitive asChild>
-          <Icon
-            {...(checked && {
-              weight,
-              className: tx('input.checkboxIndicator', 'input--checkbox__indicator', { size }),
-            })}
-          />
-        </CheckboxIndicatorPrimitive>
+        <Icon
+          icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
+          classNames={tx('input.checkboxIndicator', 'input--checkbox__indicator', { size, checked })}
+        />
       </CheckboxPrimitive>
     );
   },
 );
 
-type SwitchProps = ThemedClassName<Omit<SwitchPrimitiveProps, 'children'>> & { size?: Size };
+type SwitchProps = ThemedClassName<
+  Omit<ComponentPropsWithRef<'input'>, 'children' | 'onChange'> & { onCheckedChange?: (checked: boolean) => void }
+>;
 
-const Switch: ForwardRefExoticComponent<SwitchProps> = forwardRef<HTMLButtonElement, InputScopedProps<SwitchProps>>(
+const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   (
     {
       __inputScope,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
-      size = 5,
       classNames,
       ...props
     },
     forwardedRef,
   ) => {
-    const { tx } = useThemeContext();
-
     const [checked, onCheckedChange] = useControllableState({
       prop: propsChecked,
-      defaultProp: propsDefaultChecked,
+      defaultProp: propsDefaultChecked ?? false,
       onChange: propsOnCheckedChange,
     });
 
     const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+
     return (
-      <SwitchPrimitive
-        {...{
-          ...props,
-          checked,
-          onCheckedChange,
-          id,
-          'aria-describedby': descriptionId,
-          ...(validationValence === 'error' && {
-            'aria-invalid': 'true' as const,
-            'aria-errormessage': errorMessageId,
-          }),
-          className: tx('input.switch', 'input--switch', { size }, classNames),
+      <input
+        type='checkbox'
+        className='ch-checkbox--switch ch-focus-ring'
+        checked={checked}
+        onChange={(event) => {
+          onCheckedChange(event.target.checked);
         }}
+        id={id}
+        aria-describedby={descriptionId}
+        {...props}
+        {...(validationValence === 'error' && {
+          'aria-invalid': 'true' as const,
+          'aria-errormessage': errorMessageId,
+        })}
         ref={forwardedRef}
-      >
-        {/* TODO(wittjosiah): Embed icons/text for on/off states.
-             e.g., https://codepen.io/alvarotrigo/pen/oNoJePo (#13) */}
-        <SwitchThumbPrimitive className={tx('input.switchThumb', 'input--switch__thumb', { size })} />
-      </SwitchPrimitive>
+      />
     );
   },
 );

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

@@ -17,7 +17,7 @@ import {
   ghostSelected,
   ghostSelectedTrackingInterFromNormal,
   mx,
-  surfaceElevation,
+  surfaceShadow,
 } from '@dxos/react-ui-theme';
 
 import { List, ListItem, type ListScopedProps } from './List';
@@ -124,7 +124,7 @@ export const ManySizesDraggable = {
           <p
             className={mx(
               index % 3 === 0 ? 'bs-20' : index % 2 === 0 ? 'bs-12' : 'bs-8',
-              surfaceElevation({ elevation: 'group' }),
+              surfaceShadow({ elevation: 'positioned' }),
               'mbe-2 p-2 bg-white dark:bg-neutral-800 rounded',
             )}
           >{`List item ${index + 1}`}</p>

package/src/components/Lists/List.tsx

@@ -26,6 +26,7 @@ import {
 } from '@dxos/react-list';
 import { type Density } from '@dxos/react-ui-types';
 
+import { ListDropIndicator } from './ListDropIndicator';
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
@@ -150,6 +151,7 @@ export const ListItem: {
   OpenTrigger: ForwardRefExoticComponent<ListItemOpenTriggerProps>;
   CollapsibleContent: ForwardRefExoticComponent<ListItemCollapsibleContentProps>;
   MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+  DropIndicator: typeof ListDropIndicator;
 } = {
   Root: ListItemRoot,
   Endcap: ListItemEndcap,
@@ -157,6 +159,7 @@ export const ListItem: {
   OpenTrigger: ListItemOpenTrigger,
   CollapsibleContent: ListItemCollapsibleContent,
   MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator,
 };
 
 export { List, useListContext, useListItemContext, LIST_NAME, LIST_ITEM_NAME };

package/src/components/Lists/ListDropIndicator.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
+
+type Orientation = 'horizontal' | 'vertical';
+
+const edgeToOrientationMap: Record<Edge, Orientation> = {
+  top: 'horizontal',
+  bottom: 'horizontal',
+  left: 'vertical',
+  right: 'vertical',
+};
+
+const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
+  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
+  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
+};
+
+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]',
+};
+
+const strokeSize = 2;
+const terminalSize = 8;
+const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+
+export type DropIndicatorProps = {
+  edge: Edge;
+  gap?: number;
+};
+
+/**
+ * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
+ */
+export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+
+  const orientation = edgeToOrientationMap[edge];
+
+  return (
+    <div
+      role='none'
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `${lineOffset}`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--negative-terminal-size': `-${terminalSize}px`,
+          '--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]}`}
+    />
+  );
+};

package/src/components/Lists/Tree.tsx

@@ -16,6 +16,7 @@ import {
   LIST_ITEM_NAME,
   useListItemContext,
 } from './List';
+import { TreeDropIndicator } from './TreeDropIndicator';
 import { type ThemedClassName } from '../../util';
 
 type TreeRootProps = ListProps;
@@ -60,12 +61,14 @@ export const TreeItem: {
   Body: ForwardRefExoticComponent<TreeItemBodyProps>;
   OpenTrigger: ForwardRefExoticComponent<TreeItemOpenTriggerProps>;
   MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+  DropIndicator: typeof TreeDropIndicator;
 } = {
   Root: TreeItemRoot,
   Heading: TreeItemHeading,
   Body: TreeItemBody,
   OpenTrigger: TreeItemOpenTrigger,
   MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator,
 };
 
 export type { TreeRootProps, TreeItemProps, TreeItemHeadingProps, TreeItemBodyProps, TreeItemOpenTriggerProps };

package/src/components/Lists/TreeDropIndicator.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { type HTMLAttributes, type CSSProperties } from 'react';
+
+// Tree item hitbox
+// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
+
+type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
+type Orientation = 'sibling' | 'child';
+
+const edgeToOrientationMap: Record<InstructionType, Orientation> = {
+  'reorder-above': 'sibling',
+  'reorder-below': 'sibling',
+  'make-child': 'child',
+  reparent: 'child',
+};
+
+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',
+};
+
+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',
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: '',
+};
+
+const strokeSize = 2;
+const terminalSize = 8;
+const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+
+export type DropIndicatorProps = {
+  instruction: Instruction;
+  gap?: number;
+};
+
+export const TreeDropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+  const isBlocked = instruction.type === 'instruction-blocked';
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap[desiredInstruction.type];
+  if (isBlocked) {
+    return null;
+  }
+
+  return (
+    <div
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `${lineOffset}`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--negative-terminal-size': `-${terminalSize}px`,
+          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
+          '--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]}`}
+    ></div>
+  );
+};

package/src/components/Main/Main.tsx

@@ -3,7 +3,6 @@
 //
 
 import { useFocusableGroup } from '@fluentui/react-tabster';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { createContext } from '@radix-ui/react-context';
 import { Root as DialogRoot, DialogContent } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -29,7 +28,6 @@ import { useMediaQuery, useForwardedRef } from '@dxos/react-hooks';
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
 
 const MAIN_ROOT_NAME = 'MainRoot';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
@@ -227,7 +225,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
           {...(!open && { inert: 'true' })}
           ref={ref}
         >
-          <ElevationProvider elevation='group'>{children}</ElevationProvider>
+          {children}
         </Root>
       </DialogRoot>
     );
@@ -334,47 +332,12 @@ const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames,
   );
 });
 
-type MainNotchProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
-
-const MainNotch = forwardRef<HTMLDivElement, MainNotchProps>(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  // Notch is concerned with the nav sidebar, whichever side it might be on.
-  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  const notchElement = useRef<HTMLDivElement | null>(null);
-  const ref = useComposedRefs(forwardedRef, notchElement);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      switch (event.key) {
-        case 'Escape':
-          props?.onKeyDown?.(event);
-          notchElement.current?.focus();
-      }
-    },
-    [props?.onKeyDown],
-  );
-
-  const mover = useLandmarkMover(handleKeyDown, '3');
-
-  return (
-    <div
-      role='toolbar'
-      {...mover}
-      {...props}
-      data-nav-sidebar-state={navigationSidebarOpen ? 'open' : 'closed'}
-      className={tx('main.notch', 'main__notch', {}, classNames)}
-      ref={ref}
-    />
-  );
-});
-
 export const Main = {
   Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
-  Notch: MainNotch,
 };
 
 export { useMainContext, useSidebars };

package/src/components/Menus/ContextMenu.tsx

@@ -6,9 +6,9 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
 
 type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
 
@@ -27,16 +27,18 @@ type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuC
 };
 
 const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <ContextMenuPrimitive.Content
-        collisionPadding={8}
         {...props}
-        className={tx('menu.content', 'menu', {}, classNames)}
+        collisionPadding={safeCollisionPadding}
+        className={tx('menu.content', 'menu', { elevation }, classNames)}
         ref={forwardedRef}
       >
-        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+        {children}
       </ContextMenuPrimitive.Content>
     );
   },

package/src/components/Menus/DropdownMenu.tsx

@@ -28,7 +28,8 @@ import React, {
   type RefObject,
 } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
@@ -232,18 +233,20 @@ interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...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);
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
           if (!hasInteractedOutsideRef.current) {
@@ -261,7 +264,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
             hasInteractedOutsideRef.current = true;
           }
         })}
-        className={tx('menu.content', 'menu', {}, classNames)}
+        className={tx('menu.content', 'menu', { elevation }, classNames)}
         style={{
           ...props.style,
           // re-namespace exposed content custom properties

package/src/components/Popover/Popover.tsx

@@ -36,7 +36,8 @@ import React, {
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 /* -------------------------------------------------------------------------------------------------
@@ -258,6 +259,7 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
     const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
+
     return (
       <Presence present={forceMount || context.open}>
         {context.modal ? (
@@ -427,12 +429,15 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onPointerDownOutside,
       onFocusOutside,
       onInteractOutside,
+      collisionPadding = 8,
       classNames,
       ...contentProps
     } = props;
     const context = usePopoverContext(CONTENT_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
     const { tx } = useThemeContext();
+    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`)
@@ -461,7 +466,8 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             id={context.contentId}
             {...popperScope}
             {...contentProps}
-            className={tx('popover.content', 'popover', {}, classNames)}
+            collisionPadding={safeCollisionPadding}
+            className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
               ...contentProps.style,

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
-import { groupSurface, surfaceElevation } from '@dxos/react-ui-theme';
+import { groupSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
@@ -17,7 +17,7 @@ faker.seed(1234);
 const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
-      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceElevation({ elevation: 'group' })]}
+      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
     >
       <ScrollArea.Viewport classNames='rounded p-4'>
         <p>{children}</p>

package/src/components/Select/Select.tsx

@@ -6,7 +6,8 @@ import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Buttons';
 import { Icon } from '../Icon';
@@ -53,12 +54,15 @@ const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonPro
 type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <SelectPrimitive.Content
         {...props}
-        className={tx('select.content', 'select__content', {}, classNames)}
+        collisionPadding={safeCollisionPadding}
+        className={tx('select.content', 'select__content', { elevation }, classNames)}
         position='popper'
         ref={forwardedRef}
       >

package/src/components/Separator/Separator.tsx

@@ -5,23 +5,26 @@ import {
   Separator as SeparatorPrimitive,
   type SeparatorProps as SeparatorPrimitiveProps,
 } from '@radix-ui/react-separator';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type SeparatorProps = ThemedClassName<SeparatorPrimitiveProps>;
 
-const Separator = ({ classNames, orientation = 'horizontal', ...props }: SeparatorProps) => {
-  const { tx } = useThemeContext();
-  return (
-    <SeparatorPrimitive
-      orientation={orientation}
-      {...props}
-      className={tx('separator.root', 'separator', { orientation }, classNames)}
-    />
-  );
-};
+const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ classNames, orientation = 'horizontal', ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SeparatorPrimitive
+        orientation={orientation}
+        {...props}
+        className={tx('separator.root', 'separator', { orientation }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
 
 export type { SeparatorProps };