@dxos/ui-theme 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,13 +27,6 @@
       "require": "./dist/plugin/node-cjs/plugins/ThemePlugin.cjs"
     }
   },
-  "typesVersions": {
-    "*": {
-      "plugin": [
-        "dist/types/src/plugins/ThemePlugin.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -45,28 +38,28 @@
     "@radix-ui/react-slot": "1.1.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/postcss": "^4.2.0",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.5.0",
     "esbuild-style-plugin": "^1.6.1",
     "glob": "^7.2.3",
     "globby": "14.1.0",
     "lodash.merge": "^4.6.2",
-    "postcss": "^8.4.41",
+    "postcss": "^8.5.12",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
     "tailwind-merge": "^3.5.0",
     "tailwind-scrollbar": "^4.0.0",
     "tailwindcss": "^4.2.0",
     "tailwindcss-radix": "^4.0.2",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/node-std": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe"
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/node-std": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
-    "esbuild": "0.25.11",
-    "vite": "^7.1.11",
-    "@dxos/ui-types": "0.8.4-main.9be5663bfe"
+    "esbuild": "0.28.0",
+    "vite": "^8.0.10",
+    "@dxos/ui-types": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "react": "~19.2.3"

package/src/css/components/panel.css

@@ -5,112 +5,112 @@
  */
 
 @layer dx-components {
-  .dx-panel[data-hue='neutral'],
+  [data-hue='neutral'] .dx-panel,
   .dx-panel--neutral {
     @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
   }
 
-  .dx-panel[data-hue='red'],
+  [data-hue='red'] .dx-panel,
   .dx-panel--red {
     @apply bg-red-surface text-red-surface-text border-red-border;
   }
 
-  .dx-panel[data-hue='orange'],
+  [data-hue='orange'] .dx-panel,
   .dx-panel--orange {
     @apply bg-orange-surface text-orange-surface-text border-orange-border;
   }
 
-  .dx-panel[data-hue='amber'],
+  [data-hue='amber'] .dx-panel,
   .dx-panel--amber {
     @apply bg-amber-surface text-amber-surface-text border-amber-border;
   }
 
-  .dx-panel[data-hue='yellow'],
+  [data-hue='yellow'] .dx-panel,
   .dx-panel--yellow {
     @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
   }
 
-  .dx-panel[data-hue='lime'],
+  [data-hue='lime'] .dx-panel,
   .dx-panel--lime {
     @apply bg-lime-surface text-lime-surface-text border-lime-border;
   }
 
-  .dx-panel[data-hue='green'],
+  [data-hue='green'] .dx-panel,
   .dx-panel--green {
     @apply bg-green-surface text-green-surface-text border-green-border;
   }
 
-  .dx-panel[data-hue='emerald'],
+  [data-hue='emerald'] .dx-panel,
   .dx-panel--emerald {
     @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
   }
 
-  .dx-panel[data-hue='teal'],
+  [data-hue='teal'] .dx-panel,
   .dx-panel--teal {
     @apply bg-teal-surface text-teal-surface-text border-teal-border;
   }
 
-  .dx-panel[data-hue='cyan'],
+  [data-hue='cyan'] .dx-panel,
   .dx-panel--cyan {
     @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
   }
 
-  .dx-panel[data-hue='sky'],
+  [data-hue='sky'] .dx-panel,
   .dx-panel--sky {
     @apply bg-sky-surface text-sky-surface-text border-sky-border;
   }
 
-  .dx-panel[data-hue='blue'],
+  [data-hue='blue'] .dx-panel,
   .dx-panel--blue {
     @apply bg-blue-surface text-blue-surface-text border-blue-border;
   }
 
-  .dx-panel[data-hue='indigo'],
+  [data-hue='indigo'] .dx-panel,
   .dx-panel--indigo {
     @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
   }
 
-  .dx-panel[data-hue='violet'],
+  [data-hue='violet'] .dx-panel,
   .dx-panel--violet {
     @apply bg-violet-surface text-violet-surface-text border-violet-border;
   }
 
-  .dx-panel[data-hue='purple'],
+  [data-hue='purple'] .dx-panel,
   .dx-panel--purple {
     @apply bg-purple-surface text-purple-surface-text border-purple-border;
   }
 
-  .dx-panel[data-hue='fuchsia'],
+  [data-hue='fuchsia'] .dx-panel,
   .dx-panel--fuchsia {
     @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
   }
 
-  .dx-panel[data-hue='pink'],
+  [data-hue='pink'] .dx-panel,
   .dx-panel--pink {
     @apply bg-pink-surface text-pink-surface-text border-pink-border;
   }
 
-  .dx-panel[data-hue='rose'],
+  [data-hue='rose'] .dx-panel,
   .dx-panel--rose {
     @apply bg-rose-surface text-rose-surface-text border-rose-border;
   }
 
-  .dx-panel[data-hue='info'],
+  [data-hue='info'] .dx-panel,
   .dx-panel--info {
     @apply bg-info-surface text-info-surface-text border-info-border;
   }
 
-  .dx-panel[data-hue='success'],
+  [data-hue='success'] .dx-panel,
   .dx-panel--success {
     @apply bg-success-surface text-success-surface-text border-success-border;
   }
 
-  .dx-panel[data-hue='warning'],
+  [data-hue='warning'] .dx-panel,
   .dx-panel--warning {
     @apply bg-warning-surface text-warning-surface-text border-warning-border;
   }
 
-  .dx-panel[data-hue='error'],
+  [data-hue='error'] .dx-panel,
   .dx-panel--error {
     @apply bg-error-surface text-error-surface-text border-error-border;
   }

package/src/css/components/selected.css

@@ -1,26 +1,31 @@
 /**
- * Selected / Highlighted state utilities
+ * Selected / Highlighted state utilities.
+ *
+ * See `./selected.md` for the ARIA pairing grammar — every class below
+ * fires off a specific attribute and silently does nothing without it.
  */
 
 @layer dx-components {
+  /* Pure visual affordance, no ARIA pair. Combine with dx-selected or dx-current. */
   .dx-hover {
     @apply cursor-pointer hover:bg-highlight-surface! hover:text-highlight-surface-text!;
   }
 
-  /** TODO(burdon): Disambiguate from dx-hover */
+  /* Pairs with Radix-managed `data-highlighted`. Don't set the attribute manually. */
   .dx-highlighted {
     @apply data-[highlighted]:bg-highlight-surface
       data-[highlighted]:text-highlight-surface-text
       hover:data-[highlighted]:bg-highlight-surface-hover;
   }
 
-  /** TODO(burdon): Only show active if container has attention. */
+  /* Pairs with `aria-current="true|page|…"`. Use for "you are here" navigation. */
   .dx-current {
     @apply dx-ring-pseudo
       aria-[current=true]:bg-highlight-surface aria-[current=true]:text-highlight-surface-text
       aria-[current=true]:after:ring-active-separator!;
   }
 
+  /* Pairs with `aria-selected`. Use for listbox/option selection (master/detail). */
   .dx-selected {
     @apply aria-selected:bg-selected-surface
       aria-selected:text-selected-surface-text hover:aria-selected:text-selected-surface-text

package/src/css/components/selected.md

@@ -0,0 +1,101 @@
+# `dx-*` selection / navigation grammar
+
+Companion to `selected.css`. The four selection-state utilities below are
+each bound to a specific ARIA attribute (or `data-*`) selector. **The
+class only fires when the matching ARIA attribute is set on the same
+element.** Mismatches (e.g. `dx-current` paired with `aria-selected`)
+silently render as a plain row.
+
+| Class            | Bound selector         | Pair with                          | Use when                                                                                                                                                                                                    |
+| ---------------- | ---------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dx-hover`       | `hover:`               | (no ARIA — pure visual affordance) | Always, on any clickable row. Adds the cursor + hover bg/text.                                                                                                                                              |
+| `dx-selected`    | `aria-selected:`       | `aria-selected={boolean}`          | A row is "the chosen one" driving a master/detail panel. Listbox / option pattern. Multi-select OK.                                                                                                         |
+| `dx-current`     | `aria-[current=true]:` | `aria-current='true'`              | A row is "where you are" in a navigation set (current page, current step). At most one current per group. The CSS variant fires only on `aria-current='true'`, so use that literal even on `<a>`/nav links. |
+| `dx-highlighted` | `data-[highlighted]:`  | Radix `data-highlighted` (managed) | A Radix-managed transient highlight (menu / combobox active option). Don't set the attribute manually.                                                                                                      |
+
+## Rules
+
+1. **Never combine `dx-selected` and `dx-current` on the same element**
+   unless you also set both `aria-selected` and `aria-current`. They
+   express different things (chosen vs you-are-here) and the visual
+   weight is similar enough that combining them defeats both.
+2. **`aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled`
+   are not selection-row attributes.** None of the `dx-*` selection
+   utilities pair with them. Toggle buttons (mute/unmute) want
+   `aria-pressed`; a selection row wants `aria-selected`.
+3. **`aria-selected` is only valid on roles that admit it** — `option`,
+   `tab`, `gridcell`, `row`, `treeitem`, `columnheader`, `rowheader`.
+   On a plain `<button>` inside a `<ul role='listbox'>`, give the button
+   `role='option'` so assistive tech sees the attribute.
+4. **`dx-active` does not exist.** If you see it in code it's a no-op
+   string. Use `dx-selected` (selection) or `dx-current` (navigation)
+   instead.
+5. **Set ARIA before adding the class.** The class is inert without
+   the attribute; it's not a fallback styler. Reviewers should reject
+   PRs that add `dx-selected` without `aria-selected`.
+
+## Canonical patterns
+
+### Selectable row in a list (master/detail)
+
+```tsx
+<ul role='listbox' aria-label='…'>
+  {items.map((item) => (
+    <li key={item.id} role='presentation'>
+      <button
+        type='button'
+        role='option'
+        aria-selected={item.id === selectedId}
+        className='dx-hover dx-selected'
+        onClick={() => onSelect(item.id)}
+      >
+        {item.label}
+      </button>
+    </li>
+  ))}
+</ul>
+```
+
+### "You are here" in a navigation list
+
+```tsx
+<nav>
+  <ul>
+    {pages.map((page) => (
+      <li key={page.href}>
+        <a
+          href={page.href}
+          aria-current={page.href === currentHref ? 'true' : undefined}
+          className='dx-hover dx-current'
+        >
+          {page.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+```
+
+### Toggle button (NOT a row)
+
+Don't reach for `dx-selected` here. Toggle buttons want their own
+visual treatment via `aria-pressed:` variants — out of scope for this
+file.
+
+```tsx
+<button type='button' aria-pressed={muted} onClick={toggleMute}>
+  {muted ? 'Unmute' : 'Mute'}
+</button>
+```
+
+## Enforcing the grammar
+
+A future ESLint rule could flag:
+
+- `dx-selected` without `aria-selected` on the same element.
+- `dx-current` without `aria-current` on the same element.
+- `dx-active` literal anywhere.
+
+Until that exists, reviewers and the `react-ui-list` `RowList` /
+`CardList` containers (which set both attribute and class together)
+are the enforcement.

package/src/css/components/tag.css

@@ -11,7 +11,9 @@
 
   .dx-tag--anchor {
     /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
-    @apply inline cursor-pointer -mx-[4px] px-[3px] py-0.5 border border-separator rounded-xs bg-group-surface transition-colors;
+    @apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
+    /** TODO(burdon): Configure secondary color. */
+    @apply bg-group-surface text-sky-surface-text border-sky-border;
 
     &:hover {
       @apply bg-hover-surface;

package/src/css/layout/size.css

@@ -3,15 +3,28 @@
  */
 
 @layer dx-components {
-  /** 
-   * Registers the element as a size query container. 
+  /**
+   * Registers the element as a size query container.
    * Children can use @container queries to apply styles based on the container's dimensions (both width and height).
-   * Also enables children to use cqi units (e.g., max-w-[100cqi])
+   * Also enables children to use cqi/cqb units (e.g., max-w-[100cqi]).
+   * NOTE: `container-type: size` implies layout/size containment, which breaks CodeMirror's
+   * coordinate measurement (causes blank viewport sections during scroll until a click forces
+   * a re-measure). For editor content where only inline (width-based) queries are needed,
+   * use `.dx-inline-size-container` instead.
    */
   .dx-size-container {
     container-type: size;
   }
 
+  /**
+   * Inline-only size query container. Provides cqi units for children without the layout
+   * containment side-effects of `container-type: size`. Use this in CodeMirror content
+   * wrappers where size containment would break viewport measurement.
+   */
+  .dx-inline-size-container {
+    container-type: inline-size;
+  }
+
   /**
    * Document width.
    */

package/src/css/theme/animation.css

@@ -227,3 +227,34 @@
   }
   --animate-blink: blink 1s step-start infinite;
 }
+
+/**
+ * Shimmer (text)
+ * Sweeps a brighter band across text via mask alpha — preserves the consumer's color.
+ * Translates exactly one tile period (2× element width) per cycle so the loop seam is invisible.
+ */
+@keyframes shimmer-text {
+  from {
+    mask-position-x: 100%;
+    -webkit-mask-position-x: 100%;
+  }
+  to {
+    mask-position-x: -100%;
+    -webkit-mask-position-x: -100%;
+  }
+}
+
+/**
+ * Honor user reduced-motion preference for decorative animations.
+ * Functional transitions (fade/slide/toast/blink) are intentionally excluded —
+ * suppressing them would hide UI state changes.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .animate-halo-pulse,
+  .animate-spin-slow,
+  .animate-trail,
+  .animate-trail-offset,
+  .animate-shimmer {
+    animation: none;
+  }
+}

package/src/css/theme/spacing.css

@@ -9,13 +9,12 @@
   /** Minimum inset from the viewport edge for floating surfaces. */
   --spacing-screen-border: 2rem;
 
-  --spacing-popover-min-width: 12rem;
+  --spacing-popover-default-width: 20rem;
+  --spacing-popover-min-width: 16rem;
 
   --spacing-document-max-width: 50rem;
   --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
 
-  --spacing-popover-min-width: 16rem;
-
   --spacing-card-default-width: 20rem;
   --spacing-card-min-width: 18rem;
   --spacing-card-max-width: 22rem;
@@ -95,7 +94,7 @@
     --dx-input-fine: var(--dx-lacuna-3);
     --dx-input-coarse: var(--dx-lacuna-4);
 
-    --dx-default-icons-size: 1.25rem; /* size=5 */
+    --dx-default-icons-size: 1rem; /* size=4 */
   }
 
   [data-grid-focus-indicator-variant='stack'] {
@@ -116,12 +115,12 @@
     --dx-toolbar-size: var(--dx-rail-action); /* 40px */
     --dx-statusbar-size: var(--dx-rail-item); /* 32px */
 
-    /** NOTE: On MBP, should have nav sidebare open with 4 column mosaic board. */
-    --dx-nav-sidebar-size: 21.5rem;
+    /** NOTE: Sidebar optimized to show plank + companion with sidebar open on 16" MBP. */
+    --dx-nav-sidebar-size: 350px;
     --dx-complementary-sidebar-size: 25rem;
     --dx-drawer-size: 50dvh;
 
-    --dx-l0-size: 74px; /* MacOS windowing controls. */
+    --dx-l0-size: 72px;
     --dx-l0-avatar-size: 3rem;
     --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
     --dx-r0-size: var(--dx-rail-size);

package/src/css/utilities.css

@@ -31,17 +31,17 @@
 }
 
 /**
- * Column that fills the available space (extends dx-expander with overflow clipping).
+ * Container that fills the available space (extends dx-expander with overflow clipping).
  */
-@utility dx-column {
-  @apply flex-1 min-w-0 w-full;
+@utility dx-container {
+  @apply dx-expander overflow-hidden;
 }
 
 /**
- * Container that fills the available space (extends dx-expander with overflow clipping).
+ * Column that fills the available space (extends dx-expander with overflow clipping).
  */
-@utility dx-container {
-  @apply dx-expander overflow-hidden;
+@utility dx-column {
+  @apply flex-1 min-w-0 w-full;
 }
 
 /**
@@ -74,3 +74,45 @@
   @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit]
     after:pointer-events-none after:ring after:ring-inset after:ring-transparent;
 }
+
+/**
+ * Shimmer text — animates opacity left → right across the contained text.
+ * See @keyframes shimmer-text in theme/animation.css for the keyframe definition.
+ * Geometry: mask-size 200% 100% with mask-repeat: repeat-x means each tile is
+ * 2× the element width; the keyframe slides mask-position-x by 200% (one full
+ * tile period), giving a seamless loop. The 5-stop gradient (0.4 → 1.0 → 0.4)
+ * produces a single bright pulse per cycle that traverses left → right during
+ * the first half, with a brief calm interval during the second half.
+ */
+@utility shimmer-text {
+  mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  mask-size: 200% 100%;
+  -webkit-mask-size: 200% 100%;
+  mask-repeat: repeat-x;
+  -webkit-mask-repeat: repeat-x;
+  animation: shimmer-text 2s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    animation: none;
+    mask-image: none;
+    -webkit-mask-image: none;
+    opacity: 0.6;
+  }
+}

package/src/fragments/AUDIT.md

@@ -55,4 +55,3 @@ External packages importing fragment definitions from `ui-theme/src/fragments`.
 
 - `subtleHover` from `hover.ts`
 - `hoverableOpenControlItem`, `groupHoverControlItemWithTransition` from `hover.ts` (only 2-3 uses)
-- `descriptionTextPrimary` from `text.ts` (only 1 use)

package/src/fragments/density.ts

@@ -4,10 +4,13 @@
 
 import { type Density } from '@dxos/ui-types';
 
-export const coarseBlockSize = 'min-h-[2.5rem]';
-export const coarseDimensions = `${coarseBlockSize} px-3`;
+const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
+const coarseBlockSize = 'min-h-[2.5rem]';
 
-export const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
-export const fineDimensions = `${fineBlockSize} px-2`;
+const fineDimensions = `${fineBlockSize} px-2`;
+const coarseDimensions = `${coarseBlockSize} px-3`;
 
-export const densityBlockSize = (density: Density = 'coarse') => (density === 'fine' ? fineBlockSize : coarseBlockSize);
+export const densityDimensions = (density: Density = 'fine') =>
+  density === 'fine' ? fineDimensions : coarseDimensions;
+
+export const densityBlockSize = (density: Density = 'fine') => (density === 'fine' ? fineBlockSize : coarseBlockSize);

package/src/fragments/text.ts

@@ -2,5 +2,5 @@
 // Copyright 2022 DXOS.org
 //
 
-export const descriptionTextPrimary = 'text-sm font-normal text-base-surface-text';
+// TODO(burdon): Replace with Message component.
 export const descriptionMessage = 'text-description border border-dashed border-separator rounded-sm p-4';

package/src/main.css

@@ -11,7 +11,17 @@
  */
 @layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
 
-@import 'tailwindcss';
+/**
+ * `source(none)` disables Tailwind 4's automatic content discovery (which
+ * scans the project root, including `publicDir`). With auto-detection on,
+ * every write to `public/icons.svg` from `vite-plugin-icons` triggers a
+ * Tailwind CSS regeneration, which invalidates `main.css` through its
+ * import graph and produces a 3–5-ping HMR storm per icon-sprite write
+ * during cold-start (icons land in tight bursts as plugin chunks stream
+ * in). Explicit `@source` directives below replace the auto-scan with a
+ * stable, source-only set.
+ */
+@import 'tailwindcss' source(none);
 
 /* @theme extensions */
 @import './css/theme/animation.css';
@@ -54,7 +64,24 @@
 @import './css/integrations/tldraw.css';
 
 /**
- * Force-emit CSS variables for the full color palette for all: 
+ * With `source(none)` on the Tailwind import above, these are the *only*
+ * paths Tailwind scans for utility classes. Cover every workspace source
+ * directory so lazy-loaded plugin / UI / SDK chunks don't surface new
+ * utilities mid-session, and root-level HTML entrypoints (index.html,
+ * internal.html, …) are visible too.
+ *
+ * Paths are relative to this file (`packages/ui/ui-theme/src/main.css`):
+ *   ../../../          → `packages/`
+ *   ../../../../tools/ → `tools/`
+ *
+ * Tailwind ignores `node_modules` and common build/output dirs by default,
+ * so a broad workspace glob is safe.
+ */
+@source "../../../**/*.{ts,tsx,html}";
+@source "../../../../tools/**/*.{ts,tsx,html}";
+
+/**
+ * Force-emit CSS variables for the full color palette for all:
  * --color-{hue}-{shade}
  * --color-{hue}-{style}
  */
@@ -64,6 +91,13 @@
 @source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
 @source inline("border-{info,success,warning,error}-border");
 
+/**
+ * Force-emit tokens consumed by web components / .pcss files outside the
+ * Tailwind source-scan graph (e.g. lit-grid's dx-grid.pcss uses
+ * var(--color-grid-line)).
+ */
+@source inline("bg-grid-{surface,highlight,comment,comment-active,hover-overlay,selection-overlay,line,focus-indicator}");
+
 /**
  * Plugins must come after all imports.
  */

package/src/theme/components/card.ts

@@ -73,6 +73,9 @@ const cardLink: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
 const cardLinkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
   mx('dx-card__link-label min-w-0 flex-1 truncate', ...etc);
 
+const cardRow: ComponentFunction<CardStyleProps> = (_, ...etc) =>
+  mx('dx-card__row col-span-3 grid grid-cols-subgrid', ...etc);
+
 const cardIconBlock: ComponentFunction<CardStyleProps> = ({ padding }, ...etc) =>
   mx(
     'dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center',
@@ -85,6 +88,7 @@ export const cardTheme: Theme<CardStyleProps> = {
   toolbar: cardToolbar,
   title: cardTitle,
   content: cardContent,
+  row: cardRow,
   heading: cardHeading,
   text: cardText,
   'text-span': cardTextSpan,

package/src/theme/components/dialog.ts

@@ -5,6 +5,7 @@
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
+import { withColumn } from '../primitives/column';
 
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
 
@@ -35,12 +36,13 @@ export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLa
 };
 
 export const dialogHeader: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__header flex pb-4 items-center justify-between', ...etc);
+  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
 
-export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__body', ...etc);
+export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
 
 export const dialogActionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse', ...etc);
+  mx('dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse', withColumn.center(), ...etc);
 
 export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
   mx('dx-dialog__title', srOnly && 'sr-only', ...etc);