@oneli8/react 1.0.0-beta.5 → 1.0.0-beta.6

package/src/styles/choice-chip.css

@@ -0,0 +1,216 @@
+/* GENERATED from packages/core/src/molecules/choice-chip/choice-chip.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Choice Chip (MOLECULE) — the Soft Hexagon
+ * Figma: Select and Combobox / Choice Chip / Soft Hexagon 636:847 (8 variants)
+ *
+ * GEOMETRY, read from all four sizes in Figma:
+ *   size         target  visible  rail inset  gap  label
+ *   compact        48      30         9        9   12 / 18
+ *   standard       48      36        12        9   12 / 18
+ *   comfortable    48      42        15        9   16 / 24
+ *   large          60      42        15        9   16 / 24
+ * The terminal is a fixed 12 at every size and never scales with the label,
+ * so peer chips of different lengths keep one shoulder depth and side angle.
+ *
+ * The visible silhouette sits inside a taller protected target, which is why
+ * `min-block-size` is the target and the rail carries the visible height.
+ */
+
+.ol8-chip {
+  --_height: var(--ol8-component-choice-chip-height-standard);
+  --_target: var(--ol8-component-choice-chip-target-standard);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-standard);
+  --_label-size: var(--ol8-font-size-012);
+  --_label-line: var(--ol8-font-line-018);
+
+  /* Inactive is the quiet Neutral treatment; Selected is Primary Soft. */
+  --_surface: var(--ol8-color-surface-sunken);
+  --_edge:    var(--ol8-color-border-subtle);
+  --_ink:     var(--ol8-color-text-primary);
+
+  /* The ring is painted at every state and is simply invisible until focus,
+     so focus never changes the geometry, only the colour. */
+  --_focus-outer: transparent;
+  --_focus-inner: transparent;
+
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--_target);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  color: var(--_ink);
+  cursor: pointer;
+}
+.ol8-chip[data-ol8-availability="disabled"] { cursor: not-allowed; }
+
+/* ---- Size ------------------------------------------------------------ */
+.ol8-chip[data-ol8-size="compact"] {
+  --_height: var(--ol8-component-choice-chip-height-compact);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-compact);
+}
+.ol8-chip[data-ol8-size="standard"] {
+  --_height: var(--ol8-component-choice-chip-height-standard);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-standard);
+}
+.ol8-chip[data-ol8-size="comfortable"] {
+  --_height: var(--ol8-component-choice-chip-height-comfortable);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-comfortable);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+}
+.ol8-chip[data-ol8-size="large"] {
+  --_height: var(--ol8-component-choice-chip-height-large);
+  --_target: var(--ol8-component-choice-chip-target-large);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-large);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+}
+
+/* ---- Selection ------------------------------------------------------- */
+/* Never colour alone: the native checked state carries the same fact, and the
+   selected edge is a stronger contrast than the inactive one. */
+.ol8-chip[data-ol8-selection="selected"] {
+  --_surface: var(--ol8-color-selection-surface);
+  --_edge:    var(--ol8-color-primary-360);
+  --_ink:     var(--ol8-color-selection-content);
+}
+.ol8-chip[data-ol8-availability="disabled"] {
+  --_surface: var(--ol8-color-surface-disabled);
+  --_edge:    var(--ol8-color-border-disabled);
+  --_ink:     var(--ol8-color-text-disabled);
+}
+
+.ol8-chip__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ---- Terminals ------------------------------------------------------- */
+/* One viewBox serves every height: Figma's terminal paths share identical X
+   values at 30, 36 and 42, and Y values that are the same fractions of the
+   height, so stretching Y alone is exact rather than approximate. */
+.ol8-chip__terminal {
+  flex: none;
+  inline-size: var(--ol8-component-choice-chip-terminal);
+  block-size: var(--_height);
+  /* The point reaches 0.15 beyond the box, as it does in Figma, and the focus
+     ring is painted outside the silhouette. Neither may be clipped. */
+  overflow: visible;
+}
+/* The trailing terminal is the leading one mirrored, so they cannot drift. */
+.ol8-chip__terminal--trailing { transform: scaleX(-1); }
+
+.ol8-chip__fill { fill: var(--_surface); }
+
+/* Double width, clipped to the fill: the outer half is cut away and what
+   remains is an inside edge of exactly one border width, matching the rail's
+   own inside border. A centred stroke would stand 1px proud of the rail and
+   show a step at the shoulder. */
+.ol8-chip__edge {
+  fill: none;
+  stroke: var(--_edge);
+  stroke-width: calc(var(--ol8-border-width-standard) * 2);
+  vector-effect: non-scaling-stroke;
+}
+
+/* Both rings are painted before the fill and at double width, so the inner
+   half of each lands under the fill and only the outer half shows. This is how
+   the ring follows the hexagon instead of boxing it. */
+.ol8-chip__focus-outer,
+.ol8-chip__focus-inner { fill: none; vector-effect: non-scaling-stroke; }
+.ol8-chip__focus-outer {
+  stroke: var(--_focus-outer);
+  stroke-width: calc((var(--ol8-focus-ring-outerwidth) + var(--ol8-focus-ring-innerwidth)) * 2);
+}
+.ol8-chip__focus-inner {
+  stroke: var(--_focus-inner);
+  stroke-width: calc(var(--ol8-focus-ring-innerwidth) * 2);
+}
+
+.ol8-chip:has(> .ol8-chip__input:focus-visible) {
+  --_focus-outer: var(--ol8-color-focus-outer);
+  --_focus-inner: var(--ol8-color-focus-inner);
+}
+
+/* ---- Centre rail ----------------------------------------------------- */
+/* Only the rail grows with the label. It owns the top and bottom of the
+   perimeter; the terminals own the angled ends. */
+.ol8-chip__rail {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-choice-gap-standard);
+  block-size: var(--_height);
+  padding-inline: var(--_inset);
+  background: var(--_surface);
+  border-block: var(--ol8-border-width-standard) solid var(--_edge);
+}
+
+/* The ring's flat runs, continuing the terminals' strokes across the rail.
+   Two colours in one band, ordered outward from the silhouette. */
+.ol8-chip__rail::before,
+.ol8-chip__rail::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  block-size: calc(var(--ol8-focus-ring-outerwidth) + var(--ol8-focus-ring-innerwidth));
+}
+.ol8-chip__rail::before {
+  inset-block-end: 100%;
+  background: linear-gradient(
+    var(--_focus-outer) 0 var(--ol8-focus-ring-outerwidth),
+    var(--_focus-inner) var(--ol8-focus-ring-outerwidth) 100%);
+}
+.ol8-chip__rail::after {
+  inset-block-start: 100%;
+  background: linear-gradient(
+    var(--_focus-inner) 0 var(--ol8-focus-ring-innerwidth),
+    var(--_focus-outer) var(--ol8-focus-ring-innerwidth) 100%);
+}
+
+.ol8-chip__label {
+  font-size: var(--_label-size);
+  line-height: var(--_label-line);
+  font-weight: var(--ol8-font-weight-regular);
+  color: var(--_ink);
+}
+
+/* ---- Mark ------------------------------------------------------------ */
+/* Figma places the mark BEFORE the label in every variant, Remove included. */
+.ol8-chip__mark {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ol8-component-choicechip-mark);
+  block-size: var(--ol8-component-choicechip-mark);
+  color: var(--_ink);
+}
+
+/* The Check does not scale with its slot. Figma's `Icon / Selection / Check`
+   is a governed small master, not an Icon Frame instance: Size=Small and
+   Size=Standard both carry the same 10.2 x 6.9 artwork at the same 1.8 stroke,
+   centred in an 18 or 24 box. So the source box stays 24 units and overflows
+   the smaller slot, exactly as Figma draws it. */
+.ol8-chip__mark > svg {
+  display: block;
+  flex: none;
+  inline-size: var(--ol8-size-icon-standard);
+  block-size: var(--ol8-size-icon-standard);
+  overflow: visible;
+}
+
+/* Both marks read at the one governed optical stroke, which is what Figma
+   draws and what the iconography contract calls contextual stroke
+   normalization: peer marks in one family match apparent weight. */
+.ol8-chip__mark > svg > * {
+  vector-effect: non-scaling-stroke;
+  stroke-width: var(--ol8-component-choice-optical-stroke);
+}

package/src/styles/choice-picker.css

@@ -0,0 +1,100 @@
+/* GENERATED from packages/core/src/organisms/choice-picker/choice-picker.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Choice Picker (ORGANISM)
+ * Figma: Organism / Choice Picker / Soft Hexagon 906:2898 (16 variants)
+ *
+ * Three parts stacked twelve apart: a search field, a wrapping matrix of chips,
+ * and in Apply mode a commitment line. The search field is the canonical Text
+ * Field owner and the chips are the canonical Choice Chip owner, so neither is
+ * restyled here.
+ *
+ * Read from all four sizes in Figma: the root gap, the matrix gap and the
+ * commitment typography do NOT scale with the picker size. They are twelve,
+ * six, and 12/18 at Compact, Standard, Comfortable and Large alike. Only the
+ * search field and the chips take the size.
+ */
+
+.ol8-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-spacing-stack-related);
+  inline-size: 100%;
+}
+
+/* "The matrix wraps with 6px gaps and preserves source/reading order; it is not
+   a masonry layout." A plain wrapping flex row is exactly that. */
+.ol8-picker__matrix {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ol8-component-choice-chip-gap);
+}
+
+/* Figma: HORIZONTAL, space between, 24 tall, both texts secondary at 12/18. */
+.ol8-picker__commitment {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ol8-spacing-inline-standard);
+  min-block-size: var(--ol8-size-icon-standard);
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  color: var(--ol8-color-text-secondary);
+}
+
+.ol8-picker__summary {
+  font-family: var(--ol8-font-family-functional);
+  color: inherit;
+}
+
+/* Clear all and the apply hint are text weight actions rather than Button
+   instances. The contract asks for Clear all to be quiet, and Figma's row is
+   twenty four tall, which a Button's protected forty eight target would break.
+   They are still real buttons, so they are reachable and announced. */
+.ol8-picker__apply,
+.ol8-picker__clear {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-family: var(--ol8-font-family-functional);
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--ol8-color-actionquiet-contentdefault);
+  cursor: pointer;
+}
+.ol8-picker__apply:hover,
+.ol8-picker__clear:hover {
+  color: var(--ol8-color-actionquiet-contenthover);
+  text-decoration: underline;
+}
+.ol8-picker__apply:focus-visible,
+.ol8-picker__clear:focus-visible {
+  outline: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  outline-offset: var(--ol8-focus-ring-offset);
+}
+
+.ol8-picker[data-ol8-availability="disabled"] .ol8-picker__apply,
+.ol8-picker[data-ol8-availability="disabled"] .ol8-picker__clear {
+  color: var(--ol8-color-actionquiet-contentdisabled);
+  cursor: not-allowed;
+}
+
+/* The search label stays associated while the composition hides it. */
+.ol8-picker__label-row--hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Retrieval and result counts are announced rather than only drawn. */
+.ol8-picker__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/styles/combobox.css

@@ -0,0 +1,42 @@
+/* GENERATED from packages/core/src/organisms/combobox/combobox.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Combobox (ORGANISM)
+ * Figma: Organism / Combobox 883:2159 — "Reuses approved Text Field, Selection
+ * Popup and governed icon atoms."
+ *
+ * So the field geometry is the field's, the popup is the popup's, and this
+ * file adds only what belongs to the combination: where the popup sits, and
+ * the two marks at the trailing edge.
+ */
+
+.ol8-combobox { position: relative; }
+
+/* "Closed control to popup block gap" is a token, so the popup sits where the
+   design says rather than wherever absolute positioning lands it. */
+.ol8-combobox__popup {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-start: calc(100% + var(--ol8-component-selectionpopup-gap));
+}
+
+.ol8-combobox__disclosure {
+  flex: none;
+  display: inline-flex;
+  color: var(--ol8-color-icon-secondary);
+  cursor: pointer;
+}
+
+.ol8-combobox__clear {
+  flex: none;
+  display: inline-flex;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--ol8-color-icon-secondary);
+  cursor: pointer;
+}
+.ol8-combobox__clear:disabled { color: var(--ol8-color-icon-disabled); cursor: not-allowed; }
+
+.ol8-combobox[data-ol8-disabled] .ol8-combobox__disclosure { color: var(--ol8-color-icon-disabled); cursor: not-allowed; }

package/src/styles/form-message.css

@@ -0,0 +1,48 @@
+/* GENERATED from packages/core/src/molecules/form-message/form-message.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Form Message (MOLECULE)
+ * Figma: Form Message 177:13, five tones.
+ *
+ * Anatomy read from Figma: a horizontal row, gap Component / Text Field / Gap /
+ * Status, items centred, one Small status icon beside twelve over eighteen
+ * regular text. Tone changes exactly one thing, the inline content colour,
+ * which both the icon stroke and the text take.
+ */
+
+.ol8-form-message {
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-textfield-gap-status);
+  color: var(--_tone);
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-012);
+  font-weight: var(--ol8-font-weight-regular);
+  line-height: var(--ol8-font-line-018);
+}
+
+.ol8-form-message__icon { flex: none; color: var(--_tone); }
+
+/* ---- Tone ------------------------------------------------------------- */
+.ol8-form-message[data-ol8-tone="critical"]    { --_tone: var(--ol8-color-feedbackcritical-inlinecontent); }
+.ol8-form-message[data-ol8-tone="caution"]     { --_tone: var(--ol8-color-feedbackcaution-inlinecontent); }
+.ol8-form-message[data-ol8-tone="positive"]    { --_tone: var(--ol8-color-feedbackpositive-inlinecontent); }
+.ol8-form-message[data-ol8-tone="informative"] { --_tone: var(--ol8-color-feedbackinformative-inlinecontent); }
+
+/* Pending reads as informative text, and Figma gives its loading mark the
+   primary icon colour rather than a feedback colour, because nothing has been
+   decided yet. */
+.ol8-form-message[data-ol8-tone="pending"] {
+  --_tone: var(--ol8-color-feedbackinformative-inlinecontent);
+}
+.ol8-form-message[data-ol8-tone="pending"] .ol8-form-message__icon {
+  color: var(--ol8-color-icon-primary);
+}
+
+/* Same treatment the Button gives its busy mark: rotation is opt in and motion
+   guarded, and Reduced Motion keeps the static mark. */
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-form-message[data-ol8-tone="pending"] .ol8-form-message__icon > svg {
+    animation: ol8-spin 900ms linear infinite;
+  }
+}

package/src/styles/gem.css

@@ -34,7 +34,8 @@
  */
 
 .ol8-btn[data-ol8-material="gem"],
-.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface,
+.ol8-field[data-ol8-material="gem"] > .ol8-field__control-stack > .ol8-field__control {
   position: relative;
   isolation: isolate;
   --_rim: var(--ol8-material-control-gem-rim-default);
@@ -43,7 +44,8 @@
 /* The regular opaque background stays underneath on purpose — it is what
    shows through when the gem layer is suppressed for Reduced Transparency. */
 .ol8-btn[data-ol8-material="gem"]::before,
-.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before {
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before,
+.ol8-field[data-ol8-material="gem"] .ol8-field__control::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -60,7 +62,8 @@
 }
 
 .ol8-btn[data-ol8-material="gem"]::after,
-.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after {
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after,
+.ol8-field[data-ol8-material="gem"] .ol8-field__control::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -145,9 +148,48 @@
   --_g3: var(--ol8-material-control-gem-secondary-loadinglow);
 }
 
+/* ---- Text Field · the same Secondary body, per Figma 211:36 and 215:226 ---
+   Outline follows the Cut Edge, Filled sits on the Stabilized Face and follows
+   the Inner Thin Cut. Hover moves Filled onto the Cut Edge. Invalid keeps the
+   critical boundary, because a material must never hide a validation result. */
+.ol8-field[data-ol8-material="gem"] .ol8-field__control {
+  --_g1: var(--ol8-material-control-gem-secondary-high);
+  --_g2: var(--ol8-material-control-gem-secondary-mid);
+  --_g3: var(--ol8-material-control-gem-secondary-low);
+  --_surface: transparent;
+  --_border: var(--ol8-material-gem-color-cutedge-high);
+}
+.ol8-field[data-ol8-material="gem"]:hover:not([data-ol8-disabled]) .ol8-field__control {
+  --_g1: var(--ol8-material-control-gem-secondary-hoverhigh);
+  --_g2: var(--ol8-material-control-gem-secondary-hovermid);
+  --_g3: var(--ol8-material-control-gem-secondary-hoverlow);
+  --_rim: var(--ol8-material-control-gem-rim-hover);
+  --_border: var(--ol8-material-gem-color-cutedge-high);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"] .ol8-field__control {
+  --_surface: var(--ol8-material-gem-color-quiet-stabilizedface);
+  --_border: var(--ol8-material-gem-color-innerthincut-high);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-readonly][data-ol8-appearance="filled"] .ol8-field__control {
+  --_border: var(--ol8-material-gem-color-innerthincut-high);
+}
+.ol8-field[data-ol8-material="gem"]:has(.ol8-field__input[aria-invalid="true"]) .ol8-field__control,
+.ol8-field[data-ol8-material="gem"][data-ol8-status="invalid"] .ol8-field__control {
+  --_border: var(--ol8-color-feedbackcritical-inlinecontent);
+}
+/* Disabled resolves to the opaque equivalent, which is the same answer Reduced
+   Transparency gives. */
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] .ol8-field__control {
+  --_surface: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+  --_border: var(--ol8-color-border-disabled);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] .ol8-field__control::before,
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] .ol8-field__control::after { display: none; }
+
 /* Content must sit above the ::before body. */
 .ol8-btn[data-ol8-material="gem"] > *,
-.ol8-icon-btn[data-ol8-material="gem"] .ol8-icon { position: relative; z-index: 0; }
+.ol8-icon-btn[data-ol8-material="gem"] .ol8-icon,
+.ol8-field[data-ol8-material="gem"] .ol8-field__control > * { position: relative; z-index: 0; }
 
 /* ---- Disabled inherits the regular opaque treatment ------------------ */
 .ol8-btn[data-ol8-material="gem"]:disabled::before,
@@ -162,7 +204,12 @@
   .ol8-btn[data-ol8-material="gem"]::before,
   .ol8-btn[data-ol8-material="gem"]::after,
   .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before,
-  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after { display: none; }
+  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after,
+  .ol8-field[data-ol8-material="gem"] .ol8-field__control::before,
+  .ol8-field[data-ol8-material="gem"] .ol8-field__control::after { display: none; }
+  .ol8-field[data-ol8-material="gem"] .ol8-field__control {
+    --_surface: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+  }
   .ol8-btn--secondary[data-ol8-material="gem"] {
     --_bw: var(--ol8-component-button-secondaryboundary);
     --_bd: var(--ol8-color-actionsecondary-contentdefault);

package/src/styles/link.css

@@ -0,0 +1,116 @@
+/* GENERATED from packages/core/src/molecules/link/link.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Link (MOLECULE)
+ *
+ * Figma (138:260, 139:260, 139:453): "Runtime href, native anchor behavior,
+ * visited resolution, aria-current, motion preference and navigation list
+ * hierarchy live in code." Figma's five States are visual evidence for review,
+ * not classes: they are :hover, :active, :focus-visible, :visited and
+ * [aria-current] here.
+ *
+ * "Icons remain intentionally parked and must not be added as local artwork."
+ */
+
+.ol8-link {
+  position: relative;
+  color: var(--ol8-color-text-link-default);
+  font-family: var(--ol8-font-family-functional);
+  font-weight: var(--ol8-font-weight-semibold);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--ol8-component-link-underline-default);
+  text-underline-offset: var(--ol8-component-link-underline-offset);
+  transition-property: color, text-decoration-thickness, background-color, box-shadow;
+  transition-duration: var(--ol8-motion-interaction-hover-duration);
+  transition-timing-function: var(--ol8-motion-interaction-hover-timing-function);
+}
+
+/* ---- Size ------------------------------------------------------------- */
+.ol8-link[data-ol8-size="small"] {
+  font-size: var(--ol8-typography-body-small-font-size);
+  line-height: var(--ol8-typography-body-small-line-height);
+  letter-spacing: var(--ol8-typography-body-small-letter-spacing);
+}
+.ol8-link[data-ol8-size="standard"] {
+  font-size: var(--ol8-typography-body-medium-font-size);
+  line-height: var(--ol8-typography-body-medium-line-height);
+  letter-spacing: var(--ol8-typography-body-medium-letter-spacing);
+}
+.ol8-link[data-ol8-size="large"] {
+  font-size: var(--ol8-typography-body-large-font-size);
+  line-height: var(--ol8-typography-body-large-line-height);
+  letter-spacing: var(--ol8-typography-body-large-letter-spacing);
+}
+/* Not a Figma size. An inline link inside body copy that does not follow its
+   surrounding type is broken, and Figma cannot express "inherit" as a variant.
+   Flagged for the design source rather than left undocumented. */
+.ol8-link[data-ol8-size="inherit"] {
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+/* ---- State ------------------------------------------------------------ */
+.ol8-link:hover,
+.ol8-link:active {
+  text-decoration-thickness: var(--ol8-component-link-underline-emphasis);
+}
+.ol8-link:hover  { color: var(--ol8-color-text-link-hover); }
+.ol8-link:active { color: var(--ol8-color-text-link-pressed); }
+
+/* Navigation links live in a list where visited carries no meaning. */
+.ol8-link[data-ol8-form="inline"]:visited,
+.ol8-link[data-ol8-form="standalone"]:visited {
+  color: var(--ol8-color-text-link-visited);
+}
+
+.ol8-link:focus-visible {
+  outline: none;
+  color: var(--ol8-color-text-primary);
+  text-decoration-color: var(--ol8-color-text-link-default);
+  border-radius: var(--ol8-shape-radius-subtle);
+  box-shadow:
+    0 0 0 var(--ol8-focus-ring-innerwidth) var(--ol8-color-focus-inner),
+    0 0 0 var(--ol8-focus-ring-totalwidth) var(--ol8-color-focus-outer);
+}
+
+/* ---- Form ------------------------------------------------------------- */
+/* Standalone and navigation are targets in their own right, so they take the
+   protected minimum. Inline sits in a sentence and must not. Figma pads both by
+   the minimal inline step and carries a gap for the parked icon slot. */
+.ol8-link[data-ol8-form="standalone"],
+.ol8-link[data-ol8-form="navigation"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ol8-component-link-gap-standard);
+  min-block-size: var(--ol8-component-link-targetnavigation);
+  padding-inline: var(--ol8-spacing-inline-minimal);
+}
+.ol8-link[data-ol8-form="standalone"][data-ol8-size="small"],
+.ol8-link[data-ol8-form="navigation"][data-ol8-size="small"] {
+  gap: var(--ol8-component-link-gap-small);
+}
+.ol8-link[data-ol8-form="standalone"][data-ol8-size="large"],
+.ol8-link[data-ol8-form="navigation"][data-ol8-size="large"] {
+  gap: var(--ol8-component-link-gap-large);
+}
+
+/* Figma keeps the underline in every navigation state and marks the current
+   destination by thickening it to the current marker weight. */
+.ol8-link[data-ol8-form="navigation"][aria-current] {
+  text-decoration-thickness: var(--ol8-component-link-underline-current);
+}
+
+/* ---- Motion ----------------------------------------------------------- */
+.ol8-link[data-ol8-motion="none"] { transition-duration: var(--ol8-motion-duration-instant); }
+@media (prefers-reduced-motion: reduce) {
+  .ol8-link { transition-duration: var(--ol8-motion-duration-instant); }
+}
+@media (forced-colors: active) {
+  .ol8-link { forced-color-adjust: auto; }
+  .ol8-link:focus-visible {
+    outline: var(--ol8-focus-ring-innerwidth) solid Highlight;
+    outline-offset: calc(var(--ol8-focus-ring-innerwidth) * -1);
+    box-shadow: none;
+  }
+}