@dxos/ui-theme 0.8.4-main.fbb7a13 → 0.8.4-main.fcc0d83b33

package/src/theme/components/input.ts

@@ -0,0 +1,171 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  type ComponentFragment,
+  type ComponentFunction,
+  type Density,
+  type Elevation,
+  type MessageValence,
+  type Size,
+} from '@dxos/ui-types';
+
+import { densityDimensions, staticDisabled } from '../../fragments';
+import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '../../util';
+
+export type InputStyleProps = Partial<{
+  variant: 'default' | 'subdued' | 'static';
+  density: Density;
+  disabled: boolean;
+  elevation: Elevation;
+  focused: boolean;
+  validationValence: MessageValence;
+  size: Size;
+  checked: boolean;
+}>;
+
+export type InputMetaStyleProps = Partial<{
+  srOnly: boolean;
+  validationValence: MessageValence;
+}>;
+
+export const inputTextLabel = 'py-1 text-sm text-description';
+
+const textInputSurfaceFocus =
+  'transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator';
+
+const textInputSurfaceHover = 'hover:bg-focus-surface';
+
+const booleanInputSurface =
+  'shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-surface aria-[checked=mixed]:bg-accent-surface';
+
+const booleanInputSurfaceHover =
+  'hover:bg-un-accent-hover hover:aria-checked:bg-accent-surface-hover hover:aria-[checked=mixed]:bg-accent-surface-hover';
+
+// TODO(burdon): Replace with semantic tokens.
+const inputValence = (valence?: MessageValence) => {
+  switch (valence) {
+    case 'success':
+      return 'shadow-emerald-500/50 dark:shadow-emerald-600/50';
+    case 'info':
+      return 'shadow-cyan-500/50 dark:shadow-cyan-600/50';
+    case 'warning':
+      return 'shadow-amber-500/50 dark:shadow-amber-600/50';
+    case 'error':
+      return 'shadow-rose-500/50 dark:shadow-rose-600/50';
+  }
+};
+
+const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full bg-transparent text-current placeholder-placeholder',
+  'dx-focus-subdued',
+  densityDimensions(props.density),
+  props.disabled && staticDisabled,
+];
+
+const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
+  textInputSurfaceFocus,
+  densityDimensions(props.density),
+  props.disabled ? staticDisabled : textInputSurfaceHover,
+];
+
+const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
+  '[[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 && 'dx-focus-static',
+];
+
+const inputInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  props.variant === 'subdued'
+    ? mx(...sharedSubduedInputStyles(props), ...etc)
+    : props.variant === 'static'
+      ? mx(...sharedStaticInputStyles(props), ...etc)
+      : mx(
+          ...sharedDefaultInputStyles(props),
+          !props.disabled && 'dx-focus-ring',
+          inputValence(props.validationValence),
+          ...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(snapSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
+
+const inputSwitch: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
+  mx(
+    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',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const inputSwitchThumb: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+  mx(
+    getSize(size === 'px' ? 'px' : ((size - 2) as Size)),
+    'block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]',
+    ...etc,
+  );
+
+const inputWithSegmentsInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx(
+    'font-mono selection:bg-transparent mx-auto',
+    props.density === 'fine' ? 'text-base pointer-fine:text-sm' : 'text-lg',
+    props.disabled && 'cursor-not-allowed',
+    ...etc,
+  );
+
+const inputSegment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx(
+    'flex items-center justify-center font-mono',
+    props.density === 'fine' ? 'size-10 pointer-fine:size-8 rounded-xs' : 'size-12 rounded-xs',
+    'bg-input-surface text-base-surface-text transition-colors border border-separator',
+    'data-[focused]:bg-attention-surface data-[focused]:border-neutral-focus-indicator',
+    'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-neutral-focus-indicator',
+    inputValence(props.validationValence),
+    props.disabled && staticDisabled,
+    ...etc,
+  );
+
+const inputLabel: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('block', inputTextLabel, props.srOnly && 'sr-only', ...etc);
+
+const inputDescription: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('text-description', props.srOnly && 'sr-only', ...etc);
+
+const inputDescriptionAndValidation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx('leading-none my-1.5', props.srOnly && 'sr-only', ...etc);
+
+const inputValidation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
+  mx(inputTextLabel, props.srOnly ? 'sr-only' : textValence(props.validationValence), ...etc);
+
+export const inputTheme = {
+  input: inputInput,
+  textArea: inputTextArea,
+  inputWithSegments: inputWithSegmentsInput,
+  segment: inputSegment,
+  checkbox: inputCheckbox,
+  checkboxIndicator: inputCheckboxIndicator,
+  label: inputLabel,
+  description: inputDescription,
+  switch: inputSwitch,
+  switchThumb: inputSwitchThumb,
+  validation: inputValidation,
+  descriptionAndValidation: inputDescriptionAndValidation,
+};

package/src/{styles → theme}/components/link.ts

@@ -5,7 +5,6 @@
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import { focusRing } from '../fragments';
 
 export type LinkStyleProps = {
   variant?: 'accent' | 'neutral';
@@ -13,11 +12,11 @@ export type LinkStyleProps = {
 
 export const linkRoot: ComponentFunction<LinkStyleProps> = ({ variant }, ...etc) =>
   mx(
-    'underline decoration-1 underline-offset-2 transition-color rounded-sm',
+    'underline decoration-1 underline-offset-2 transition-color rounded-xs',
     variant === 'neutral'
       ? 'text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90'
-      : 'text-accentText hover:text-accentTextHover visited:text-accentText visited:hover:text-accentTextHover',
-    focusRing,
+      : 'text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover',
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/{styles → theme}/components/list.ts

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import { densityBlockSize, focusRing, getSize, ghostHover } from '../fragments';
+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), 'mbs-2.5', ...etc);
+  mx(getSize(5), 'mt-2.5', ...etc);
 
 export const listItemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
-  mx('is-5 rounded 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/{styles → theme}/components/main.ts

@@ -7,8 +7,8 @@ import { type ComponentFunction } from '@dxos/ui-types';
 import { mx } from '../../util';
 
 // Padding to apply to in-flow elements which need to clear the fixed topbar/bottombar.
-export const topbarBlockPaddingStart = 'pbs-[--topbar-size] sticky-top-from-topbar-bottom';
-export const bottombarBlockPaddingEnd = 'pbe-[--statusbar-size] sticky-bottom-from-statusbar-bottom';
+export const topbarBlockPaddingStart = 'py-(--dx-topbar-size) dx-sticky-top-from-topbar-bottom';
+export const bottombarBlockPaddingEnd = 'pb-(--dx-statusbar-size) dx-sticky-bottom-from-statusbar-bottom';
 
 export const mainPadding = 'dx-main-content-padding';
 export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
@@ -25,14 +25,10 @@ export const mainContent: ComponentFunction<MainStyleProps> = ({ bounce }, ...et
 export const mainSidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
   mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
 
-export const mainDrawer: ComponentFunction<MainStyleProps> = (_, ...etc) =>
-  mx('dx-main-drawer', 'dx-focus-ring-inset-over-all', ...etc);
-
 export const mainOverlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
 
 export const mainTheme = {
   content: mainContent,
   sidebar: mainSidebar,
-  drawer: mainDrawer,
   overlay: mainOverlay,
 };

package/src/{styles → theme}/components/menu.ts

@@ -4,49 +4,39 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import {
-  dataDisabled,
-  descriptionText,
-  modalSurface,
-  popperMotion,
-  subduedFocus,
-  surfaceShadow,
-  surfaceZIndex,
-} from '../fragments';
+import { dataDisabled } from '../../fragments';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type MenuStyleProps = Partial<{
   constrainBlockSize: boolean;
   elevation: Elevation;
 }>;
 
-export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx('rounded p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto', ...etc);
-
 export const menuContent: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'is-48 rounded md:is-56 border border-separator',
+    'dx-modal-surface w-48 rounded-sm md:w-56 border border-separator',
     surfaceZIndex({ elevation, level: 'menu' }),
     surfaceShadow({ elevation: 'positioned' }),
-    modalSurface,
-    popperMotion,
     ...etc,
   );
 
+export const menuViewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto', ...etc);
+
 export const menuItem: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
   mx(
-    'flex cursor-pointer select-none items-center gap-2 rounded-sm pli-2 plb-2 text-sm',
-    'data-[highlighted]:bg-hoverSurface',
-    subduedFocus,
+    'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
+    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
+    'dx-focus-subdued',
     dataDisabled,
     ...etc,
   );
 
 export const menuSeparator: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx('mlb-1 mli-2 bs-px bg-separator', ...etc);
+  mx('my-1 mx-2 h-px bg-separator', ...etc);
 
 export const menuGroupLabel: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
-  mx(descriptionText, 'select-none pli-2 plb-2', ...etc);
+  mx('text-description', 'select-none px-2 py-2', ...etc);
 
 export const menuArrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
 

package/src/{styles → theme}/components/message.ts

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

package/src/{styles → theme}/components/popover.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import { focusRing, modalSurface, surfaceShadow, surfaceZIndex } from '../fragments';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type PopoverStyleProps = Partial<{
   constrainBlock: boolean;
@@ -13,21 +12,23 @@ export type PopoverStyleProps = Partial<{
   elevation: Elevation;
 }>;
 
-export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
+export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'rounded-md',
-    constrainBlock && 'max-bs-[--radix-popover-content-available-height] overflow-y-auto',
-    constrainInline && 'max-is-[--radix-popover-content-available-width] overflow-x-auto',
+    'dx-modal-surface border border-separator rounded-sm',
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'menu' }),
+    'dx-focus-ring',
     ...etc,
   );
 
-export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
+export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
   mx(
-    'border border-separator rounded-md',
-    modalSurface,
-    surfaceShadow({ elevation: 'positioned' }),
-    surfaceZIndex({ elevation, level: 'menu' }),
-    focusRing,
+    'grid grid-rows-[1fr] min-h-0 min-w-popover-min-width',
+    (constrainBlock || constrainInline) && 'overflow-hidden',
+    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)',
     ...etc,
   );
 

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

@@ -0,0 +1,115 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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 offset with scrollbar. */
+  centered?: boolean;
+  /** Add default padding. */
+  /** TODO(burdon): Integrate with Column.Root padding. */
+  padding?: boolean;
+  /** Use thin scrollbars. */
+  /** TODO(burdon): Density fine/course. */
+  thin?: boolean;
+  /** Enable snap scrolling. */
+  snap?: boolean;
+};
+
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation }, ...etc) =>
+  mx(
+    // 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,
+  );
+
+/**
+ * NOTE: The browser reserves space for scrollbars.
+ */
+export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
+  { orientation, centered, padding, snap, autoHide },
+  ...etc
+) => {
+  return mx(
+    'flex-1 min-h-0 w-full',
+
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
+
+    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',
+          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ]
+      : [
+          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ],
+
+    ...etc,
+  );
+};
+
+export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
+  root: scrollAreaRoot,
+  viewport: scrollAreaViewport,
+};

package/src/{styles → theme}/components/select.ts

@@ -4,15 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import {
-  blockSeparator,
-  ghostHighlighted,
-  modalSurface,
-  separatorBorderColor,
-  surfaceShadow,
-  surfaceZIndex,
-} from '../fragments';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type SelectStyleProps = Partial<{
   elevation: Elevation;
@@ -20,8 +12,8 @@ export type SelectStyleProps = Partial<{
 
 export const selectContent: ComponentFunction<SelectStyleProps> = ({ elevation }, ...etc) => {
   return mx(
-    'min-w-[--radix-select-trigger-width] rounded max-bs-[--radix-select-content-available-height] border border-separator',
-    modalSurface,
+    'dx-modal-surface rounded-sm border border-separator',
+    'min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
     ...etc,
@@ -32,10 +24,10 @@ export const selectViewport: ComponentFunction<SelectStyleProps> = (_props, ...e
 
 export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
   mx(
-    'flex items-center min-bs-[2rem] pli-3 plb-1 gap-2',
-    'text-baseText leading-none select-none outline-none',
+    '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,
   );
 
@@ -44,10 +36,10 @@ export const selectItemIndicator: ComponentFunction<SelectStyleProps> = (_props,
 export const selectArrow: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
 
 export const selectSeparator: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx(blockSeparator, separatorBorderColor, ...etc);
+  mx('self-stretch border-b my-1 border-separator', ...etc);
 
 export const selectScrollButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx(modalSurface, 'flex items-center justify-center cursor-default bs-6 is-full', ...etc);
+  mx('dx-modal-surface flex items-center justify-center cursor-default h-6 w-full', ...etc);
 
 export const selectTheme: Theme<SelectStyleProps> = {
   content: selectContent,

package/src/{styles → theme}/components/separator.ts

@@ -5,7 +5,6 @@
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import { blockSeparator, inlineSeparator, separatorBorderColor, subduedSeparatorBorderColor } from '../fragments';
 
 export type SeparatorStyleProps = {
   orientation?: 'horizontal' | 'vertical';
@@ -14,8 +13,9 @@ export type SeparatorStyleProps = {
 
 export const separatorRoot: ComponentFunction<SeparatorStyleProps> = ({ orientation, subdued }, ...etc) =>
   mx(
-    orientation === 'vertical' ? inlineSeparator : blockSeparator,
-    subdued ? subduedSeparatorBorderColor : separatorBorderColor,
+    'self-stretch',
+    orientation === 'vertical' ? 'border-e mx-1' : 'border-b my-1',
+    subdued ? 'border-subdued-separator' : 'border-separator',
     ...etc,
   );
 

package/src/theme/components/skeleton.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type SkeletonStyleProps = {
+  variant?: 'default' | 'circle' | 'text';
+};
+
+export const skeletonRoot: ComponentFunction<SkeletonStyleProps> = ({ variant = 'default' }, ...etc) =>
+  mx(
+    'animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md',
+    variant === 'circle' && 'rounded-full',
+    variant === 'text' && 'rounded-sm',
+    ...etc,
+  );
+
+export const skeletonTheme: Theme<SkeletonStyleProps> = {
+  root: skeletonRoot,
+};

package/src/theme/components/splitter.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type SplitterStyleProps = {};
+
+const splitterRoot: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
+  mx('relative h-full overflow-hidden', ...etc);
+
+const splitterPanel: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
+  mx('absolute inset-x-0 flex flex-col overflow-hidden', ...etc);
+
+export const splitterTheme: Theme<SplitterStyleProps> = {
+  root: splitterRoot,
+  panel: splitterPanel,
+};