Component — Info sprinkle

*tatus* v0.1.0 — Draft.

R1 — Anatomy

• Single "i" icon inscribed in a circle, 14×14px at default density.
• Color: --kdr-text-muted by default; --kdr-accent on focus / hover.
• Sits adjacent (right or left) to the label it annotates; 4px gap.

R2 — Trigger

Tooltip dismisses on:

• Pointer leave (desktop)
• Blur (keyboard)
• Outside-tap (touch)
• Esc (any input modality)

R3 — Tooltip content

• 1–3 short lines max.
• No actions (no buttons, no links) — pure informational.
• If content needs actions or longer body, use specs/components/guide-cue.kmd instead.

R4 — Accessibility

• Icon: <button> (not <span>) so it's focusable + keyboard-activatable.
• Accessible name: derived from associated label + "more info" — e.g., "Project name — more info".
• Tooltip: role="tooltip"; the icon button's aria-describedby points at the tooltip id.
• Tooltip content remains in the DOM (just visually hidden) so screen-readers can read it without firing visual hover.

R5 — Internationalization

• All tooltip body translatable per specs/i18n/contract.kmd.
• Tooltip width: max 240px on desktop, full available width on mobile (minus 16px gutter).
• Long strings wrap; no horizontal scroll.

R6 — Positioning

• Uses Floating UI semantics; chooses side based on viewport.
• 8px gap between icon edge and tooltip.

R7 — Multiple sprinkles per page

• No upper limit, but author SHOULD reduce density to avoid noise; if more than half the form fields need a sprinkle, the form copy itself is unclear.

R8 — OUIA

Per specs/testing/ouia-test-hooks.kmd:

• data-ouia-component-type="InfoSprinkle"
• data-ouia-component-id="<sprinkle-id>" (auto-generated from associated label slug if not provided).
• data-ouia-safe="true" always (icon is always ready; tooltip-open state is transient and not gated).

Não-escopo

• Richcontent tooltips (use guidecue or inline-definition).
• Persistent visible tooltips (use callout-card instead).
• Tooltip arrow customization (decorative; ships hard-coded).