@oneli8/core 1.0.0-beta.10

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

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