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

Eidos Link

Inline text link primitive. Renders <a> by default — or <span aria-disabled> when disabled — so the link composes mid-paragraph without breaking the ambient typography. Visual variants drive color + underline; external adds the standard target="_blank" + rel="noopener noreferrer" + accessibility affordances.

Superficie

<p>Read the <Link href="/docs">documentation</Link>.</p>
<Link href="https://github.com/" external>GitHub</Link>
<Link variant="subtle" underline="always" color="secondary">Tertiary</Link>
<Link disabled>Unavailable</Link>

Baseline

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

• Variants: air shipped default / subtle / quiet / emphasized. Eidos consolidates to default / subtle / plain:
  • default = colored underline-on-hover (most common)
  • subtle = inherits color, underline-on-hover (sidebar / nav)
  • plain = inherits color, no underline (button-like inline) emphasized is replaceable via weight / color overrides on Text if the user truly needs a bold link.
• Underline contract preserved: none / hover / always — air's shape.
• color opened to full intent palette: air locked to a single primary color. Eidos accepts the canonical ColorRole union so destructive-link variants (color="risk") and affirmative (color="affirm") compose with the rest of the system.
• size reduced to xxs..xl: air used sm/md/lg. Eidos aligns with the foundation --font-size-{key} scale; default inherits ambient typography.
• External-link icon kept: tiny inline SVG + SR-only "(opens in new tab)" text. Air's pattern.
• disabled renders <span aria-disabled>: matches air; drops href, disables pointer events.

Comparativa

Capacidad	UIX Link	Radix Themes Link	Chakra Link	Mantine Anchor
Inline anchor element	Sí	Sí	Sí	Sí
Variant treatments	default / subtle / plain	size + weight	colorScheme	underline + colors
Underline control	none / hover / always	hover only	hover + always	hover + always
Color (intent palette)	Sí (full ColorRole)	accent	colorScheme	colors
External link affordance	Sí (external + SR text + icon)	manual	manual	manual
Disabled state	Sí	No	Sí (custom)	Sí
Inherits typography	Sí	Sí	Sí	Sí
size override	Sí	Sí (size scale)	Sí	Sí

Decisiones

• Inherits ambient typography: Link is mid-paragraph; the font / weight / line-height come from the surrounding <Text> / <Heading> / <p>. Local overrides are limited to size, color, underline.
• color opens to full ColorRole: enables color="risk" for destructive links (Delete account) and color="affirm" for positive actions, while keeping the contrast contract via the intent palette.
• Default variant='default' + underline='hover': matches Radix / Chakra default. The colored-underline-on-hover is the most familiar inline link affordance.
• disabled renders <span aria-disabled>: keeps the anchor out of the tab order without removing the visual position. The consumer can swap to a <button disabled> if they need keyboard focus parity with form controls.
• External-link affordance is opt-in: external is the explicit prop. SR-only text reads "(opens in new tab)"; the SVG icon is visible. Reverts to plain <a> when omitted.

Eventos Sema

Link declara 0 eventos en su morfo. Navigation/click ownership belongs to the consumer (SvelteKit router, custom action, sema-driven verb on the surrounding component). Si Link se usa como affordance que disparara un commit (form submit, dialog action), el consumer compone un <Toolbar.Button> u otro componente con sema — Link no es ese surface.

Gaps

Gap	Disposición	Detalle
emphasized air variant (bold link)	diferir	Composable: <Text weight="semibold"><Link>…</Link></Text> cubre el caso sin contratar superficie.
Custom external icon	diferir	Si emerge demanda real, exponer un slot snippet.
prefetch / SvelteKit-specific props	descartar	El consumer pasa atributos directamente al <a>.
Sema commit-navigate event	diferir	Bajo el contrato actual la navegación es responsabilidad del consumer; si emerge un caso (analytics, perceptual feedback), añadir cuando 2 capas lo consuman.
Disabled state + focus ring	descartar	Cuando deshabilitado, no debe estar en el tab order.

Referencias

• Radix Themes Link: https://www.radix-ui.com/themes/docs/components/link
• Chakra UI Link: https://chakra-ui.com/docs/components/link
• Mantine Anchor: https://mantine.dev/core/anchor/
• shadcn/ui Link patterns: https://ui.shadcn.com/

Passive justification

scope: ['eidos'] — visual-only primitive. Una sola part Provider (<a data-link> o <span data-link data-disabled>). El primitive expone estados visuales (hover, active, focus-visible, disabled) pero no semantic events: hover y active no son verbos sema, y commit-navigate pertenece al consumer (router / analytics). La recipe consume --color-{intent}-* + --radius-sm del foundation.