@oneli8/react 1.0.0-beta.10 → 1.0.0-beta.12

package/ai-context.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
   "system": "OneLi8",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",
@@ -245,6 +245,18 @@
         "ol8-icon-btn": [
           "primary",
           "secondary"
+        ],
+        "ol8-field": [
+          "outline",
+          "filled"
+        ],
+        "ol8-choice": [
+          "checkbox",
+          "radio",
+          "switch"
+        ],
+        "ol8-gem": [
+          "generic surface"
         ]
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneli8/react",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "description": "OneLi8 Design System for React. Components, design tokens, the Gem material, and the design language they follow.",
   "keywords": [
     "react",
@@ -52,7 +52,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@oneli8/tokens": "1.0.0-beta.10"
+    "@oneli8/tokens": "1.0.0-beta.12"
   },
   "peerDependencies": {
     "react": ">=18"

package/skills/oneli8-ui/SKILL.md

@@ -32,6 +32,12 @@ text. That means every glyph AND the unselected control boundary and any icon, n
 the label alone. Disabled takes material.gem.color.quiet.contentDisabled, one
 whitish grey shared by text and control geometry, and no halo.
 
+On a button the label and the icon always take the same value: --_fg and --_ink are set
+together, in every state. Disabled on Gem takes material.gem.color.quiet.contentDisabled for
+both, never the regular action disabled-content colours, which are dark on a surface whose
+enabled content is near-white. Loading is an ACTIVE state: it keeps the lit bezel and the gem
+content ink, and it matches :disabled only because inert = disabled || loading.
+
 material.gem.color.quiet.stabilizedFace is the local content plane on app chrome,
 including the filled Gem text field, Select and Combobox. Its content is ordinary
 color.text.* and takes no halo. Selected and mixed indicators are never restyled

package/src/foundations/icons.generated.d.ts

@@ -1,5 +1,5 @@
 // GENERATED by packages/sync/src/build-icons.mjs — do not edit by hand.
-// Source: Figma "Oneli8 Design System — 1.0.0-beta.1", page Iconography,
+// Source: Figma "OneLi8 Design System — 1.0.0-beta.1", page Iconography,
 // frame "Icon Library / Masters" (426:55). Re-run `npm run sync:icons`.
 
 export interface Ol8IconEntry {
@@ -29,6 +29,10 @@ export declare const OL8_ICONS: {
   readonly "close": Ol8IconEntry;
   readonly "copy": Ol8IconEntry;
   readonly "critical": Ol8IconEntry;
+  readonly "figure-running": Ol8IconEntry;
+  readonly "figure-sprinting": Ol8IconEntry;
+  readonly "figure-standing": Ol8IconEntry;
+  readonly "figure-walking": Ol8IconEntry;
   readonly "forward": Ol8IconEntry;
   readonly "heart": Ol8IconEntry;
   readonly "informative": Ol8IconEntry;

package/src/foundations/icons.generated.js

@@ -1,5 +1,5 @@
 // GENERATED by packages/sync/src/build-icons.mjs — do not edit by hand.
-// Source: Figma "Oneli8 Design System — 1.0.0-beta.1", page Iconography,
+// Source: Figma "OneLi8 Design System — 1.0.0-beta.1", page Iconography,
 // frame "Icon Library / Masters" (426:55). Re-run `npm run sync:icons`.
 
 export const OL8_ICON_VIEWBOX = '0 0 24 24';
@@ -204,6 +204,202 @@ export const OL8_ICONS = {
       }
     ]
   },
+  "figure-running": {
+    "category": "locomotion",
+    "figmaNode": null,
+    "mirrorInRTL": true,
+    "candidate": true,
+    "sourceInk": "#151817",
+    "body": "<circle id=\"head\" cx=\"10.5\" cy=\"3.9\" r=\"2.1\" fill=\"currentColor\"/><path id=\"torso\" d=\"M10.5 6L12.3 12\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"arms\" d=\"M7.8 11.1L11.1 9M14.4 7.5L12 9.3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"legs\" d=\"M7.5 18.6L12.3 12L16.2 17.4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+    "elements": [
+      {
+        "tag": "circle",
+        "attrs": {
+          "cx": "10.5",
+          "cy": "3.9",
+          "r": "2.1",
+          "fill": "currentColor"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M10.5 6L12.3 12",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M7.8 11.1L11.1 9M14.4 7.5L12 9.3",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M7.5 18.6L12.3 12L16.2 17.4",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      }
+    ]
+  },
+  "figure-sprinting": {
+    "category": "locomotion",
+    "figmaNode": null,
+    "mirrorInRTL": true,
+    "candidate": true,
+    "sourceInk": "#151817",
+    "body": "<circle id=\"head\" cx=\"9.9\" cy=\"4.2\" r=\"2.1\" fill=\"currentColor\"/><path id=\"torso\" d=\"M9.9 6.3L12.6 11.7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"arms\" d=\"M6.9 10.2L10.5 9M15.6 6.6L12 9.3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"legs\" d=\"M6 17.7L12.6 11.7L17.1 16.2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+    "elements": [
+      {
+        "tag": "circle",
+        "attrs": {
+          "cx": "9.9",
+          "cy": "4.2",
+          "r": "2.1",
+          "fill": "currentColor"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M9.9 6.3L12.6 11.7",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M6.9 10.2L10.5 9M15.6 6.6L12 9.3",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M6 17.7L12.6 11.7L17.1 16.2",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      }
+    ]
+  },
+  "figure-standing": {
+    "category": "locomotion",
+    "figmaNode": null,
+    "mirrorInRTL": false,
+    "candidate": true,
+    "sourceInk": "#151817",
+    "body": "<circle id=\"head\" cx=\"12\" cy=\"3.6\" r=\"2.1\" fill=\"currentColor\"/><path id=\"torso\" d=\"M12 5.7V12.6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"arms\" d=\"M9.9 12.3L11.4 9M14.1 12.3L12.6 9\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"legs\" d=\"M11.1 19.5L12 12.6L12.9 19.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+    "elements": [
+      {
+        "tag": "circle",
+        "attrs": {
+          "cx": "12",
+          "cy": "3.6",
+          "r": "2.1",
+          "fill": "currentColor"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M12 5.7V12.6",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M9.9 12.3L11.4 9M14.1 12.3L12.6 9",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M11.1 19.5L12 12.6L12.9 19.5",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      }
+    ]
+  },
+  "figure-walking": {
+    "category": "locomotion",
+    "figmaNode": null,
+    "mirrorInRTL": true,
+    "candidate": true,
+    "sourceInk": "#151817",
+    "body": "<circle id=\"head\" cx=\"11.4\" cy=\"3.6\" r=\"2.1\" fill=\"currentColor\"/><path id=\"torso\" d=\"M11.4 5.7L12 12.3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"arms\" d=\"M9.3 11.7L11.1 9M14.4 11.1L12.3 9\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"legs\" d=\"M9.3 19.5L12 12.3L14.7 18.9\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+    "elements": [
+      {
+        "tag": "circle",
+        "attrs": {
+          "cx": "11.4",
+          "cy": "3.6",
+          "r": "2.1",
+          "fill": "currentColor"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M11.4 5.7L12 12.3",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M9.3 11.7L11.1 9M14.4 11.1L12.3 9",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      },
+      {
+        "tag": "path",
+        "attrs": {
+          "d": "M9.3 19.5L12 12.3L14.7 18.9",
+          "stroke": "currentColor",
+          "strokeWidth": "1.8",
+          "strokeLinecap": "round",
+          "strokeLinejoin": "round"
+        }
+      }
+    ]
+  },
   "forward": {
     "category": "navigation",
     "figmaNode": "418:16",

package/src/styles/button.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/button/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 · Button
+ * OneLi8 · Button
  * Figma: section "Button" (1034:9968) — Primary 15:823, Secondary 15:824,
  *        Quiet 15:825, Destructive 15:826. 4 families × 4 sizes × 6 states.
  *

package/src/styles/choice-chip.css

@@ -1,7 +1,7 @@
 /* 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
+ * 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:

package/src/styles/choice-group.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/organisms/choice-group/choice-group.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 Group (ORGANISM)
+ * OneLi8 · Choice Group (ORGANISM)
  * Figma: Documentation / Organism / Choice Group
  *   Checkbox Hierarchy 273:603  Aggregate = None | Some | All
  *   Radio Group        859:5180 Behavior  = Safe Default | No Default |

package/src/styles/choice-item.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/choice-item/choice-item.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 Item (MOLECULE)
+ * OneLi8 · Choice Item (MOLECULE)
  * Figma: Documentation / Molecule / Choice Item
  *   Checkbox 252:301 (24 variants) · Radio 331:1309 (16) · Switch 825:1591 (16)
  *

package/src/styles/choice-picker.css

@@ -1,7 +1,7 @@
 /* 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)
+ * 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,

package/src/styles/combobox.css

@@ -1,7 +1,7 @@
 /* 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)
+ * OneLi8 · Combobox (ORGANISM)
  * Figma: Organism / Combobox 883:2159 — "Reuses approved Text Field, Selection
  * Popup and governed icon atoms."
  *

package/src/styles/form-message.css

@@ -1,7 +1,7 @@
 /* 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)
+ * OneLi8 · Form Message (MOLECULE)
  * Figma: Form Message 177:13, five tones.
  *
  * Anatomy read from Figma: a horizontal row, gap Component / Text Field / Gap /

package/src/styles/gem.css

@@ -1,7 +1,7 @@
 /* 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
+ * 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.
@@ -228,27 +228,149 @@
 }
 /* Disabled resolves to the opaque equivalent, which is the same answer Reduced
    Transparency gives. */
+/* DISABLED IS A STATE, NOT A MATERIAL CHANGE.
+   This used to swap the face for quiet.opaqueEquivalent and hide both painted
+   layers, so a disabled Gem field stopped being glass and became a solid slab.
+   That mirrored the Figma source faithfully and was wrong in both places:
+   opaqueEquivalent is the answer to prefers-reduced-transparency, a user
+   preference, not to a component state. Gem is worn, so an opaque disabled
+   field punches a solid hole in the wearer's view of the street — the same
+   objection that makes the reduced mode translucent rather than solid.
+   It also disagreed with Choice Item, which keeps its Gem surface when
+   disabled and only dims its content.
+
+   So the body and the backdrop blur stay. What goes is the lit bezel: the rim
+   inner shadows and the angular cut both drop, and the boundary falls to the
+   flat disabled border. The surface stays glass; it stops catching light. */
 .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; }
 
+/* THE ANGULAR CUT — the bezel stroke, at last implemented.
+ *
+ * Figma puts a 1px INSIDE stroke on the Control frame, and it is not a flat
+ * colour: it is a GRADIENT_ANGULAR with five stops, symmetric about 0.54, so
+ * the cut catches light at the top and fades at the bottom-left. The family
+ * depends on the appearance — Inner Thin Cut on Filled, Cut Edge on Outline —
+ * read off 214:132 and 210:112 respectively.
+ *
+ * CSS has no gradient border that follows border-radius, so the ring is a
+ * conic gradient clipped to a 1px inset band by two masks composited apart.
+ * It lives on .ol8-field__control-stack::before because that box is identical
+ * to the control's (both take --_height, the control is inline-size: 100%) and
+ * because the control's own two pseudo-elements are already spent: ::before is
+ * the body and backdrop blur, ::after is the pair of rim inner shadows. The
+ * stack's ::after is the focus edge. ::before was the one free layer, which is
+ * why this needs no markup change — an earlier read of this file concluded it
+ * did, and that was wrong.
+ *
+ * The flat --_border stays underneath. It is what shows when the ring cannot
+ * paint, and it is what Reduced Transparency falls back to. */
+.ol8-field[data-ol8-material="gem"] {
+  --_bezel-high: var(--ol8-material-gem-color-cutedge-high);
+  --_bezel-mid: var(--ol8-material-gem-color-cutedge-mid);
+  --_bezel-low: var(--ol8-material-gem-color-cutedge-low);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"] {
+  --_bezel-high: var(--ol8-material-gem-color-innerthincut-high);
+  --_bezel-mid: var(--ol8-material-gem-color-innerthincut-mid);
+  --_bezel-low: var(--ol8-material-gem-color-innerthincut-low);
+}
+
+.ol8-field[data-ol8-material="gem"] > .ol8-field__control-stack::before,
+.ol8-gem::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  padding: var(--ol8-border-width-hairline);
+  /* the five Figma stops, at their Figma positions */
+  background:
+    conic-gradient(from 0deg,
+      var(--_bezel-high) 0%,
+      var(--_bezel-mid) 30%,
+      var(--_bezel-low) 54%,
+      var(--_bezel-mid) 78%,
+      var(--_bezel-high) 100%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+}
+.ol8-field[data-ol8-material="gem"] > .ol8-field__control-stack::before {
+  border-radius: var(--_radius);
+}
+.ol8-gem {
+  --_bezel-high: var(--ol8-material-gem-color-cutedge-high);
+  --_bezel-mid: var(--ol8-material-gem-color-cutedge-mid);
+  --_bezel-low: var(--ol8-material-gem-color-cutedge-low);
+}
+.ol8-gem::before { border-radius: inherit; }
+
+/* Disabled and Reduced Transparency both drop to the flat boundary. */
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] > .ol8-field__control-stack::before {
+  display: none;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ol8-field[data-ol8-material="gem"] > .ol8-field__control-stack::before,
+  .ol8-gem::before { 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. */
+/* DISABLED KEEPS THE GLASS ON BUTTONS TOO.
+   Same rule the Gem field follows, and buttons needed a different mechanism to
+   reach it. A Gem button's ::before body and backdrop blur survive Disabled
+   already — but ::before sits at z-index -1, behind the element's own --_bg,
+   and the disabled --_bg is an opaque action colour. So the glass was there and
+   occluded: the button looked like Figma's opaque slab even though the layer
+   was painting underneath it.
+
+   Making --_bg transparent for Gem reveals the body that was always there. The
+   lit bezel still goes, exactly as on the field. Loading resolves through the
+   same rule because loading is inert — renderButton sets inert = disabled ||
+   loading — which means a loading Gem button now shows its own loading
+   gradient stops rather than hiding them behind the disabled colour.
+
+   The negative z-index stays load-bearing: it is what lets the canonical
+   opaque background show through when Gem is suppressed for Reduced
+   Transparency, so that media query restores --_bg below. */
+.ol8-btn[data-ol8-material="gem"]:disabled,
+.ol8-icon-btn[data-ol8-material="gem"]:disabled > .ol8-icon-btn__surface {
+  --_bg: transparent;
+}
+
+/* Disabled ink on Gem is already solved: quiet.contentDisabled, the whitish
+   grey shared by Choice Item's label and its control geometry. Buttons were
+   falling through to the regular action disabled-content colours, which are
+   DARK — a dark glyph on a surface whose enabled content is near-white. Code
+   was worse than that: it kept the full near-white, so Disabled was
+   indistinguishable from Default.
+   --_fg is the label and --_ink is the icon, and they take the same value,
+   because on a button the two always match. */
+.ol8-btn[data-ol8-material="gem"]:disabled:not([data-ol8-loading]),
+.ol8-icon-btn[data-ol8-material="gem"]:disabled:not([data-ol8-loading]),
+.ol8-icon-btn[data-ol8-material="gem"]:disabled:not([data-ol8-loading]) > .ol8-icon-btn__surface {
+  --_fg: var(--ol8-material-gem-color-quiet-contentdisabled);
+  --_ink: var(--ol8-material-gem-color-quiet-contentdisabled);
+}
+/* Loading is excluded. It matches :disabled because renderButton sets
+   inert = disabled || loading, but Loading is an ACTIVE state — Figma keeps
+   both rim inner shadows on it and gives it its own deep gradient stops, so it
+   keeps the lit bezel. Only Disabled loses it. */
+.ol8-btn[data-ol8-material="gem"]:disabled:not([data-ol8-loading])::after,
+.ol8-icon-btn[data-ol8-material="gem"]:disabled:not([data-ol8-loading]) > .ol8-icon-btn__surface::after {
+  display: none;
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .ol8-btn[data-ol8-material="gem"]::before,
   .ol8-btn[data-ol8-material="gem"]::after,
@@ -256,6 +378,12 @@
   .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; }
+  /* With the Gem layers suppressed there is nothing behind a transparent
+     background, so the canonical disabled colour comes back. */
+  .ol8-btn[data-ol8-material="gem"]:disabled,
+  .ol8-icon-btn[data-ol8-material="gem"]:disabled > .ol8-icon-btn__surface {
+    --_bg: revert;
+  }
   .ol8-field[data-ol8-material="gem"] .ol8-field__control {
     --_surface: var(--ol8-material-gem-color-quiet-opaqueequivalent);
   }
@@ -319,11 +447,40 @@
      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. */
+  /* The cut edge, exactly as the Gem slab carries it in Figma — Light Gem Slab
+     297:617, which is the container this class is the code equivalent of:
+
+       INNER_SHADOW  offset  3, 3  blur  6            Cut Edge / High
+       INNER_SHADOW  offset -3,-3  blur 12  spread -3 Cut Edge / Mid
+       DROP_SHADOW   offset  0,12  blur 36            Cut Edge / Shadow
+       DROP_SHADOW   offset  0, 3  blur  6            Cut Edge / Shadow
+
+     TWO inner shadows, from OPPOSITE corners: light falling top-left and shade
+     gathering bottom-right. That is why the bezel reads on all four sides in
+     Figma. This carried a top specular and a 1px rim instead — the CONTROL
+     recipe, which belongs to buttons and fields, not to a slab — so the cut
+     only ever showed along the top. Every offset and blur here is on the 3px
+     grid, which is how the slab was drawn. */
   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);
+    inset 3px 3px 6px 0 var(--ol8-material-gem-color-cutedge-high),
+    inset -3px -3px 12px -3px var(--ol8-material-gem-color-cutedge-mid),
+    0 12px 36px var(--ol8-material-gem-color-cutedge-shadow),
+    0 3px 6px var(--ol8-material-gem-color-cutedge-shadow);
+}
+
+/* A Token or Choice Chip sitting ON a Gem surface.
+   Both draw the Choice Chip silhouette, whose default --_surface is
+   color.surface.sunken — an opaque plate. On glass that reads as a solid
+   lozenge stuck to the surface, and in the Light appearance its ink is dark,
+   so the label goes invisible against near-white gem content beside it.
+   The pill turns transparent and the label takes the gem ink and halo, so the
+   chip reads as a boundary around content rather than a second material. */
+.ol8-gem .ol8-chip {
+  --_surface: transparent;
+  --_edge: var(--ol8-material-gem-color-cutedge-high);
+  --_ink: var(--ol8-material-gem-color-quiet-content);
+  text-shadow: var(--_gem-glow), var(--_gem-glow),
+               var(--_gem-glow), var(--_gem-glow);
 }
 
 /* Disabled on a generic Gem surface, same single grey, same absent halo. */
@@ -353,6 +510,26 @@
   --_gem-blur: var(--ol8-material-gem-blur-environmental);
 }
 
+/* The third rung, and the SAME face as reduced transparency below reached for
+   a different reason. That one is the PREFERENCE route — the person asked for
+   less transparency, system-wide. This is the CONTEXT route: this surface is
+   legibility-critical right now, and the environment losing presence is the
+   correct trade rather than a regression. An athlete reading a split while
+   running laps is the case: speed is exactly when the ambient face recedes,
+   and exactly when this reader can least afford it.
+
+   Both land on legibilityFace because there is one dense-but-see-through face,
+   not two. 0.72 leaves 28% of the scene visible and measures 7.70:1 against
+   near-white ink in the worst region of a daylight plate, with no credit taken
+   for the halo — AAA while still worn-display honest.
+
+   Blur holds at the stabilized 12px. Environmental's 18px exists to let the
+   scene dominate, which is the opposite of what this face is for. */
+.ol8-gem[data-ol8-face="legibility"] {
+  --_gem-face: var(--ol8-material-gem-color-quiet-legibilityface);
+  --_gem-blur: var(--ol8-material-gem-blur-stabilized);
+}
+
 /* 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.

package/src/styles/icon-button.css

@@ -1,7 +1,7 @@
 /* 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
+ * 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.

package/src/styles/icon.css

@@ -1,7 +1,7 @@
 /* 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
+ * OneLi8 · Icon atom
  * Figma: page "Iconography" — masters "Icon Library / Masters" (426:55),
  *        sizing from "Icon Frame" (418:51).
  *

package/src/styles/link.css

@@ -1,7 +1,7 @@
 /* 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)
+ * OneLi8 · Link (MOLECULE)
  *
  * Figma (138:260, 139:260, 139:453): "Runtime href, native anchor behavior,
  * visited resolution, aria-current, motion preference and navigation list

package/src/styles/multi-select-field.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/organisms/multi-select-field/multi-select-field.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 · Multi-select Field (ORGANISM)
+ * OneLi8 · Multi-select Field (ORGANISM)
  * Figma: Organism / Multi-select Field / Outline 904:2507 (16 variants)
  *        Organism / Multi-select Field / Filled  978:4472 (16 variants)
  *

package/src/styles/navigation-badge.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/atoms/navigation-badge/navigation-badge.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 · Navigation Badge (ATOM)
+ * OneLi8 · Navigation Badge (ATOM)
  * Figma: Atom / Navigation Badge 989:484 — a full radius pill at the standard
  * indicator height, padded by the related inline step, whose surface and
  * content are the only things that change when the item is selected or gem.

package/src/styles/navigation-item.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/navigation-item/navigation-item.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 · Navigation Item (MOLECULE, internal)
+ * OneLi8 · Navigation Item (MOLECULE, internal)
  * Figma: Tab Item 688:51, Segment Item 695:167, Destination Item 700:292.
  *
  * All three are one molecule. Read from Figma: a box at the size's control

package/src/styles/segmented-control.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/organisms/segmented-control/segmented-control.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 · Segmented Control (ORGANISM)
+ * OneLi8 · Segmented Control (ORGANISM)
  * Figma: Navigation / Segmented Control 698:4792 — six presentations.
  *
  * "Presentation never changes behavior." Every presentation below is a

package/src/styles/select.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/select/select.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 · Select (MOLECULE)
+ * OneLi8 · Select (MOLECULE)
  * Figma: Select / Trigger 583:338, Molecule / Select 875:1778.
  *
  * "Geometry and appearance reuse approved Text Field tokens", and Figma proves

package/src/styles/selection-indicator.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/atoms/selection-indicator/selection-indicator.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 · Selection Indicator (ATOM)
+ * OneLi8 · Selection Indicator (ATOM)
  * Figma: Documentation / Choice Controls (246:3)
  *   Icon / Selection / Checkbox  365:2417  (12 variants)
  *   Icon / Selection / Radio     366:2371  (8)

package/src/styles/selection-option.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/selection-option/selection-option.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 · Selection Option (MOLECULE)
+ * OneLi8 · Selection Option (MOLECULE)
  * Figma: Select and Combobox -> 01 · Atomic Selection Building Blocks
  *        Building Blocks / Selection Option 570:122 (8 variants)
  *        Size Standard|Large x Selection x Availability

package/src/styles/selection-popup.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/organisms/selection-popup/selection-popup.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 · Selection Popup (ORGANISM)
+ * OneLi8 · Selection Popup (ORGANISM)
  * Figma: Building Blocks / Selection Popup 574:534 — Width, Size.
  *
  * The rail is a div with role="listbox" rather than a list element, because a

package/src/styles/tab-bar.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/organisms/tab-bar/tab-bar.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 · Tab Bar (ORGANISM)
+ * OneLi8 · Tab Bar (ORGANISM)
  * Figma: Navigation / Tab Bar 701:460 — Bottom, Inline, Sidebar, Spatial Rail.
  *
  * "Tab Bar contains destinations, never a central action disguised as a

package/src/styles/tabs.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/organisms/tabs/tabs.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 · Tabs (ORGANISM)
+ * OneLi8 · Tabs (ORGANISM)
  * Figma: Navigation / Tabs 693:171 — Hierarchy, Material, Size.
  *
  * The organism owns sibling separation and the rail; the item owns its own

package/src/styles/text-field.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/text-field/text-field.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 · Text Field (MOLECULE)
+ * OneLi8 · Text Field (MOLECULE)
  * Figma: Text Field / Outline 182:33, Text Field / Filled 186:53,
  *        Text Field / Outline / Gem 211:36, Text Field / Filled / Gem 215:226,
  *        Text Field / Content 175:2, Form Message 177:13.

package/src/styles/token.css

@@ -1,7 +1,7 @@
 /* GENERATED from packages/core/src/molecules/token/token.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 · Token (MOLECULE)
+ * OneLi8 · Token (MOLECULE)
  * Figma: Select and Combobox / Molecule / Token 897:2106 (24 variants)
  *
  * The silhouette, sizes and colours all come from the Choice Chip stylesheet,