svelte-kit-vice/src/uix/eidos/components/display

Eidos Display

Hero typography primitive — the page's display title (above an <h1> headline). Always uses the foundation's --style-hero-* tokens, which scale up at the md breakpoint. Smaller scope than Heading: a single visual treatment, with per-axis overrides + a deliberate tracking prop because at hero sizes letter-spacing is a design decision.

Superficie

<Display>Welcome to UIX.</Display>
<Display size="xxxl" weight="bold">Big.</Display>
<Display tracking="tight" align="center">Spread.</Display>
<Display as="p">Render display typography on a paragraph element.</Display>

Baseline

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

• Default tag is <h1>: air defaulted to <div>. Display titles are virtually always the document hero, so the heading semantics match the most common use; the as prop switches the tag when needed (e.g. as="p" for a marketing pull-quote).
• Single style — hero: air carried size (visual paso 1..12). Eidos collapses to the foundation's hero token + per-axis overrides via --font-size-{key} aliases.
• tracking retained: kept the explicit letter-spacing prop because at 44-60px tracking is a visual decision — but air's mapped to --air-text-{n}-ls; eidos maps to fixed em values (-0.02em / 0 / 0.02em) since the foundation's letter-spacing tokens are mostly 0 across the scale.
• Color content-role slot: same contract as Text / Heading.

Comparativa

Capacidad	UIX Display	Radix Themes Heading	Chakra Heading	Mantine Title	MUI Typography
Dedicated hero primitive	Sí	No (<Heading size="9">)	No (use <Heading>)	No (use <Title order={1}>)	Sí (variant="h1")
Default tag	<h1>	inherits	<h2>	<h1>	<h1>
as polymorphism	Sí	Sí	Sí	Sí	Sí (component)
Tracking override	Sí (tracking)	No	Sí (letterSpacing)	Sí (ls)	Sí (letterSpacing)
Size scale	xxs..xxxl override	numeric	xs..6xl	xs..xxl	h1..h6 only
Family / weight / color overrides	Sí	Sí	Sí	Sí	Sí
Truncate / clamp	Sí	Sí	Sí	Sí	partial
Responsive defaults	Sí (md breakpoint)	Sí	Sí	partial	Sí

Decisiones

• Always hero style: that's the whole point of Display — a single oversize treatment. If you want h1..h6 scale, use Heading.
• Default tag <h1>: page hero. Override via as when display typography is needed outside heading semantics.
• Tracking maps to fixed em values: the foundation's --font-letter-spacing-* tokens are mostly 0 — they exist to reserve the API but don't carry hero-scale tracking. Display shortcuts past them with literal em values so the prop produces visible output today.
• No level prop: Display is always semantically a heading; if the consumer needs <h3 style="display">, they pass as="h3".

Eventos Sema

Display declara 0 eventos. Como Heading/Text, es una primitiva pasiva.

Gaps

Gap	Disposición	Detalle
Free hex/rgb color	descartar	Rompe contrato de contraste; usar tagStyle.
Gradient text fill	diferir	Composable con tagStyle. Si emerge demanda, añadir <DisplayGradient> dedicado.
Per-breakpoint custom hero responsive curve	diferir	Cubierto por la curva default (hero@base, hero@md); ajustes per-instance vía size.
tracking mapped to foundation tokens	diferir	Cuando los tokens --font-letter-spacing-* emerjan con valores hero-apropiados, reemplazar los em literales por var(--font-letter-spacing-{key}).

Referencias

• Radix Themes Heading: https://www.radix-ui.com/themes/docs/components/heading
• Chakra UI Heading: https://chakra-ui.com/docs/components/heading
• Mantine Title: https://mantine.dev/core/title/
• MUI Typography (h1 variant): https://mui.com/material-ui/react-typography/

Passive justification

Visual-only (scope: ['eidos']). Una sola part Provider, marker [data-display]. Sin estados, sin keyboard, sin ARIA propia. La recipe consume --style-hero-* del foundation + --_display-{axis} overrides escritas inline.