Reference behavior package

VanillaJS runtime over Seventh UI CSS

This package adds behavior that CSS cannot provide: initialization, lifecycle cleanup, runtime events, keyboard support, focus management, and ARIA state synchronization for Seventh UI components.

Open Navigation docs View component status Legacy install

Ready Component runtimes

Dialog, Tabs, Menu, Tooltip, Toast, Navigation, and Data Table are implemented through the shared registry, focus utilities, event system, timers, data modeling, and cleanup contract.

init(document)

Package Boundary

The visual contract remains in @seventh-ui/css. This package consumes the public runtime contract exported by the npm package and only enhances documented hooks.

CSS owns

Visual contract

Tokens, component classes, icons, assets, and `.sui-*` styling stay in the CSS package.

Runtime owns

Behavior

Controllers synchronize DOM state, events, keyboard handling, focus, ARIA, timers, and cleanup.

Hooks use

`data-sui-*`

Runtime hooks are explicit and progressive; native HTML and ARIA remain the first choice.

Current Stack

Foundation, runtime core, accessibility utilities, and the primary component runtime backlog are now in place.

001 Foundation Build, ESM output, browser bundle, package guard.

002 Runtime Core Registry, scoped init, idempotency, events, cleanup.

003 Accessibility Focus trap, roving tabindex, Escape, outside pointer, ARIA helpers.

005 Dialog Open, close, cancellable events, focus containment, restoration.

006 Tabs Selection, roving focus, panel synchronization, ARIA state.

007 Menu Trigger state, roving focus, item activation, dismissal.

008 Tooltip Trigger relationships, timing, hover/focus behavior, Escape dismissal.

009 Toast Toast region, timing, dismissal, and announcements.

010 Navigation Navigation drawer and mobile disclosure behavior.

011 Data Table TanStack Table Core engine rendered with Seventh UI CSS classes.

Local Playground

Run the docs server and open the printed localhost URL.

npm run docs