@oneli8/core 1.0.0-beta.3

package/src/atoms/icon/icons.generated.js

@@ -0,0 +1,128 @@
+// 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,
+// frame "Icon Library / Masters" (426:55). Re-run `npm run sync:icons`.
+
+export const OL8_ICON_VIEWBOX = '0 0 24 24';
+
+/** @type {Record<string, import('./icons.generated.js').Ol8IconEntry>} */
+export const OL8_ICONS = {
+  "add": {
+    "category": "action",
+    "figmaNode": "418:14",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "caution": {
+    "category": "status",
+    "figmaNode": "440:4",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Stem\" d=\"M12 7V13\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Dot\" d=\"M12 17.6C12.5523 17.6 13 17.1523 13 16.6C13 16.0477 12.5523 15.6 12 15.6C11.4477 15.6 11 16.0477 11 16.6C11 17.1523 11.4477 17.6 12 17.6Z\" fill=\"currentColor\"/>"
+  },
+  "check": {
+    "category": "selection",
+    "figmaNode": "391:4",
+    "mirrorInRTL": false,
+    "sourceInk": "#1a2a59",
+    "body": "<path id=\"Check Mark\" d=\"M6.9 12.15L10.2 15.45L17.1 8.55\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "chevron-down": {
+    "category": "navigation",
+    "figmaNode": "521:106",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M5 8.5L12 15.5L19 8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "chevron-up": {
+    "category": "navigation",
+    "figmaNode": "521:108",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M5 15.5L12 8.5L19 15.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "clear": {
+    "category": "action",
+    "figmaNode": "557:4",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M3 3L17 17M17 3L3 17\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "close": {
+    "category": "action",
+    "figmaNode": "894:123",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "critical": {
+    "category": "status",
+    "figmaNode": "418:18",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Critical Mark\" d=\"M9 9L15 15M15 9L9 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "forward": {
+    "category": "navigation",
+    "figmaNode": "418:16",
+    "mirrorInRTL": true,
+    "sourceInk": "#151817",
+    "body": "<path id=\"artwork\" d=\"M3 12H21M15 18L21 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "informative": {
+    "category": "status",
+    "figmaNode": "440:11",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Stem\" d=\"M12 11V16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Dot\" d=\"M12 8.6C12.5523 8.6 13 8.15228 13 7.6C13 7.04771 12.5523 6.6 12 6.6C11.4477 6.6 11 7.04771 11 7.6C11 8.15228 11.4477 8.6 12 8.6Z\" fill=\"currentColor\"/>"
+  },
+  "loading": {
+    "category": "status",
+    "figmaNode": "440:2",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M12 3C14.0823 2.99817 16.1008 3.71843 17.7116 5.03806C19.3223 6.35769 20.4257 8.19503 20.8336 10.237C21.2415 12.2789 20.9287 14.3992 19.9485 16.2363C18.9684 18.0735 17.3815 19.514 15.4583 20.3123C13.5351 21.1106 11.3946 21.2174 9.40156 20.6143C7.40849 20.0113 5.68619 18.7358 4.52813 17.0053C3.37008 15.2747 2.84794 13.1961 3.05068 11.1237C3.25343 9.05131 4.16851 7.11332 5.64 5.64\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "mixed": {
+    "category": "selection",
+    "figmaNode": "391:9",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<rect id=\"Mixed Mark\" x=\"7.5\" y=\"11.1\" width=\"9\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>"
+  },
+  "positive": {
+    "category": "status",
+    "figmaNode": "440:8",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Positive Mark\" d=\"M7.60002 12.2L10.6 15.2L16.6 9.2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "search": {
+    "category": "action",
+    "figmaNode": "557:2",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"glyph-path\" d=\"M15 15L20 20M10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17C13.866 17 17 13.866 17 10C17 6.134 13.866 3 10 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "selected-dot": {
+    "category": "selection",
+    "figmaNode": "391:14",
+    "mirrorInRTL": false,
+    "sourceInk": "#e2e9ff",
+    "body": "<circle id=\"Selected Dot\" cx=\"12\" cy=\"12\" r=\"6\" fill=\"currentColor\"/>"
+  },
+  "visibility-closed": {
+    "category": "action",
+    "figmaNode": "440:15",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"Closed Lid\" d=\"M4.5 10.5C6.75 13.5 9.25 15 12 15C14.75 15 17.25 13.5 19.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Lashes\" d=\"M6.75 13.05L5.4 15M9.75 14.55L9.3 16.8M14.25 14.55L14.7 16.8M17.25 13.05L18.6 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  },
+  "visibility-open": {
+    "category": "action",
+    "figmaNode": "418:21",
+    "mirrorInRTL": false,
+    "sourceInk": "#151817",
+    "body": "<path id=\"Eye Contour\" d=\"M3 12C5.25 8.25 8.25 6.375 12 6.375C15.75 6.375 18.75 8.25 21 12C18.75 15.75 15.75 17.625 12 17.625C8.25 17.625 5.25 15.75 3 12Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Pupil\" d=\"M12 14.625C13.4497 14.625 14.625 13.4497 14.625 12C14.625 10.5503 13.4497 9.375 12 9.375C10.5503 9.375 9.375 10.5503 9.375 12C9.375 13.4497 10.5503 14.625 12 14.625Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+  }
+};

package/src/atoms/icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon.js';
+export * from './icons.generated.js';

package/src/atoms/icon/index.js

@@ -0,0 +1,2 @@
+export * from './icon.js';
+export * from './icons.generated.js';

package/src/atoms/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon/index.js';
+export * from './selection-indicator/index.js';

package/src/atoms/index.js

@@ -0,0 +1,2 @@
+export * from './icon/index.js';
+export * from './selection-indicator/index.js';

package/src/atoms/selection-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './selection-indicator.js';

package/src/atoms/selection-indicator/index.js

@@ -0,0 +1 @@
+export * from './selection-indicator.js';

package/src/atoms/selection-indicator/selection-indicator.css

@@ -0,0 +1,140 @@
+/**
+ * Oneli8 · Selection Indicator (ATOM)
+ * Figma: Documentation / Choice Controls (246:3)
+ *   Icon / Selection / Checkbox  365:2417  (12 variants)
+ *   Icon / Selection / Radio     366:2371  (8)
+ *   Icon / Selection / Switch    824:1304  (8)
+ *
+ * Figma names the tier itself — "Documentation / Atom / Selection Indicator" —
+ * and points at packages/react/src/atoms/SelectionIndicator.js (kind=switch),
+ * so all three kinds are one atom parameterised by kind, not three components.
+ *
+ * It composes no other component: the marks are drawn from native elements and
+ * one inline path, which is what keeps this an atom rather than a molecule.
+ *
+ * PURELY PRESENTATIONAL. It carries no role and no state of its own — the
+ * native <input> inside Choice Item owns semantics. Always aria-hidden.
+ *
+ * Axes are Figma's: Selection and Availability.
+ */
+
+.ol8-selection {
+  --_box:      var(--ol8-size-icon-small);          /* 18px compact */
+  --_radius:   var(--ol8-component-checkbox-radius-compact);
+  --_dot:      var(--ol8-component-radio-dot-compact);
+  --_track-w:  var(--ol8-component-switch-trackwidth-compact);
+  --_track-h:  var(--ol8-component-switch-trackheight-compact);
+  --_thumb:    var(--ol8-component-switch-thumb-compact);
+
+  --_surface: transparent;
+  --_edge:    var(--ol8-color-border-strong);
+  --_ink:     var(--ol8-color-selection-content);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  inline-size: var(--_box);
+  block-size: var(--_box);
+  background: var(--_surface);
+  color: var(--_ink);
+}
+
+.ol8-selection[data-ol8-size="comfortable"] {
+  --_box:     var(--ol8-size-icon-standard);        /* 24px */
+  --_radius:  var(--ol8-component-checkbox-radius-comfortable);
+  --_dot:     var(--ol8-component-radio-dot-comfortable);
+  --_track-w: var(--ol8-component-switch-trackwidth-comfortable);
+  --_track-h: var(--ol8-component-switch-trackheight-comfortable);
+  --_thumb:   var(--ol8-component-switch-thumb-comfortable);
+}
+
+/* ---- Checkbox -------------------------------------------------------- */
+.ol8-selection--checkbox {
+  border: var(--ol8-component-checkbox-boundary) solid var(--_edge);
+  border-radius: var(--_radius);
+}
+/* Filled states drop the boundary entirely so the mark occupies the whole
+   box, exactly as Figma draws it (glyph at 0,0 at full box size). */
+.ol8-selection--checkbox[data-ol8-selection="checked"],
+.ol8-selection--checkbox[data-ol8-selection="mixed"] {
+  border-width: 0;
+  --_surface: var(--ol8-color-selection-surface);
+}
+.ol8-selection--checkbox[data-ol8-availability="disabled"] { --_edge: var(--ol8-color-border-disabled); }
+.ol8-selection--checkbox[data-ol8-availability="disabled"][data-ol8-selection="checked"],
+.ol8-selection--checkbox[data-ol8-availability="disabled"][data-ol8-selection="mixed"] {
+  --_surface: var(--ol8-color-surface-disabled);
+  --_ink: var(--ol8-color-icon-disabled);
+}
+
+/* The check glyph scales geometrically with the box (18px master is an exact
+   0.75x of the 24px one), so a single 24-unit path serves both sizes. */
+.ol8-selection--checkbox > .ol8-selection__mark > svg {
+  display: block;
+  inline-size: var(--_box);
+  block-size: var(--_box);
+}
+
+/* The Mixed bar does NOT scale. Both the 18px and 24px masters carry the same
+   9 x 1.8px bar — an approved optical exception — so it is a fixed-size rule
+   here rather than a scaled glyph. */
+.ol8-selection--checkbox[data-ol8-selection="mixed"] > .ol8-selection__mark {
+  inline-size: var(--ol8-component-choice-mixed-bar-width);
+  block-size: var(--ol8-component-choice-mixed-bar-height);
+  border-radius: calc(var(--ol8-component-choice-mixed-bar-height) / 2);
+  background: currentColor;
+}
+
+/* ---- Radio ----------------------------------------------------------- */
+.ol8-selection--radio {
+  border: var(--ol8-component-radio-boundary) solid var(--_edge);
+  border-radius: var(--ol8-shape-radius-full);
+}
+.ol8-selection--radio[data-ol8-selection="selected"] {
+  --_edge: var(--ol8-color-selection-surface);
+  --_ink:  var(--ol8-color-selection-surface);
+}
+.ol8-selection--radio[data-ol8-availability="disabled"] { --_edge: var(--ol8-color-border-disabled); }
+.ol8-selection--radio[data-ol8-availability="disabled"][data-ol8-selection="selected"] {
+  --_ink: var(--ol8-color-icon-disabled);
+}
+.ol8-selection--radio > .ol8-selection__mark {
+  inline-size: var(--_dot);
+  block-size: var(--_dot);
+  border-radius: var(--ol8-shape-radius-full);
+  background: currentColor;
+}
+
+/* ---- Switch ---------------------------------------------------------- */
+.ol8-selection--switch {
+  inline-size: var(--_track-w);
+  block-size: var(--_track-h);
+  border-radius: var(--ol8-shape-radius-full);
+  --_surface: var(--ol8-color-surface-sunken);
+  justify-content: flex-start;
+}
+.ol8-selection--switch[data-ol8-selection="on"] { --_surface: var(--ol8-color-selection-surface); }
+.ol8-selection--switch[data-ol8-availability="disabled"] { --_surface: var(--ol8-color-surface-disabled); }
+
+.ol8-selection--switch > .ol8-selection__mark {
+  position: absolute;
+  inset-block-start: var(--ol8-component-switch-inset);
+  inset-inline-start: var(--ol8-component-switch-inset);
+  inline-size: var(--_thumb);
+  block-size: var(--_thumb);
+  border-radius: var(--ol8-shape-radius-full);
+  background: var(--ol8-color-control-thumb);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.ol8-selection--switch[data-ol8-selection="on"] > .ol8-selection__mark {
+  inset-inline-start: calc(var(--_track-w) - var(--_thumb) - var(--ol8-component-switch-inset));
+}
+/* Optional artwork inside the thumb: 9px compact, 12px comfortable. */
+.ol8-selection--switch .ol8-icon { --_ol8-icon-size: var(--ol8-size-icon-micro); }
+.ol8-selection--switch[data-ol8-size="comfortable"] .ol8-icon { --_ol8-icon-size: var(--ol8-size-icon-compact); }

package/src/atoms/selection-indicator/selection-indicator.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Selection Indicator (ATOM) — presentational only. It renders the mark a
+ * checkbox, radio or switch shows; it never owns state, role or focus.
+ */
+export type Ol8SelectionKind = 'checkbox' | 'radio' | 'switch';
+export type Ol8SelectionSize = 'compact' | 'comfortable';
+
+export type Ol8CheckboxSelection = 'unchecked' | 'checked' | 'mixed';
+export type Ol8RadioSelection = 'unselected' | 'selected';
+export type Ol8SwitchSelection = 'off' | 'on';
+export type Ol8Selection = Ol8CheckboxSelection | Ol8RadioSelection | Ol8SwitchSelection;
+
+export declare const OL8_SELECTION_KINDS: readonly Ol8SelectionKind[];
+export declare const OL8_SELECTION_SIZES: readonly Ol8SelectionSize[];
+
+/** Figma's Selection axis, per kind. */
+export declare const OL8_SELECTION_STATES: {
+  readonly checkbox: readonly Ol8CheckboxSelection[];
+  readonly radio: readonly Ol8RadioSelection[];
+  readonly switch: readonly Ol8SwitchSelection[];
+};
+
+export interface Ol8SelectionIndicatorOptions {
+  /** Defaults to the kind's first state (unchecked / unselected / off). */
+  selection?: Ol8Selection;
+  size?: Ol8SelectionSize;
+  disabled?: boolean;
+  /** Override the glyph. Defaults to the kind's canonical mark. */
+  icon?: string;
+  className?: string;
+}
+
+export declare function renderSelectionIndicator(
+  kind: Ol8SelectionKind,
+  options?: Ol8SelectionIndicatorOptions,
+): string;

package/src/atoms/selection-indicator/selection-indicator.js

@@ -0,0 +1,61 @@
+/**
+ * Oneli8 · Selection Indicator (ATOM) — headless.
+ *
+ * Presentational only. It renders the mark a checkbox, radio or switch shows;
+ * it never owns state, role or focus. The native <input> in Choice Item does.
+ *
+ * Kept an atom by the project's rule that atoms compose no other component:
+ * the check glyph is inlined as a path here rather than mounting the icon
+ * component. renderIconSvg returns a markup string, not a component instance.
+ */
+import { renderIconSvg } from '../icon/icon.js';
+
+export const OL8_SELECTION_KINDS = ['checkbox', 'radio', 'switch'];
+export const OL8_SELECTION_SIZES = ['compact', 'comfortable'];
+
+/** Figma's Selection axis, per kind. */
+export const OL8_SELECTION_STATES = {
+  checkbox: ['unchecked', 'checked', 'mixed'],
+  radio: ['unselected', 'selected'],
+  switch: ['off', 'on'],
+};
+
+/**
+ * @param {'checkbox'|'radio'|'switch'} kind
+ * @param {{selection?:string,size?:string,disabled?:boolean,icon?:string,className?:string}} [options]
+ */
+export function renderSelectionIndicator(kind, options = {}) {
+  if (!OL8_SELECTION_KINDS.includes(kind)) throw new Error(`[ol8] unknown selection kind "${kind}"`);
+  const states = OL8_SELECTION_STATES[kind];
+  const { selection = states[0], size = 'compact', disabled = false, icon, className } = options;
+
+  if (!states.includes(selection)) {
+    throw new Error(`[ol8] "${selection}" is not a ${kind} selection state (${states.join(', ')})`);
+  }
+  if (!OL8_SELECTION_SIZES.includes(size)) throw new Error(`[ol8] unknown selection size "${size}"`);
+  if (icon && kind !== 'switch') throw new Error('[ol8] only the switch thumb carries optional artwork');
+
+  const attrs = [
+    `class="ol8-selection ol8-selection--${kind}${className ? ` ${className}` : ''}"`,
+    `data-ol8-size="${size}"`,
+    `data-ol8-selection="${selection}"`,
+    `data-ol8-availability="${disabled ? 'disabled' : 'enabled'}"`,
+    'aria-hidden="true"',
+  ].join(' ');
+
+  return `<span ${attrs}>${renderMark(kind, selection, icon)}</span>`;
+}
+
+function renderMark(kind, selection, icon) {
+  if (kind === 'checkbox') {
+    if (selection === 'checked') return `<span class="ol8-selection__mark">${renderIconSvg('check')}</span>`;
+    if (selection === 'mixed') return '<span class="ol8-selection__mark"></span>';
+    return '';
+  }
+  if (kind === 'radio') {
+    return selection === 'selected' ? '<span class="ol8-selection__mark"></span>' : '';
+  }
+  // switch: the thumb is always present; artwork inside it is optional
+  const art = icon ? `<span class="ol8-icon">${renderIconSvg(icon)}</span>` : '';
+  return `<span class="ol8-selection__mark">${art}</span>`;
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './atoms/index.js';
+export * from './molecules/index.js';
+export * from './organisms/index.js';

package/src/index.js

@@ -0,0 +1,3 @@
+export * from './atoms/index.js';
+export * from './molecules/index.js';
+export * from './organisms/index.js';

package/src/materials/gem/gem.css

@@ -0,0 +1,171 @@
+/**
+ * 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 {
+  position: relative;
+  isolation: isolate;
+  --_rim: var(--ol8-material-control-gem--rim-default);
+}
+
+/* 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 {
+  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--stop-1),
+    var(--_g2) var(--ol8-material-control-gem--stop-2),
+    var(--_g3) var(--ol8-material-control-gem--stop-3));
+}
+
+.ol8-btn[data-ol8-material="gem"]::after,
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow:
+    inset 0 2px 1px 0 var(--ol8-material-control-gem--rim-specular),
+    inset 0 0 0 0 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);
+}
+
+/* Content must sit above the ::before body. */
+.ol8-btn[data-ol8-material="gem"] > *,
+.ol8-icon-btn[data-ol8-material="gem"] .ol8-icon { position: relative; z-index: 0; }
+
+/* ---- 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 { display: none; }
+  .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; }
+}