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 { createTimeField } from '@kumiki/headless/time-field';
const ctl = createTimeField({});
</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.
Compound usage
<script lang="ts">
import { TimeField } from '@kumiki/components/time-field';
</script>
<TimeField.Root>
<!-- subcomponents go here -->
</TimeField.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 Locale-aware time input
<script lang="ts">
import { Tailwind as TimeField } from '@kumiki/atelier/time-field';
import { Time } from '@internationalized/date';
let value = $state(new Time(9, 30));
</script>
<TimeField.Root bind:value granularity="minute">
<TimeField.Label>Open at</TimeField.Label>
<TimeField.Input>
<TimeField.Segment kind="hour" />
<TimeField.Segment kind="minute" />
<TimeField.Segment kind="dayPeriod" />
</TimeField.Input>
</TimeField.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.