# ren-link Component Contract Accessible link styling for inline, muted, nav, external, and skip links. Load this file after `ren-design.md` and before generating, editing, or reviewing `ren-link` UI. ## Purpose - Provide the agent-facing public contract for the `ren-link` primitive. - Keep generated markup aligned with the colocated CSS/JS source. - Route theming through semantic tokens and the component token API instead of ad hoc styles. ## Use When - You need the Link primitive behavior or visual role. - The UI should stay inside RenDS' vanilla HTML/CSS/JS conventions. - The implementation can use the public selectors, states, and imports listed here. ## Do Not Use When - Native HTML plus `base/primitive-zero.md` is enough. - A simpler primitive can express the UI without this primitive. - You would need to invent undocumented selectors, states, or JavaScript APIs. ## aiHints ```yaml selectionCriteria: useWhen: - "The element navigates to a URL, anchor, or routed page (i.e., it has a real href)." - "You need inline text links inside paragraphs styled with underline + hover." - "You need a navigation link with a 44px touch target (.ren-link-nav) plus active-route styling via aria-current=\"page\" / [data-active]." - "You need an external-link affordance with a trailing ↗ marker (.ren-link-external)." - "You need a skip-to-content link that becomes visible only on focus (.ren-link-skip)." - "You need a muted or unstyled (inherits color) anchor (.ren-link-muted, .ren-link-plain)." avoidWhen: - "The element triggers an imperative action (submit, open dialog, delete) — use ren-button." - "The element is a tab, menuitem, or pagination control — use the corresponding component." - "The element is a stateful toggle — use a switch, checkbox, or button with aria-pressed." canonicalImports: css: - "rends/components/primitives/ren-link/ren-link.css" notes: - "CSS-only primitive; no JavaScript file exists for ren-link." - "If the page already imports rends/components/index.css, do not import the CSS again." requiredMarkup: - "Always render an actual element. Never style a