Resizable

Panels people resize by dragging the line between them.

Left out of Accessible first Resizing means dragging panels in desktop tools. The scheme avoids widgets that need drag or precise pointing, and avoids dense expert tools. Use instead: Card

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Resizable in StorybookSee it in dark

When to use it

• Use it when: Desktop tools where people choose how much space each panel gets.
• Not when: Phones, or layouts with one obvious shape.

Instead:

• Sidebar: Fixed app navigation.

Words

• Use common words. Explain any term you must use.
• One idea per sentence. Put the action first.
• Never blame the person.
• Use: Continue, Change, Start, You. Avoid: Invalid, Utilise, Submit, Error code.

The labels components use, from the voice tokens:

• content.action.commit: Continue
• content.action.cancel: Go back
• content.action.destroy: Delete
• content.action.retry: Try again
• content.action.empty-action: Start a new application

See Voice and tone for the whole voice.

Accessibility and keyboard

Keyboard	What happens	Not
undefined	The handle can be focused and moved with arrow keys.	undefined

Use it in code

npx open-ds add resizable

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Resizable reads 7 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Resizable's tokens to change Resizable alone.

Changes with theme

Accessible first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Handle
Fill Changes with theme	component.resizable.handle.backgroundcolor.border.defaultvar(--resizable-handle-background)	Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
Focus on focus	component.resizable.handle.focusborder-width.focusvar(--resizable-handle-focus)	border-width.3:3px
Focus ring focus Changes with theme on focus	component.resizable.handle.focus-ring-focuscolor.border.focusvar(--resizable-handle-focus-ring-focus)	Lightblue.light.600:#0B4FC0Darkblue.dark.600:#8AB4F8
Focus ring offset focus Changes with theme on focus	component.resizable.handle.focus-ring-offset-focuscolor.surface.canvasvar(--resizable-handle-focus-ring-offset-focus)	Lightgray.light.50:#F7F7F7Darkgray.dark.0:#0A0A0A
Resizable
Height	component.resizable.heightsize.iconvar(--resizable-height)	size.20:1.25rem
Corner	component.resizable.radiusradius.badgevar(--resizable-radius)	radius.4:0.25rem
Fill Changes with theme	component.resizable.backgroundcolor.border.defaultvar(--resizable-background)	Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Lightgray.light.200 · #D6D6D6Darkgray.dark.100 · #222222