@dxos/react-ui 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/src/components/Carousel/Carousel.stories.tsx

@@ -5,37 +5,49 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Carousel } from './Carousel';
+import { withLayout, withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { Carousel, type CarouselTransition } from './Carousel';
 
 // Stable placeholder images so the story renders without network fixtures.
 const IMAGES = Array.from({ length: 5 }).map((_, index) => `https://placehold.co/640x360?text=Slide+${index + 1}`);
 
-type DefaultStoryProps = { count?: number };
+type StoryArgs = {
+  count?: number;
+  transition?: CarouselTransition;
+  continuous?: boolean;
+  autoAdvance?: number;
+};
 
-const DefaultStory = ({ count = IMAGES.length }: DefaultStoryProps) => {
+const DefaultStory = ({ count = IMAGES.length, transition, continuous, autoAdvance }: StoryArgs) => {
   const images = IMAGES.slice(0, count);
   return (
-    <Carousel.Root count={images.length}>
-      <Carousel.Content classNames='max-w-[40rem]'>
-        <Carousel.Previous />
-        <Carousel.Viewport>
-          {images.map((src, index) => (
-            <Carousel.Slide key={src} index={index} src={src} alt={`Slide ${index + 1}`} />
-          ))}
-        </Carousel.Viewport>
-        <Carousel.Next />
-        <Carousel.Indicators />
-        <Carousel.Caption>{(index) => `Slide ${index + 1} of ${images.length}`}</Carousel.Caption>
-      </Carousel.Content>
-    </Carousel.Root>
+    <div className='h-full flex items-center'>
+      <Carousel.Root count={images.length} transition={transition} continuous={continuous} autoAdvance={autoAdvance}>
+        <Carousel.Content>
+          <Carousel.Previous />
+          <Carousel.Viewport>
+            {images.map((src, index) => (
+              <Carousel.Slide key={src} index={index} src={src} alt={`Slide ${index + 1}`} />
+            ))}
+          </Carousel.Viewport>
+          <Carousel.Next />
+          <Carousel.Indicators />
+          <Carousel.Caption>{(index) => `Slide ${index + 1} of ${images.length}`}</Carousel.Caption>
+        </Carousel.Content>
+      </Carousel.Root>
+    </div>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-core/components/Carousel',
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -45,3 +57,15 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: { count: 5 },
 };
+
+export const Sliding: Story = {
+  args: { count: 5, transition: 'slide' },
+};
+
+export const Continuous: Story = {
+  args: { count: 5, transition: 'slide', continuous: true },
+};
+
+export const AutoAdvancing: Story = {
+  args: { count: 5, transition: 'slide', continuous: true, autoAdvance: 5_000 },
+};

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.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)}
@@ -198,4 +195,4 @@ export const Column = {
   Center: ColumnCenter,
 };
 
-export type { ColumnRootProps, ColumnRowProps, ColumnBlockProps, 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,