@dxos/react-ui 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.422d1c7879",
+  "version": "0.8.4-main.4f23b4e393",
   "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",
@@ -12,6 +12,9 @@
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -24,6 +27,12 @@
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs",
       "types": "./dist/types/src/testing/index.d.ts"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -74,17 +83,17 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/invariant": "0.8.4-main.422d1c7879",
-    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
-    "@dxos/log": "0.8.4-main.422d1c7879",
-    "@dxos/react-error-boundary": "0.8.4-main.422d1c7879",
-    "@dxos/debug": "0.8.4-main.422d1c7879",
-    "@dxos/react-hooks": "0.8.4-main.422d1c7879",
-    "@dxos/react-list": "0.8.4-main.422d1c7879",
-    "@dxos/react-input": "0.8.4-main.422d1c7879",
-    "@dxos/async": "0.8.4-main.422d1c7879",
-    "@dxos/ui-types": "0.8.4-main.422d1c7879",
-    "@dxos/util": "0.8.4-main.422d1c7879"
+    "@dxos/async": "0.8.4-main.4f23b4e393",
+    "@dxos/invariant": "0.8.4-main.4f23b4e393",
+    "@dxos/lit-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/log": "0.8.4-main.4f23b4e393",
+    "@dxos/debug": "0.8.4-main.4f23b4e393",
+    "@dxos/react-error-boundary": "0.8.4-main.4f23b4e393",
+    "@dxos/react-hooks": "0.8.4-main.4f23b4e393",
+    "@dxos/react-input": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-types": "0.8.4-main.4f23b4e393",
+    "@dxos/util": "0.8.4-main.4f23b4e393",
+    "@dxos/react-list": "0.8.4-main.4f23b4e393"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -97,15 +106,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
-    "vite": "^7.1.11",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879",
-    "@dxos/util": "0.8.4-main.422d1c7879",
-    "@dxos/random": "0.8.4-main.422d1c7879"
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.4f23b4e393",
+    "@dxos/util": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393"
   },
   "publishConfig": {
     "access": "public"

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

@@ -15,7 +15,7 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
-            <Button variant='ghost' classNames='px-0 text-base-surface-text font-normal'>
+            <Button variant='ghost' classNames='px-0 text-base-foreground font-normal'>
               Grocery
             </Button>
           </Breadcrumb.Link>

package/src/components/Button/IconButton.stories.tsx

@@ -13,7 +13,7 @@ import { IconButton, type IconButtonProps } from './IconButton';
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
-      <div role='none' className='flex gap-4'>
+      <div className='flex gap-4'>
         <IconButton {...props} />
         <IconButton iconOnly {...props} />
         <Button>{props.label}</Button>

package/src/components/Button/IconButton.tsx

@@ -16,6 +16,7 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     noTooltip?: boolean;
     caretDown?: boolean;
     iconOnly?: boolean;
+    square?: boolean; // TODO(burdon): Handle more uniformly.
     iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipSide?: TooltipSide;
@@ -45,12 +46,12 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
-    { size, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly, square }, classNames)} ref={forwardedRef}>
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}

package/src/components/Card/Card.stories.tsx

@@ -129,18 +129,18 @@ export const Description: Story = {
 export const Mock = () => (
   <div className='grid grid-cols-[2rem_1fr_2rem] w-full dx-card-min-width dx-card-max-width border border-separator rounded-xs'>
     <div className='grid grid-cols-subgrid col-span-full'>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
         <Icon icon='ph--dots-six-vertical--regular' />
       </div>
       <div className='p-1 whitespace-normal break-words text-description items-center'>
         This line is very very long and it should wrap.
       </div>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
         <Icon icon='ph--x--regular' />
       </div>
     </div>
     <div className='grid grid-cols-subgrid col-span-3'>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
         <Icon icon='ph--dots-six-vertical--regular' />
       </div>
       <div className='p-1 text-description items-center col-span-2'>

package/src/components/Card/Card.tsx

@@ -52,7 +52,7 @@ const CardContext = createContext<CardContextValue>({});
 
 const CARD_ROOT_NAME = 'Card.Root';
 
-type CardRootOwnProps = {
+type CardRootProps = {
   id?: string;
   border?: boolean;
   fullWidth?: boolean;
@@ -64,24 +64,33 @@ type CardRootOwnProps = {
   'data-testid'?: string;
 };
 
-type CardRootProps = CardRootOwnProps;
-
-const CardRoot = slottable<HTMLDivElement, CardRootOwnProps>(
-  ({ children, id, asChild, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
+/**
+ * `Card.Root` does not support `asChild`. The Column grid is the root element
+ * (one `<div>` carrying both the `dx-card` and `dx-column-root` classes
+ * instead of the previous outer-card + inner-column pair), so caller-provided
+ * HTML attributes — `onClick`, `tabIndex`, `style`, `data-*`, `grid-template-rows`
+ * overrides via `classNames` — land directly on the grid container.
+ * Slot-parents (`Focus.Item asChild`, `Mosaic.Tile asChild`, etc.) continue to
+ * work because `composable()` preserves the COMPOSABLE marker that slottable parents
+ * check before warning, and Radix `Slot` merges the parent's props onto the inner
+ * `<div>` exactly the way `slottable`'s `Slot`/`Primitive.div` branch did.
+ */
+const CardRoot = composable<HTMLDivElement, CardRootProps>(
+  ({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
-    const Comp = asChild ? Slot : Primitive.div;
     const { tx } = useThemeContext();
 
     return (
-      <Comp
-        {...rest}
-        {...(id && { 'data-object-id': id })}
+      <Column.Root
+        asChild
+        gutter={density === 'coarse' ? 'lg' : 'md'}
+        classNames={tx('card.root', { border, fullWidth }, className)}
         role={role ?? 'group'}
-        className={tx('card.root', { border, fullWidth }, className)}
-        ref={forwardedRef}
       >
-        <Column.Root gutter={density === 'coarse' ? 'lg' : 'md'}>{children}</Column.Root>
-      </Comp>
+        <div {...rest} {...(id && { 'data-object-id': id })} ref={forwardedRef}>
+          {children}
+        </div>
+      </Column.Root>
     );
   },
 );
@@ -194,7 +203,7 @@ const CardIconBlock = forwardRef<HTMLDivElement, ThemedClassName<PropsWithChildr
     const { tx } = useThemeContext();
 
     return (
-      <div {...props} role='none' className={tx('card.icon-block', { padding }, classNames)} ref={forwardedRef}>
+      <div {...props} className={tx('card.icon-block', { padding }, classNames)} ref={forwardedRef}>
         {children}
       </div>
     );
@@ -251,6 +260,7 @@ const CARD_ROW_NAME = 'Card.Row';
 
 type CardRowProps = { icon?: string; fullWidth?: boolean };
 
+// TODO(burdon): fullWidth should mean no columns.
 const CardRow = slottable<HTMLDivElement, CardRowProps>(({ children, asChild, icon, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot : Primitive.div;
@@ -363,7 +373,6 @@ const CardHtml = ({ html, variant = 'default', ...props }: CardHtmlProps & Theme
   return (
     <div
       {...props}
-      role='none'
       className={tx('card.text', { variant })}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: sanitized }}
@@ -399,7 +408,7 @@ const CardPoster = (props: CardPosterProps) => {
 
   if (props.image) {
     return (
-      <div role='none' className='col-span-full'>
+      <div className='col-span-full'>
         <Image
           classNames={[tx('card.poster', {}), aspect, props.classNames]}
           src={props.image}

package/src/components/Clipboard/CopyButton.tsx

@@ -30,11 +30,11 @@ export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButton
       onClick={() => setTextValue(value)}
       data-testid='copy-invitation'
     >
-      <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
+      <div className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
         <span className='px-1'>{t('copy.label')}</span>
         <Icon icon='ph--copy--regular' size={size} />
       </div>
-      <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
+      <div className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
         <span className='px-1'>{t('copy-success.label')}</span>
         <Icon icon='ph--check--regular' size={size} />
       </div>

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo, useMemo } from 'react';
 
 import { type Size } from '@dxos/ui-types';
 
@@ -13,18 +13,25 @@ import { type ThemedClassName } from '../../util';
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
   icon: string;
   size?: Size;
+  synchronized?: boolean;
 };
 
 /**
  * The Icon's size can be set directly or inherited from the `--dx-icon-size` CSS variable.
  */
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const spinDelay = useMemo(() => (synchronized ? `${-(Date.now() % 1_000)}ms` : undefined), [synchronized]);
     const href = useIconHref(icon);
 
     return (
-      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
+      <svg
+        {...props}
+        style={{ ...style, animationDelay: spinDelay }}
+        className={tx('icon.root', { size }, classNames)}
+        ref={forwardedRef}
+      >
         <use href={href} />
       </svg>
     );

package/src/components/Image/Image.tsx

@@ -175,7 +175,9 @@ const extractDominantColor = (
       const alpha = pixels[i + 3];
 
       // Skip transparent pixels.
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
 
       // Calculate saturation to weight vibrant colors more.
       const max = Math.max(red, green, blue);
@@ -215,21 +217,29 @@ const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold:
   for (let x = 0; x < sampleSize; x++) {
     // Top edge.
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Bottom edge.
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   for (let y = 1; y < sampleSize - 1; y++) {
     // Left edge.
     const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Right edge.
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   return edgeTransparentPixels / edgePixels > threshold;

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

@@ -176,7 +176,7 @@ 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 pt-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>

package/src/components/List/List.tsx

@@ -75,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>;

package/src/components/List/ListDropIndicator.tsx

@@ -52,7 +52,6 @@ export const ListDropIndicator = ({
 
   return (
     <div
-      role='none'
       style={
         {
           '--line-thickness': `${strokeSize}px`,

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

@@ -32,7 +32,7 @@ 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 pt-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
             </div>

package/src/components/Message/Message.stories.tsx

@@ -22,7 +22,7 @@ type DefaultStoryProps = {
 const DefaultStory = ({ valence, title, body }: DefaultStoryProps) => (
   <div className='w-[30rem]'>
     <Message.Root valence={valence}>
-      {title && <Message.Title>{title}</Message.Title>}
+      {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
       {body && <Message.Content>{body}</Message.Content>}
     </Message.Root>
   </div>

package/src/components/Message/Message.tsx

@@ -6,12 +6,16 @@ import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
 import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
 import { Icon } from '../Icon';
 
 const messageIcons: Record<MessageValence, string> = {
@@ -84,23 +88,36 @@ MessageRoot.displayName = MESSAGE_NAME;
 //
 
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
-  asChild?: boolean;
   icon?: string;
+  onClose?: () => void;
 };
 
 const MESSAGE_TITLE_NAME = 'MessageTitle';
 
 const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+  ({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Comp = asChild ? Slot : Primitive.h2;
     const icon = iconProp ?? messageIcons[valence];
     return (
-      <Comp {...props} className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
-        {!icon && valence === 'neutral' ? <div /> : <Icon icon={icon} classNames={tx('message.icon', { valence })} />}
-        <span className={tx('message.title', {}, classNames)}>{children}</span>
-      </Comp>
+      <div className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
+        {icon && (
+          <div className={tx('message.icon', { valence })}>
+            <Icon icon={icon} />
+          </div>
+        )}
+        <h2 className={tx('message.title', {}, classNames)}>{children}</h2>
+        {onClose && (
+          <IconButton
+            variant='ghost'
+            icon='ph--x--regular'
+            iconOnly
+            label={t('toolbar-close.label')}
+            onClick={onClose}
+          />
+        )}
+      </div>
     );
   },
 );

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

@@ -48,11 +48,7 @@ const Row = ({ items = 50 }: { items?: number }) => (
 );
 
 const Container = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className={mx('border border-separator rounded-md overflow-hidden', classNames)}>
-      {children}
-    </div>
-  );
+  return <div className={mx('border border-separator rounded-md overflow-hidden', classNames)}>{children}</div>;
 };
 
 export const Vertical = {

package/src/components/ScrollContainer/ScrollContainer.tsx

@@ -276,13 +276,12 @@ const Fade = () => {
 
   return (
     <div
-      role='none'
       data-visible={overflow}
       className={mx(
         // NOTE: Gradients may not be visible with dark reader extensions.
         'z-10 absolute top-0 inset-x-0 h-24 w-full',
         'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
-        'bg-gradient-to-b from-(--surface-bg) to-transparent pointer-events-none',
+        'bg-gradient-to-b from-(--color-base-surface) to-transparent pointer-events-none',
       )}
     />
   );
@@ -303,7 +302,6 @@ const ScrollDownButton = ({ classNames }: ScrollDownButtonProps) => {
 
   return (
     <div
-      role='none'
       className={mx(
         'absolute bottom-2 right-4 opacity-100 transition-opacity duration-300',
         pinned && 'opacity-0',

package/src/components/ThemeProvider/index.ts

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

package/src/components/Toolbar/Toolbar.tsx

@@ -12,8 +12,9 @@ import { useTranslation } from 'react-i18next';
 import { composable, composableProps, slottable, type ToolbarStyleProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useThemeContext } from '../../hooks';
-import { translationKey } from '../../translations';
 import {
   Button,
   ButtonGroup,

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

@@ -19,7 +19,7 @@ type DefaultStoryProps = {
 const DefaultStory = ({ tooltips, defaultOpen }: DefaultStoryProps) => {
   return (
     <Tooltip.Provider defaultOpen={defaultOpen}>
-      <div role='none' className='w-32'>
+      <div className='w-32'>
         {tooltips.map(({ label, content }, i) => (
           <Tooltip.Trigger asChild key={i} content={content} side='right'>
             <Button classNames='block w-full'>{label}</Button>

package/src/exemplars/slot.stories.tsx

@@ -59,9 +59,7 @@ const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef
 
 /** This isn't a valid child for a `slottable` component. */
 const Simple = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => (
-  <div role='none' className={mx(classNames)}>
-    {children}
-  </div>
+  <div className={mx(classNames)}>{children}</div>
 );
 
 const meta = {
@@ -99,7 +97,7 @@ export const Inner: Story = {
     <Outer asChild role='article' classNames='border-orange-500'>
       <Middle asChild>
         <Leaf>
-          <div role='none'>Leaf</div>
+          <div>Leaf</div>
         </Leaf>
       </Middle>
     </Outer>

package/src/exemplars/virtualizer.stories.tsx

@@ -66,7 +66,6 @@ export const Default = {
           <ScrollArea.Root orientation='vertical' centered>
             <ScrollArea.Viewport classNames='p-2' ref={setViewport}>
               <div
-                role='none'
                 style={{
                   position: 'relative',
                   height: virtualizer.getTotalSize(),

package/src/testing/decorators/withLayout.tsx

@@ -47,31 +47,21 @@ export const withLayout =
   };
 
 const layouts: Record<ContainerType, FC<ContainerProps>> = {
-  default: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('p-4', classNames)}>
-      {children}
-    </div>
-  ),
+  default: ({ classNames, children }: ContainerProps) => <div className={mx('p-4', classNames)}>{children}</div>,
 
   fullscreen: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>
-      {children}
-    </div>
+    <div className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>{children}</div>
   ),
 
   centered: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
-      <div role='none' className={mx('flex flex-col bg-base-surface', classNames)}>
-        {children}
-      </div>
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 
   column: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
-      <div role='none' className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>
-        {children}
-      </div>
+    <div className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 };