@dxos/react-ui 0.10.0 → 0.11.1

package/src/components/Message/Message.tsx

@@ -18,14 +18,7 @@ import { type ThemedClassName } from '../../util';
 import { IconButton } from '../Button';
 import { Column } from '../Column';
 import { Icon } from '../Icon';
-
-const messageIcons: Record<MessageValence, string> = {
-  success: 'ph--check-circle--duotone',
-  info: 'ph--info--duotone',
-  warning: 'ph--warning--duotone',
-  error: 'ph--warning-circle--duotone',
-  neutral: 'ph--info--duotone',
-};
+import { messageIcons } from './message-icons';
 
 type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   valence?: MessageValence;
@@ -33,9 +26,11 @@ type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.d
   asChild?: boolean;
   titleId?: string;
   descriptionId?: string;
+  /** Overrides the default valence icon; consumed by {@link MessageTitle}. */
+  icon?: string;
 };
 
-type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence };
+type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence; icon?: string };
 
 const MESSAGE_NAME = 'Message';
 
@@ -90,6 +85,7 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
       classNames,
       titleId: propsTitleId,
       descriptionId: propsDescriptionId,
+      icon,
       children,
       ...props
     },
@@ -101,7 +97,7 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const elevation = useElevationContext(propsElevation);
 
     return (
-      <MessageProvider {...{ titleId, descriptionId, valence }}>
+      <MessageProvider {...{ titleId, descriptionId, valence, icon }}>
         <Column.Root
           asChild={asChild}
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
@@ -121,6 +117,35 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
 
 MessageRoot.displayName = MESSAGE_NAME;
 
+//
+// Content
+//
+
+type MessageContentProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const MESSAGE_CONTENT_NAME = 'Message.Content';
+
+/**
+ * Optional padded wrapper around a message's title and body — supplies the inset that hosts
+ * otherwise had to add with their own wrapper `div`. Spans the root's tracks via subgrid so
+ * `Message.Title` still places its icon in the gutter.
+ */
+const MessageContent = forwardRef<HTMLDivElement, MessageContentProps>(
+  ({ asChild, classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Comp = asChild ? Slot : Primitive.div;
+    return (
+      <Comp {...props} className={tx('message.content', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+
 //
 // Title
 //
@@ -136,8 +161,8 @@ const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
   ({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
     const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
-    const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const icon = iconProp ?? messageIcons[valence];
+    const { titleId, valence, icon: contextIcon } = useMessageContext(MESSAGE_TITLE_NAME);
+    const icon = iconProp ?? contextIcon ?? messageIcons[valence];
     return (
       <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
         {icon && (
@@ -168,29 +193,29 @@ const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 
 //
-// Content
+// Body
 //
 
-type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
+type MessageBodyProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
 };
 
-const MESSAGE_CONTENT_NAME = 'Message.Content';
+const MESSAGE_BODY_NAME = 'Message.Body';
 
-const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
+const MessageBody = forwardRef<HTMLParagraphElement, MessageBodyProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
+    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
     const Comp = asChild ? Slot : Primitive.p;
     return (
-      <Comp {...props} className={tx('message.content', {}, classNames)} id={descriptionId} ref={forwardedRef}>
+      <Comp {...props} className={tx('message.body', {}, classNames)} id={descriptionId} ref={forwardedRef}>
         {children}
       </Comp>
     );
   },
 );
 
-MessageContent.displayName = MESSAGE_CONTENT_NAME;
+MessageBody.displayName = MESSAGE_BODY_NAME;
 
 //
 // Message
@@ -198,12 +223,11 @@ MessageContent.displayName = MESSAGE_CONTENT_NAME;
 
 export const Message = {
   Root: MessageRoot,
-  Title: MessageTitle,
   Content: MessageContent,
+  Title: MessageTitle,
+  Body: MessageBody,
 };
 
 export const Callout = Message;
 
-export type { MessageContentProps, MessageRootProps, MessageTitleProps };
-
-export { messageIcons };
+export type { MessageBodyProps, MessageContentProps, MessageRootProps, MessageTitleProps };

package/src/components/Message/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export { messageIcons } from './message-icons';
+
 export * from './Message';

package/src/components/Message/message-icons.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type MessageValence } from '@dxos/ui-types';
+
+// Kept out of `Message.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export const messageIcons: Record<MessageValence, string> = {
+  success: 'ph--check-circle--duotone',
+  info: 'ph--info--duotone',
+  warning: 'ph--warning--duotone',
+  error: 'ph--warning-circle--duotone',
+  neutral: 'ph--info--duotone',
+};

package/src/components/Panel/Panel.stories.tsx

@@ -24,11 +24,24 @@ const List = composable<HTMLDivElement, ScrollAreaRootProps>((props, forwardedRe
   );
 });
 
+/**
+ * Panel is the standard full-height surface layout: a CSS grid whose `auto 1fr auto`
+ * rows pin a toolbar and statusbar while the content region absorbs the remaining
+ * height, so a scroll container inside it scrolls rather than growing the page. Each
+ * region takes `asChild` to merge its grid slot onto a `Toolbar.Root` / `ScrollArea`
+ * instead of nesting an extra wrapper element.
+ *
+ * @idiom org.dxos.react-ui.panelLayout
+ *   applies: Any full-height pane with a fixed toolbar/statusbar and a scrolling body
+ *   instead-of: Hand-wiring flex columns with min-height:0 and a bespoke scroll container
+ *   uses: {@link Panel.Root}, {@link Panel.Toolbar}, {@link Panel.Content}, {@link Panel.Statusbar}
+ *   related: org.dxos.react-ui-menu.toolbarMenu
+ */
 const DefaultStory = () => {
   return (
-    <Panel.Root className='dx-document'>
+    <Panel.Root classNames='dx-document'>
       <Panel.Toolbar asChild>
-        <Toolbar.Root classNames='gap-2'>
+        <Toolbar.Root>
           <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
           <Input.Root>
             <Input.TextInput placeholder='Search' />

package/src/components/Panel/Panel.theme.ts

@@ -5,7 +5,7 @@
 import { mx } from '@dxos/ui-theme';
 import { type ComponentFunction } from '@dxos/ui-types';
 
-type Size = 'lg' | 'md' | 'sm';
+type Size = 'lg' | 'md';
 
 export type PanelStyleProps = {
   size?: Size;
@@ -14,7 +14,6 @@ export type PanelStyleProps = {
 const sizes: Record<Size, string> = {
   lg: 'h-(--dx-topbar-size)',
   md: 'h-(--dx-toolbar-size)',
-  sm: 'h-(--dx-statusbar-size)',
 };
 
 const root: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
@@ -25,14 +24,24 @@ const root: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
     ...etc,
   );
 
-// Toolbars default to the bar surface (tier 5); callers can still override via the trailing classes.
+// `bar` is an aspect, not a level: the toolbar steps off whichever surface hosts the panel, so a
+// panel in a card and a panel on the canvas each get a bar that reads against their own host.
 const toolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
-  mx('[grid-area:toolbar]', 'shrink-0', 'bg-toolbar-surface', sizes[size], ...etc);
+  mx(
+    '[grid-area:toolbar]',
+    'shrink-0',
+    // The shadow falls onto the content row, which paints after this one in DOM order and would
+    // cover it wherever the content has its own background — the editor did, the mailbox list did
+    // not, which is why the bar looked flat in one and raised in the other.
+    'dx-toolbar-surface shadow-sm relative z-[1]',
+    sizes[size],
+    ...etc,
+  );
 
 const content: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
 
-const statusbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
-  mx('[grid-area:statusbar]', 'shrink-0', sizes[size], ...etc);
+const statusbar: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
+  mx('[grid-area:statusbar]', 'shrink-0', 'dx-toolbar-surface', ...etc);
 
 export const panelTheme = {
   root,

package/src/components/Popover/Popover.theme.ts

@@ -13,7 +13,7 @@ export type PopoverStyleProps = Partial<{
 
 const content: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'dx-popover-surface overflow-hidden border border-separator rounded-sm',
+    'dx-popover-surface overflow-hidden border-2 border-separator rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
     'dx-focus-ring',

package/src/components/Popover/Popover.tsx

@@ -6,14 +6,11 @@
 
 import { composeEventHandlers } from '@radix-ui/primitive';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { createContextScope } from '@radix-ui/react-context';
-import { type Scope } from '@radix-ui/react-context';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { useFocusGuards } from '@radix-ui/react-focus-guards';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 import { useId } from '@radix-ui/react-id';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { createPopperScope } from '@radix-ui/react-popper';
 import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Presence } from '@radix-ui/react-presence';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -38,33 +35,19 @@ import { RemoveScroll } from 'react-remove-scroll';
 
 import { useElevationContext, useSafeCollisionPadding, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import {
+  POPOVER_NAME,
+  PopoverProvider,
+  type PopoverScopedProps,
+  createPopoverContext,
+  usePopoverContext,
+  usePopperScope,
+} from './PopoverContext';
 
 //
 // Context
 //
 
-type ScopedProps<P> = P & { __scopePopover?: Scope };
-
-const POPOVER_NAME = 'Popover';
-
-const [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [createPopperScope]);
-
-const usePopperScope = createPopperScope();
-
-type PopoverContextValue = {
-  triggerRef: RefObject<HTMLButtonElement>;
-  contentId: string;
-  hasCustomAnchor: boolean;
-  modal: boolean;
-  open: boolean;
-  onOpenChange(open: boolean): void;
-  onOpenToggle(): void;
-  onCustomAnchorAdd(): void;
-  onCustomAnchorRemove(): void;
-};
-
-const [PopoverProvider, usePopoverContext] = createPopoverContext<PopoverContextValue>(POPOVER_NAME);
-
 //
 // PopoverRoot
 //
@@ -77,7 +60,7 @@ type PopoverRootProps = {
   modal?: boolean;
 };
 
-const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>) => {
+const PopoverRoot: FC<PopoverRootProps> = (props: PopoverScopedProps<PopoverRootProps>) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -121,7 +104,7 @@ type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>
 type PopoverAnchorProps = PopperAnchorProps;
 
 const PopoverAnchor = forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
-  (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverAnchorProps>, forwardedRef) => {
     const { __scopePopover, ...anchorProps } = props;
     const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
@@ -151,7 +134,7 @@ type PopoverTriggerProps = PrimitiveButtonProps & {
 };
 
 const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
-  (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverTriggerProps>, forwardedRef) => {
     const { __scopePopover, asChild, ...triggerProps } = props;
     const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
@@ -193,7 +176,7 @@ type PopoverVirtualTriggerProps = {
   virtualRef: RefObject<PopoverTriggerElement | null>;
 };
 
-const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) => {
+const PopoverVirtualTrigger = (props: PopoverScopedProps<PopoverVirtualTriggerProps>) => {
   const { __scopePopover, virtualRef } = props;
   const context = usePopoverContext(VIRTUAL_TRIGGER_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -232,7 +215,7 @@ type PopoverPortalProps = {
   forceMount?: true;
 };
 
-const PopoverPortal = (props: ScopedProps<PopoverPortalProps>) => {
+const PopoverPortal = (props: PopoverScopedProps<PopoverPortalProps>) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME, __scopePopover);
   return (
@@ -263,7 +246,7 @@ type PopoverContentProps = ThemedClassName<PopoverContentTypeProps> & {
 };
 
 const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps>(
-  (props: ScopedProps<PopoverContentProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverContentProps>, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
@@ -289,7 +272,7 @@ export interface PopoverContentTypeProps extends Omit<
 > {}
 
 const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
-  (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverContentTypeProps>, forwardedRef) => {
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
     const contentRef = useRef<HTMLDivElement>(null);
     const composedRefs = useComposedRefs(forwardedRef, contentRef);
@@ -340,7 +323,7 @@ const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContent
 );
 
 const PopoverContentNonModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
-  (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverContentTypeProps>, forwardedRef) => {
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
     const hasInteractedOutsideRef = useRef(false);
     const hasPointerDownOutsideRef = useRef(false);
@@ -424,7 +407,7 @@ type PopoverContentImplProps = Omit<PopperContentProps, 'onPlaced'> &
   };
 
 const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentImplProps>(
-  (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverContentImplProps>, forwardedRef) => {
     const {
       __scopePopover,
       trapFocus,
@@ -518,7 +501,7 @@ type PopoverCloseElement = ComponentRef<typeof Primitive.button>;
 type PopoverCloseProps = PrimitiveButtonProps;
 
 const PopoverClose = forwardRef<PopoverCloseElement, PopoverCloseProps>(
-  (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverCloseProps>, forwardedRef) => {
     const { __scopePopover, ...closeProps } = props;
     const context = usePopoverContext(CLOSE_NAME, __scopePopover);
     return (
@@ -545,7 +528,7 @@ type PopperArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPr
 type PopoverArrowProps = PopperArrowProps;
 
 const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
-  (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {
+  (props: PopoverScopedProps<PopoverArrowProps>, forwardedRef) => {
     const { __scopePopover, classNames, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopePopover);
     const { tx } = useThemeContext();
@@ -608,7 +591,9 @@ export const Popover = {
   Viewport: PopoverViewport,
 };
 
-export { createPopoverScope };
+// Type-only re-export (erased, so it does not affect the refresh boundary): keeps the inferred
+// types of downstream composites nameable across package boundaries.
+export type { PopoverScopedProps } from './PopoverContext';
 
 export type {
   PopoverAnchorProps,

package/src/components/Popover/PopoverContext.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Scope, createContextScope } from '@radix-ui/react-context';
+import { createPopperScope } from '@radix-ui/react-popper';
+import { type RefObject } from 'react';
+
+// Kept out of `Popover.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export type PopoverScopedProps<P> = P & { __scopePopover?: Scope };
+
+export const POPOVER_NAME = 'Popover';
+
+export const [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [createPopperScope]);
+
+export const usePopperScope = createPopperScope();
+
+export type PopoverContextValue = {
+  triggerRef: RefObject<HTMLButtonElement>;
+  contentId: string;
+  hasCustomAnchor: boolean;
+  modal: boolean;
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  onOpenToggle(): void;
+  onCustomAnchorAdd(): void;
+  onCustomAnchorRemove(): void;
+};
+
+export const [PopoverProvider, usePopoverContext] = createPopoverContext<PopoverContextValue>(POPOVER_NAME);

package/src/components/Popover/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export { createPopoverScope } from './PopoverContext';
+
 export * from './Popover';

package/src/components/ScrollContainer/ScrollContainer.stories.tsx

@@ -35,7 +35,7 @@ const DefaultStory = ({ initialLines = 0, running: runningProp, ...props }: Stor
   }, [running]);
 
   return (
-    <Panel.Root className='dx-document'>
+    <Panel.Root classNames='dx-document'>
       <Panel.Toolbar asChild>
         <Toolbar.Root>
           <Button onClick={() => setRunning((running) => !running)}>{running ? 'Stop' : 'Start'}</Button>

package/src/components/ScrollContainer/ScrollContainer.tsx

@@ -2,7 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createContext } from '@radix-ui/react-context';
 import React, {
   type PropsWithChildren,
   type RefObject,
@@ -25,6 +24,7 @@ import { composable, composableProps, slottable } from '../../util';
 import { type ThemedClassName } from '../../util';
 import { IconButton } from '../Button';
 import { ScrollArea, type ScrollAreaRootProps } from '../ScrollArea';
+import { ScrollContainerProvider, useScrollContainerContext } from './ScrollContainerContext';
 
 const isBottom = (el: HTMLElement | null) => {
   return !!(el && el.scrollHeight - el.scrollTop === el.clientHeight);
@@ -36,21 +36,6 @@ export interface ScrollController {
   scrollToBottom: (behavior?: ScrollBehavior) => void;
 }
 
-type ScrollContainerContextValue = {
-  controller?: ScrollController;
-  pinned?: boolean;
-  overflow?: boolean;
-  /** Called by Viewport to register/unregister the scroll element. */
-  setViewport: (el: HTMLDivElement | null) => void;
-  /** Called by Viewport on wheel events to update pinned state. */
-  setPinned: (value: boolean) => void;
-  /** Called by Viewport on scroll events to update overflow state. */
-  setOverflow: (value: boolean) => void;
-};
-
-const [ScrollContainerProvider, useScrollContainerContext] =
-  createContext<ScrollContainerContextValue>('ScrollContainer');
-
 //
 // Root
 //
@@ -328,8 +313,6 @@ ScrollContainerScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 // ScrollContainer
 //
 
-export { useScrollContainerContext };
-
 export const ScrollContainer = {
   Root: ScrollContainerRoot,
   Content: ScrollContainerContent,

package/src/components/ScrollContainer/ScrollContainerContext.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type ScrollController } from './ScrollContainer';
+
+// Kept out of `ScrollContainer.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+export type ScrollContainerContextValue = {
+  controller?: ScrollController;
+  pinned?: boolean;
+  overflow?: boolean;
+  /** Called by Viewport to register/unregister the scroll element. */
+  setViewport: (el: HTMLDivElement | null) => void;
+  /** Called by Viewport on wheel events to update pinned state. */
+  setPinned: (value: boolean) => void;
+  /** Called by Viewport on scroll events to update overflow state. */
+  setOverflow: (value: boolean) => void;
+};
+
+export const [ScrollContainerProvider, useScrollContainerContext] =
+  createContext<ScrollContainerContextValue>('ScrollContainer');

package/src/components/ScrollContainer/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+export { useScrollContainerContext } from './ScrollContainerContext';
+
 export * from './ScrollContainer';

package/src/components/Select/Select.theme.ts

@@ -26,7 +26,7 @@ const viewport: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx(...
 
 const item: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
   mx(
-    'flex items-center min-h-[2rem] px-2.5 py-1 gap-2',
+    'flex items-center min-h-(--dx-control) px-(--dx-control-pad) py-1 gap-2',
     'text-base-fg leading-none select-none outline-hidden',
     '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
     'dx-highlighted',
@@ -41,7 +41,7 @@ const separator: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
   mx('self-stretch border-b my-1 border-separator', ...etc);
 
 const scrollButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx('dx-modal-surface flex items-center justify-center cursor-default h-6 w-full', ...etc);
+  mx('dx-modal-surface flex items-center justify-center cursor-default h-(--dx-control-sm) w-full', ...etc);
 
 export const selectTheme: Theme<SelectStyleProps> = {
   content,

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { Slider } from './Slider';
+
+const meta = {
+  title: 'ui/react-ui-core/components/Slider',
+  component: Slider,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className='w-64'>
+      <Slider defaultValue={[50]} max={100} step={1} thumbLabels={['Value']} />
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const ControlledSlider = () => {
+      const [value, setValue] = useState([25]);
+      return (
+        <div className='flex flex-col gap-2 w-64'>
+          <Slider value={value} onValueChange={setValue} max={100} step={1} aria-label='Controlled value' />
+          <div className='text-sm text-description'>{value[0]}</div>
+        </div>
+      );
+    };
+    return <ControlledSlider />;
+  },
+};
+
+export const MinMaxStep: Story = {
+  render: () => (
+    <div className='w-64'>
+      <Slider defaultValue={[0.4]} min={0.2} max={0.7} step={0.01} aria-label='Min/max/step value' />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className='w-64'>
+      <Slider defaultValue={[50]} max={100} step={1} disabled aria-label='Disabled value' />
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className='h-64'>
+      <Slider defaultValue={[50]} max={100} step={1} orientation='vertical' aria-label='Vertical value' />
+    </div>
+  ),
+};
+
+export const Range: Story = {
+  render: () => (
+    <div className='w-64'>
+      <Slider defaultValue={[25, 75]} max={100} step={1} thumbLabels={['Minimum', 'Maximum']} />
+    </div>
+  ),
+};
+
+/**
+ * Regression guard for the thumb-visibility bug (an invalid `is-*`/`bs-*` size utility collapsed
+ * the thumb to zero size). Exercises default/disabled/vertical/two-thumb side by side so a visual
+ * pass catches a missing knob in any state at a glance.
+ */
+export const ThumbVisibility: Story = {
+  render: () => (
+    <div className='flex items-start gap-8'>
+      <div className='flex flex-col gap-2 w-48'>
+        <span className='text-sm text-description'>Default</span>
+        <Slider defaultValue={[50]} max={100} step={1} aria-label='Default value' />
+      </div>
+      <div className='flex flex-col gap-2 w-48'>
+        <span className='text-sm text-description'>Disabled</span>
+        <Slider defaultValue={[50]} max={100} step={1} disabled aria-label='Disabled value' />
+      </div>
+      <div className='flex flex-col gap-2 w-48'>
+        <span className='text-sm text-description'>Two-thumb</span>
+        <Slider defaultValue={[25, 75]} max={100} step={1} thumbLabels={['Minimum', 'Maximum']} />
+      </div>
+      <div className='flex flex-col gap-2 items-center'>
+        <span className='text-sm text-description'>Vertical</span>
+        <div className='h-48'>
+          <Slider defaultValue={[50]} max={100} step={1} orientation='vertical' aria-label='Vertical value' />
+        </div>
+      </div>
+    </div>
+  ),
+};