@dxos/react-ui-list 0.9.1-main.c7dcc2e112 → 0.10.0

package/src/components/List.theme.ts

@@ -0,0 +1,99 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { tv } from '@dxos/ui-theme';
+
+/**
+ * Tailwind-variants theme for all react-ui-list components.
+ * Consumers call `listTheme.styles()` to get the slot functions.
+ * Each slot function accepts an optional `{ class: ... }` override for per-instance merging.
+ *
+ * Structural pattern shared across list components:
+ * - viewport: ScrollArea wrapper (`dx-container`)
+ * - content:  flex-col item container
+ * - item:     base row (interactive affordances come from dx-hover / dx-selected / dx-current)
+ */
+const listStyles = tv({
+  slots: {
+    //
+    // Accordion
+    //
+    accordionItem: 'overflow-hidden',
+    // Row trigger: spans the full width and pins the trailing caret to the inline-end edge.
+    accordionTrigger: 'group flex items-start justify-between gap-2 p-2 dx-focus-ring-inset w-full text-start',
+    // Leading / trailing icon wrappers: fixed height so they sit on the centerline of the first
+    // content line even when the header spans multiple lines.
+    accordionTriggerIcon: 'flex items-center h-6 shrink-0',
+    accordionTriggerContent: 'min-w-0 flex-1',
+    // Slide animations are driven by Radix Accordion's data-state attribute.
+    accordionBody: 'overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down',
+    accordionBodyContent: 'p-2',
+
+    //
+    // Listbox
+    //
+    listboxViewport: 'dx-container',
+    listboxContent: 'flex flex-col',
+    // `dx-selected` pairs with `aria-selected="true"` set per-option (see
+    // `ui-theme/src/css/components/state.md`). `outline-none` removes the native focus
+    // ring; Tabster / `dx-focus-ring` handles keyboard focus at the container level.
+    listboxItem: 'flex items-center dx-hover dx-selected px-3 py-2 cursor-pointer outline-none',
+    listboxItemLabel: 'grow truncate',
+
+    //
+    // OrderedList
+    //
+    orderedListViewport: 'dx-container',
+    orderedListContent: 'flex flex-col',
+    // `dx-current` enables `aria-current` row styling (not listbox/option semantics).
+    orderedListItem: 'relative dx-current',
+    // Bordered column wrapping title + detail panel in the master-detail layout.
+    orderedListDetailColumn: 'flex flex-col ring-1 ring-subdued-separator rounded-sm overflow-hidden',
+    // `min-h` matches the shared rail-item track so handles, title, and caret share a baseline.
+    orderedListDetailTitleRow: 'flex items-center min-h-[var(--dx-rail-item)]',
+    orderedListDetailPanel: 'px-2 pb-2',
+    orderedListTitle: 'flex grow items-center truncate cursor-pointer',
+
+    //
+    // Picker
+    //
+    // `px-[var(--gutter,…)]` aligns padding with sibling `Column.Center` content, falling back to
+    // 0.75rem when not nested under `Column.Root`.
+    pickerItem: 'dx-hover dx-selected px-[var(--gutter,0.75rem)] py-1 cursor-pointer select-none',
+
+    //
+    // Combobox
+    //
+    // `m-form-chrome mb-0` mirrors the rest of the form-chrome padding convention.
+    comboboxInput: 'm-form-chrome mb-0 w-[calc(100%-2*var(--spacing-form-chrome))]',
+    comboboxList: 'py-form-chrome',
+    // Trigger value / placeholder text — grows and truncates; subdued when placeholder.
+    comboboxTriggerText: 'font-normal text-start flex-1 min-w-0 truncate me-2',
+    // Item row adds flex layout; `dx-hover`/`dx-selected` and padding come from `Picker.Item`.
+    comboboxItem: 'flex w-full gap-2 items-center',
+    comboboxItemDescription: 'text-sm text-description truncate',
+
+    //
+    // ItemContent
+    //
+    // Two-column grid: fixed rail-item icon track + flexible content track.
+    itemContentRoot: 'grid grid-cols-[var(--dx-rail-item)_minmax(0,1fr)] items-center gap-x-2 is-full min-is-0',
+    itemContentIcon: 'col-start-1 row-start-1 place-self-center',
+    itemContentTitle: 'col-start-2 row-start-1 min-is-0 truncate',
+    itemContentDescription: 'col-start-2 row-start-2 min-is-0 truncate text-sm text-description',
+
+    //
+    // Empty
+    //
+    empty: 'flex flex-col items-center justify-center gap-2 p-4 text-sm text-center text-description',
+  },
+});
+
+/** react-ui-list theme: call `.styles()` to get per-slot class functions. */
+export const listTheme = {
+  styles: listStyles,
+};
+
+/** Slot names of {@link listTheme.styles}, for `bridgeTv` registration. */
+export const listSlots = Object.keys(listTheme.styles()) as Array<keyof ReturnType<typeof listTheme.styles>>;

package/src/components/Listbox/ListItemContent.stories.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Icon } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { ListItemContent } from './ListItemContent';
+
+const meta = {
+  title: 'ui/react-ui-list/ItemContent',
+  component: ListItemContent,
+  render: (args) => (
+    <div className='flex flex-col divide-y divide-subdued-separator'>
+      <ListItemContent {...args} classNames='p-2' />
+      <ListItemContent icon='ph--clock--regular' title='Title only, no description' classNames='p-2' />
+      <ListItemContent
+        icon={<Icon icon='ph--x-circle--regular' size={5} classNames='text-error-text' />}
+        title='Failed run'
+        description='Failed · 2.6s'
+        classNames='p-2'
+      />
+    </div>
+  ),
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof ListItemContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <Icon icon='ph--check-circle--regular' size={5} classNames='text-success-text' />,
+    title: '6/26/2026, 5:00:00 AM',
+    description: 'Success · 2.5s',
+  },
+};

package/src/components/Listbox/ListItemContent.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ReactElement, type ReactNode, forwardRef } from 'react';
+
+import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { listTheme } from '../List.theme';
+
+/**
+ * Presentational row layout: a rail-sized leading icon centered on the primary line, with an
+ * optional secondary line aligned beneath the title in the content column. Drop inside a
+ * `Listbox.Item`, an `Accordion.ItemHeader`, or any row container.
+ *
+ * The grid uses the same `var(--dx-rail-item)` rail track as `useListGrid`, so an adjacent body
+ * (e.g. an `Accordion.ItemBody`) can reuse `grid-cols-[var(--dx-rail-item)_1fr]` to line its
+ * content up under the same content column.
+ */
+const styles = listTheme.styles();
+
+export type ListItemContentProps = ThemedClassName<{
+  /**
+   * Leading icon: an icon name (rendered as a neutral size-5 `Icon`) or a custom `Icon` element
+   * carrying its own size/colour (e.g. `<Icon icon='…' classNames='text-success-text' />`).
+   */
+  icon?: string | ReactElement;
+  /** Primary line. */
+  title: ReactNode;
+  /** Optional secondary line, aligned under the title in the content column. */
+  description?: ReactNode;
+}>;
+
+export const ListItemContent = forwardRef<HTMLDivElement, ListItemContentProps>(
+  ({ classNames, icon, title, description }, forwardedRef) => (
+    <div ref={forwardedRef} className={styles.itemContentRoot({ class: mx(classNames) })}>
+      {icon != null && (
+        <div className={styles.itemContentIcon()}>
+          {typeof icon === 'string' ? <Icon icon={icon} size={5} /> : icon}
+        </div>
+      )}
+      <span className={styles.itemContentTitle()}>{title}</span>
+      {description != null && <span className={styles.itemContentDescription()}>{description}</span>}
+    </div>
+  ),
+);
+
+ListItemContent.displayName = 'ItemContent';

package/src/components/Listbox/Listbox.stories.tsx

@@ -6,9 +6,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { random } from '@dxos/random';
-import { Input, Panel, Toolbar } from '@dxos/react-ui';
+import { Icon, Input, Panel, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
+import { useListDisclosure } from '../../aspects';
 import { Listbox } from './Listbox';
 
 random.seed(1);
@@ -157,7 +159,7 @@ const popoverOptions: Option[] = random.helpers.multiple(
 const PopoverStory = () => {
   const [selected, setSelected] = useState<string | undefined>(popoverOptions[0]?.value);
   return (
-    <div className='max-w-xs p-2 ring-1 ring-subdued-separator rounded'>
+    <div className='max-w-xs p-2 border-1 border-subdued-separator rounded'>
       <Listbox.Root value={selected} onValueChange={setSelected}>
         <Listbox.Content aria-label='Models'>
           {popoverOptions.map((option) => (
@@ -177,6 +179,70 @@ const PopoverStory = () => {
   );
 };
 
+//
+// Plain (non-selectable) — no value model on Root, so rows render as `role=list`/`listitem`
+// with hover but no `aria-selected`. This is the styled-content-list mode that replaces the
+// deprecated `@dxos/react-ui` `List`/`ListItem`.
+//
+
+const PlainStory = () => (
+  <Listbox.Root>
+    <Listbox.Viewport>
+      <Listbox.Content aria-label='Items'>
+        {allItems.slice(0, 6).map((item) => (
+          <Listbox.Item key={item.id} id={item.id}>
+            <Listbox.ItemLabel>{item.name}</Listbox.ItemLabel>
+          </Listbox.Item>
+        ))}
+      </Listbox.Content>
+    </Listbox.Viewport>
+  </Listbox.Root>
+);
+
+//
+// Disclosure — expandable rows showing icon + title, each with a single full-row header
+// button (icon + title + caret on one line) that toggles a description panel via the
+// `useListDisclosure` aspect. Plain (non-selectable) list, so the header button is the only
+// focusable element per row — arrow keys move row-to-row, not into the caret.
+//
+
+const DisclosureStory = () => {
+  const disclosure = useListDisclosure({ mode: 'multi' });
+  return (
+    <Listbox.Root>
+      <Listbox.Viewport>
+        <Listbox.Content aria-label='Items'>
+          {allItems.slice(0, 8).map((item) => {
+            const { expanded, triggerProps, panelProps } = disclosure.bind(item.id);
+            return (
+              <Listbox.Item key={item.id} id={item.id} classNames='flex-col items-stretch p-0'>
+                <button
+                  {...triggerProps}
+                  type='button'
+                  className='flex items-center gap-2 px-3 py-2 text-start dx-hover dx-focus-ring-inset'
+                >
+                  <Icon icon='ph--package--regular' size={5} classNames='shrink-0' />
+                  <span className='flex-1 min-w-0 truncate'>{item.name}</span>
+                  <Icon
+                    icon='ph--caret-right--regular'
+                    size={4}
+                    classNames={mx('shrink-0 transition-transform', expanded && 'rotate-90')}
+                  />
+                </button>
+                {expanded && (
+                  <div {...panelProps} className='ps-[var(--dx-rail-item)] px-3 pb-2 text-sm text-description'>
+                    {item.description}
+                  </div>
+                )}
+              </Listbox.Item>
+            );
+          })}
+        </Listbox.Content>
+      </Listbox.Viewport>
+    </Listbox.Root>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-list/Listbox',
   render: (args) => <DefaultStory {...args} />,
@@ -191,8 +257,41 @@ export default meta;
 type Story = StoryObj<StoryArgs>;
 
 export const Default: Story = {};
-export const Thin: Story = { args: { thin: true, padding: true, showDescription: false } };
-export const WithDisabled: Story = { args: { items: allItems.slice(0, 6), disabledIndex: 2 } };
-export const MasterDetail: Story = { render: () => <MasterDetailStory /> };
-export const WithToolbar: Story = { render: () => <WithToolbarStory /> };
-export const Popover: Story = { render: () => <PopoverStory /> };
+
+export const Thin: Story = {
+  args: {
+    thin: true,
+    padding: true,
+    showDescription: false,
+  },
+};
+
+export const WithDisabled: Story = {
+  args: {
+    items: allItems.slice(0, 6),
+    disabledIndex: 2,
+  },
+};
+
+export const MasterDetail: Story = {
+  render: () => <MasterDetailStory />,
+};
+
+export const WithToolbar: Story = {
+  render: () => <WithToolbarStory />,
+};
+
+export const Popover: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
+  render: () => <PopoverStory />,
+};
+
+/** Non-selectable: opt-out of the selection model — plain styled rows (role=list/listitem). */
+export const Plain: Story = {
+  render: () => <PlainStory />,
+};
+
+/** Items with icon + title + description and a per-row expand caret (disclosure aspect). */
+export const Disclosure: Story = {
+  render: () => <DisclosureStory />,
+};

package/src/components/Listbox/Listbox.tsx

@@ -2,9 +2,15 @@
 // Copyright 2026 DXOS.org
 //
 
-// `Listbox` — single-select selectable list. Single canonical compound for the picker /
-// option-list pattern: full-pane (with `Listbox.Viewport` ScrollArea wrapper) and compact
-// popover (no Viewport) usage share the same shape and selection model.
+// `Listbox` — the package's general styled list, with **opt-in selection**. One compound for
+// both the picker / option-list pattern (full-pane with `Listbox.Viewport`, or compact popover
+// without) and plain styled content rows.
+//
+// Selection is inferred from props: pass `value`/`defaultValue`/`onValueChange` on `Root` and
+// it's a single-select `role=listbox` (options carry `aria-selected` + `dx-selected`, selection
+// follows focus); omit them and it's a plain `role=list` of `role=listitem` rows (hover only, no
+// selection semantics) — the shape the deprecated `@dxos/react-ui` `List`/`ListItem` filled.
+// (`Listbox` is slated to be renamed `List` once that legacy component is deleted.)
 //
 // Compound shape (matches Radix Select / Toolbar / Tabs):
 //
@@ -27,7 +33,7 @@
 // - `Content` — the `<ul role='listbox'>` holding the items. Applies the navigation aspect's
 //    container props (Tabster arrow nav, focus-on-entry redirect, role + aria-orientation).
 // - `Item` — `<li role='option'>` with `aria-selected` on the selected row, paired with
-//    `dx-selected` styling. See `ui-theme/src/css/components/selected.md`.
+//    `dx-selected` styling. See `ui-theme/src/css/components/state.md`.
 // - `ItemLabel` — text helper that truncates and takes most of the row width.
 // - `Indicator` — optional checkmark icon next to the selected item (confirmatory, since
 //    `dx-selected` already styles the row).
@@ -70,6 +76,10 @@ import {
   useListNavigation,
   useListSelection,
 } from '../../aspects';
+import { listTheme } from '../List.theme';
+import { ListItemContent, type ListItemContentProps } from './ListItemContent';
+
+const styles = listTheme.styles();
 
 const LISTBOX_NAME = 'Listbox';
 const LISTBOX_ROOT_NAME = 'Listbox.Root';
@@ -86,6 +96,12 @@ const LISTBOX_INDICATOR_NAME = 'Listbox.Indicator';
 //
 
 type ListboxContextValue = {
+  /**
+   * Whether the list participates in selection. Inferred on `Root` from the presence of
+   * `value`/`defaultValue`/`onValueChange`. Drives `role` (listbox/option vs list/listitem),
+   * `aria-selected`, and whether row clicks update the selection model.
+   */
+  selectable: boolean;
   /** Selection aspect binding factory; items consume their own bindings from this. */
   selection: UseListSelectionReturn;
 };
@@ -103,7 +119,10 @@ const [ListboxItemProvider, useListboxItemContext] = createContext<ListboxItemCo
 //
 
 type RootProps = PropsWithChildren<{
-  /** Currently-selected option id (controlled). */
+  /**
+   * Currently-selected option id (controlled). Supplying any of `value`/`defaultValue`/
+   * `onValueChange` makes the list selectable; omitting all three renders plain rows.
+   */
   value?: string;
   /** Initial selected option for uncontrolled mode. */
   defaultValue?: string;
@@ -119,9 +138,15 @@ type RootProps = PropsWithChildren<{
 }>;
 
 const Root = ({ value, defaultValue, onValueChange, autoFocus: _autoFocus, children }: RootProps) => {
-  // The selection aspect emits `string | undefined` because `useListSelection` is mode-
-  // generic; in single-select the value only clears when the consumer drives it, never from
-  // a row click. Filter to keep the public callback narrow.
+  // Selection is opt-in: a list is selectable only when the consumer wires the value model.
+  // Plain content lists (the migrated `@dxos/react-ui` `List` call sites) pass none of these
+  // and render as `role=list`/`listitem` rows.
+  const selectable = value !== undefined || defaultValue !== undefined || onValueChange !== undefined;
+
+  // `useListSelection` is a hook, so it is always called (stable hook order); `selectable`
+  // gates whether items actually consume the binding. The aspect emits `string | undefined`
+  // because it is mode-generic; in single-select the value only clears when the consumer
+  // drives it, never from a row click — filter to keep the public callback narrow.
   const selection = useListSelection({
     mode: 'single',
     value,
@@ -133,7 +158,7 @@ const Root = ({ value, defaultValue, onValueChange, autoFocus: _autoFocus, child
     },
   });
 
-  const context = useMemo(() => ({ selection }), [selection]);
+  const context = useMemo(() => ({ selectable, selection }), [selectable, selection]);
 
   return <ListboxProvider {...context}>{children}</ListboxProvider>;
 };
@@ -154,7 +179,7 @@ const Viewport = composable<HTMLDivElement, ViewportProps>((props, forwardedRef)
   >;
   return (
     <ScrollArea.Root
-      {...composableProps<HTMLDivElement>(rest, { classNames: 'dx-container' })}
+      {...composableProps<HTMLDivElement>(rest, { classNames: styles.listboxViewport() })}
       {...{ thin, padding, centered }}
       orientation='vertical'
       ref={forwardedRef}
@@ -179,12 +204,12 @@ type ContentProps = {
 };
 
 const Content = composable<HTMLUListElement, ContentProps>((props, forwardedRef) => {
-  // Touch the context so Content fails loudly if used outside Root.
-  useListboxContext(LISTBOX_CONTENT_NAME);
+  const { selectable } = useListboxContext(LISTBOX_CONTENT_NAME);
 
-  // `useListNavigation` bundles role=listbox, aria-orientation, Tabster arrow nav, and the
-  // focus-on-entry redirect (to selected, then first non-disabled option).
-  const navigation = useListNavigation({ mode: 'listbox' });
+  // `useListNavigation` bundles role + aria-orientation + Tabster arrow nav. In `listbox` mode
+  // it also adds the focus-on-entry redirect (to selected, then first non-disabled option);
+  // `list` mode is for the non-selectable rows (arrow nav across interactive descendants only).
+  const navigation = useListNavigation({ mode: selectable ? 'listbox' : 'list' });
 
   const { children, ...rest } = props as PropsWithChildren<ContentProps & Record<string, unknown>>;
 
@@ -192,7 +217,7 @@ const Content = composable<HTMLUListElement, ContentProps>((props, forwardedRef)
   // context-scope check. The container's role/aria/Tabster wiring comes from the navigation
   // aspect rather than the primitive's `selectable` plumbing — that keeps the ARIA grammar
   // (`aria-selected`) owned by `Item` below.
-  const composed = composableProps<HTMLUListElement>(rest, { classNames: 'flex flex-col' });
+  const composed = composableProps<HTMLUListElement>(rest, { classNames: styles.listboxContent() });
   return (
     <List
       variant='unordered'
@@ -220,55 +245,70 @@ type ItemProps = PropsWithChildren<{
   onClick?: (event: MouseEvent<HTMLLIElement>) => void;
   /** Optional focus handler in addition to selection-follows-focus. */
   onFocus?: (event: FocusEvent<HTMLLIElement>) => void;
+  /**
+   * Optional pointer-down handler. Fires before focus (and therefore before selection-follows-focus
+   * mutates the value), so consumers can observe the pre-gesture selection — e.g. to implement
+   * click-to-toggle without the focus-then-click double count.
+   */
+  onMouseDown?: (event: MouseEvent<HTMLLIElement>) => void;
 }>;
 
-// `dx-selected` pairs with `aria-selected="true"` (set per-option below); see
-// `ui-theme/src/css/components/selected.md`.
-const ITEM_BASE = 'flex items-center dx-hover dx-selected px-3 py-2 cursor-pointer outline-none';
-
 const Item = composable<HTMLLIElement, ItemProps>((props, forwardedRef) => {
-  const { id, disabled, onClick, onFocus, children, ...rest } = props as ItemProps & Record<string, unknown>;
-  const { selection } = useListboxContext(LISTBOX_ITEM_NAME);
+  const { id, disabled, onClick, onFocus, onMouseDown, children, ...rest } = props as ItemProps &
+    Record<string, unknown>;
+  const { selectable, selection } = useListboxContext(LISTBOX_ITEM_NAME);
   const binding: SelectionItemBinding = selection.bind(id, { disabled });
-
-  // Compose the selection aspect's click/focus handlers with the row's optional ones so
-  // both wire-ups stay synchronized: selection happens before user code so a click that
-  // also runs imperative side effects sees the selected value first.
+  const selected = selectable && binding.selected;
+  // A non-selectable row is interactive only if the caller wired a click; otherwise it's a
+  // plain display row (no pointer affordance).
+  const interactive = selectable || onClick != null;
+
+  // Compose the selection aspect's click/focus handlers with the row's optional ones so both
+  // wire-ups stay synchronized: selection happens before user code so a click that also runs
+  // imperative side effects sees the selected value first. Skipped entirely when not selectable
+  // so a plain row click doesn't mutate hidden selection state.
   const handleClick = useCallback(
     (event: MouseEvent<HTMLLIElement>) => {
-      binding.rowProps.onClick(event);
+      if (selectable) {
+        binding.rowProps.onClick(event);
+      }
       if (!disabled) {
         onClick?.(event);
       }
     },
-    [binding, disabled, onClick],
+    [selectable, binding, disabled, onClick],
   );
 
   const handleFocus = useCallback(
     (event: FocusEvent<HTMLLIElement>) => {
-      binding.rowProps.onFocus?.(event);
+      if (selectable) {
+        binding.rowProps.onFocus?.(event);
+      }
       onFocus?.(event);
     },
-    [binding, onFocus],
+    [selectable, binding, onFocus],
   );
 
   const composed = composableProps<HTMLLIElement>(rest, {
-    classNames: [ITEM_BASE, disabled && 'opacity-50 cursor-not-allowed'],
+    classNames: styles.listboxItem({
+      class: [!interactive && 'cursor-default', disabled && 'opacity-50 cursor-not-allowed'],
+    }),
   });
 
   // Per WAI-ARIA APG listbox guidance, disabled options remain keyboard-navigable for SR
-  // announcement; the selection model is not updated for disabled rows (the aspect's
-  // binding enforces that internally).
+  // announcement; the selection model is not updated for disabled rows (the aspect's binding
+  // enforces that internally). Non-selectable rows are `role=listitem` with no `aria-selected`.
   return (
-    <ListItemProviderHost id={id} selected={binding.selected}>
+    <ListItemProviderHost id={id} selected={selected}>
       <ListItem
         {...composed}
-        role='option'
-        tabIndex={0}
-        aria-selected={binding.selected}
+        role={selectable ? 'option' : 'listitem'}
+        tabIndex={selectable ? 0 : -1}
+        aria-selected={selectable ? selected : undefined}
         aria-disabled={disabled || undefined}
         onClick={handleClick}
         onFocus={handleFocus}
+        onMouseDown={onMouseDown}
         ref={forwardedRef}
       >
         {children}
@@ -297,7 +337,7 @@ const ListItemProviderHost = ({ id, selected, children }: PropsWithChildren<List
 type ItemLabelProps = ThemedClassName<ComponentPropsWithRef<'span'>>;
 
 const ItemLabel = forwardRef<HTMLSpanElement, ItemLabelProps>(({ classNames, children, ...rest }, forwardedRef) => (
-  <span {...rest} className={mx('grow truncate', classNames)} ref={forwardedRef}>
+  <span {...rest} className={styles.listboxItemLabel({ class: mx(classNames) })} ref={forwardedRef}>
     {children}
   </span>
 ));
@@ -344,15 +384,18 @@ const Listbox = {
   Content,
   Item,
   ItemLabel,
+  ItemContent: ListItemContent,
   Indicator,
 };
 
 export { Listbox, useListboxSelection };
+
 export type {
-  RootProps as ListboxRootProps,
-  ViewportProps as ListboxViewportProps,
+  ListItemContentProps as ItemContentProps,
   ContentProps as ListboxContentProps,
-  ItemProps as ListboxItemProps,
-  ItemLabelProps as ListboxItemLabelProps,
   IndicatorProps as ListboxIndicatorProps,
+  ItemLabelProps as ListboxItemLabelProps,
+  ItemProps as ListboxItemProps,
+  RootProps as ListboxRootProps,
+  ViewportProps as ListboxViewportProps,
 };

package/src/components/OrderedList/OrderedList.tsx

@@ -60,4 +60,4 @@ export const OrderedList = {
   ExpandCaret: OrderedListExpandCaret,
 };
 
-export type { OrderedListRootProps, OrderedListItemProps, OrderedListDetailItemProps, OrderedListViewportProps };
+export type { OrderedListDetailItemProps, OrderedListItemProps, OrderedListRootProps, OrderedListViewportProps };

package/src/components/OrderedList/OrderedListItem.tsx

@@ -17,7 +17,6 @@ import {
   IconBlock,
   IconButton,
   type IconButtonProps,
-  ListItem as NaturalListItem,
   type ThemedClassName,
   ToggleIconButton,
   useTranslation,
@@ -25,8 +24,12 @@ import {
 import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { useListGrid, useReorderItem } from '../../aspects';
+import { DropIndicator } from '../DropIndicator';
+import { listTheme } from '../List.theme';
 import { type ListItemRecord, useOrderedListContext } from './OrderedListRoot';
 
+const styles = listTheme.styles();
+
 const ORDERED_LIST_ITEM_NAME = 'OrderedListItem';
 
 type OrderedListItemContextValue = {
@@ -106,15 +109,12 @@ export const OrderedListItem = <T extends ListItemRecord>({
         style={style}
         aria-current={selected || undefined}
         onClick={onClick}
-        className={mx(
-          'relative dx-current',
-          hover && 'dx-hover',
-          state.type === 'dragging' && 'opacity-50',
-          classNames,
-        )}
+        className={styles.orderedListItem({
+          class: mx(hover && 'dx-hover', state.type === 'dragging' && 'opacity-50', classNames),
+        })}
       >
         {children}
-        {closestEdge && <NaturalListItem.DropIndicator edge={closestEdge} />}
+        {closestEdge && <DropIndicator edge={closestEdge} />}
       </div>
     </OrderedListItemProvider>
   );
@@ -169,7 +169,7 @@ export const OrderedListTitle = ({
       id={triggerProps.id}
       aria-expanded={triggerProps['aria-expanded']}
       aria-controls={triggerProps['aria-controls']}
-      className={mx('flex grow items-center truncate cursor-pointer', classNames)}
+      className={styles.orderedListTitle({ class: mx(classNames) })}
       onClick={handleClick}
     >
       {children}
@@ -310,15 +310,15 @@ export const OrderedListDetailItem = <T extends ListItemRecord>({
       classNames={mx(grid.rowProps.className, 'pb-1', classNames)}
     >
       <OrderedListDragHandle />
-      <div className='flex flex-col ring-1 ring-subdued-separator rounded-sm overflow-hidden'>
-        <div className='flex items-center min-h-[var(--dx-rail-item)]'>
+      <div className={styles.orderedListDetailColumn()}>
+        <div className={styles.orderedListDetailTitleRow()}>
           {expandable ? (
             <OrderedListTitle classNames={mx('px-2', titleClassNames)}>{title}</OrderedListTitle>
           ) : (
             // When the row is not expandable, render a plain (non-toggling) title so a click
             // doesn't mutate hidden disclosure state. Mirrors `OrderedListTitle`'s structure
             // minus the trigger plumbing.
-            <div className={mx('flex grow items-center truncate px-2', titleClassNames)}>{title}</div>
+            <div className={styles.orderedListTitle({ class: mx('cursor-auto px-2', titleClassNames) })}>{title}</div>
           )}
           {actions}
           {expandable && <OrderedListExpandCaret />}
@@ -341,7 +341,7 @@ const DetailPanel = ({ children }: PropsWithChildren) => {
     return null;
   }
   return (
-    <div {...panelProps} className='px-2 pb-2'>
+    <div {...panelProps} className={styles.orderedListDetailPanel()}>
       {children}
     </div>
   );