Keyboard
| Key | Effect |
|---|---|
| Click trigger | Toggle. |
| Escape | Dismiss (policy-aware). |
| Tab | Focus moves into content. |
This component, layer by layer
Pure state machines (FSMs). No DOM. Run in server, Vitest, Worker. Reach for these when you only want the behavior.
Non-modal anchored panel.
Install
pnpm add @kumiki/machines Pure-TS — non-modal lifecycle
import { createPopoverMachine } from '@kumiki/machines/popover';
const m = createPopoverMachine({ closeOnEscape: true });
m.send({ type: 'OPEN' });
console.log(m.state); // 'open'
m.send({ type: 'ESCAPE' });
console.log(m.state); // 'closed'Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**
Install
pnpm add @kumiki/headless Drive your own DOM (compound)
<script lang="ts">
import { createPopover } from '@kumiki/headless/popover';
const p = createPopover();
</script>
<button {@attach p.trigger}>Share</button>
<div {@attach p.content}>
<h2 {@attach p.title}>Share this page</h2>
<button {@attach p.close}>Done</button>
</div>Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.
Install
pnpm add @kumiki/components/popover Basic — share menu
<script lang="ts">
import { Root, Trigger, Content, Title, Close } from '@kumiki/components/popover';
let open = $state(false);
</script>
<Root bind:open>
<Trigger>Share</Trigger>
<Content>
<Title>Share this page</Title>
<button>Copy link</button>
<Close>Done</Close>
</Content>
</Root>Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.
Live preview…
Install
pnpm add @kumiki/atelier Floating panel
<script lang="ts">
import { Tailwind as Popover } from '@kumiki/atelier/popover';
</script>
<Popover.Root>
<Popover.Trigger>Notifications</Popover.Trigger>
<Popover.Content>
<Popover.Title>Inbox</Popover.Title>
<Popover.Description>You have 3 unread items.</Popover.Description>
<Popover.Close>Dismiss</Popover.Close>
</Popover.Content>
</Popover.Root>/ accessibility
Accessibility
axe-core — run on every PR (LTR + RTL × every documented state).
Test discipline
- axe-core — run on every PR (LTR + RTL × every documented state).
- APG keyboard tests — Playwright, hand-written per pattern.
- VoiceOver / NVDA — Guidepup nightly schedule.
- Type-level required names — title / aria-label / aria-labelledby.