@dxos/react-ui 0.10.0 → 0.11.0

package/src/components/Card/Card.theme.ts

@@ -5,6 +5,8 @@
 import { mx } from '@dxos/ui-theme';
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
+import { withColumn } from '../Column/withColumn';
+
 export type CardStyleProps = {
   border?: boolean;
   fullWidth?: boolean;
@@ -12,29 +14,27 @@ export type CardStyleProps = {
   variant?: 'default' | 'subtitle' | 'description';
   density?: Density;
   truncate?: boolean;
-  padding?: boolean;
 };
 
+const subgrid = 'col-span-3 grid grid-cols-subgrid gap-1 items-center';
+
 const root: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
   mx(
-    'dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
-    border && 'border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator',
+    'dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) p-1 gap-1',
+    'group/card relative shrink-0 overflow-hidden',
+    border && 'border-2 border-separator rounded-md dx-focus-ring-group-y-indicator',
     fullWidth && 'max-w-none!',
     ...etc,
   );
 
 const header: ComponentFunction<CardStyleProps> = (_, ...etc) =>
-  mx(
-    'dx-card__header col-span-3 grid grid-cols-subgrid items-center',
-    '[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2',
-    ...etc,
-  );
+  mx('dx-card__header', subgrid, withColumn.placeContent(), ...etc);
 
-const title: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
+const title: ComponentFunction<CardStyleProps> = (_, ...etc) => mx('dx-card__title grow truncate', ...etc);
 
-const body: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__body contents', ...etc);
+const body: ComponentFunction<CardStyleProps> = (_, ...etc) => mx('dx-card__body contents', ...etc);
 
-const block: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__block', ...etc);
+const block: ComponentFunction<CardStyleProps> = (_, ...etc) => mx('dx-card__block', ...etc);
 
 const text: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
   mx(
@@ -47,65 +47,75 @@ const text: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate
 const textSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate }, ...etc) =>
   mx(variant === 'description' && 'text-sm text-description line-clamp-3', truncate && 'truncate', ...etc);
 
-const poster: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+const poster: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx('dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none', ...etc);
 
-const posterIcon: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+const posterIcon: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx('dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]', ...etc);
 
-const action: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+const action: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx(
-    'dx-card__action col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 p-0! gap-0! w-full text-start overflow-hidden',
+    mx('dx-card__action', subgrid, withColumn.placeContent(), 'p-0! gap-0! w-full text-start overflow-hidden'),
     ...etc,
   );
 
-const actionLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+const actionLabel: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx('dx-card__action-label min-w-0 flex-1 truncate', ...etc);
 
-const link: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx(
-    'dx-card__link col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 group p-0! dx-button dx-focus-ring min-h-1!',
-    ...etc,
-  );
+// Holds the label and its annotation in one grid cell: `action` puts every child in column 2, so
+// siblings would otherwise stack onto separate rows.
+const actionContent: ComponentFunction<CardStyleProps> = (_, ...etc) =>
+  mx('dx-card__action-content min-w-0 flex-1 flex items-baseline gap-2 overflow-hidden', ...etc);
+
+// Never shrinks: the label truncates around it, so a long subject cannot squeeze the annotation out.
+const actionAnnotation: ComponentFunction<CardStyleProps> = (_, ...etc) =>
+  mx('dx-card__action-annotation shrink-0 text-xs text-description tabular-nums', ...etc);
+
+const link: ComponentFunction<CardStyleProps> = (_, ...etc) =>
+  mx(mx('dx-card__link', subgrid, withColumn.placeContent(), 'group p-0! dx-button dx-focus-ring min-h-1!'), ...etc);
 
-const linkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+const linkLabel: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx('dx-card__link-label min-w-0 flex-1 truncate text-sm!', ...etc);
 
 const row: ComponentFunction<CardStyleProps> = ({ fullWidth }, ...etc) =>
   mx(
-    'dx-card__row overflow-hidden',
+    // No `overflow-hidden`: focus rings are drawn outside the border box (`.dx-input` uses
+    // `ring-offset`), so clipping here severs the ring of any focusable control in the row —
+    // `Column.Row` carries the same note. Children that need to clip do it themselves (`truncate`).
+    'dx-card__row',
     fullWidth
       ? 'col-span-full'
       : // The `>*` selector reaches the real grid item when a content child is `display: contents`
         // (e.g. `dx-avatar`), which the direct-child selector cannot target. It is inert for normal
         // block children, whose inner nodes are not grid items of this row.
-        'col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2',
+        mx(subgrid, withColumn.placeContent()),
     ...etc,
   );
 
 // NOTE: Direct children that lack an explicit `col-*` utility default to the
 // Column.Root center track (via `--dx-col`); see `ui-theme`'s `css/components/card.css`.
-const section: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__section col-span-full grid grid-cols-subgrid', ...etc);
+const section: ComponentFunction<CardStyleProps> = (_, ...etc) => mx('dx-card__section', subgrid, ...etc);
 
-const sectionTitle: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+const sectionTitle: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx('dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase', ...etc);
 
 export const cardTheme: Theme<CardStyleProps> = {
-  root,
-  header,
-  title,
-  body,
-  block,
-  row,
-  section,
+  'root': root,
+  'header': header,
+  'title': title,
+  'body': body,
+  'block': block,
+  'row': row,
+  'section': section,
   'section-title': sectionTitle,
-  text,
+  'text': text,
   'text-span': textSpan,
-  poster,
+  'poster': poster,
   'poster-icon': posterIcon,
-  action,
+  'action': action,
   'action-label': actionLabel,
-  link,
+  'action-content': actionContent,
+  'action-annotation': actionAnnotation,
+  'link': link,
   'link-label': linkLabel,
 };

package/src/components/Card/Card.tsx

@@ -5,7 +5,16 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import DOMPurify from 'dompurify';
-import React, { CSSProperties, MouseEventHandler, type ReactNode, forwardRef, useId, useMemo } from 'react';
+import React, {
+  CSSProperties,
+  type KeyboardEventHandler,
+  MouseEventHandler,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { iconSize } from '@dxos/ui-theme';
@@ -17,7 +26,7 @@ import { useThemeContext } from '../../hooks';
 import { composable, composableProps, slottable } from '../../util';
 import { type ThemedClassName } from '../../util';
 import { Button, IconButton } from '../Button';
-import { Column } from '../Column';
+import { Column, type ColumnRootProps } from '../Column';
 import { Icon } from '../Icon';
 import { Image, type ImageProps } from '../Image';
 import { DropdownMenu } from '../Menu';
@@ -33,10 +42,22 @@ type CardRootProps = {
   'id'?: string;
   'border'?: boolean;
   'fullWidth'?: boolean;
+  /**
+   * Adopt the parent grid's columns (via `subgrid`) instead of defining the card's own gutters —
+   * used to align a nested card's rows to an outer 3-track grid. See `Column.Root`.
+   */
+  'subgrid'?: boolean;
+  /**
+   * Width of the card's leading/trailing gutter tracks. Defaults to `lg` (chrome-sized inset for
+   * headers and rows); a card whose whole body is a form should use `sm` so the fields inset like
+   * a standalone form rather than by the card's chrome.
+   */
+  'gutter'?: ColumnRootProps['gutter'];
   'density'?: Density;
   'style'?: CSSProperties;
   'tabIndex'?: number;
   'onClick'?: MouseEventHandler<HTMLDivElement>;
+  'onKeyDown'?: KeyboardEventHandler<HTMLDivElement>;
   'data-selected'?: boolean;
   'data-testid'?: string;
 };
@@ -45,7 +66,7 @@ type CardRootProps = {
  * `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`
+ * HTML attributes — `onClick`, `onKeyDown`, `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
@@ -53,14 +74,15 @@ type CardRootProps = {
  * `<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) => {
+  ({ children, id, role, border = true, fullWidth, subgrid, gutter = 'lg', density, ...props }, forwardedRef) => {
     const { className, ...rest } = composableProps(props);
     const { tx } = useThemeContext();
 
     return (
       <Column.Root
         asChild
-        gutter='lg'
+        gutter={gutter}
+        subgrid={subgrid}
         classNames={tx('card.root', { border, fullWidth }, className)}
         role={role ?? 'group'}
       >
@@ -186,11 +208,17 @@ type CardMenuProps<T extends any | void = void> = ToolbarMenuProps<T>;
 
 function CardMenu<T extends any | void = void>({ context, items }: CardMenuProps<T>) {
   const { t } = useTranslation(translationKey);
+  // A `Card.Root` with an `onClick` is a click target, and this menu sits inside it. React portals
+  // propagate through the React tree rather than the DOM, so without this both the trigger and the
+  // item selection reach the card's handler and activate it on the way past. Radix's `asChild`
+  // composes the trigger handler, so the menu still opens.
+  const stopPropagation = useCallback<MouseEventHandler>((event) => event.stopPropagation(), []);
   return (
     <CardBlock end>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger disabled={!items?.length} asChild>
           <IconButton
+            onClick={stopPropagation}
             iconOnly
             variant='ghost'
             icon='ph--dots-three-vertical--regular'
@@ -199,12 +227,13 @@ function CardMenu<T extends any | void = void>({ context, items }: CardMenuProps
         </DropdownMenu.Trigger>
         {(items?.length ?? 0) > 0 && (
           <DropdownMenu.Portal>
-            <DropdownMenu.Content>
+            <DropdownMenu.Content onClick={stopPropagation}>
               <DropdownMenu.Viewport>
-                {items?.map(({ label, onClick: onSelect }, index) => (
+                {items?.map(({ label, icon, onClick: onSelect }, index) => (
                   // `context` is the generic payload threaded to each handler; the cast is the
                   // generic boundary (T may be `void`, so `context` is typed `T | undefined`).
                   <DropdownMenu.Item key={index} onSelect={() => onSelect(context as T)}>
+                    {icon && <Icon icon={icon} />}
                     {label}
                   </DropdownMenu.Item>
                 ))}
@@ -226,7 +255,11 @@ CardMenu.displayName = CARD_MENU_NAME;
 
 const CARD_BLOCK_NAME = 'Card.Block';
 
-type CardBlockProps = SlottableProps<{ end?: boolean; compact?: boolean; square?: boolean }>;
+type CardBlockProps = SlottableProps<{
+  end?: boolean;
+  compact?: boolean;
+  square?: boolean;
+}>;
 
 /**
  * Leading (default) or trailing (`end`) gutter slot of a Card row/header. Sized to the
@@ -252,6 +285,12 @@ CardBlock.displayName = CARD_BLOCK_NAME;
 
 const CARD_TITLE_NAME = 'Card.Title';
 
+/**
+ * Card heading text. Carries no column placement of its own, so it must be a child of a subgrid
+ * part — `Card.Header` (the usual home), `Card.Row`, or `Card.Section` — which places it in the
+ * center content track. Placed directly under `Card.Root` (or a `display:contents` `Card.Body`) it
+ * auto-places into a gutter track and renders clamped/misaligned.
+ */
 const CardTitle = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props, { role: 'heading' });
@@ -370,6 +409,12 @@ CardRow.displayName = CARD_ROW_NAME;
 
 const CARD_TEXT_NAME = 'Card.Text';
 
+/**
+ * Body text within a Card. Carries no column placement of its own, so it must be a child of a subgrid
+ * part — `Card.Row` (the usual home), `Card.Header`, or `Card.Section` — which places it in the center
+ * content track. Placed directly under `Card.Root` (or a `display:contents` `Card.Body`) it auto-places
+ * into a gutter track and renders squeezed. Use `variant='description'` for muted secondary text.
+ */
 // `onClick` is opted in explicitly: `ComposableProps` deliberately excludes event handlers, but the
 // part spreads rest props onto its element, so the handler is forwarded at runtime.
 type CardTextProps = {
@@ -405,6 +450,12 @@ type CardHtmlProps = { html?: string; variant?: 'default' | 'description' };
 /**
  * Renders sanitized HTML content inside a card text slot.
  * Uses DOMPurify to prevent XSS from untrusted markup (e.g. RSS feed content).
+ *
+ * Sanitization is all this does: the markup renders in the app's own DOM, so the content's CSS reaches
+ * the app, remote images (tracking pixels) load, and nothing adapts to the theme. Prefer
+ * `@dxos/react-ui-components`' `Html`, which isolates content in a shadow root and blocks remote images
+ * by default — it cannot be used from here (that package depends on this one), so a caller that needs
+ * those guarantees should compose `Html` into the card rather than reach for this.
  */
 function CardHtml({ html = '', variant = 'default', ...props }: CardHtmlProps & ThemedClassName<object>) {
   const { tx } = useThemeContext();
@@ -473,9 +524,16 @@ CardPoster.displayName = CARD_POSTER_NAME;
 
 const CARD_ACTION_NAME = 'Card.Action';
 
-type CardActionProps = { icon?: string; label: string; actionIcon?: string; onClick?: () => void };
+type CardActionProps = {
+  icon?: string;
+  label: string;
+  /** Short trailing text (e.g. an age); kept at full width while the label truncates around it. */
+  annotation?: string;
+  actionIcon?: string;
+  onClick?: () => void;
+};
 
-function CardAction({ icon, actionIcon = 'ph--arrow-right--regular', label, onClick }: CardActionProps) {
+function CardAction({ icon, actionIcon = 'ph--arrow-right--regular', label, annotation, onClick }: CardActionProps) {
   const { tx } = useThemeContext();
   return (
     <Button variant='ghost' classNames={tx('card.action', {})} onClick={onClick}>
@@ -484,7 +542,10 @@ function CardAction({ icon, actionIcon = 'ph--arrow-right--regular', label, onCl
           <Icon icon={icon} size={4} />
         </CardBlock>
       )}
-      <span className={tx('card.action-label', {})}>{label}</span>
+      <span className={tx('card.action-content', {})}>
+        <span className={tx('card.action-label', {})}>{label}</span>
+        {annotation && <span className={tx('card.action-annotation', {})}>{annotation}</span>}
+      </span>
       {actionIcon && (
         <CardBlock end>
           <Icon icon={actionIcon} size={4} />
@@ -528,22 +589,22 @@ CardLink.displayName = CARD_LINK_NAME;
 export const Card = {
   Root: CardRoot,
 
-  // Header
+  // Containers
   Header: CardHeader,
+  Body: CardBody,
 
-  // Header / row parts
+  // Header components
   Block: CardBlock,
   DragHandle: CardDragHandle,
   ActionIconButton: CardActionIconButton,
   Menu: CardMenu,
   Title: CardTitle,
 
-  // Body
-  Body: CardBody,
+  // Body components
   Section: CardSection,
   Row: CardRow,
 
-  // Body parts
+  // Row components
   Text: CardText,
   Html: CardHtml,
   Poster: CardPoster,

package/src/components/Carousel/Carousel.tsx

@@ -3,7 +3,6 @@
 //
 
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { createContext } from '@radix-ui/react-context';
 import React, {
   Children,
   type KeyboardEvent,
@@ -25,6 +24,7 @@ import { translationKey } from '../../translations';
 import { type ThemedClassName, composable, composableProps } from '../../util';
 import { IconButton } from '../Button';
 import { type MediaKind, MediaPlayer } from '../MediaPlayer';
+import { CarouselProvider, useCarousel } from './CarouselContext';
 
 // TODO(burdon): Controller.
 
@@ -35,7 +35,7 @@ import { type MediaKind, MediaPlayer } from '../MediaPlayer';
 /** Slide change behaviour: `none` hard-swaps the active slide, `slide` animates a horizontal track. */
 export type CarouselTransition = 'none' | 'slide';
 
-type CarouselContextValue = {
+export type CarouselContextValue = {
   index: number;
   count: number;
   transition: CarouselTransition;
@@ -56,13 +56,6 @@ type CarouselContextValue = {
   prev: () => void;
 };
 
-const CAROUSEL_NAME = 'Carousel';
-
-const [CarouselProvider, useCarouselContext] = createContext<CarouselContextValue>(CAROUSEL_NAME);
-
-/** Returns the current carousel state. Must be used within {@link Carousel.Root}. */
-export const useCarousel = (): CarouselContextValue => useCarouselContext('useCarousel');
-
 //
 // Root
 //
@@ -347,8 +340,8 @@ const CarouselSlide = ({
     <div
       className={mx(
         transition === 'slide'
-          ? 'relative shrink-0 basis-full h-full bg-baseSurface'
-          : 'absolute inset-0 w-full h-full bg-baseSurface',
+          ? 'relative shrink-0 basis-full h-full dx-base-surface'
+          : 'absolute inset-0 w-full h-full dx-base-surface',
         classNames,
       )}
     >

package/src/components/Carousel/CarouselContext.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type CarouselContextValue } from './Carousel';
+
+// Kept out of `Carousel.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export const CAROUSEL_NAME = 'Carousel';
+
+export const [CarouselProvider, useCarouselContext] = createContext<CarouselContextValue>(CAROUSEL_NAME);
+
+/** Returns the current carousel state. Must be used within {@link Carousel.Root}. */
+export const useCarousel = (): CarouselContextValue => useCarouselContext('useCarousel');

package/src/components/Carousel/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2026 DXOS.org
 //
 
+export { useCarousel } from './CarouselContext';
+
 export * from './Carousel';

package/src/components/Clipboard/ClipboardContext.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+// Kept out of `ClipboardProvider.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export type ClipboardContextValue = {
+  textValue: string;
+  setTextValue: (nextValue: string) => Promise<void>;
+};
+
+export const ClipboardContext = createContext<ClipboardContextValue>({
+  textValue: '',
+  setTextValue: async (_) => {},
+});
+
+export const useClipboard = () => useContext(ClipboardContext);

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -2,19 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
+import React, { type PropsWithChildren, useCallback, useState } from 'react';
 
-export type ClipboardContextValue = {
-  textValue: string;
-  setTextValue: (nextValue: string) => Promise<void>;
-};
-
-export const ClipboardContext = createContext<ClipboardContextValue>({
-  textValue: '',
-  setTextValue: async (_) => {},
-});
-
-export const useClipboard = () => useContext(ClipboardContext);
+import { ClipboardContext } from './ClipboardContext';
 
 export const ClipboardProvider = ({ children }: PropsWithChildren<{}>) => {
   const [textValue, setInternalTextValue] = useState('');

package/src/components/Clipboard/CopyButton.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from '../../primitives';
 import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
-import { useClipboard } from './ClipboardProvider';
+import { useClipboard } from './ClipboardContext';
 
 export type CopyButtonProps = ButtonProps &
   Pick<IconProps, 'size'> & {

package/src/components/Clipboard/index.ts

@@ -11,4 +11,4 @@ export const Clipboard = {
   Provider: ClipboardProvider,
 };
 
-export { useClipboard } from './ClipboardProvider';
+export { useClipboard } from './ClipboardContext';

package/src/components/Column/Column.stories.tsx

@@ -141,8 +141,8 @@ export const WithCenter: Story = {
 };
 
 /**
- * ScrollArea auto-bleeds inside Column.Root (via [.dx-column_&]:col-span-full).
- * No Column.Bleed wrapper needed.
+ * ScrollArea auto-bleeds inside Column.Root (via `[.dx-column-root_&]:col-span-full` in its theme).
+ * No bleed wrapper needed.
  */
 export const WithScrollAreaAutoBleed: Story = {
   decorators: [withLayout({ layout: 'column', classNames: 'w-[25rem]' })],

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

@@ -45,19 +45,11 @@ const block: ComponentFunction<ColumnBlockStyleProps> = ({ end, compact, square
   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)]',
+    square && 'aspect-square',
+    !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.
- */
-const bleed: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('col-span-full grid grid-cols-subgrid min-h-0', ...etc);
-};
-
 /**
  * Center placement: places the element in column 2 (the central track between gutters) of the
  * parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
@@ -71,6 +63,5 @@ export const columnTheme = {
   root,
   row,
   block,
-  bleed,
   center,
 };