History

dev d421f1fb5d feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link Full canon for the rest of the typography family, following Text (commit `03531709`) as template. Each primitive ships morfo (passive, scope eidos, 0 events) + full eidos set (svelte/css/types/index + README with required sections) + canon 6-tab demo (≥400 lines each). Heading — semantic h1..h6 via `level` prop, visual style decoupled via `style` prop (defaults to match level but `<Heading level={3} style="h1">` allowed). Demo 594 lines. Display — always-h1 page-title primitive. Always uses `style="hero"`. Tracking via literal em values until foundation emits hero-scale tracking tokens. Demo 546 lines. Code — inline code via `<code>`. `variant: 'plain' \| 'soft' \| 'outline'` for subtle background chrome. Demo 423 lines. CodeBlock — multi-line `<pre><code>` with optional title + copy button (button utility, NOT a sema verb — kept out of morfo per 2-of-3 rule). Demo 402 lines. Kbd — keyboard shortcut chrome over `style="code"`. Demo 418 lines. Mark — text highlight via `<mark>`. Palette uses canonical `ColorRole` intents (default `fulfill` ≈ legacy yellow). Demo 402 lines. Highlight — substring highlighter inside Text. Scans children for `query` and wraps matches. Same intent palette as Mark. Demo 407 lines. Link — text link via `<a>`. `variant: 'default' \| 'subtle' \| 'plain'` for underline style, `intent: ColorRole` for color. Passive on the morfo — hover/active is CSS-only, navigation belongs to the consumer (router). Demo 448 lines. Architectural deviations from air documented per README's Decisiones section: - Heading: semantic level vs visual style decoupling - Code split into inline `<Code>` + block `<CodeBlock>` (was one component with `variant='block'` in air) - Mark/Highlight palette swapped from literal hue names to canonical ColorRole intents (theme contract) - Link palette opened to full ColorRole; `quiet`/`emphasized` air variants dropped in favour of composable patterns `npm run component:audit`: 90 / 90 PASS, 0 NEEDS-WORK. svelte-check: 0 errors, 0 new warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>		5 months ago
..
README.md	feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link	5 months ago
index.ts	feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link	5 months ago
kbd.css	feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link	5 months ago
kbd.svelte	feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link	5 months ago
types.ts	feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link	5 months ago

README.md

Eidos Kbd

Keyboard shortcut typography primitive. Renders <kbd> with a small chrome (border + background + inner padding) so the key looks like a physical cap. Inline within prose — for shortcut hints, key sequences.

Superficie

<p>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open search.</p>
<p>Hit <Kbd variant="outline" size="sm">Esc</Kbd> to dismiss.</p>
<p>Type <Kbd variant="ghost">tab</Kbd> to switch focus.</p>

Baseline

Origen: air/components/typography/kbd (rama morfo-runtime). Adaptaciones para eidos:

Default size aligned with foundation: air defaulted size=2 (small). Eidos reads --font-size-xs directly so the default pulls from the foundation contract instead of a numeric paso.
Variants added: surface (default, filled with neutral element bg + border), outline (transparent + border), ghost (no chrome). Air had only one treatment.
Lower border emphasis preserved: surface keeps the border-bottom-width: 2px + inset shadow trick to read like a physical cap; outline and ghost drop it for cleaner inline flow.
Tokens: --air-kbd-* → consume the foundation directly (--style-code-*, --color-neutral-*, --font-size-{key}).

Comparativa

Capacidad	UIX Kbd	Radix Themes Kbd	Chakra Kbd	Mantine Kbd	shadcn/ui Kbd
Visual key-cap chrome	Sí	Sí	Sí	Sí	Sí
Variants	surface / outline / ghost	size only	colorScheme	none	none
Size override	Sí	Sí	Sí	Sí	inherits font-size
Mono family	Sí (`--style-code-font-family`)	Sí	Sí	Sí	Sí
Inline semantics (`<kbd>`)	Sí	Sí	Sí	Sí	Sí
`as` polymorphism	Sí	Sí	Sí	Sí	No

Decisiones

Default surface variant: the chrome is the entire point of the primitive — bare mono text would just be <Code>.
Mono family from --style-code-font-family: same source as Code / CodeBlock. Keeps the typography contract single-rooted.
min-inline-size: 1.5em: ensures single-char keys ("K", "1") read as square caps and don't collapse to text width.
No platform key mapping: air did not ship <Kbd cmd> to swap Ctrl → ⌘ on macOS. Defer until a clear use case emerges; the consumer can branch on navigator.platform today.

Eventos Sema

Kbd declara 0 eventos. Visual-only — el shortcut event lives on the consumer (a Toolbar button, a global key handler), no en el primitive de label.

Gaps

Gap	Disposición	Detalle
Platform-aware key swap (`Ctrl` ↔ `⌘`)	diferir	El consumer branches en `navigator.platform`. Si el patrón se repite, añadir un helper `kbdForPlatform()` o un wrapper docs-level.
Sequence helper (`<Kbd sequence={['Ctrl','K']} />`)	diferir	Composable inline — `<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>` cubre el caso sin contratar más superficie.
Sound on key press demo (educational)	descartar	El primitive es label, no input. Sound on press pertenece a una demo o componente Sound separado.

Referencias

Radix Themes Kbd: https://www.radix-ui.com/themes/docs/components/kbd
Chakra UI Kbd: https://chakra-ui.com/docs/components/kbd
Mantine Kbd: https://mantine.dev/core/kbd/
MDN <kbd>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

Passive justification

Visual-only (scope: ['eidos']). Una sola part Provider, marker [data-kbd]. Sin estados, sin keyboard, sin ARIA propia. La recipe consume --style-code-* + --color-neutral-* del foundation + el override --_kbd-font-size inline.