Skip to content

feat: add the Collapsible primitive#12

Open
ivanbanov wants to merge 2 commits into
mainfrom
feat/collapsible
Open

feat: add the Collapsible primitive#12
ivanbanov wants to merge 2 commits into
mainfrom
feat/collapsible

Conversation

@ivanbanov

Copy link
Copy Markdown
Member

Summary

Adds the Collapsible primitive as two packages:

  • @dunky.dev/collapsible — the framework-free core: a state machine (built on @dunky.dev/state-machine) with two states, open and closed, plus a connect that translates state into the agnostic bindings vocabulary.
  • @dunky.dev/react-collapsible — the thin React binding rendering the compound parts.

A collapsible is a disclosure following the WAI-ARIA APG Disclosure (Show/Hide) pattern: a trigger that shows and hides an associated content region in place. State is exposed controlled (open, follow + report, matching the dialog's contract) and uncontrolled (defaultOpen), with every transition reported through onOpenChange. Includes a changeset (minor for both packages).

Anatomy

<Collapsible>       - root; owns open/close state, renders no DOM of its own
  |_ <Trigger>      - the button that toggles the content
  |_ <Content>      - the region that is shown or hidden

Behavior

  • Trigger renders a native <button> carrying aria-expanded and a constant aria-controls reference to the content; Enter/Space activation is native button semantics.
  • Content stays mounted while closed — hidden via the native hidden attribute plus aria-hidden — so the ARIA reference never dangles and data-state can drive open/close animations.
  • Disabled is a machine guard on user toggling only: the trigger stays focusable and announces aria-disabled instead of dropping out of the tab order; programmatic and controlled open/close stay ungated.
  • Every part carries data-state (open / closed) and data-disabled — the styling and animation hooks.

Test plan

  • pnpm test:ci — 9 files, 101 tests passing
  • pnpm typecheck
  • pnpm lint
  • pnpm format:check
  • pnpm build

🤖 Generated with Claude Code

ivanbanov and others added 2 commits July 18, 2026 11:05
Adds @dunky.dev/collapsible (framework-free machine) and
@dunky.dev/react-collapsible with the Collapsible root plus
Collapsible.Trigger and Collapsible.Content parts.

A disclosure that toggles a content region: the content stays mounted
while closed, disabled gates user toggling while the trigger stays
focusable, and controlled open follows the prop and reports toggles
through onOpenChange.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@ivanbanov ivanbanov changed the title feat: add the Collapsible primitive feat(react): add the Collapsible primitive Jul 18, 2026
@ivanbanov ivanbanov changed the title feat(react): add the Collapsible primitive feat: add the Collapsible primitive Jul 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant