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 { createAlert } from '@kumiki/headless/alert';
const ctl = createAlert({});
</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 Severity-driven role + live
<script lang="ts">
import { Alert } from '@kumiki/components/alert';
</script>
<Alert.Root severity="error">
<Alert.Title>Something went wrong</Alert.Title>
<Alert.Description>Please retry in a moment.</Alert.Description>
</Alert.Root> Dismissible
<Alert.Root severity="info" dismissible onDismiss={() => (open = false)}>
<Alert.Title>Heads up</Alert.Title>
<Alert.Close>×</Alert.Close>
</Alert.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 Inline status surface
<script lang="ts">
import { Tailwind as Alert } from '@kumiki/atelier/alert';
let dismissed = $state(false);
</script>
{#if !dismissed}
<Alert.Root severity="warn" dismissible onDismiss={() => (dismissed = true)}>
<Alert.Title>Heads up</Alert.Title>
<Alert.Description>Your trial expires in 3 days.</Alert.Description>
<Alert.Close />
</Alert.Root>
{/if}/ 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.