@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/Carousel/Carousel.tsx

@@ -5,11 +5,16 @@
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { createContext } from '@radix-ui/react-context';
 import React, {
+  Children,
   type KeyboardEvent,
   type PropsWithChildren,
   type ReactNode,
+  type TransitionEvent,
+  cloneElement,
+  isValidElement,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
@@ -19,18 +24,33 @@ import { useTranslation } from '../../primitives';
 import { translationKey } from '../../translations';
 import { type ThemedClassName, composable, composableProps } from '../../util';
 import { IconButton } from '../Button';
-import { MediaPlayer, type MediaKind } from '../MediaPlayer';
+import { type MediaKind, MediaPlayer } from '../MediaPlayer';
 
-// 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.
+// TODO(burdon): Controller.
 
 //
 // Context
 //
 
+/** Slide change behaviour: `none` hard-swaps the active slide, `slide` animates a horizontal track. */
+export type CarouselTransition = 'none' | 'slide';
+
 type CarouselContextValue = {
   index: number;
   count: number;
+  transition: CarouselTransition;
+  /** When `transition === 'slide'`, wrap-around advances continue in the same direction (clone + snap). */
+  continuous: boolean;
+  /**
+   * Track position in slide units. Equals `index` except mid-wrap, when it points at a clone cell
+   * (`count` = trailing clone of the first slide, `-1` = leading clone of the last) so the track keeps
+   * moving in the travel direction. Settled back to the real index once the transition ends.
+   */
+  offset: number;
+  /** Whether the track transform should animate; disabled for the instantaneous post-wrap snap. */
+  animate: boolean;
+  /** Snap a clone cell back to its real slide once the wrap transition completes. */
+  settle: () => void;
   setIndex: (index: number) => void;
   next: () => void;
   prev: () => void;
@@ -50,58 +70,120 @@ export const useCarousel = (): CarouselContextValue => useCarouselContext('useCa
 export type CarouselRootProps = 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;
+  /**
+   * Auto-advance interval in milliseconds. A positive value advances slides on its own until the user
+   * interacts with a control; omit (or `0`) to disable.
+   */
+  autoAdvance?: number;
   defaultIndex?: number;
+  /** Slide change behaviour. Defaults to `none` (hard swap); `slide` animates a horizontal track. */
+  transition?: CarouselTransition;
+  /**
+   * Wrap-around in the same travel direction (last → first slides forward, first → last slides back).
+   * Only applies when `transition === 'slide'`; otherwise wrap is an instant index change.
+   */
+  continuous?: boolean;
 }>;
 
 const CarouselRoot = ({
   children,
   count,
-  autorun = false,
-  intervalMs = 5_000,
+  autoAdvance = 0,
   defaultIndex = 0,
+  transition = 'none',
+  continuous = false,
 }: CarouselRootProps) => {
   const [index, setIndexState] = useState(defaultIndex);
-  const [autoAdvance, setAutoAdvance] = useState(autorun);
+  const [offset, setOffset] = useState(defaultIndex);
+  const [animate, setAnimate] = useState(true);
+  const [autoEnabled, setAutoEnabled] = useState(autoAdvance > 0);
+
+  // Continuous wrap is only meaningful for the animated track with more than one slide.
+  const wraps = continuous && transition === 'slide' && count > 1;
+
+  // Latest index without re-creating the advance/auto-advance callbacks on every change.
+  const indexRef = useRef(index);
+  useEffect(() => {
+    indexRef.current = index;
+  }, [index]);
 
   // Reset to first slide if the slide count shrinks below the current index.
   useEffect(() => {
     if (index >= count) {
       setIndexState(0);
+      setOffset(0);
     }
   }, [count, index]);
 
+  // Step one slide in `delta` direction. `stopAuto` halts auto-advance on user interaction. In wrap
+  // mode an edge step targets a clone cell (offset `count` / `-1`) so the track travels in `delta`'s
+  // direction; `settle` snaps it back to the real index after the transition.
+  const advance = useCallback(
+    (delta: 1 | -1, stopAuto: boolean) => {
+      if (stopAuto) {
+        setAutoEnabled(false);
+      }
+      const current = indexRef.current;
+      const nextIndex = (current + delta + count) % count;
+      setAnimate(true);
+      if (wraps && delta === 1 && current === count - 1) {
+        setOffset(count);
+      } else if (wraps && delta === -1 && current === 0) {
+        setOffset(-1);
+      } else {
+        setOffset(nextIndex);
+      }
+      setIndexState(nextIndex);
+    },
+    [count, wraps],
+  );
+
   // Auto-advance — stops permanently once the user interacts with any control.
   useEffect(() => {
-    if (!autoAdvance || count <= 1 || intervalMs <= 0) {
+    if (!autoEnabled || count <= 1 || autoAdvance <= 0) {
       return;
     }
-    const handle = setInterval(() => setIndexState((i) => (i + 1) % count), intervalMs);
+    const handle = setInterval(() => advance(1, false), autoAdvance);
     return () => clearInterval(handle);
-  }, [autoAdvance, count, intervalMs]);
+  }, [autoEnabled, count, autoAdvance, advance]);
 
   const setIndex = useCallback((next: number) => {
-    setAutoAdvance(false);
+    setAutoEnabled(false);
+    setAnimate(true);
+    setOffset(next);
     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 next = useCallback(() => advance(1, true), [advance]);
+  const prev = useCallback(() => advance(-1, true), [advance]);
+
+  // Once the wrap transition lands on a clone, jump (without animating) to the matching real slide.
+  const settle = useCallback(() => {
+    if (offset === count) {
+      setAnimate(false);
+      setOffset(0);
+    } else if (offset === -1) {
+      setAnimate(false);
+      setOffset(count - 1);
+    }
+  }, [offset, count]);
 
   if (count === 0) {
     return null;
   }
 
   return (
-    <CarouselProvider index={index} count={count} setIndex={setIndex} next={next} prev={prev}>
+    <CarouselProvider
+      index={index}
+      count={count}
+      transition={transition}
+      continuous={wraps}
+      offset={offset}
+      animate={animate}
+      settle={settle}
+      setIndex={setIndex}
+      next={next}
+      prev={prev}
+    >
       {children}
     </CarouselProvider>
   );
@@ -115,7 +197,6 @@ CarouselRoot.displayName = 'Carousel.Root';
 
 export type CarouselContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
-// `composable` so a parent `<… asChild>` (Slot) is respected — the injected className/ref land on the grid.
 const CarouselContent = composable<HTMLDivElement>(({ children, ...props }, forwardedRef) => (
   // 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
@@ -143,7 +224,8 @@ export type CarouselViewportProps = ThemedClassName<PropsWithChildren<{}>>;
 
 const CarouselViewport = ({ children, classNames }: CarouselViewportProps) => {
   const { t } = useTranslation(translationKey);
-  const { count, next, prev } = useCarousel();
+  const { count, transition, continuous, offset, animate, settle, next, prev } = useCarousel();
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       if (count <= 1) {
@@ -160,6 +242,31 @@ const CarouselViewport = ({ children, classNames }: CarouselViewportProps) => {
     [count, next, prev],
   );
 
+  // In continuous mode bracket the track with clones — last before first, first after last — so a wrap
+  // step has a real cell to slide into before `settle` snaps back to the matching slide.
+  const slides = Children.toArray(children);
+  const first = slides[0];
+  const last = slides[slides.length - 1];
+  const trackChildren =
+    continuous && slides.length > 1
+      ? [
+          isValidElement(last) ? cloneElement(last, { key: 'clone-last' }) : last,
+          ...slides,
+          isValidElement(first) ? cloneElement(first, { key: 'clone-first' }) : first,
+        ]
+      : slides;
+  // Leading clone occupies the first cell in continuous mode, so shift the translate by one.
+  const translate = continuous ? -(offset + 1) * 100 : -offset * 100;
+
+  const handleTransitionEnd = useCallback(
+    (event: TransitionEvent<HTMLDivElement>) => {
+      if (event.target === event.currentTarget && event.propertyName === 'transform') {
+        settle();
+      }
+    },
+    [settle],
+  );
+
   return (
     <div
       // TODO(burdon): Move to ui-theme.
@@ -174,7 +281,24 @@ const CarouselViewport = ({ children, classNames }: CarouselViewportProps) => {
       aria-label={t('carousel-viewport.label')}
       onKeyDown={handleKeyDown}
     >
-      {children}
+      {transition === 'slide' ? (
+        // Lay slides side-by-side in a flex track and translate by the active index. Each slide
+        // sizes itself to the viewport via `shrink-0 basis-full` (see `Carousel.Slide`).
+        // `motion-reduce` respects the user's reduced-motion preference; the snap after a wrap also
+        // disables the transition (`animate === false`).
+        <div
+          className={mx(
+            'flex h-full motion-reduce:transition-none',
+            animate ? 'transition-transform duration-300 ease-out' : 'transition-none',
+          )}
+          style={{ transform: `translateX(${translate}%)` }}
+          onTransitionEnd={handleTransitionEnd}
+        >
+          {trackChildren}
+        </div>
+      ) : (
+        children
+      )}
     </div>
   );
 };
@@ -212,20 +336,30 @@ const CarouselSlide = ({
   muted,
   crossOrigin,
 }: CarouselSlideProps) => {
-  const { index: active } = useCarousel();
-  if (active !== index) {
+  const { index: active, transition } = useCarousel();
+  // In `slide` mode every slide stays mounted as a fixed-width track cell so the track can animate;
+  // in `none` mode only the active slide mounts, overlaid via absolute positioning.
+  if (transition !== 'slide' && active !== index) {
     return null;
   }
 
   return (
-    <div className={mx('absolute inset-0 w-full h-full bg-baseSurface', classNames)}>
+    <div
+      className={mx(
+        transition === 'slide'
+          ? 'relative shrink-0 basis-full h-full bg-baseSurface'
+          : 'absolute inset-0 w-full h-full bg-baseSurface',
+        classNames,
+      )}
+    >
       <MediaPlayer
         src={src}
         kind={kind}
         alt={alt}
         classNames='w-full h-full'
         controls={controls}
-        autoPlay={autoPlay}
+        // In `slide` mode every slide is mounted; only auto-play the active one to avoid off-screen playback.
+        autoPlay={autoPlay && active === index}
         loop={loop}
         muted={muted}
         crossOrigin={crossOrigin}
@@ -314,14 +448,16 @@ const CarouselIndicators = ({ classNames }: CarouselIndicatorsProps) => {
             key={i}
             role='tab'
             aria-selected={i === index}
-            classNames={i === index ? 'text-primary-500' : 'text-description'}
+            classNames={mx(i === index ? 'text-primary-500' : 'text-description')}
+            variant='ghost'
+            density='sm'
+            size={3}
+            square
             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>

package/src/components/Column/Column.theme.ts

@@ -9,20 +9,47 @@ import { withColumn } from './withColumn';
 
 export type ColumnStyleProps = {};
 
+export type ColumnBlockStyleProps = {
+  /** Trailing gutter (column 3) instead of the default leading gutter (column 1). */
+  end?: boolean;
+  compact?: boolean;
+  /** Constrain to a square (1:1) slot rather than the default rail-item width. */
+  square?: boolean;
+};
+
 const root: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
   return mx('dx-column-root grid', ...etc);
 };
 
 /**
- * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
- * Uses CSS subgrid to inherit column sizing from the parent Column.
- * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * Three-column subgrid row spanning all 3 columns of the parent Column.Root grid.
+ * Placement is explicit, not source-order based:
+ * - `Column.Block` self-places into column 1 (leading) or column 3 (trailing, `end`) and
+ *   carries the `dx-gutter` marker class.
+ * - Every other (content) child is placed in column 2 via `[&>*:not(.dx-gutter)]`.
+ * Class-based placement (rather than `[data-slot=…]`) is used because Tailwind does not
+ * generate arbitrary variants that nest a square-bracket attribute selector.
+ * Robust to conditional children: a falsy leading slot never shifts content into a gutter.
  * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
  */
 const row: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
+  return mx('col-span-3 grid grid-cols-subgrid', '[&>*:not(.dx-gutter)]:col-start-2', ...etc);
 };
 
+/**
+ * Gutter slot geometry: a `--dx-rail-item` square that centers its child, so a passive
+ * `<Icon>` and an interactive `IconButton` line up to the pixel. Self-places into column 1
+ * (default) or column 3 (`end`); the `dx-gutter` marker keeps it out of the content track.
+ */
+const block: ComponentFunction<ColumnBlockStyleProps> = ({ end, compact, square }, ...etc) =>
+  mx(
+    'dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]',
+    end ? 'col-start-3' : 'col-start-1',
+    square ? 'aspect-square' : 'w-[var(--dx-rail-item)]',
+    compact ? '' : 'h-[var(--dx-rail-item)]',
+    ...etc,
+  );
+
 /**
  * Bleed placement: spans all 3 columns of the parent Column.Root grid (gutter-to-gutter).
  * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore gutters.
@@ -43,6 +70,7 @@ const center: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
 export const columnTheme = {
   root,
   row,
+  block,
   bleed,
   center,
 };

package/src/components/Column/Column.tsx

@@ -17,10 +17,9 @@ import { composableProps, slottable } from '../../util';
 
 const COLUMN_ROOT_NAME = 'Column.Root';
 
-type GutterSize = 'xs' | 'sm' | 'md' | 'lg';
+type GutterSize = 'sm' | 'md' | 'lg';
 
 const gutterSizes: Record<GutterSize, string> = {
-  xs: 'var(--dx-gutter-xs)',
   sm: 'var(--dx-gutter-sm)',
   md: 'var(--dx-gutter-md)',
   lg: 'var(--dx-gutter-lg)',
@@ -42,11 +41,9 @@ type ColumnRootProps = { gutter?: GutterSize };
  * - **Column.Row** — 3-col subgrid row (icons in gutters, content in center).
  *
  * Use `withColumn.center()` / `withColumn.bleed()` helpers to apply placement on slotted elements.
- *
- * Gutter sizes: `'sm'` for compact layouts (Dialog); `'md'` (default); `'lg'` for wider spacing.
  */
 const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
-  ({ children, asChild, role, gutter = 'md', ...props }, forwardedRef) => {
+  ({ children, asChild, role, gutter = 'lg', ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
     const { tx } = useThemeContext();
@@ -60,7 +57,7 @@ const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
             ...rest.style,
             '--gutter': gutterSize,
             '--dx-col': '2 / span 1',
-            gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
+            'gridTemplateColumns': [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
           } as CSSProperties
         }
         className={tx('column.root', { gutter }, className)}
@@ -152,6 +149,40 @@ const ColumnCenter = slottable<HTMLDivElement>(({ children, asChild, ...props },
 
 ColumnCenter.displayName = COLUMN_CENTER_NAME;
 
+//
+// Block
+//
+
+const COLUMN_BLOCK_NAME = 'Column.Block';
+
+type ColumnBlockProps = SlottableProps<{ end?: boolean; compact?: boolean; square?: boolean }>;
+
+/**
+ * A gutter slot inside a Column.Row. Sized to `--dx-rail-item` and centers its child so a passive
+ * `<Icon>` and an interactive `IconButton` align to the pixel. `end` opts into the trailing gutter
+ * (column 3); default is the leading gutter (column 1). Placement is via `data-slot`, so it is
+ * robust to conditional rendering and source order.
+ */
+const ColumnBlock = slottable<HTMLDivElement, ColumnBlockProps>(
+  ({ children, asChild, end, compact, square, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    return (
+      <Comp
+        {...rest}
+        data-slot={end ? 'end' : 'start'}
+        className={tx('column.block', { end, compact, square }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColumnBlock.displayName = COLUMN_BLOCK_NAME;
+
 //
 // Column
 //
@@ -159,8 +190,9 @@ ColumnCenter.displayName = COLUMN_CENTER_NAME;
 export const Column = {
   Root: ColumnRoot,
   Row: ColumnRow,
+  Block: ColumnBlock,
   Bleed: ColumnBleed,
   Center: ColumnCenter,
 };
 
-export type { ColumnRootProps, ColumnRowProps, ColumnBleedProps, ColumnCenterProps };
+export type { ColumnBleedProps, ColumnBlockProps, ColumnCenterProps, ColumnRootProps, ColumnRowProps };

package/src/components/Dialog/AlertDialog.stories.tsx

@@ -11,7 +11,7 @@ import { withTheme } from '../../testing';
 import { Button } from '../Button';
 import { AlertDialog } from './AlertDialog';
 
-type DefaultStoryProps = Partial<{
+type StoryArgs = Partial<{
   title: string;
   description: string;
   openTrigger: string;
@@ -19,7 +19,7 @@ type DefaultStoryProps = Partial<{
   actionTrigger: string;
 }>;
 
-const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: StoryArgs) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>

package/src/components/Dialog/AlertDialog.tsx

@@ -13,10 +13,10 @@ import { type ThemedClassName } from '../../util';
 import { Column } from '../Column';
 import {
   Dialog,
-  type DialogHeaderProps,
-  type DialogBodyProps,
   type DialogActionBarProps,
   type DialogActionIconButtonProps,
+  type DialogBodyProps,
+  type DialogHeaderProps,
 } from './Dialog';
 
 //
@@ -122,7 +122,7 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
       className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
       ref={forwardedRef}
     >
-      <Column.Root classNames='dx-expander' gutter='sm'>
+      <Column.Root classNames='dx-expander' gutter='lg'>
         {children}
       </Column.Root>
     </AlertDialogPrimitive.Content>
@@ -192,18 +192,18 @@ export const AlertDialog = {
 };
 
 export type {
-  AlertDialogRootProps,
-  AlertDialogTriggerProps,
-  AlertDialogPortalProps,
-  AlertDialogOverlayProps,
+  DialogActionBarProps as AlertDialogActionBarProps,
+  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
+  AlertDialogActionProps,
+  DialogBodyProps as AlertDialogBodyProps,
+  AlertDialogCancelProps,
   AlertDialogContentProps,
-  AlertDialogTitleProps,
   AlertDialogDescriptionProps,
-  AlertDialogCancelProps,
-  AlertDialogActionProps,
   // Re-export shared types.
   DialogHeaderProps as AlertDialogHeaderProps,
-  DialogBodyProps as AlertDialogBodyProps,
-  DialogActionBarProps as AlertDialogActionBarProps,
-  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
+  AlertDialogOverlayProps,
+  AlertDialogPortalProps,
+  AlertDialogRootProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
 };

package/src/components/Dialog/Dialog.stories.tsx

@@ -13,7 +13,7 @@ import { Input } from '../Input';
 import { ScrollArea } from '../ScrollArea';
 import { Dialog, type DialogContentProps } from './Dialog';
 
-type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
+type StoryArgs = Pick<DialogContentProps, 'size'> &
   Partial<{
     title: string;
     description: string;
@@ -26,7 +26,7 @@ type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
  * Standard Dialog with non-scrolling content in Dialog.Body.
  * Dialog.Body propagates the Column grid via subgrid. Children auto-center via --dx-col.
  */
-const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryArgs) => {
   return (
     <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>
@@ -45,7 +45,6 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
           <Dialog.Body>
             <Dialog.Description>{description}</Dialog.Description>
             <Input.Root>
-              <Input.Label>Value</Input.Label>
               <Input.TextInput placeholder='Enter value' />
             </Input.Root>
           </Dialog.Body>
@@ -65,7 +64,7 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
  * 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) => {
+const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryArgs) => {
   return (
     <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>

package/src/components/Dialog/Dialog.theme.ts

@@ -39,7 +39,7 @@ const header: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
   mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
 
 const body: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
+  mx('dx-dialog__body dx-expander gap-y-2', withColumn.propagate(), ...etc);
 
 const actionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
   mx('dx-dialog__actionbar flex items-center pt-4 gap-2', withColumn.center(), ...etc);

package/src/components/Dialog/Dialog.tsx

@@ -107,7 +107,7 @@ type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPri
 };
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, size = 'md', inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  ({ classNames, children, size = 'sm', inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
@@ -127,7 +127,7 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
         )}
         ref={forwardedRef}
       >
-        <Column.Root classNames='dx-expander' gutter='sm'>
+        <Column.Root classNames='dx-expander' gutter='lg'>
           {children}
         </Column.Root>
       </DialogPrimitive.Content>
@@ -298,17 +298,17 @@ export const Dialog = {
 };
 
 export type {
-  DialogRootProps,
-  DialogTriggerProps,
-  DialogPortalProps,
-  DialogOverlayProps,
-  DialogContentProps,
-  DialogHeaderProps,
-  DialogBodyProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
   DialogActionBarProps,
-  DialogCloseProps,
   DialogActionIconButtonAction,
   DialogActionIconButtonProps,
+  DialogBodyProps,
+  DialogCloseProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogHeaderProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogRootProps,
+  DialogTitleProps,
+  DialogTriggerProps,
 };

package/src/components/Icon/Icon.stories.tsx

@@ -75,6 +75,29 @@ export const Static: Story = {
   },
 };
 
+export const Custom_DXOS: Story = {
+  args: {
+    icon: 'dx--dxos--regular',
+    classNames: getSize(16),
+  },
+};
+
+/**
+ * Custom DXOS brand icons (the `dx--` set), sourced from `@dxos/brand` SVGs.
+ */
+export const Brand: Story = {
+  args: {
+    icon: 'dx--dxos--regular',
+  },
+  render: () => (
+    <div className='flex gap-8'>
+      {(['dxos', 'echo', 'halo', 'mesh', 'dxns', 'kube'] as const).map((name) => (
+        <Icon key={name} icon={`dx--${name}--regular`} classNames={getSize(12)} />
+      ))}
+    </div>
+  ),
+};
+
 export const Dynamic: Story = {
   args: {
     icon: 'ph--github-logo--regular',

package/src/components/Icon/Icon.theme.ts

@@ -33,7 +33,7 @@ const root: ComponentFunction<IconStyleProps> = ({ size }, etc) => {
  */
 const block: ComponentFunction<IconBlockStyleProps> = ({ compact, square }, ...etc) =>
   mx(
-    'grid place-items-center [&>img]:max-w-[1.5rem]',
+    'grid place-items-center shrink-0 [&>img]:max-w-[1.5rem]',
     square ? 'aspect-square' : 'w-[var(--dx-rail-item)]',
     compact ? '' : 'h-[var(--dx-rail-item)]',
     ...etc,