Resizable New Alpha Light DOM & Tailwind

Usage

Resizable composes an alternating sequence of panels and separators. It keeps ordered sizes as normalized percentages of the usable axis, excluding the fixed handle tracks, and applies minimum, maximum, and collapse constraints without moving consumer content.

Importing the group, panel, and handle modules registers their custom elements:

import "@nordhealth/components/lib/Resizable"
import "@nordhealth/components/lib/ResizablePanel"
import "@nordhealth/components/lib/ResizableHandle"

Composition

Resizable uses an alternating sequence of Panels and Handles. Panels own sizing constraints and content; each Handle controls the adjacent regions and exposes separator semantics and input behavior.

• Resizable Panel defines a constrained region in the group.
• Resizable Handle provides the accessible separator interaction between panels.

Examples

Vertical layouts

Set orientation="vertical" to resize on the block axis. Separator ARIA orientation and keyboard behavior update automatically.

Visible handle

Set with-handle on a separator to show a centered grip without changing its minimal layout track or token-derived pointer target.

Right-to-left layouts

Set dir="rtl" on the group or an ancestor. Horizontal panel order follows the document direction, Arrow Left and Arrow Right keep logical resizing intent, and pointer deltas are mirrored. Vertical behavior remains direction-independent.

Nested layouts

A panel can contain another Resizable group. Registration is direct-child only, so nested state and interaction remain independent.

Constraints and collapse

Panel default-size, min-size, max-size, and collapsed-size values are percentages. Home and End move the primary panel before a focused separator to the nearest boundary feasible through that separator. Enter toggles a panel with collapsible and restores its latest expanded size when constraints still permit it.

Keyboard interaction

• Orientation-appropriate Arrow keys resize by keyboard-step.
• Shift plus Arrow uses large-keyboard-step.
• Home and End move to the feasible minimum/collapsed or maximum.
• Enter toggles the collapsible primary panel.

Controlled state

Supply layout as a JavaScript array for controlled state. nord-resize proposes immutable { id, size } records, but the rendered panels change only after the consumer echoes the next size array back to layout. Without layout, interactions commit internal state; defaultLayout can provide its initial value.

Events and methods

• nord-resize-start is cancelable and fires after usable geometry and pointer capture succeed.
• nord-resize is cancelable and carries ordered layout records plus the interaction source.
• nord-resize-end closes every accepted pointer lifecycle, including cancellation and capture loss.
• getLayout(), setLayout(), resizePanel(), collapsePanel(), and expandPanel() expose the same validation and event model programmatically.

Accessibility

Each enabled handle is a focusable ARIA window splitter with a localized label, controlled panel references, matching orientation, and actual feasible percentage values. aria-valuenow is rounded to at most two decimal places for concise announcements; canonical layouts and resize events retain their six-decimal precision. Collapsed state is reported at collapsed-size, including zero, rather than clamped to the expanded minimum. The visible track stays thin while its calc(var(--n-space-xl) + var(--n-space-s)) target is at least 44 CSS pixels.

Use stable panel IDs, keep controls usable at every allowed size, and add a specific handle label when the default “Resize panels” does not identify the affected region. Logical styling and interactions support RTL, zoom, high contrast, and reduced motion.