/ definition-list

DefinitionList

@kumiki/headless/definition-list

Planned Svelte 5 attachment for DefinitionList — semantic <dl> term/value pairing with id wiring for cross-references.

Source

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 { createDefinitionList } from '@kumiki/headless/definition-list';
  const ctl = createDefinitionList({});
</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.

Live preview

Install

pnpm add @kumiki/components

Term / Description

<DefinitionList.Root>
  <DefinitionList.Term>Status</DefinitionList.Term>
  <DefinitionList.Description>Active</DefinitionList.Description>
  <DefinitionList.Term>Owner</DefinitionList.Term>
  <DefinitionList.Description>baseballyama</DefinitionList.Description>
</DefinitionList.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Two-column key/value layout

<script lang="ts">
  import { Tailwind as DL } from '@kumiki/atelier/definition-list';
</script>

<DL.Root layout="inline">
  <DL.Term>Plan</DL.Term>
  <DL.Description>Pro</DL.Description>
  <DL.Term>Renews</DL.Term>
  <DL.Description>2026-12-01</DL.Description>
</DL.Root>

This component, layer by layer

Keyboard

Test discipline