@dxos/ui-theme 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/src/theme/components/card.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
@@ -11,30 +11,30 @@ export type CardStyleProps = {
   fullWidth?: boolean;
   srOnly?: boolean;
   variant?: 'default' | 'subtitle' | 'description';
-  coarse?: boolean;
+  density?: Density;
   truncate?: boolean;
+  padding?: boolean;
 };
 
 const cardRoot: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
   mx(
-    'dx-card group/card relative flex flex-col w-full min-h-(--dx-rail-item) dx-card-min-width overflow-hidden',
+    'dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
     border &&
       'bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator',
     fullWidth && 'max-w-none!',
     ...etc,
   );
 
-const cardToolbar: ComponentFunction<CardStyleProps> = ({ coarse }, ...etc) =>
+const cardToolbar: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx(
-    'dx-card__toolbar dx-density-fine bg-transparent col-span-3 !grid grid-cols-subgrid [contain:none]',
-    coarse && 'grid-cols-[var(--dx-l0-avatar-size)_minmax(0,1fr)_var(--dx-rail-item)]',
+    'dx-card__toolbar dx-density-fine bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]',
     ...etc,
   );
 
 const cardTitle: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
 
 const cardContent: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__content contents [&>:last-child]:pb-1', ...etc);
+  mx('dx-card__content contents pb-1 last:pb-0', ...etc);
 
 const cardHeading: ComponentFunction<CardStyleProps> = ({ variant = 'default' }, ...etc) =>
   mx(
@@ -46,9 +46,9 @@ const cardHeading: ComponentFunction<CardStyleProps> = ({ variant = 'default' },
 
 const cardText: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
   mx(
-    'dx-card__text flex overflow-hidden',
+    'dx-card__text items-center overflow-hidden',
     variant === 'default' && 'py-1',
-    variant === 'description' && 'py-1.5',
+    variant === 'description' && 'py-1.5 text-description',
     ...etc,
   );
 
@@ -73,14 +73,22 @@ 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 cardIconBlock: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center', ...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',
+    padding && '[&>*]:p-1',
+    ...etc,
+  );
 
 export const cardTheme: Theme<CardStyleProps> = {
   root: cardRoot,
   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,13 +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 flex flex-col h-full py-2 gap-2', ...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);

package/src/theme/components/focus.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type FocusStyleProps = {
+  border?: boolean;
+};
+
+/**
+ * Focus ring styles shared by Focus.Group and Focus.Item.
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
+ * (inset box-shadow alone is obscured by children with backgrounds).
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
+ */
+const focusRing: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
+  mx(
+    'dx-ring-pseudo outline-hidden',
+    'focus:after:ring-neutral-focus-indicator',
+    'data-[focus-state=active]:after:ring-neutral-focus-indicator',
+    'data-[focus-state=error]:after:ring-rose-500',
+    border && 'border border-separator',
+    ...etc,
+  );
+
+export const focusTheme: Theme<FocusStyleProps> = {
+  group: focusRing,
+  item: focusRing,
+};

package/src/theme/components/icon-button.ts

@@ -5,14 +5,15 @@
 import type { ComponentFunction, Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-
 import { type ButtonStyleProps } from './button';
 
-export type IconButtonStyleProps = ButtonStyleProps & { iconOnly?: boolean };
+export type IconButtonStyleProps = ButtonStyleProps & {
+  iconOnly?: boolean;
+  square?: boolean;
+};
 
-// TODO(burdon): Gap/font size should depend on density.
-export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly }, ...etc) => {
-  return mx('gap-2', iconOnly && 'p-icon-button-padding min-h-0', ...etc);
+export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
+  return mx('px-1.5', !iconOnly && 'gap-2', square && 'aspect-square', ...etc);
 };
 
 export const iconButtonTheme: Theme<IconButtonStyleProps> = {

package/src/theme/components/icon.ts

@@ -4,15 +4,24 @@
 
 import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
 
-import { getSize } from '../../fragments';
-import { mx } from '../../util';
+import { getSize, mx } from '../../util';
 
 export type IconStyleProps = {
   size?: Size;
 };
 
-export const iconRoot: ComponentFunction<IconStyleProps> = ({ size }, etc) =>
-  mx('shrink-0 h-[1em] w-[1em] text-[var(--icons-color,currentColor)]', size && getSize(size), etc);
+/**
+ * Size can be specified directly, or inherited from a container (e.g., toolbar).
+ */
+export const iconRoot: ComponentFunction<IconStyleProps> = ({ size }, etc) => {
+  return mx(
+    'shrink-0 text-[var(--icons-color,currentColor)]',
+    size
+      ? getSize(size)
+      : '[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]',
+    etc,
+  );
+};
 
 export const iconTheme: Theme<IconStyleProps> = {
   root: iconRoot,

package/src/theme/components/index.ts

@@ -7,6 +7,7 @@ export * from './breadcrumb';
 export * from './card';
 export * from './button';
 export * from './dialog';
+export * from './focus';
 export * from './icon';
 export * from './icon-button';
 export * from './input';

package/src/theme/components/input.ts

@@ -11,23 +11,8 @@ import {
   type Size,
 } from '@dxos/ui-types';
 
-import {
-  coarseBlockSize,
-  coarseDimensions,
-  computeSize,
-  fineBlockSize,
-  fineDimensions,
-  focusRing,
-  getSize,
-  getSizeHeight,
-  getSizeWidth,
-  sizeValue,
-  staticDisabled,
-  staticFocusRing,
-  subduedFocus,
-  textValence,
-} from '../../fragments';
-import { mx } from '../../util';
+import { densityDimensions, staticDisabled } from '../../fragments';
+import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '../../util';
 
 export type InputStyleProps = Partial<{
   variant: 'default' | 'subdued' | 'static';
@@ -73,30 +58,30 @@ const inputValence = (valence?: MessageValence) => {
 };
 
 const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full bg-transparent text-current placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  props.density === 'fine' ? fineBlockSize : coarseBlockSize,
-  subduedFocus,
+  'py-0 w-full bg-transparent text-current placeholder-placeholder',
+  'dx-focus-subdued',
+  densityDimensions(props.density),
   props.disabled && staticDisabled,
 ];
 
 const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   textInputSurfaceFocus,
-  props.density === 'fine' ? fineDimensions : coarseDimensions,
+  densityDimensions(props.density),
   props.disabled ? staticDisabled : textInputSurfaceHover,
 ];
 
 const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   textInputSurfaceFocus,
   textInputSurfaceHover,
   props.focused && 'bg-attention-surface',
   inputValence(props.validationValence),
   props.disabled && staticDisabled,
-  props.focused && staticFocusRing,
+  props.focused && 'dx-focus-static',
 ];
 
 const inputInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
@@ -106,28 +91,28 @@ const inputInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
       ? mx(...sharedStaticInputStyles(props), ...etc)
       : mx(
           ...sharedDefaultInputStyles(props),
-          !props.disabled && focusRing,
+          !props.disabled && 'dx-focus-ring',
           inputValence(props.validationValence),
           ...etc,
         );
 
-const inputTextArea: ComponentFunction<InputStyleProps> = (props, ...etc) => inputInput(props, ...['-mb-1.5', ...etc]);
+const inputTextArea: ComponentFunction<InputStyleProps> = (props, ...etc) => inputInput(props, ...etc);
 
 const inputCheckbox: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
   mx('dx-checkbox dx-focus-ring', getSize(size), ...etc);
 
 const inputCheckboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5, checked }, ...etc) =>
-  mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
+  mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
 
 const inputSwitch: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
   mx(
-    getSizeHeight(size),
-    getSizeWidth(computeSize(sizeValue(size) * 1.75, 9)),
+    getHeight(size),
+    getWidth(snapSize(sizeValue(size) * 1.75, 9)),
     booleanInputSurface,
     !disabled && booleanInputSurfaceHover,
     // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
     'cursor-pointer shrink-0 rounded-full px-1 mx-1 relative',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/theme/components/link.ts

@@ -4,7 +4,6 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-import { focusRing } from '../../fragments';
 import { mx } from '../../util';
 
 export type LinkStyleProps = {
@@ -17,7 +16,7 @@ export const linkRoot: ComponentFunction<LinkStyleProps> = ({ variant }, ...etc)
     variant === 'neutral'
       ? 'text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90'
       : 'text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/theme/components/list.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
-import { densityBlockSize, focusRing, getSize, ghostHover } from '../../fragments';
-import { mx } from '../../util';
+import { densityBlockSize, ghostHover } from '../../fragments';
+import { getSize, mx } from '../../util';
 
 export type ListStyleProps = Partial<{
   density: Density;
@@ -21,13 +21,13 @@ export const listItemEndcap: ComponentFunction<ListStyleProps> = ({ density }, .
   mx(density === 'fine' ? getSize(8) : getSize(10), 'shrink-0 flex items-center justify-center', ...etc);
 
 export const listItemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx(densityBlockSize(density), 'flex items-center', ...etc);
+  mx(densityBlockSize(density), 'flex items-center overflow-hidden [&>span]:truncate', ...etc);
 
 export const listItemDragHandleIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) =>
   mx(getSize(5), 'mt-2.5', ...etc);
 
 export const listItemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, focusRing, ...etc);
+  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, 'dx-focus-ring', ...etc);
 
 export const listItemOpenTriggerIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => {
   return mx(getSize(5), ...etc);

package/src/theme/components/menu.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { dataDisabled, subduedFocus, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { dataDisabled } from '../../fragments';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type MenuStyleProps = Partial<{
   constrainBlockSize: boolean;
@@ -26,8 +26,8 @@ export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc)
 export const menuItem: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
   mx(
     'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
-    'data-[highlighted]:bg-hover-surface',
-    subduedFocus,
+    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
+    'dx-focus-subdued',
     dataDisabled,
     ...etc,
   );

package/src/theme/components/message.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
 
-import { messageValence } from '../../fragments';
-import { mx } from '../../util';
+import { mx, messageValence } from '../../util';
 
 export type MessageStyleProps = {
   valence?: MessageValence;
@@ -13,23 +12,23 @@ export type MessageStyleProps = {
 };
 
 export const messageRoot: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
-  return mx('grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm', messageValence(valence), etc);
+  return mx('grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm', messageValence(valence), etc);
 };
 
 export const messageHeader: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-span-2 grid grid-cols-subgrid items-center', etc);
+  return mx('col-span-full grid grid-cols-subgrid items-center', etc);
 };
 
 export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-2 text-lg gap-trim-sm [&>svg]:inline-block', etc);
+  return mx('col-start-2 truncate', etc);
 };
 
 export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-1', etc);
+  return mx('col-start-1 grid place-items-center', etc);
 };
 
 export const messageContent: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('grid grid-cols-subgrid col-start-2 first:font-medium', etc);
+  return mx('col-start-2 grid grid-cols-subgrid first:font-medium', etc);
 };
 
 export const messageTheme: Theme<MessageStyleProps> = {

package/src/theme/components/popover.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { focusRing, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type PopoverStyleProps = Partial<{
   constrainBlock: boolean;
@@ -18,15 +17,15 @@ export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation
     'dx-modal-surface border border-separator rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 
 export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
   mx(
-    'flex flex-col min-h-0 min-w-popover-min-width',
+    'grid grid-rows-[1fr] min-h-0 min-w-popover-min-width',
     (constrainBlock || constrainInline) && 'overflow-hidden',
-    // Ensures it respects available height from Radix (or 100dvh).
+    constrainBlock && 'max-h-(--radix-popover-content-available-height)',
     constrainBlock &&
       'max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]',
     constrainInline && 'max-w-(--radix-popover-content-available-width)',

package/src/theme/components/scroll-area.ts

@@ -5,12 +5,24 @@
 import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
+import { withColumn } from '../primitives/column';
+
+export const scrollbar = {
+  thin: {
+    size: 4,
+    padding: 4,
+  },
+  coarse: {
+    size: 8,
+    padding: 8,
+  },
+};
 
 export type ScrollAreaStyleProps = {
   orientation?: AllowedAxis;
   autoHide?: boolean;
-  /** Balance left/right, top/bottom "margin" with scrollbar. */
-  margin?: boolean;
+  /** Balance left/right, top/bottom offset with scrollbar. */
+  centered?: boolean;
   /** Add default padding. */
   /** TODO(burdon): Integrate with Column.Root padding. */
   padding?: boolean;
@@ -21,29 +33,17 @@ export type ScrollAreaStyleProps = {
   snap?: boolean;
 };
 
-export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation, margin, thin }, ...etc) =>
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation }, ...etc) =>
   mx(
-    'overflow-hidden',
-
-    orientation === 'vertical' && 'group/scroll-v dx-container',
-    orientation === 'horizontal' && 'group/scroll-h dx-container',
-    orientation === 'all' && 'group/scroll-all dx-container',
-
-    // TODO(burdon): Audit composition.
-    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
-    '[.dx-column_&]:col-span-full',
-
-    // NOTE: Uses --gutter CSS variable
-    // If contained within Column.Root grid, the gutter is set by that component.
-    margin && [
-      orientation === 'vertical' &&
-        (thin
-          ? 'pl-[var(--gutter,4px)] pr-[calc(var(--gutter,4px)-4px)]'
-          : 'pl-[var(--gutter,8px)] pr-[calc(var(--gutter,8px)-8px)]'),
-      orientation === 'horizontal' && (thin ? 'py-[var(--gutter,4px)]' : 'py-[var(--gutter,8px)]'),
-      orientation === 'all' &&
-        (thin ? 'pl-[var(--gutter,4px)] py-[var(--gutter,8px)]' : 'pl-[var(--gutter,8px)] py-[var(--gutter,8px)]'),
-    ],
+    // Expand
+    'dx-container',
+
+    orientation === 'vertical' && 'group/scroll-v flex flex-col',
+    orientation === 'horizontal' && 'group/scroll-h flex',
+    orientation === 'all' && 'group/scroll-all',
+
+    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+    '[.dx-column-root_&]:col-span-full',
 
     ...etc,
   );
@@ -52,24 +52,47 @@ export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orient
  * NOTE: The browser reserves space for scrollbars.
  */
 export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
-  { orientation, autoHide, padding, snap, thin },
+  { orientation, centered, padding, snap, autoHide },
   ...etc
-) =>
-  mx(
-    'h-full w-full',
+) => {
+  return mx(
+    'flex-1 min-h-0 w-full',
 
-    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
-    orientation === 'horizontal' && 'flex overflow-x-scroll',
-    orientation === 'all' && 'overflow-scroll',
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
 
-    thin
-      ? '[&::-webkit-scrollbar]:w-[4px] [&::-webkit-scrollbar]:h-[4px]'
-      : '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:h-[8px]',
+    orientation === 'vertical' && 'overflow-y-scroll',
+    orientation === 'horizontal' && 'flex overflow-x-scroll overscroll-x-contain',
+    orientation === 'all' && 'overflow-scroll',
 
     '[&::-webkit-scrollbar-corner]:bg-transparent',
     '[&::-webkit-scrollbar-track]:bg-transparent',
     '[&::-webkit-scrollbar-thumb]:rounded-none',
 
+    '[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]',
+
+    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
+    // If centered, left padding compensates for scrollbar width so content is visually centered.
+    (orientation === 'vertical' || orientation === 'all') &&
+      (padding
+        ? [
+            centered ? 'pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]' : 'pl-[var(--gutter,0)]',
+            'pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]',
+          ]
+        : centered && 'pl-[var(--scroll-width)]'),
+
+    (orientation === 'horizontal' || orientation === 'all') &&
+      (padding
+        ? [centered && 'pt-[calc(var(--scroll-width)+var(--scroll-padding))]', 'pb-[var(--scroll-padding)]']
+        : centered && 'pt-[var(--scroll-width)]'),
+
+    snap && [
+      orientation === 'vertical' && 'snap-y snap-mandatory',
+      orientation === 'horizontal' && 'snap-x snap-mandatory',
+      orientation === 'all' && 'snap-both snap-mandatory',
+    ],
+
     autoHide
       ? [
           orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
@@ -82,20 +105,9 @@ export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
           orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
         ],
 
-    padding && [
-      orientation === 'vertical' && 'px-[4px]',
-      orientation === 'horizontal' && 'pb-[4px]',
-      orientation === 'all' && 'pl-[4px] pb-[4px]',
-    ],
-
-    snap && [
-      orientation === 'vertical' && 'snap-y snap-mandatory',
-      orientation === 'horizontal' && 'snap-x snap-mandatory',
-      orientation === 'all' && 'snap-both snap-mandatory',
-    ],
-
     ...etc,
   );
+};
 
 export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
   root: scrollAreaRoot,

package/src/theme/components/select.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { ghostHighlighted, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type SelectStyleProps = Partial<{
   elevation: Elevation;
@@ -28,7 +27,7 @@ export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc)
     'flex items-center min-h-[2rem] px-3 py-1 gap-2',
     'text-base-surface-text leading-none select-none outline-hidden',
     '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
-    ghostHighlighted,
+    'dx-highlighted',
     ...etc,
   );
 

package/src/theme/components/status.ts

@@ -7,21 +7,21 @@ import type { ComponentFunction, Theme } from '@dxos/ui-types';
 import { mx } from '../../util';
 
 export type StatusStyleProps = {
-  indeterminate?: boolean;
   variant?: 'default' | 'main-bottom';
+  indeterminate?: boolean;
 };
 
 export const statusRoot: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
   mx(
-    'h-1 relative bg-hover-overlay rounded-full overflow-hidden',
-    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block',
+    'h-1 relative rounded-full overflow-hidden',
+    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block bg-base-surface',
     ...etc,
   );
 
-export const statusBar: ComponentFunction<StatusStyleProps> = ({ indeterminate, variant = 'default' }, ...etc) =>
+export const statusBar: ComponentFunction<StatusStyleProps> = ({ variant = 'default', indeterminate }, ...etc) =>
   mx(
     'absolute inset-y-0 block rounded-full',
-    variant === 'main-bottom' ? 'bg-accent-surface' : 'bg-un-accent',
+    variant === 'main-bottom' ? 'bg-composer-300' : 'bg-un-accent',
     indeterminate ? 'animate-progress-indeterminate' : 'start-0',
     ...etc,
   );

package/src/theme/components/toast.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-import { focusRing, surfaceShadow } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow } from '../../util';
 
 export type ToastStyleProps = Partial<{
   srOnly: boolean;
@@ -28,7 +27,7 @@ export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
     'radix-swipe-end:animate-toast-swipe-out',
     'translate-x-radix-toast-swipe-move-x',
     'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );