Keyboard
No component-specific keymap. Inherits standard browser focus / activation behaviour.
This component, layer by layer
Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**
Attach to your own DOM
<script lang="ts">
import { createBadge } from '@kumiki/headless/badge';
const ctl = createBadge({});
</script>
<div {@attach ctl.root}>
<!-- your markup -->
</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 Three accessible-name shapes
<Badge.Root data-variant="success">New</Badge.Root>
<Badge.Root aria-label="3 unread notifications">3</Badge.Root>
<Badge.Root decorative data-variant="error" />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 Status pill
<script lang="ts">
import { Tailwind as Badge } from '@kumiki/atelier/badge';
</script>
<Badge.Root variant="success">Active</Badge.Root>
<Badge.Root variant="warn" size="sm">Pending</Badge.Root>
<Badge.Root variant="error">Failed</Badge.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.