# Specs

Persistent specifications for `@seventh-ui/vanillajs`, the framework-agnostic JavaScript runtime package for Seventh UI.

This package complements `@seventh-ui/css`. It must provide production-ready behavior for interactive components while preserving the CSS package as the canonical visual contract.

## Source Contract

- CSS package: `@seventh-ui/css`
- CSS package version: `1.0.0`
- Visual source: Seventh DS v1.0.0
- Runtime contract source: package export `@seventh-ui/css/contracts/runtime-integration.json`
- Installed contract file: `node_modules/@seventh-ui/css/dist/contracts/runtime-integration.json`

Runtime packages must consume the published npm package contract. Specs and docs must not rely on sibling repository paths, local absolute paths, or CSS source-tree files as integration authority.

## Runtime Package Naming

Framework/runtime packages use the compact runtime suffix:

- `@seventh-ui/vanillajs`
- `@seventh-ui/reactjs`
- `@seventh-ui/vuejs`
- `@seventh-ui/angularjs`

Specs for this package may reference future bundles by package name only. They must not impose folder names, repository paths, or build layouts for those future packages.

## Structure

Each spec lives in a numbered directory:

```text
.specs/
  001-feature-name/
    spec.md
    plan.md
    tasks.md
```

Specs define what must be true. Plans explain how to implement. Tasks break delivery into verifiable steps.

## Decision Policy

`@seventh-ui/vanillajs` should make pragmatic decisions when the design system does not define runtime behavior. Ambiguity should be resolved in favor of accessible, market-aligned, dependency-light browser behavior.

Do not block implementation waiting for undocumented Figma intent. Document inferred behavior in the relevant spec.

## Current Specs

- `000-project-mission`: package mission, boundaries, and success criteria.
- `001-package-foundation`: package structure, build outputs, exports, and dependency rules.
- `002-runtime-core`: initialization, registry, lifecycle, events, and cleanup.
- `003-accessibility-and-focus`: shared keyboard, focus, ARIA, and reduced-motion rules.
- `004-component-behavior-matrix`: component runtime ownership and implementation order.
- `005-dialog-runtime`: Dialog open/close, focus trap, overlay dismissal, and events.
- `006-tabs-runtime`: Tabs selection, roving focus, panels, and ARIA state.
- `007-menu-runtime`: Menu trigger, roving focus, item activation, and dismissal.
- `008-tooltip-runtime`: Tooltip trigger, timing, hover/focus behavior, and ARIA.
- `009-toast-runtime`: Toast region, timing, dismissal, and announcements.
- `010-navigation-runtime`: Navigation drawer and mobile disclosure behavior.
- `011-data-table-runtime`: TanStack-backed Data Table behavior rendered with Seventh UI CSS classes.

## Implementation Priority

1. Establish package foundation and build outputs.
2. Implement runtime core with explicit initialization and cleanup.
3. Implement shared accessibility/focus utilities.
4. Deliver components that cannot be production-ready with CSS alone: Dialog, Tabs, Menu, Tooltip, Toast, Navigation, Slider helpers, and TanStack-backed Data Table runtime behavior.