Zetta v0.10

Components · Data display

Resizable

A draggable divider that lets a reader re-proportion two panes — a sidebar against content, an editor against a preview. The 6px hit area stays invisible until hover or focus, when the grip lights up in the brand colour.

Preview

Two panes with a divider; hover or focus the handle to reveal the brand grip.

Light
Navigation
Content area — drag the divider to resize.
Dark
Navigation
Content area — drag the divider to resize.
Accessibility
Navigation
Content area — drag the divider to resize.

Spec

Values and token references straight from the Zetta spec.

resizable-handle
width
6px
backgroundColor
transparent
cursor
col-resize
position
relative
resizable-handle-hover
backgroundColor
{colors.brand}
resizable-handle-focus
backgroundColor
{colors.brand}
outline
2px solid {colors.border-focus}
outlineOffset
2px

Build with the skill

No package to install — hand this to your AI to generate the resizable panes in your stack.

Prompt for your AI 
Implement the Zetta "Resizable" component in this project's stack using the zetta-design-md skill.

- Apply the `resizable` spec from the skill (variants: handle, handle-hover).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

  • 6px handle with a col-resize cursor, transparent until interaction; hover and focus paint it brand with the standard 2px ring.
  • Keep a sensible minimum width on each pane so the layout can't collapse to nothing.

Accessibility

  • Expose the handle as role="separator" with aria-orientation, make it focusable, and let arrow keys move it in fixed increments — drag must never be the only way to resize.

Known gaps

  • Horizontal (row) splitters, multi-pane groups, and collapse-to-edge behaviour are not specified — the spec defines the vertical handle.