Kbd

Overview

Kbd renders a semantic <kbd> element with the muted pill styling; ZitsKbdGroup wraps several ZitsKbd elements to compose a shortcut. Neither has a headless primitive underneath; there is no interaction beyond what the caller adds.

Install

navius add kbd --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsKbdGroup>
    <ZitsKbd>⌘</ZitsKbd>
    <ZitsKbd>K</ZitsKbd>
</ZitsKbdGroup>

Parts and props

Both ZitsKbd and ZitsKbdGroup take only ChildContent/Attributes; there is no component-specific prop beyond the preset class set.

Styling surface

Attributes on both parts is merged with the preset class set via Cn.Merge, caller classes applied last. There is no variant/size parameter.

Data attribute hooks

Part	Attribute	Description
Kbd	data-slot="kbd"	Emitted by ZitsKbd itself; also targeted by a descendant selector so a ZitsKbd nested inside a data-slot="tooltip-content" ancestor picks up a background-tinted variant.
KbdGroup	data-slot="kbd-group"	Emitted by ZitsKbdGroup itself.

Kbd is presentational: a <kbd> element carries the correct semantics on its own, so neither component adds a role or keyboard handler.