@oneli8/react 1.0.0-beta.10

package/src/styles/gem.css

@@ -0,0 +1,376 @@
+/* GENERATED from packages/core/src/materials/gem/gem.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 · Gem material adapter
+ * Figma: section "Gem Button" (1034:9969) — 144 components across
+ *   Button/Primary/Gem 100:3, Button/Secondary/Gem 100:208,
+ *   Icon Button ±Circle Primary/Secondary Gem 102:78, 102:151, 119:202, 119:299.
+ *
+ * From the Figma description (100:3):
+ *   "Material adapter — NOT a fifth semantic variant. Geometry, meaning,
+ *    accessibility, protected target, Size, State, label/icon content and
+ *    native behavior are inherited from the regular molecule. Material changes
+ *    only the token-bound surface and inner focus edge. Reduced Transparency
+ *    resolves to the regular opaque equivalent. Quiet and Destructive use the
+ *    regular material treatment until a distinct Gem treatment is explicitly
+ *    approved."
+ *
+ * So Gem is an ATTRIBUTE on an existing button, never a new class:
+ *   <button class="ol8-btn ol8-btn--primary" data-ol8-material="gem">
+ *
+ * It adds exactly two painted layers and touches nothing else:
+ *   ::before  the three-stop body + backdrop blur
+ *   ::after   the rim (specular top edge + integrated light rim)
+ *
+ * THE GRADIENT ANGLE
+ * Figma bakes a per-instance angle: 153.1595deg at Standard (83x42),
+ * 151.6609 at Comfortable (89x48), 149.2872 at Large (101x60). Those are not
+ * three different designs — every one satisfies
+ *       theta = 90deg + atan(W / H)
+ * to four decimal places, which is exactly CSS's `to bottom right` corner
+ * keyword (gradient line perpendicular to the other diagonal). Using the
+ * keyword reproduces Figma at every size AND at any label width, where a baked
+ * degree value would only be correct for the one instance it was measured on.
+ */
+
+.ol8-btn[data-ol8-material="gem"],
+.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);
+  /* Defined on every Gem surface, not just one, because the halo is read by
+     descendants: text through text-shadow and control geometry through chained
+     drop-shadow filters. Both are built from the same two tokens and repeated
+     the same four times, which is what makes a label's glow and a control's
+     glow one field instead of two near-misses. */
+  --_gem-glow: 0 0 var(--ol8-material-gem-blur-contentglow)
+               var(--ol8-material-gem-color-quiet-contentglow);
+  /* Control geometry takes one stack FEWER than text, on purpose. WCAG 1.4.11
+     asks 3:1 of a graphical object where 1.4.3 asks 4.5:1 of text, so the
+     boundary does not need the fourth repetition — and leaving it off is what
+     keeps the indicator blended into the glass instead of ringed. Measured at
+     3px: text in four stacks is 5.06:1, the boundary in three is 3.75:1. */
+  --_gem-glow-filter:
+    drop-shadow(var(--_gem-glow)) drop-shadow(var(--_gem-glow))
+    drop-shadow(var(--_gem-glow));
+}
+
+/* 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-field[data-ol8-material="gem"] .ol8-field__control::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  backdrop-filter: blur(var(--ol8-material-control-gem--blur));
+  -webkit-backdrop-filter: blur(var(--ol8-material-control-gem--blur));
+  background-image: linear-gradient(
+    to bottom right,
+    var(--_g1) var(--ol8-material-control-gem--gradient-start),
+    var(--_g2) var(--ol8-material-control-gem--gradient-mid),
+    var(--_g3) var(--ol8-material-control-gem--gradient-end));
+}
+
+.ol8-btn[data-ol8-material="gem"]::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;
+  border-radius: inherit;
+  pointer-events: none;
+  /* Figma's two inner shadows on the Control frame, in order:
+       INNER_SHADOW offset 0,2  radius 1  spread 0  -> Rim / Specular
+       INNER_SHADOW offset 0,0  radius 0  spread 1  -> Rim / Default
+     The second one was written with spread 0, which draws nothing, so the
+     integrated light rim never painted even once the variable names were
+     right. It is the 1px edge that reads as the bezel. */
+  box-shadow:
+    inset 0 2px 1px 0 var(--ol8-material-control-gem--rim-specular),
+    inset 0 0 0 1px var(--_rim);
+}
+
+/* ---- Primary · three-stop same-hue body ------------------------------ */
+.ol8-btn--primary[data-ol8-material="gem"],
+.ol8-icon-btn--primary[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--primary-start);
+  --_g2: var(--ol8-material-control-gem--primary-mid);
+  --_g3: var(--ol8-material-control-gem--primary-end);
+  --_fg: var(--ol8-material-control-gem--primary-content);
+  --_ink: var(--ol8-material-control-gem--primary-content);
+}
+.ol8-btn--primary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]),
+.ol8-icon-btn--primary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--primary-hover-start);
+  --_g2: var(--ol8-material-control-gem--primary-hover-mid);
+  --_g3: var(--ol8-material-control-gem--primary-hover-end);
+  --_rim: var(--ol8-material-control-gem--rim-hover);
+}
+/* Pressed reuses the HOVER stops and adds the cut-edge drop shadow. */
+.ol8-btn--primary[data-ol8-material="gem"]:active:not(:disabled),
+.ol8-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled),
+.ol8-icon-btn--primary[data-ol8-material="gem"]:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--primary-hover-start);
+  --_g2: var(--ol8-material-control-gem--primary-hover-mid);
+  --_g3: var(--ol8-material-control-gem--primary-hover-end);
+  --_rim: var(--ol8-material-control-gem--rim-hover);
+}
+.ol8-btn--primary[data-ol8-material="gem"]:active:not(:disabled),
+.ol8-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled) {
+  filter: drop-shadow(0 9px 12px var(--ol8-material-gem-color-cutedge-shadow));
+}
+.ol8-btn--primary[data-ol8-material="gem"][data-ol8-loading],
+.ol8-icon-btn--primary[data-ol8-material="gem"][data-ol8-loading] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--primary-loading-start);
+  --_g2: var(--ol8-material-control-gem--primary-loading-mid);
+  --_g3: var(--ol8-material-control-gem--primary-loading-end);
+}
+
+/* ---- Secondary · transparent body with an integrated light rim -------
+   The regular Secondary's 2px boundary is dropped in Gem; the rim replaces
+   it. Reduced Transparency restores the boundary along with the opaque body. */
+.ol8-btn--secondary[data-ol8-material="gem"] { --_bw: 0px; }
+.ol8-btn--secondary[data-ol8-material="gem"],
+.ol8-icon-btn--secondary[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--secondary-high);
+  --_g2: var(--ol8-material-control-gem--secondary-mid);
+  --_g3: var(--ol8-material-control-gem--secondary-low);
+  --_fg: var(--ol8-material-control-gem--secondary-content);
+  --_ink: var(--ol8-material-control-gem--secondary-content);
+  --_bd: transparent;
+}
+.ol8-btn--secondary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]),
+.ol8-icon-btn--secondary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--secondary-hover-high);
+  --_g2: var(--ol8-material-control-gem--secondary-hover-mid);
+  --_g3: var(--ol8-material-control-gem--secondary-hover-low);
+  --_rim: var(--ol8-material-control-gem--rim-hover);
+  --_fg: var(--ol8-material-control-gem--secondary-content);
+}
+.ol8-btn--secondary[data-ol8-material="gem"]:active:not(:disabled),
+.ol8-btn--secondary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled),
+.ol8-icon-btn--secondary[data-ol8-material="gem"]:active:not(:disabled) > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--secondary-hover-high);
+  --_g2: var(--ol8-material-control-gem--secondary-hover-mid);
+  --_g3: var(--ol8-material-control-gem--secondary-hover-low);
+  --_rim: var(--ol8-material-control-gem--rim-hover);
+  --_fg: var(--ol8-material-control-gem--secondary-content);
+}
+.ol8-btn--secondary[data-ol8-material="gem"][data-ol8-loading],
+.ol8-icon-btn--secondary[data-ol8-material="gem"][data-ol8-loading] > .ol8-icon-btn__surface {
+  --_g1: var(--ol8-material-control-gem--secondary-loading-high);
+  --_g2: var(--ol8-material-control-gem--secondary-loading-mid);
+  --_g3: var(--ol8-material-control-gem--secondary-loading-low);
+}
+
+/* ---- 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-hover-high);
+  --_g2: var(--ol8-material-control-gem--secondary-hover-mid);
+  --_g3: var(--ol8-material-control-gem--secondary-hover-low);
+  --_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);
+}
+/* Filled is the only gem field appearance that sits ON the quiet face; outline
+   leaves --_surface transparent and keeps whatever is behind it. So the
+   content colour moves here and nowhere else.
+
+   WHICH NODES, EXACTLY: only what is physically inside .ol8-field__control,
+   because that box is the gem face. The label is NOT — .ol8-field__label lives
+   in .ol8-field__label-row, a SIBLING of .ol8-field__control-stack, so it sits
+   on the page background above the field. Figma agrees: "Label Row / Label" is
+   a sibling of "Control Stack" in Text Field / Filled / Gem (215:226). Giving
+   the label gem ink put near-white text on a light page — 1.26:1, invisible.
+   The affixes and icons DO sit inside the control and so do belong here. */
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"]:not([data-ol8-disabled]) .ol8-field__input,
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"]:not([data-ol8-disabled]) .ol8-field__affix {
+  color: var(--ol8-material-gem-color-quiet-content);
+  /* Stacked three times on purpose. A single shadow at this radius reaches
+     only 1.71:1 against near-white ink on a bright plate, and widening the
+     radius makes it WEAKER because blur spreads a fixed alpha budget over more
+     area. Repeating the same shadow accumulates alpha instead of spreading it:
+     1 - (1 - a)^4. Measured in proof/gem-halo-contrast.html. */
+  text-shadow: var(--_gem-glow), var(--_gem-glow),
+               var(--_gem-glow), var(--_gem-glow);
+}
+/* Icons on the face take the token that already exists for exactly this and
+   is already stable across appearances. */
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"]:not([data-ol8-disabled]) .ol8-field__leading-icon,
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"]:not([data-ol8-disabled]) .ol8-field__trailing-action {
+  color: var(--ol8-color-icon-on-gem);
+}
+.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,
+.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,
+.ol8-btn[data-ol8-material="gem"]:disabled::after,
+.ol8-icon-btn[data-ol8-material="gem"]:disabled > .ol8-icon-btn__surface::before,
+.ol8-icon-btn[data-ol8-material="gem"]:disabled > .ol8-icon-btn__surface::after { display: none; }
+
+/* ---- Reduced Transparency -> the regular opaque equivalent -----------
+   Explicitly required by the Figma description. Hiding the gem layers
+   reveals the regular molecule's own background, which was never removed. */
+@media (prefers-reduced-transparency: reduce) {
+  .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,
+  .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);
+    --_fg: var(--ol8-color-actionsecondary-contentdefault);
+  }
+  .ol8-btn--primary[data-ol8-material="gem"] { --_fg: var(--ol8-color-actionprimary-content); }
+  .ol8-btn[data-ol8-material="gem"]:active { filter: none; }
+}
+
+/* ---- Generic gem surface ---------------------------------------------
+   Until now Gem was reachable only through ol8-btn, ol8-icon-btn and
+   ol8-field. Anything else needing the material — a panel, a widget, a
+   sheet — had nowhere to go, which is exactly how hand-rolled gem starts.
+   This is the primitive: the quiet gem face plus the cut edge, and nothing
+   about what the surface contains.
+
+   The face axis is Figma's own vocabulary, not an invention:
+     stabilizedface     neutral-030 @ 27%   at rest
+     environmentalface  neutral-030 @ 18%   when the environment matters
+   Both are clear glass on the same near-white tint; the pair differs only in
+   how present the face is, never in hue.
+   Motion study 01 (labs/gem-in-motion) drives data-ol8-face along it. */
+.ol8-gem {
+  --_gem-face: var(--ol8-material-gem-color-quiet-stabilizedface);
+  /* material.gem.blur.* existed in the tokens and nothing consumed it —
+     every gem surface was using the CONTROL blur instead, which is a flat
+     12px. These are the surface pair, and they move with the face:
+     stabilized 12px, environmental 18px. That step is the dynamic blur. */
+  --_gem-blur: var(--ol8-material-gem-blur-stabilized);
+
+  box-sizing: border-box;
+  position: relative;
+  background: var(--_gem-face);
+  backdrop-filter: blur(var(--_gem-blur)) saturate(1.06);
+  -webkit-backdrop-filter: blur(var(--_gem-blur)) saturate(1.06);
+  transition: background .4s linear, backdrop-filter .4s linear;
+  border-radius: var(--ol8-shape-radius-standard);
+  /* Gem carries LIGHT content. color.icon.onGem and both control gem content
+     tokens were already neutral-030; the quiet face just never had a content
+     token of its own, so surfaces using it fell back to dark body text.
+     A transparent face cannot guarantee its own backdrop, so the content
+     carries a halo rather than the surface being thickened to provide one. */
+  --_gem-glow: 0 0 var(--ol8-material-gem-blur-contentglow)
+               var(--ol8-material-gem-color-quiet-contentglow);
+  /* Control geometry takes one stack FEWER than text, on purpose. WCAG 1.4.11
+     asks 3:1 of a graphical object where 1.4.3 asks 4.5:1 of text, so the
+     boundary does not need the fourth repetition — and leaving it off is what
+     keeps the indicator blended into the glass instead of ringed. Measured at
+     3px: text in four stacks is 5.06:1, the boundary in three is 3.75:1. */
+  --_gem-glow-filter:
+    drop-shadow(var(--_gem-glow)) drop-shadow(var(--_gem-glow))
+    drop-shadow(var(--_gem-glow));
+  color: var(--ol8-material-gem-color-quiet-content);
+  /* Stacked three times on purpose. A single shadow at this radius reaches
+     only 1.71:1 against near-white ink on a bright plate, and widening the
+     radius makes it WEAKER because blur spreads a fixed alpha budget over more
+     area. Repeating the same shadow accumulates alpha instead of spreading it:
+     1 - (1 - a)^4. Measured in proof/gem-halo-contrast.html. */
+  text-shadow: var(--_gem-glow), var(--_gem-glow),
+               var(--_gem-glow), var(--_gem-glow);
+  /* The cut edge. Invariant — it is what keeps a gem recognisable as gem. */
+  box-shadow:
+    inset 0 2px 1px 0 var(--ol8-material-gem-color-cutedge-high),
+    inset 0 0 0 1px var(--ol8-material-gem-color-cutedge-mid),
+    0 9px 12px var(--ol8-material-gem-color-cutedge-shadow);
+}
+
+/* Disabled on a generic Gem surface, same single grey, same absent halo. */
+.ol8-gem [data-ol8-availability="disabled"] .ol8-selection,
+.ol8-gem [disabled] .ol8-selection {
+  --_edge: var(--ol8-material-gem-color-quiet-contentdisabled);
+  --_ink: var(--ol8-material-gem-color-quiet-contentdisabled);
+  filter: none;
+}
+
+/* Content on a generic Gem surface, same rule as the Choice Item carries:
+   glyphs and control geometry both take the gem ink and share one halo
+   definition, so a label's glow and a control's glow are the same field. Text
+   uses text-shadow; an SVG stroke cannot, so it uses chained drop-shadow
+   filters built from the identical two tokens. */
+.ol8-gem .ol8-selection {
+  --_edge: var(--ol8-material-gem-color-quiet-content);
+  filter: var(--_gem-glow-filter);
+}
+.ol8-gem .ol8-icon {
+  color: var(--ol8-color-icon-on-gem);
+  filter: var(--_gem-glow-filter);
+}
+
+.ol8-gem[data-ol8-face="environmental"] {
+  --_gem-face: var(--ol8-material-gem-color-quiet-environmentalface);
+  --_gem-blur: var(--ol8-material-gem-blur-environmental);
+}
+
+/* REDUCED TRANSPARENCY, THE WORN-DISPLAY READING OF IT
+   Gem is worn, so the background is the real world and an opaque panel would
+   occlude the street for the person who needs help reading the interface most.
+   The reduced mode is therefore denser, not solid: legibilityFace at 0.72
+   leaves 28% of the scene visible and still measures 7.70:1 against near-white
+   ink in the DARKEST-to-BRIGHTEST worst region of a real daylight plate, with
+   no credit taken for the halo. That is AAA while remaining see-through.
+   Opt in per surface, since the platform flag cannot tell a phone from a lens. */
+.ol8-gem[data-ol8-transparency="reduced"] {
+  --_gem-face: var(--ol8-material-gem-color-quiet-legibilityface);
+}
+
+/* Same contract as every other gem consumer: transparency is the variable,
+   the opaque equivalent is the floor. */
+@media (prefers-reduced-transparency: reduce) {
+  .ol8-gem {
+    background: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

package/src/styles/icon-button.css

@@ -0,0 +1,224 @@
+/* GENERATED from packages/core/src/molecules/icon-button/icon-button.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 · Icon Button
+ * Figma: section "Icon Button" (1034:10546) — Primary 86:2, Secondary 87:26,
+ *        Quiet 88:50, Destructive 89:74, plus the four Circle sets.
+ *        4 families × 2 shapes × 4 sizes × 6 states = 192 components.
+ *
+ * Documentation (85:9):
+ *   "Visible boxes: 36/42/48/60px · protected targets: 48/48/48/60px
+ *    Artwork: 18/18/24/36px
+ *    Hover changes the container only; the symbol never translates, rotates
+ *    or scales. Accessible name is mandatory. Rounded Square is the canonical
+ *    base; Circle is a governed presentation extension."
+ *
+ * The component is TWO boxes, and that is the whole point:
+ *   .ol8-icon-btn           — the protected TARGET. Transparent, no paint.
+ *                             Never smaller than 48px even when the visible
+ *                             box is 36px, so the hit area stays compliant.
+ *   .ol8-icon-btn__surface  — the VISIBLE box. Carries bg, 2px border, radius.
+ *
+ * Collapsing these into one element would silently shrink the touch target
+ * to 36px at Compact. Don't.
+ */
+
+.ol8-icon-btn {
+  --_target:  var(--ol8-component-iconbutton-target-standard);
+  --_box:     var(--ol8-component-iconbutton-box-standard);
+  --_radius:  var(--ol8-component-iconbutton-radius-standard);
+  --_artwork: var(--ol8-component-iconbutton-artwork-standard);
+
+  --_bg: transparent;
+  --_bd: transparent;
+  --_ink: var(--ol8-color-icon-primary);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_target);
+  block-size: var(--_target);
+  padding: 0;
+  border: 0;
+  background: none;          /* the target paints nothing */
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ol8-icon-btn__surface {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_box);
+  block-size: var(--_box);
+  border: var(--ol8-border-width-standard) solid var(--_bd);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  color: var(--_ink);
+}
+
+/* The surface governs artwork size — never set a size on the glyph. */
+.ol8-icon-btn .ol8-icon { --_ol8-icon-size: var(--_artwork); }
+
+/* "the symbol never translates, rotates, or scales" — no transform on the
+   glyph in any state. Hover changes the container only. */
+
+/* ---- Size ------------------------------------------------------------ */
+.ol8-icon-btn[data-ol8-size="compact"] {
+  --_target: var(--ol8-component-iconbutton-target-compact);
+  --_box: var(--ol8-component-iconbutton-box-compact);
+  --_radius: var(--ol8-component-iconbutton-radius-compact);
+  --_artwork: var(--ol8-component-iconbutton-artwork-compact);
+}
+.ol8-icon-btn[data-ol8-size="standard"] {
+  --_target: var(--ol8-component-iconbutton-target-standard);
+  --_box: var(--ol8-component-iconbutton-box-standard);
+  --_radius: var(--ol8-component-iconbutton-radius-standard);
+  --_artwork: var(--ol8-component-iconbutton-artwork-standard);
+}
+.ol8-icon-btn[data-ol8-size="comfortable"] {
+  --_target: var(--ol8-component-iconbutton-target-comfortable);
+  --_box: var(--ol8-component-iconbutton-box-comfortable);
+  --_radius: var(--ol8-component-iconbutton-radius-comfortable);
+  --_artwork: var(--ol8-component-iconbutton-artwork-comfortable);
+}
+.ol8-icon-btn[data-ol8-size="large"] {
+  --_target: var(--ol8-component-iconbutton-target-large);
+  --_box: var(--ol8-component-iconbutton-box-large);
+  --_radius: var(--ol8-component-iconbutton-radius-large);
+  --_artwork: var(--ol8-component-iconbutton-artwork-large);
+}
+
+/* ---- Shape: Circle is a governed presentation extension -------------- */
+.ol8-icon-btn[data-ol8-shape="circle"] { --_radius: var(--ol8-shape-radius-full); }
+
+/* ---- Family: Primary ------------------------------------------------- */
+/* The glyph binds to the action's CONTENT colour, not the neutral ink role.
+   Figma binds --ol8-color-icon-primary (#151817) here, which lands a near-black
+   glyph on a #2c438b surface: 1.94:1, against the 3:1 WCAG 1.4.11 minimum for
+   graphical objects. --ol8-color-actionprimary-content measures 8.81:1. */
+.ol8-icon-btn--primary {
+  --_bg: var(--ol8-color-actionprimary-default);
+  --_bd: var(--ol8-color-actionprimary-default);
+  --_ink: var(--ol8-color-actionprimary-content);
+}
+.ol8-icon-btn--primary:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--primary[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionprimary-hover); --_bd: var(--ol8-color-actionprimary-hover);
+}
+.ol8-icon-btn--primary:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--primary[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionprimary-pressed); --_bd: var(--ol8-color-actionprimary-pressed);
+}
+.ol8-icon-btn--primary:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionprimary-disabled);
+  --_bd: var(--ol8-color-border-disabled);
+  /* Disabled flips to a LIGHT surface, so the glyph flips back to dark ink. */
+  --_ink: var(--ol8-color-actionprimary-disabledcontent);
+}
+
+/* ---- Family: Destructive --------------------------------------------- */
+/* Same defect as Primary: #151817 on #922824 measures 2.17:1. */
+.ol8-icon-btn--destructive {
+  --_bg: var(--ol8-color-actiondestructive-default);
+  --_bd: var(--ol8-color-actiondestructive-default);
+  --_ink: var(--ol8-color-actiondestructive-content);
+}
+.ol8-icon-btn--destructive:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--destructive[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actiondestructive-hover); --_bd: var(--ol8-color-actiondestructive-hover);
+}
+.ol8-icon-btn--destructive:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--destructive[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actiondestructive-pressed); --_bd: var(--ol8-color-actiondestructive-pressed);
+}
+.ol8-icon-btn--destructive:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actiondestructive-disabled);
+  --_bd: var(--ol8-color-border-disabled);
+  --_ink: var(--ol8-color-actiondestructive-disabledcontent);
+}
+
+/* ---- Family: Secondary (bordered, transparent) ----------------------- */
+.ol8-icon-btn--secondary {
+  --_bg: var(--ol8-color-actionsecondary-surfacedefault);
+  --_bd: var(--ol8-color-actionsecondary-contentdefault);
+  --_ink: var(--ol8-color-actionsecondary-contentdefault);
+}
+.ol8-icon-btn--secondary:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--secondary[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionsecondary-surfacehover);
+  --_bd: var(--ol8-color-actionsecondary-contenthover);
+  --_ink: var(--ol8-color-actionsecondary-contenthover);
+}
+.ol8-icon-btn--secondary:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--secondary[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionsecondary-surfacepressed);
+  --_bd: var(--ol8-color-actionsecondary-contentpressed);
+  --_ink: var(--ol8-color-actionsecondary-contentpressed);
+}
+.ol8-icon-btn--secondary:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionsecondary-surfacedisabled);
+  --_bd: var(--ol8-color-border-disabled);
+  --_ink: var(--ol8-color-actionsecondary-contentdisabled);
+}
+
+/* ---- Family: Quiet (no boundary) ------------------------------------- */
+.ol8-icon-btn--quiet {
+  --_bg: var(--ol8-color-actionquiet-surfacedefault);
+  --_bd: transparent;
+  --_ink: var(--ol8-color-actionquiet-contentdefault);
+}
+.ol8-icon-btn--quiet:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--quiet[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionquiet-surfacehover); --_ink: var(--ol8-color-actionquiet-contenthover);
+}
+.ol8-icon-btn--quiet:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--quiet[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionquiet-surfacepressed); --_ink: var(--ol8-color-actionquiet-contentpressed);
+}
+.ol8-icon-btn--quiet:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionquiet-surfacedisabled); --_ink: var(--ol8-color-actionquiet-contentdisabled);
+}
+
+/* ---- Pressed scrim ---------------------------------------------------
+   Figma layers a 3px inset scrim over the pressed surface, in addition to
+   the darker fill. Reproduced as an inset shadow rather than an extra node. */
+.ol8-icon-btn:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  box-shadow: inset 0 0 0 3px var(--ol8-component-iconbutton-pressedscrim);
+}
+
+/* ---- Focus -----------------------------------------------------------
+   OUTSIDE two-tone ring, unlike the labelled Button's inside stroke.
+
+   Figma declares the 6px outer shadow FIRST, and box-shadow paints the first
+   shadow on top — so the 6px dark spread completely covers the 3px light one
+   and only a flat dark band renders. Sampling the Figma export confirms it:
+   uniform #101b3a at every perimeter position and at both 2px and 4px depth.
+
+   The inner band is declared here first so both are visible: light from the
+   edge out to 3px, dark from 3px to 6px. That is the ring the two tokens
+   describe. To restore the Figma-exact single-band ring, swap these two
+   lines back.
+
+   Both focus-ring tokens are BAND THICKNESSES (3px each). box-shadow spread is
+   cumulative from the edge, so the outer band's spread is the sum of the two —
+   3px light from the edge, then dark from 3px out to 6px. Do not pass
+   --ol8-focus-ring-outerwidth here on its own: that would paint the dark band
+   at the same 3px radius as the light one and hide it completely. */
+.ol8-icon-btn:focus-visible { outline: none; }
+.ol8-icon-btn:focus-visible > .ol8-icon-btn__surface {
+  box-shadow:
+    0 0 0 var(--ol8-focus-ring-innerwidth) var(--ol8-color-focus-inner),
+    0 0 0 calc(var(--ol8-focus-ring-innerwidth) + var(--ol8-focus-ring-outerwidth)) var(--ol8-color-focus-outer);
+}
+
+/* ---- Disabled / Loading ---------------------------------------------- */
+.ol8-icon-btn:disabled { cursor: not-allowed; }
+.ol8-icon-btn[data-ol8-loading] { cursor: progress; }
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-icon-btn[data-ol8-loading] .ol8-icon > svg { animation: ol8-spin 900ms linear infinite; }
+}

package/src/styles/icon.css

@@ -0,0 +1,56 @@
+/* GENERATED from packages/core/src/atoms/icon/icon.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 · Icon atom
+ * Figma: page "Iconography" — masters "Icon Library / Masters" (426:55),
+ *        sizing from "Icon Frame" (418:51).
+ *
+ * Contract, straight from the Figma component descriptions:
+ *   - one canonical 24px source per glyph
+ *   - the Icon Frame *geometrically* scales the complete source instance, so
+ *     the 1.8-unit stroke scales with the artwork (48px icon => 3.6px stroke).
+ *     This is why the SVG keeps viewBox="0 0 24 24" and we size the box only —
+ *     never `vector-effect: non-scaling-stroke`.
+ *   - the source is neutral; the consumer supplies semantic color, which is
+ *     why every stroke/fill is `currentColor`.
+ */
+
+.ol8-icon {
+  /* The outer asset box. Defaults to the canonical 24px source size. */
+  --_ol8-icon-size: var(--ol8-size-icon-standard);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_ol8-icon-size);
+  block-size: var(--_ol8-icon-size);
+  /* Inherit ink from the consuming component (semantic color lives there). */
+  color: inherit;
+}
+
+/* The inner leaf. Both dimensions are explicit — never `auto`. */
+.ol8-icon > svg {
+  display: block;
+  inline-size: var(--_ol8-icon-size);
+  block-size: var(--_ol8-icon-size);
+  overflow: visible; /* matches the Figma export; round caps may kiss the edge */
+}
+
+/* ---- Icon Frame · universal sizes (Figma 418:51) ---------------------- */
+.ol8-icon[data-ol8-icon-size="9"]   { --_ol8-icon-size: var(--ol8-size-icon-micro); }
+.ol8-icon[data-ol8-icon-size="12"]  { --_ol8-icon-size: var(--ol8-size-icon-compact); }
+.ol8-icon[data-ol8-icon-size="18"]  { --_ol8-icon-size: var(--ol8-size-icon-small); }
+.ol8-icon[data-ol8-icon-size="24"]  { --_ol8-icon-size: var(--ol8-size-icon-standard); }
+.ol8-icon[data-ol8-icon-size="30"]  { --_ol8-icon-size: var(--ol8-size-icon-medium); }
+.ol8-icon[data-ol8-icon-size="36"]  { --_ol8-icon-size: var(--ol8-size-icon-large); }
+.ol8-icon[data-ol8-icon-size="48"]  { --_ol8-icon-size: var(--ol8-size-icon-xlarge); }
+.ol8-icon[data-ol8-icon-size="60"]  { --_ol8-icon-size: var(--ol8-size-icon-spacious); }
+.ol8-icon[data-ol8-icon-size="72"]  { --_ol8-icon-size: var(--ol8-size-icon-display); }
+.ol8-icon[data-ol8-icon-size="96"]  { --_ol8-icon-size: var(--ol8-size-icon-hero); }
+.ol8-icon[data-ol8-icon-size="108"] { --_ol8-icon-size: var(--ol8-size-icon-landmark); }
+
+/* ---- Direction ------------------------------------------------------- */
+/* "Direction: semantic registry controls RTL mirroring" (Iconography doc 84:13).
+   The registry sets data-ol8-icon-mirror; CSS only obeys it. */
+[dir="rtl"] .ol8-icon[data-ol8-icon-mirror="true"] > svg { transform: scaleX(-1); }