@dxos/react-ui 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.74a063c4e0",
+  "version": "0.8.4-main.765dc60934",
   "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",
@@ -8,10 +8,13 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -24,16 +27,15 @@
       "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",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "./dist/types/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -81,17 +83,17 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.8.4-main.74a063c4e0",
-    "@dxos/debug": "0.8.4-main.74a063c4e0",
-    "@dxos/invariant": "0.8.4-main.74a063c4e0",
-    "@dxos/lit-ui": "0.8.4-main.74a063c4e0",
-    "@dxos/log": "0.8.4-main.74a063c4e0",
-    "@dxos/react-hooks": "0.8.4-main.74a063c4e0",
-    "@dxos/react-error-boundary": "0.8.4-main.74a063c4e0",
-    "@dxos/react-input": "0.8.4-main.74a063c4e0",
-    "@dxos/react-list": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-types": "0.8.4-main.74a063c4e0",
-    "@dxos/util": "0.8.4-main.74a063c4e0"
+    "@dxos/lit-ui": "0.8.4-main.765dc60934",
+    "@dxos/async": "0.8.4-main.765dc60934",
+    "@dxos/invariant": "0.8.4-main.765dc60934",
+    "@dxos/log": "0.8.4-main.765dc60934",
+    "@dxos/react-error-boundary": "0.8.4-main.765dc60934",
+    "@dxos/react-hooks": "0.8.4-main.765dc60934",
+    "@dxos/react-list": "0.8.4-main.765dc60934",
+    "@dxos/debug": "0.8.4-main.765dc60934",
+    "@dxos/ui-types": "0.8.4-main.765dc60934",
+    "@dxos/react-input": "0.8.4-main.765dc60934",
+    "@dxos/util": "0.8.4-main.765dc60934"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -104,15 +106,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0",
-    "@dxos/util": "0.8.4-main.74a063c4e0"
+    "vite": "^8.0.13",
+    "@dxos/util": "0.8.4-main.765dc60934",
+    "@dxos/random": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
+    "@dxos/ui-theme": "0.8.4-main.765dc60934"
   },
   "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,15 +260,17 @@ const CARD_ROW_NAME = 'Card.Row';
 
 type CardRowProps = { icon?: string; fullWidth?: boolean };
 
-const CardRow = composable<HTMLDivElement, CardRowProps>(({ children, icon, ...props }, forwardedRef) => {
+// 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;
   const { tx } = useThemeContext();
 
   return (
-    <Column.Row {...rest} className={tx('card.row', {}, className)} ref={forwardedRef}>
+    <Comp {...rest} className={tx('card.row', {}, className)} ref={forwardedRef}>
       {(icon && <CardIcon classNames='text-subdued' icon={icon} size={4} />) || <div />}
       {children}
-    </Column.Row>
+    </Comp>
   );
 });
 
@@ -362,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 }}
@@ -382,6 +392,13 @@ type CardPosterProps = ThemedClassName<
   {
     alt: string;
     aspect?: 'video' | 'auto';
+    /**
+     * How the image fills the poster box. `'contain'` (default) preserves
+     * aspect ratio and may letterbox; `'cover'` fills the box edge-to-edge,
+     * cropping as needed. Forwarded to the underlying `Image`'s
+     * `object-fit`.
+     */
+    fit?: 'contain' | 'cover';
   } & Partial<{ image: string; icon: string }>
 >;
 
@@ -391,8 +408,13 @@ const CardPoster = (props: CardPosterProps) => {
 
   if (props.image) {
     return (
-      <div role='none' className='col-span-full mb-1'>
-        <Image classNames={[tx('card.poster', {}), aspect, props.classNames]} src={props.image} alt={props.alt} />
+      <div className='col-span-full'>
+        <Image
+          classNames={[tx('card.poster', {}), aspect, props.classNames]}
+          src={props.image}
+          alt={props.alt}
+          fit={props.fit}
+        />
       </div>
     );
   }

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,339 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import React, {
+  createContext,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
+import { useTranslation } from '../ThemeProvider';
+
+// TODO(burdon): Move per-element class strings to `@dxos/ui-theme` (theme tokens)
+// so callers can re-theme via the same mechanism the rest of `react-ui` uses.
+
+//
+// Context
+//
+
+type CarouselContextValue = {
+  index: number;
+  count: number;
+  setIndex: (index: number) => void;
+  next: () => void;
+  prev: () => void;
+};
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+/** Returns the current carousel state. Must be used within {@link Carousel.Root}. */
+export const useCarousel = (): CarouselContextValue => {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarousel must be used within Carousel.Root');
+  }
+  return context;
+};
+
+//
+// Root
+//
+
+export type CarouselRootProps = ThemedClassName<
+  PropsWithChildren<{
+    /** Total number of slides; drives auto-advance and indicator counts. */
+    count: number;
+    /** Whether to auto-advance slides on mount. Defaults to `false`. */
+    autorun?: boolean;
+    /** Auto-advance interval in milliseconds. Set 0 to disable. */
+    intervalMs?: number;
+    defaultIndex?: number;
+  }>
+>;
+
+const CarouselRoot = ({
+  classNames,
+  children,
+  count,
+  autorun = false,
+  intervalMs = 5_000,
+  defaultIndex = 0,
+}: CarouselRootProps) => {
+  const [index, setIndexState] = useState(defaultIndex);
+  const [autoAdvance, setAutoAdvance] = useState(autorun);
+
+  // Reset to first slide if the slide count shrinks below the current index.
+  useEffect(() => {
+    if (index >= count) {
+      setIndexState(0);
+    }
+  }, [count, index]);
+
+  // Auto-advance — stops permanently once the user interacts with any control.
+  useEffect(() => {
+    if (!autoAdvance || count <= 1 || intervalMs <= 0) {
+      return;
+    }
+    const handle = setInterval(() => setIndexState((i) => (i + 1) % count), intervalMs);
+    return () => clearInterval(handle);
+  }, [autoAdvance, count, intervalMs]);
+
+  const setIndex = useCallback((next: number) => {
+    setAutoAdvance(false);
+    setIndexState(next);
+  }, []);
+  const next = useCallback(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i + 1) % count);
+  }, [count]);
+  const prev = useCallback(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i - 1 + count) % count);
+  }, [count]);
+
+  const value = useMemo(() => ({ index, count, setIndex, next, prev }), [index, count, setIndex, next, prev]);
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <CarouselContext.Provider value={value}>
+      {/*
+       * Rows are `[1fr, auto]`: row 1 (Previous|Viewport|Next) stretches when the parent
+       * gives the carousel a definite height, and row 2 (Indicators / Caption) sticks to
+       * its content height. With no parent height constraint, the `1fr` row simply tracks
+       * row-1 content — preserving the existing aspect-video behaviour for unbounded use.
+       */}
+      {/* TODO(burdon): Move to ui-theme. */}
+      <div
+        className={mx(
+          'w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center',
+          classNames,
+        )}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+};
+
+CarouselRoot.displayName = 'Carousel.Root';
+
+//
+// Viewport
+//
+
+export type CarouselViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+
+const CarouselViewport = ({ children, classNames }: CarouselViewportProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next, prev } = useCarousel();
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (count <= 1) {
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        prev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        next();
+      }
+    },
+    [count, next, prev],
+  );
+
+  return (
+    <div
+      // TODO(burdon): Move to ui-theme.
+      className={mx(
+        'relative w-full aspect-video overflow-hidden',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+        classNames,
+      )}
+      tabIndex={0}
+      role='region'
+      aria-roledescription='carousel'
+      aria-label={t('carousel-viewport.label')}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </div>
+  );
+};
+
+CarouselViewport.displayName = 'Carousel.Viewport';
+
+//
+// Slide
+//
+
+export type CarouselSlideProps = ThemedClassName<
+  PropsWithChildren<{
+    index: number;
+  }>
+>;
+
+const CarouselSlide = ({ children, index, classNames }: CarouselSlideProps) => {
+  const { index: active } = useCarousel();
+  if (active !== index) {
+    return null;
+  }
+
+  // TODO(burdon): Move to ui-theme.
+  return <div className={mx('absolute inset-0 w-full h-full bg-baseSurface', classNames)}>{children}</div>;
+};
+
+CarouselSlide.displayName = 'Carousel.Slide';
+
+//
+// Previous / Next
+//
+
+export type CarouselButtonProps = ThemedClassName<{}>;
+
+const CarouselPrevious = ({ classNames }: CarouselButtonProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, prev } = useCarousel();
+  if (count <= 1) {
+    return <div />;
+  }
+
+  return (
+    <IconButton
+      classNames={classNames}
+      square
+      variant='ghost'
+      icon='ph--caret-left--regular'
+      iconOnly
+      label={t('carousel-prev.label')}
+      onClick={prev}
+    />
+  );
+};
+
+CarouselPrevious.displayName = 'Carousel.Previous';
+
+const CarouselNext = ({ classNames }: CarouselButtonProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next } = useCarousel();
+  if (count <= 1) {
+    return <div />;
+  }
+
+  return (
+    <IconButton
+      classNames={classNames}
+      square
+      variant='ghost'
+      icon='ph--caret-right--regular'
+      iconOnly
+      label={t('carousel-next.label')}
+      onClick={next}
+    />
+  );
+};
+
+CarouselNext.displayName = 'Carousel.Next';
+
+//
+// Indicators
+//
+
+export type CarouselIndicatorsProps = ThemedClassName<{}>;
+
+/** Tab-strip of slide indicators. Sits in the centre column so it matches the viewport's width. */
+const CarouselIndicators = ({ classNames }: CarouselIndicatorsProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, index, setIndex } = useCarousel();
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true });
+  if (count <= 1) {
+    return null;
+  }
+
+  return (
+    // TODO(burdon): Move to ui-theme.
+    <div className='col-start-2'>
+      <div
+        {...arrowNavigationAttrs}
+        className={mx('flex items-center justify-center', classNames)}
+        role='tablist'
+        aria-label={t('carousel-indicators.label')}
+      >
+        {Array.from({ length: count }).map((_, i) => (
+          <IconButton
+            key={i}
+            role='tab'
+            aria-selected={i === index}
+            // TODO(burdon): Move to ui-theme.
+            classNames={i === index ? 'text-primary-500' : 'text-description'}
+            icon={i === index ? 'ph--circle--fill' : 'ph--circle--regular'}
+            iconOnly
+            label={t('carousel-go-to.label', { index: i + 1 })}
+            onClick={() => setIndex(i)}
+            onFocus={() => setIndex(i)}
+            size={3}
+            variant='ghost'
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+CarouselIndicators.displayName = 'Carousel.Indicators';
+
+//
+// Caption
+//
+
+export type CarouselCaptionProps = ThemedClassName<{
+  /** Render prop receiving the active slide index. */
+  children: (index: number) => ReactNode;
+}>;
+
+/** Caption sized to the viewport's column. */
+const CarouselCaption = ({ children, classNames }: CarouselCaptionProps) => {
+  const { index } = useCarousel();
+  const content = children(index);
+  if (content == null || content === false || content === '') {
+    return null;
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    <div className='col-start-2'>
+      <p className={mx('text-center text-description', classNames)}>{content}</p>
+    </div>
+  );
+};
+
+CarouselCaption.displayName = 'Carousel.Caption';
+
+//
+// Carousel
+//
+
+export const Carousel = {
+  Root: CarouselRoot,
+  Viewport: CarouselViewport,
+  Slide: CarouselSlide,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+  Indicators: CarouselIndicators,
+  Caption: CarouselCaption,
+};

package/src/components/Carousel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Carousel';

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/Dialog/Dialog.stories.tsx

@@ -24,7 +24,7 @@ type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
 
 /**
  * Standard Dialog with non-scrolling content in Dialog.Body.
- * Dialog.Body delegates to Column.Content, which applies gutter padding via `px-[var(--gutter)]`.
+ * Dialog.Body propagates the Column grid via subgrid. Children auto-center via --dx-col.
  */
 const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
   return (
@@ -62,7 +62,7 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
 
 /**
  * Dialog with a ScrollArea child inside Dialog.Body.
- * The ScrollArea breaks out of Body's gutter padding via `--gutter-offset`
+ * The ScrollArea breaks out of Body's gutter padding via `--gutter`
  * and applies its own asymmetric padding (accounting for scrollbar width).
  */
 const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {