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

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.11",
   "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.11",
   "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.11"
   },
   "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);
   }

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,