@dxos/react-ui 0.9.0 → 0.9.1-main.c7dcc2e112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.9.0",
+  "version": "0.9.1-main.c7dcc2e112",
   "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",
@@ -85,17 +85,17 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.9.0",
-    "@dxos/invariant": "0.9.0",
-    "@dxos/lit-ui": "0.9.0",
-    "@dxos/react-error-boundary": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/react-hooks": "0.9.0",
-    "@dxos/debug": "0.9.0",
-    "@dxos/react-input": "0.9.0",
-    "@dxos/ui-types": "0.9.0",
-    "@dxos/react-list": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/async": "0.9.1-main.c7dcc2e112",
+    "@dxos/debug": "0.9.1-main.c7dcc2e112",
+    "@dxos/lit-ui": "0.9.1-main.c7dcc2e112",
+    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
+    "@dxos/log": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-error-boundary": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-input": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-hooks": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-list": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-types": "0.9.1-main.c7dcc2e112",
+    "@dxos/util": "0.9.1-main.c7dcc2e112"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -109,14 +109,14 @@
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
     "vite": "^8.0.16",
-    "@dxos/random": "0.9.0",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
+    "@dxos/util": "0.9.1-main.c7dcc2e112",
+    "@dxos/random": "0.9.1-main.c7dcc2e112"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.0"
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Button/Button.tsx

@@ -11,12 +11,15 @@ import { type Density, type Elevation } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 
 type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
   variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive' | 'valence';
   density?: Density;
   elevation?: Elevation;
   asChild?: boolean;
+  /** Render a trailing caret indicating the button opens a menu. */
+  caretDown?: boolean;
 };
 
 type ButtonGroupContextValue = { inGroup?: boolean };
@@ -31,7 +34,16 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
 const Button = memo(
   forwardRef<HTMLButtonElement, ButtonProps>(
     (
-      { classNames, children, density: densityProp, elevation: elevationProp, variant = 'default', asChild, ...props },
+      {
+        classNames,
+        children,
+        density: densityProp,
+        elevation: elevationProp,
+        variant = 'default',
+        asChild,
+        caretDown,
+        ...props
+      },
       ref,
     ) => {
       const { inGroup } = useButtonGroupContext(BUTTON_NAME);
@@ -59,7 +71,16 @@ const Button = memo(
           )}
           {...(props.disabled && { disabled: true })}
         >
-          {children}
+          {/* `asChild` forwards a single child via Slot (React.Children.only); only add the caret in
+              the non-`asChild` case so Slot still receives exactly one child. */}
+          {caretDown && !asChild ? (
+            <>
+              {children}
+              <Icon size={3} icon='ph--caret-down--bold' />
+            </>
+          ) : (
+            children
+          )}
         </Comp>
       );
     },

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

@@ -3,14 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import React, { type ReactNode, useState } from 'react';
 
 import { type Density } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { translations } from '../../translations';
 import { Tooltip } from '../Tooltip';
 import { Button } from './Button';
 import { IconButton, type IconButtonProps } from './IconButton';
+import { SystemIconButton } from './SystemIconButton';
 
 const DefaultStory = (props: IconButtonProps) => {
   return (
@@ -60,6 +62,76 @@ const DensitiesStory = (props: Omit<IconButtonProps, 'density' | 'size'>) => {
   );
 };
 
+type SystemPresetVariantProps = Partial<Pick<IconButtonProps, 'variant' | 'iconOnly'>>;
+
+const SystemPresetRow = ({
+  name,
+  button,
+}: {
+  name: string;
+  button: (props: SystemPresetVariantProps) => ReactNode;
+}) => (
+  <div className='grid grid-cols-subgrid col-span-full gap-x-8 items-center'>
+    <div className='text-xs font-mono'>{name}</div>
+    <div>{button({})}</div>
+    <div>{button({ variant: 'ghost' })}</div>
+    <div>{button({ variant: 'ghost', iconOnly: true })}</div>
+  </div>
+);
+
+const SystemStory = () => {
+  const [state, setState] = useState<Record<string, boolean>>({});
+
+  return (
+    <Tooltip.Provider>
+      <div className='grid grid-cols-[auto_1fr_1fr_auto] gap-y-3 items-center'>
+        <div className='grid grid-cols-subgrid col-span-full gap-x-8'>
+          <div />
+          <div className='text-xs text-subdued uppercase'>default</div>
+          <div className='text-xs text-subdued uppercase'>ghost</div>
+          <div className='text-xs text-subdued uppercase'>iconOnly</div>
+        </div>
+
+        <SystemPresetRow
+          name='Star'
+          button={(props) => (
+            <SystemIconButton.Star
+              active={state.star}
+              onClick={() => setState((prev) => ({ ...prev, star: !prev.star }))}
+              {...props}
+            />
+          )}
+        />
+        <SystemPresetRow
+          name='Bookmark'
+          button={(props) => (
+            <SystemIconButton.Bookmark
+              active={state.bookmark}
+              onClick={() => setState((prev) => ({ ...prev, bookmark: !prev.bookmark }))}
+              {...props}
+            />
+          )}
+        />
+        <SystemPresetRow
+          name='Expander'
+          button={(props) => (
+            <SystemIconButton.Expander
+              active={state.expander}
+              onClick={() => setState((prev) => ({ ...prev, expander: !prev.expander }))}
+              {...props}
+            />
+          )}
+        />
+        <br />
+        <SystemPresetRow name='Add' button={(props) => <SystemIconButton.Add {...props} />} />
+        <SystemPresetRow name='Delete' button={(props) => <SystemIconButton.Delete {...props} />} />
+        <SystemPresetRow name='Edit' button={(props) => <SystemIconButton.Edit {...props} />} />
+        <SystemPresetRow name='Close' button={(props) => <SystemIconButton.Close {...props} />} />
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
@@ -67,6 +139,7 @@ const meta = {
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
+    translations,
   },
 } satisfies Meta<typeof IconButton>;
 
@@ -90,3 +163,10 @@ export const Ghost: Story = {
     variant: 'ghost',
   },
 };
+
+export const System: Story = {
+  render: SystemStory,
+  args: {
+    label: 'System',
+  },
+};

package/src/components/Button/IconButton.tsx

@@ -14,9 +14,8 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
   Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
     noTooltip?: boolean;
-    caretDown?: boolean;
     iconOnly?: boolean;
-    square?: boolean; // TODO(burdon): Handle more uniformly.
+    square?: boolean; // TODO(burdon): Should be automatic in style?
     iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipSide?: TooltipSide;
@@ -46,7 +45,7 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
-    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, noTooltip: _, classNames, ...props },
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
@@ -55,7 +54,6 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         {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} />}
-        {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },

package/src/components/Button/SystemIconButton.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { translationKey } from '#translations';
+
+import { IconButton, type IconButtonProps } from './IconButton';
+import { ToggleIconButton, type ToggleIconButtonProps } from './ToggleIconButton';
+
+// Static presets fix the icon and default the label; callers can still override `label`.
+type StaticPresetProps = Omit<IconButtonProps, 'icon' | 'label'> & { label?: string };
+
+// Stateful presets fix both icons so a call site cannot supply a conflicting glyph.
+type TogglePresetProps = Omit<ToggleIconButtonProps, 'icon' | 'activeIcon' | 'label'> & { label?: string };
+
+//
+// Star
+//
+
+const StarIconButton = forwardRef<HTMLButtonElement, TogglePresetProps>(({ label, active, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <ToggleIconButton
+      {...props}
+      active={active}
+      icon='ph--star--regular'
+      activeIcon='ph--star--fill'
+      label={label ?? t(active ? 'system-button.unstar.label' : 'system-button.star.label')}
+      ref={forwardedRef}
+    />
+  );
+});
+
+StarIconButton.displayName = 'SystemIconButton.Star';
+
+//
+// Bookmark
+//
+
+const BookmarkIconButton = forwardRef<HTMLButtonElement, TogglePresetProps>(
+  ({ label, active, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <ToggleIconButton
+        {...props}
+        active={active}
+        icon='ph--bookmark-simple--regular'
+        activeIcon='ph--bookmark-simple--fill'
+        label={label ?? t(active ? 'system-button.unbookmark.label' : 'system-button.bookmark.label')}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+BookmarkIconButton.displayName = 'SystemIconButton.Bookmark';
+
+//
+// Expander
+//
+
+const ExpanderIconButton = forwardRef<HTMLButtonElement, TogglePresetProps>(
+  ({ label, active, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <ToggleIconButton
+        {...props}
+        active={active}
+        icon='ph--caret-right--regular'
+        label={label ?? t(active ? 'system-button.collapse.label' : 'system-button.expand.label')}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ExpanderIconButton.displayName = 'SystemIconButton.Expander';
+
+//
+// Add
+//
+
+const AddIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton {...props} icon='ph--plus--regular' label={label ?? t('system-button.add.label')} ref={forwardedRef} />
+  );
+});
+
+AddIconButton.displayName = 'SystemIconButton.Add';
+
+//
+// Delete
+//
+
+const DeleteIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton
+      {...props}
+      icon='ph--trash--regular'
+      label={label ?? t('system-button.delete.label')}
+      ref={forwardedRef}
+    />
+  );
+});
+
+DeleteIconButton.displayName = 'SystemIconButton.Delete';
+
+//
+// Edit
+//
+
+const EditIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton {...props} icon='ph--pen--regular' label={label ?? t('system-button.edit.label')} ref={forwardedRef} />
+  );
+});
+
+EditIconButton.displayName = 'SystemIconButton.Edit';
+
+//
+// Close
+//
+
+const CloseIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton {...props} icon='ph--x--regular' label={label ?? t('system-button.close.label')} ref={forwardedRef} />
+  );
+});
+
+CloseIconButton.displayName = 'SystemIconButton.Close';
+
+//
+// Namespace
+//
+
+export const SystemIconButton = {
+  Star: StarIconButton,
+  Bookmark: BookmarkIconButton,
+  Expander: ExpanderIconButton,
+  Add: AddIconButton,
+  Delete: DeleteIconButton,
+  Edit: EditIconButton,
+  Close: CloseIconButton,
+};
+
+export type { StaticPresetProps, TogglePresetProps };

package/src/components/Button/ToggleIconButton.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { IconButton, type IconButtonProps } from './IconButton';
+
+export type ToggleIconButtonProps = Omit<IconButtonProps, 'icon'> & {
+  active?: boolean;
+  /** Icon for the inactive state; rotated 90° in the active state when `activeIcon` is omitted. */
+  icon: NonNullable<IconButtonProps['icon']>;
+  /** Icon for the active state. When omitted, `icon` rotates 90° (disclosure-style). */
+  activeIcon?: NonNullable<IconButtonProps['icon']>;
+};
+
+/**
+ * Icon button bound to a boolean toggle. With `activeIcon` it swaps icons between states;
+ * otherwise it rotates `icon` 90° to signal the active (e.g. expanded) state.
+ */
+export const ToggleIconButton = forwardRef<HTMLButtonElement, ToggleIconButtonProps>(
+  ({ active, icon, activeIcon, iconClassNames, ...props }, forwardedRef) => (
+    <IconButton
+      {...props}
+      ref={forwardedRef}
+      icon={active && activeIcon ? activeIcon : icon}
+      iconClassNames={activeIcon ? iconClassNames : mx('transition-transform', active && 'rotate-90', iconClassNames)}
+    />
+  ),
+);

package/src/components/Button/index.ts

@@ -4,5 +4,7 @@
 
 export * from './Button';
 export * from './IconButton';
+export * from './SystemIconButton';
 export * from './Toggle';
 export * from './ToggleGroup';
+export * from './ToggleIconButton';

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

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef } from 'react';
 
 import { random } from '@dxos/random';
-import { Icon } from '@dxos/react-ui';
+import { Icon, IconButton } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Card } from './Card';
@@ -32,10 +32,16 @@ const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProp
       </Card.Header>
       <Card.Body>
         <Card.Poster alt='Card.Poster' image={image} />
-        <Card.Row icon='ph--dot-outline--regular'>
+        <Card.Row>
+          <Card.Block>
+            <Icon icon='ph--dot-outline--regular' />
+          </Card.Block>
           <Card.Text>Card.Text (default)</Card.Text>
         </Card.Row>
-        <Card.Row icon='ph--dot-outline--regular'>
+        <Card.Row>
+          <Card.Block>
+            <Icon icon='ph--dot-outline--regular' />
+          </Card.Block>
           <Card.Text variant='description'>
             Card.Text (description)
             <br />
@@ -52,7 +58,13 @@ const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProp
 const meta = {
   title: 'ui/react-ui-core/components/Card',
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'grid w-[30rem] place-items-center' })],
+  decorators: [
+    withTheme(),
+    withLayout({
+      layout: 'centered',
+      classNames: 'grid w-[30rem] place-items-center bg-transparent',
+    }),
+  ],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -147,26 +159,56 @@ 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 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 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 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'>
-        This line is very very long and it should wrap.
-      </div>
-    </div>
-  </div>
-);
+export const Slots: Story = {
+  args: {
+    title: random.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const showLeading = true;
+    return (
+      <Card.Root>
+        <Card.Header>
+          <Card.Title>{title}</Card.Title>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
+          {/* Leading passive icon. */}
+          <Card.Row>
+            <Card.Block>
+              <Icon icon='ph--user--regular' />
+            </Card.Block>
+            <Card.Text>Start slot — passive Icon</Card.Text>
+          </Card.Row>
+          {/* Passive icon + trailing IconButton: the two gutters align to the pixel. */}
+          <Card.Row>
+            <Card.Block>
+              <Icon icon='ph--at--regular' />
+            </Card.Block>
+            <Card.Text>Start Icon + end IconButton (aligned)</Card.Text>
+            <Card.Block end>
+              <IconButton iconOnly variant='ghost' icon='ph--x--regular' label='Remove' onClick={() => {}} />
+            </Card.Block>
+          </Card.Row>
+          {/* Conditional leading slot: when falsy, content stays in the center track. */}
+          <Card.Row>
+            {showLeading && (
+              <Card.Block>
+                <Icon icon='ph--calendar--regular' />
+              </Card.Block>
+            )}
+            <Card.Text>Conditional start slot</Card.Text>
+          </Card.Row>
+          {/* asChild: the anchor itself becomes the trailing gutter cell. */}
+          <Card.Row>
+            <Card.Text>Trailing link via asChild</Card.Text>
+            <Card.Block end asChild>
+              <a href='https://dxos.org' target='_blank' rel='noreferrer'>
+                <Icon icon='ph--arrow-square-out--regular' />
+              </a>
+            </Card.Block>
+          </Card.Row>
+        </Card.Body>
+      </Card.Root>
+    );
+  },
+};

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

@@ -17,8 +17,7 @@ export type CardStyleProps = {
 
 const root: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
   mx(
-    'dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
-    'bg-card-surface',
+    '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',
     fullWidth && 'max-w-none!',
     ...etc,
@@ -26,13 +25,16 @@ const root: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc)
 
 const header: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx(
-    'dx-card__header dx-density-md bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! shadow-none [contain:none]',
+    '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,
   );
 
 const title: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
 
-const body: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__body contents pb-1 last:pb-0', ...etc);
+const body: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__body contents', ...etc);
+
+const block: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__block', ...etc);
 
 const text: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
   mx(
@@ -46,25 +48,40 @@ const textSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', trun
   mx(variant === 'description' && 'text-sm text-description line-clamp-3', truncate && 'truncate', ...etc);
 
 const poster: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__poster col-span-3 max-h-[200px]', ...etc);
+  mx('dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none', ...etc);
 
 const posterIcon: ComponentFunction<CardStyleProps> = (_props, ...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) =>
-  mx('dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden', ...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',
+    ...etc,
+  );
 
 const actionLabel: ComponentFunction<CardStyleProps> = (_props, ...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 group p-0! dx-button dx-focus-ring min-h-1!', ...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,
+  );
 
 const linkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__link-label min-w-0 flex-1 truncate', ...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', fullWidth ? 'col-span-full' : 'col-span-3 grid grid-cols-subgrid', ...etc);
+  mx(
+    'dx-card__row overflow-hidden',
+    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',
+    ...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`.
@@ -79,6 +96,7 @@ export const cardTheme: Theme<CardStyleProps> = {
   header,
   title,
   body,
+  block,
   row,
   section,
   'section-title': sectionTitle,