Scroll Area

This draft family contains Root, Viewport, Scrollbar, and Thumb. Base owns the logical scroll surface, normalized position and extent facts, scroll requests, focus participation, system/composed negotiation, and bounded Thumb control leases. The shadcn layer adds only a clipped frame, full-size rounded Viewport, slim oriented tracks, and a flexible rounded Thumb.

Viewport requests composed as a design-language preference through the privileged Scroll surface. It does not require that projection: a host without composed chrome may fall back to system under D-SCROLL-PROJECTION-0001. In either case, the host retains wheel, touch, keyboard, physics, inertia, and overscroll. The family exposes no DOM scrollbar, size, position callback, or other host-specific API.

The comparison baseline is shadcn-ui/ui revision f31ed81983653919dd4fe77aee4b4859f610f1dc, apps/v4/registry/new-york-v4/ui/scroll-area.tsx. Its Web DOM and Radix details remain comparison evidence rather than portable guarantees. Import the family from @proto.ui/prototypes-shadcn/scroll-area, or generate its React facade with proto-ui add react shadcn-scroll-area.

1. Scroll the Viewport vertically and horizontally; confirm both axes move the same host surface.
2. Drag each Thumb and confirm its axis requests host scrolling without creating a second position state.
3. Tab to the Viewport and confirm its inherited focus-visible ring appears without moving or resizing the surface.
4. Confirm the vertical track is 10px wide at the top/right edge and the horizontal track is 10px high at the bottom/left edge.
5. Confirm both tracks have transparent two-pixel borders, the horizontal track uses column layout, and both Thumbs remain roleless and outside tab order.
6. Repeat in Web Components, React, Vue, and Vue 2 at a 320px viewport with no page overflow.

The related entities are draft; this page describes the current cataloged direction, not a stable compatibility guarantee.