@oneli8/react 1.0.0-beta.10

package/src/organisms/Tabs.js

@@ -0,0 +1,123 @@
+import { createElement, forwardRef, useCallback, useId, useRef, useState } from 'react';
+import { OL8_TABS_HIERARCHIES, OL8_TABS_ORIENTATIONS, OL8_TABS_ACTIVATIONS, OL8_NAVIGATION_SIZES } from '../foundations/geometry.js';
+import { NavigationItem } from '../molecules/NavigationItem.js';
+
+/**
+ * ORGANISM. Figma 693:171.
+ *
+ * "Production emits tablist, tab and tabpanel, requires a non empty accessible
+ * region name, retains one enabled Tab stop, mirrors horizontal Arrow keys in
+ * RTL, and supports horizontal/vertical orientation plus automatic/manual
+ * activation." Every clause is enforced here rather than described.
+ *
+ * Tabs owns the group. Consumers pass items and panels; they never assemble a
+ * tablist by hand, which is what keeps selection and focus in one place.
+ */
+export const Tabs = forwardRef(function Tabs({
+  label, items = [], value, defaultValue, onChange,
+  hierarchy = 'primary', size = 'standard', material = 'regular',
+  orientation = 'horizontal', activation = 'automatic',
+  renderPanel, className = '', ...rest
+}, ref) {
+  if (typeof label !== 'string' || label === '') {
+    throw new Error('[ol8] a tab list requires an accessible name. A region nobody can name is a region nobody can reach.');
+  }
+  if (!Array.isArray(items) || items.length === 0) throw new Error('[ol8] a tab list needs at least one tab.');
+  if (!OL8_TABS_HIERARCHIES.includes(hierarchy)) throw new Error(`[ol8] unknown tabs hierarchy "${hierarchy}"`);
+  if (!OL8_NAVIGATION_SIZES.includes(size)) throw new Error(`[ol8] unknown tabs size "${size}"`);
+  if (!OL8_TABS_ORIENTATIONS.includes(orientation)) throw new Error(`[ol8] unknown tabs orientation "${orientation}"`);
+  if (!OL8_TABS_ACTIVATIONS.includes(activation)) throw new Error(`[ol8] unknown tabs activation "${activation}"`);
+  if (items.every(i => i.disabled)) throw new Error('[ol8] a tab list must keep one enabled tab stop.');
+  const seen = new Set();
+  for (const item of items) {
+    if (!item.id) throw new Error('[ol8] every tab needs an id, because exactly one panel is paired with it.');
+    if (seen.has(item.id)) throw new Error(`[ol8] two tabs share the id "${item.id}"`);
+    seen.add(item.id);
+  }
+
+  const prefix = useId();
+  const firstEnabled = items.find(i => !i.disabled);
+  const [internal, setInternal] = useState(defaultValue ?? firstEnabled?.id);
+  const selected = value ?? internal;
+  const listRef = useRef(null);
+
+  const select = useCallback((id) => {
+    if (value === undefined) setInternal(id);
+    onChange?.(id);
+  }, [value, onChange]);
+
+  const onKeyDown = useCallback((event) => {
+    const buttons = [...(listRef.current?.querySelectorAll('.ol8-nav-item--tab') ?? [])];
+    const at = buttons.indexOf(document.activeElement);
+    if (at === -1) return;
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      if (activation === 'manual') { event.preventDefault(); select(items[at].id); }
+      return;
+    }
+
+    // "Mirrors horizontal Arrow keys in RTL": the browser's own direction
+    // decides which physical key means forward.
+    const rtl = getComputedStyle(listRef.current).direction === 'rtl';
+    const forward = orientation === 'vertical' ? 'ArrowDown' : (rtl ? 'ArrowLeft' : 'ArrowRight');
+    const back = orientation === 'vertical' ? 'ArrowUp' : (rtl ? 'ArrowRight' : 'ArrowLeft');
+
+    let next = -1;
+    if (event.key === 'Home') next = items.findIndex(i => !i.disabled);
+    else if (event.key === 'End') next = items.map(i => !i.disabled).lastIndexOf(true);
+    else if (event.key === forward || event.key === back) {
+      const step = event.key === forward ? 1 : -1;
+      // "Disabled choices are skipped by roving focus."
+      for (let hop = 1; hop <= items.length; hop += 1) {
+        const i = (at + step * hop + items.length * hop) % items.length;
+        if (!items[i].disabled) { next = i; break; }
+      }
+    }
+    if (next === -1 || next === at) return;
+    event.preventDefault();
+    buttons[next].focus();
+    if (activation !== 'manual') select(items[next].id);
+  }, [items, orientation, activation, select]);
+
+  const list = createElement('div', {
+    ...rest, ref: (node) => {
+      listRef.current = node;
+      if (typeof ref === 'function') ref(node); else if (ref) ref.current = node;
+    },
+    className: `ol8-tabs${className ? ` ${className}` : ''}`,
+    role: 'tablist',
+    'aria-label': label,
+    'aria-orientation': orientation,
+    'data-ol8-hierarchy': hierarchy,
+    'data-ol8-size': size,
+    'data-ol8-orientation': orientation,
+    ...(material === 'gem' ? { 'data-ol8-material': 'gem' } : {}),
+    onKeyDown,
+  }, items.map(item => createElement(NavigationItem, {
+    key: item.id, kind: 'tab', size,
+    label: item.label, icon: item.icon, badge: item.badge,
+    ariaLabel: item.ariaLabel, disabled: item.disabled,
+    selected: item.id === selected,
+    id: `${prefix}-tab-${item.id}`,
+    'aria-controls': `${prefix}-panel-${item.id}`,
+    // One enabled tab stop; arrows move focus inside the list.
+    tabIndex: item.id === selected ? 0 : -1,
+    onClick: () => select(item.id),
+  })));
+
+  // "Every consuming composition must pair each item with exactly one owned panel."
+  if (!renderPanel) return list;
+
+  return createElement('div', { className: 'ol8-tabs__group' },
+    list,
+    items.map(item => createElement('div', {
+      key: item.id,
+      className: 'ol8-tabs__panel',
+      role: 'tabpanel',
+      id: `${prefix}-panel-${item.id}`,
+      'aria-labelledby': `${prefix}-tab-${item.id}`,
+      tabIndex: 0,
+      hidden: item.id !== selected,
+    }, renderPanel(item))),
+  );
+});

package/src/styles/button.css

@@ -0,0 +1,195 @@
+/* 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
+ * Figma: section "Button" (1034:9968) — Primary 15:823, Secondary 15:824,
+ *        Quiet 15:825, Destructive 15:826. 4 families × 4 sizes × 6 states.
+ *
+ * The governing rule comes from the Figma component description itself:
+ *
+ *   "State → deterministic visual evidence … Runtime-only native button
+ *    semantics, disabled, loading, pressed, fullWidth and iconMotion remain
+ *    implemented and tested in code; they must not become fake visual axes."
+ *
+ * So the six Figma States are NOT six markup variants:
+ *   Default  → the base rule
+ *   Hover    → :hover
+ *   Pressed  → :active  (and [aria-pressed="true"] for toggles)
+ *   Focus    → :focus-visible
+ *   Disabled → [disabled]           (native, not a class)
+ *   Loading  → [data-ol8-loading]   (which also implies disabled + aria-busy)
+ *
+ * There is no .ol8-btn--hover. Emitting one is a bug.
+ */
+
+.ol8-btn {
+  /* Per-variant channels. Families set these; the base rule never hardcodes. */
+  --_bg: transparent;
+  --_fg: currentColor;
+  --_bd: transparent;
+  --_bw: 0px;
+
+  /* Size channels, defaulted to Standard. */
+  --_h:    var(--ol8-component-button-height-standard);
+  --_px:   var(--ol8-component-button-paddinginline-standard);
+  --_r:    var(--ol8-component-button-radius-standard);
+  --_gap:  var(--ol8-component-button-gap-compact);
+  --_icon: var(--ol8-size-icon-small);
+
+  box-sizing: border-box;          /* Figma strokes are inside the frame */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_gap);
+  block-size: var(--_h);
+  padding-inline: var(--_px);
+  padding-block: 0;
+  border: var(--_bw) solid var(--_bd);
+  border-radius: var(--_r);
+  background: var(--_bg);
+  color: var(--_fg);
+
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+  letter-spacing: 0;
+  /* AR One Sans variable axis. Figma sets this on every functional text node;
+     omitting it shifts glyph advances and the button measures narrow. */
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  text-decoration: none;           /* when rendered as <a class="ol8-btn"> */
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ol8-btn__label { white-space: nowrap; }
+
+/* Button size governs icon size — the Figma Icon Frame is driven by the
+   button, never set on the glyph. Higher specificity than .ol8-icon's own
+   [data-ol8-icon-size] rule, deliberately. */
+.ol8-btn .ol8-icon { --_ol8-icon-size: var(--_icon); }
+
+/* ---- Size (Figma: Size variant axis) --------------------------------- */
+.ol8-btn[data-ol8-size="compact"] {
+  --_h: var(--ol8-component-button-height-compact);
+  --_px: var(--ol8-component-button-paddinginline-compact);
+  --_r: var(--ol8-component-button-radius-compact);
+  --_gap: var(--ol8-component-button-gap-compact);
+  --_icon: var(--ol8-size-icon-small);
+}
+.ol8-btn[data-ol8-size="standard"] {
+  --_h: var(--ol8-component-button-height-standard);
+  --_px: var(--ol8-component-button-paddinginline-standard);
+  --_r: var(--ol8-component-button-radius-standard);
+  --_gap: var(--ol8-component-button-gap-compact);      /* shared, by design */
+  --_icon: var(--ol8-size-icon-small);
+}
+.ol8-btn[data-ol8-size="comfortable"] {
+  --_h: var(--ol8-component-button-height-comfortable);
+  --_px: var(--ol8-component-button-paddinginline-comfortable);
+  --_r: var(--ol8-component-button-radius-comfortable);
+  --_gap: var(--ol8-component-button-gap-comfortable);
+  --_icon: var(--ol8-size-icon-standard);
+}
+.ol8-btn[data-ol8-size="large"] {
+  --_h: var(--ol8-component-button-height-large);
+  --_px: var(--ol8-component-button-paddinginline-large);
+  --_r: var(--ol8-component-button-radius-large);
+  --_gap: var(--ol8-component-button-gap-comfortable);  /* shared, by design */
+  --_icon: var(--ol8-size-icon-standard);
+}
+
+/* ---- Family: Primary ------------------------------------------------- */
+.ol8-btn--primary { --_bg: var(--ol8-color-actionprimary-default); --_fg: var(--ol8-color-actionprimary-content); }
+.ol8-btn--primary:hover:not(:disabled):not([data-ol8-loading]) { --_bg: var(--ol8-color-actionprimary-hover); }
+.ol8-btn--primary:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--primary[aria-pressed="true"]:not(:disabled)          { --_bg: var(--ol8-color-actionprimary-pressed); }
+.ol8-btn--primary:disabled, .ol8-btn--primary[data-ol8-loading] {
+  --_bg: var(--ol8-color-actionprimary-disabled);
+  --_fg: var(--ol8-color-actionprimary-disabledcontent);
+}
+
+/* ---- Family: Destructive (same shape as Primary) --------------------- */
+.ol8-btn--destructive { --_bg: var(--ol8-color-actiondestructive-default); --_fg: var(--ol8-color-actiondestructive-content); }
+.ol8-btn--destructive:hover:not(:disabled):not([data-ol8-loading]) { --_bg: var(--ol8-color-actiondestructive-hover); }
+.ol8-btn--destructive:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--destructive[aria-pressed="true"]:not(:disabled)          { --_bg: var(--ol8-color-actiondestructive-pressed); }
+.ol8-btn--destructive:disabled, .ol8-btn--destructive[data-ol8-loading] {
+  --_bg: var(--ol8-color-actiondestructive-disabled);
+  --_fg: var(--ol8-color-actiondestructive-disabledcontent);
+}
+
+/* ---- Family: Secondary ----------------------------------------------
+   Secondary and Quiet carry byte-identical color roles in Figma. The ONLY
+   differentiator is this boundary: Secondary has a 2px stroke whose color
+   tracks the content color; Quiet has none. Verified — Quiet's node binds no
+   --ol8-component-button-secondaryboundary at all.                        */
+.ol8-btn--secondary {
+  --_bw: var(--ol8-component-button-secondaryboundary);
+  --_bg: var(--ol8-color-actionsecondary-surfacedefault);
+  --_fg: var(--ol8-color-actionsecondary-contentdefault);
+  --_bd: var(--ol8-color-actionsecondary-contentdefault);
+}
+.ol8-btn--secondary:hover:not(:disabled):not([data-ol8-loading]) {
+  --_bg: var(--ol8-color-actionsecondary-surfacehover);
+  --_fg: var(--ol8-color-actionsecondary-contenthover);
+  --_bd: var(--ol8-color-actionsecondary-contenthover);
+}
+.ol8-btn--secondary:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--secondary[aria-pressed="true"]:not(:disabled) {
+  --_bg: var(--ol8-color-actionsecondary-surfacepressed);
+  --_fg: var(--ol8-color-actionsecondary-contentpressed);
+  --_bd: var(--ol8-color-actionsecondary-contentpressed);
+}
+.ol8-btn--secondary:disabled, .ol8-btn--secondary[data-ol8-loading] {
+  --_bg: var(--ol8-color-actionsecondary-surfacedisabled);
+  --_fg: var(--ol8-color-actionsecondary-contentdisabled);
+  --_bd: var(--ol8-color-actionsecondary-contentdisabled);
+}
+
+/* ---- Family: Quiet (identical colors, no boundary) ------------------- */
+.ol8-btn--quiet {
+  --_bg: var(--ol8-color-actionquiet-surfacedefault);
+  --_fg: var(--ol8-color-actionquiet-contentdefault);
+}
+.ol8-btn--quiet:hover:not(:disabled):not([data-ol8-loading]) {
+  --_bg: var(--ol8-color-actionquiet-surfacehover);
+  --_fg: var(--ol8-color-actionquiet-contenthover);
+}
+.ol8-btn--quiet:active:not(:disabled):not([data-ol8-loading]),
+.ol8-btn--quiet[aria-pressed="true"]:not(:disabled) {
+  --_bg: var(--ol8-color-actionquiet-surfacepressed);
+  --_fg: var(--ol8-color-actionquiet-contentpressed);
+}
+.ol8-btn--quiet:disabled, .ol8-btn--quiet[data-ol8-loading] {
+  --_bg: var(--ol8-color-actionquiet-surfacedisabled);
+  --_fg: var(--ol8-color-actionquiet-contentdisabled);
+}
+
+/* ---- Focus ----------------------------------------------------------
+   Figma draws the focus ring as an INSIDE stroke, so the focused variant is
+   exactly the same size as the unfocused one (83×42 either way, Standard).
+   An inset box-shadow reproduces that without disturbing layout or fighting
+   Secondary's own 2px boundary — `outline` would sit outside and grow it.  */
+.ol8-btn:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ol8-focus-ring-innerwidth) var(--ol8-color-focus-outer);
+}
+
+/* ---- Disabled / Loading --------------------------------------------- */
+.ol8-btn:disabled, .ol8-btn[data-ol8-loading] { cursor: not-allowed; }
+.ol8-btn[data-ol8-loading] { cursor: progress; }
+
+/* "Platform motion adapters may rotate it; Reduced Motion keeps the static
+   busy mark." — Figma 379:7. Rotation is opt-in and motion-guarded. */
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-btn[data-ol8-loading] .ol8-btn__spinner > svg { animation: ol8-spin 900ms linear infinite; }
+}
+@keyframes ol8-spin { to { transform: rotate(360deg); } }
+
+/* ---- fullWidth (runtime-only, per the Figma description) ------------- */
+.ol8-btn[data-ol8-fullwidth] { display: flex; inline-size: 100%; }

package/src/styles/choice-chip.css

@@ -0,0 +1,216 @@
+/* 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
+ * Figma: Select and Combobox / Choice Chip / Soft Hexagon 636:847 (8 variants)
+ *
+ * GEOMETRY, read from all four sizes in Figma:
+ *   size         target  visible  rail inset  gap  label
+ *   compact        48      30         9        9   12 / 18
+ *   standard       48      36        12        9   12 / 18
+ *   comfortable    48      42        15        9   16 / 24
+ *   large          60      42        15        9   16 / 24
+ * The terminal is a fixed 12 at every size and never scales with the label,
+ * so peer chips of different lengths keep one shoulder depth and side angle.
+ *
+ * The visible silhouette sits inside a taller protected target, which is why
+ * `min-block-size` is the target and the rail carries the visible height.
+ */
+
+.ol8-chip {
+  --_height: var(--ol8-component-choice-chip-height-standard);
+  --_target: var(--ol8-component-choice-chip-target-standard);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-standard);
+  --_label-size: var(--ol8-font-size-012);
+  --_label-line: var(--ol8-font-line-018);
+
+  /* Inactive is the quiet Neutral treatment; Selected is Primary Soft. */
+  --_surface: var(--ol8-color-surface-sunken);
+  --_edge:    var(--ol8-color-border-subtle);
+  --_ink:     var(--ol8-color-text-primary);
+
+  /* The ring is painted at every state and is simply invisible until focus,
+     so focus never changes the geometry, only the colour. */
+  --_focus-outer: transparent;
+  --_focus-inner: transparent;
+
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--_target);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  color: var(--_ink);
+  cursor: pointer;
+}
+.ol8-chip[data-ol8-availability="disabled"] { cursor: not-allowed; }
+
+/* ---- Size ------------------------------------------------------------ */
+.ol8-chip[data-ol8-size="compact"] {
+  --_height: var(--ol8-component-choice-chip-height-compact);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-compact);
+}
+.ol8-chip[data-ol8-size="standard"] {
+  --_height: var(--ol8-component-choice-chip-height-standard);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-standard);
+}
+.ol8-chip[data-ol8-size="comfortable"] {
+  --_height: var(--ol8-component-choice-chip-height-comfortable);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-comfortable);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+}
+.ol8-chip[data-ol8-size="large"] {
+  --_height: var(--ol8-component-choice-chip-height-large);
+  --_target: var(--ol8-component-choice-chip-target-large);
+  --_inset:  var(--ol8-component-choice-chip-rail-inset-large);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+}
+
+/* ---- Selection ------------------------------------------------------- */
+/* Never colour alone: the native checked state carries the same fact, and the
+   selected edge is a stronger contrast than the inactive one. */
+.ol8-chip[data-ol8-selection="selected"] {
+  --_surface: var(--ol8-color-selection-surface);
+  --_edge:    var(--ol8-color-primary-360);
+  --_ink:     var(--ol8-color-selection-content);
+}
+.ol8-chip[data-ol8-availability="disabled"] {
+  --_surface: var(--ol8-color-surface-disabled);
+  --_edge:    var(--ol8-color-border-disabled);
+  --_ink:     var(--ol8-color-text-disabled);
+}
+
+.ol8-chip__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ---- Terminals ------------------------------------------------------- */
+/* One viewBox serves every height: Figma's terminal paths share identical X
+   values at 30, 36 and 42, and Y values that are the same fractions of the
+   height, so stretching Y alone is exact rather than approximate. */
+.ol8-chip__terminal {
+  flex: none;
+  inline-size: var(--ol8-component-choice-chip-terminal);
+  block-size: var(--_height);
+  /* The point reaches 0.15 beyond the box, as it does in Figma, and the focus
+     ring is painted outside the silhouette. Neither may be clipped. */
+  overflow: visible;
+}
+/* The trailing terminal is the leading one mirrored, so they cannot drift. */
+.ol8-chip__terminal--trailing { transform: scaleX(-1); }
+
+.ol8-chip__fill { fill: var(--_surface); }
+
+/* Double width, clipped to the fill: the outer half is cut away and what
+   remains is an inside edge of exactly one border width, matching the rail's
+   own inside border. A centred stroke would stand 1px proud of the rail and
+   show a step at the shoulder. */
+.ol8-chip__edge {
+  fill: none;
+  stroke: var(--_edge);
+  stroke-width: calc(var(--ol8-border-width-standard) * 2);
+  vector-effect: non-scaling-stroke;
+}
+
+/* Both rings are painted before the fill and at double width, so the inner
+   half of each lands under the fill and only the outer half shows. This is how
+   the ring follows the hexagon instead of boxing it. */
+.ol8-chip__focus-outer,
+.ol8-chip__focus-inner { fill: none; vector-effect: non-scaling-stroke; }
+.ol8-chip__focus-outer {
+  stroke: var(--_focus-outer);
+  stroke-width: calc((var(--ol8-focus-ring-outerwidth) + var(--ol8-focus-ring-innerwidth)) * 2);
+}
+.ol8-chip__focus-inner {
+  stroke: var(--_focus-inner);
+  stroke-width: calc(var(--ol8-focus-ring-innerwidth) * 2);
+}
+
+.ol8-chip:has(> .ol8-chip__input:focus-visible) {
+  --_focus-outer: var(--ol8-color-focus-outer);
+  --_focus-inner: var(--ol8-color-focus-inner);
+}
+
+/* ---- Centre rail ----------------------------------------------------- */
+/* Only the rail grows with the label. It owns the top and bottom of the
+   perimeter; the terminals own the angled ends. */
+.ol8-chip__rail {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-choice-gap-standard);
+  block-size: var(--_height);
+  padding-inline: var(--_inset);
+  background: var(--_surface);
+  border-block: var(--ol8-border-width-standard) solid var(--_edge);
+}
+
+/* The ring's flat runs, continuing the terminals' strokes across the rail.
+   Two colours in one band, ordered outward from the silhouette. */
+.ol8-chip__rail::before,
+.ol8-chip__rail::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  block-size: calc(var(--ol8-focus-ring-outerwidth) + var(--ol8-focus-ring-innerwidth));
+}
+.ol8-chip__rail::before {
+  inset-block-end: 100%;
+  background: linear-gradient(
+    var(--_focus-outer) 0 var(--ol8-focus-ring-outerwidth),
+    var(--_focus-inner) var(--ol8-focus-ring-outerwidth) 100%);
+}
+.ol8-chip__rail::after {
+  inset-block-start: 100%;
+  background: linear-gradient(
+    var(--_focus-inner) 0 var(--ol8-focus-ring-innerwidth),
+    var(--_focus-outer) var(--ol8-focus-ring-innerwidth) 100%);
+}
+
+.ol8-chip__label {
+  font-size: var(--_label-size);
+  line-height: var(--_label-line);
+  font-weight: var(--ol8-font-weight-regular);
+  color: var(--_ink);
+}
+
+/* ---- Mark ------------------------------------------------------------ */
+/* Figma places the mark BEFORE the label in every variant, Remove included. */
+.ol8-chip__mark {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ol8-component-choicechip-mark);
+  block-size: var(--ol8-component-choicechip-mark);
+  color: var(--_ink);
+}
+
+/* The Check does not scale with its slot. Figma's `Icon / Selection / Check`
+   is a governed small master, not an Icon Frame instance: Size=Small and
+   Size=Standard both carry the same 10.2 x 6.9 artwork at the same 1.8 stroke,
+   centred in an 18 or 24 box. So the source box stays 24 units and overflows
+   the smaller slot, exactly as Figma draws it. */
+.ol8-chip__mark > svg {
+  display: block;
+  flex: none;
+  inline-size: var(--ol8-size-icon-standard);
+  block-size: var(--ol8-size-icon-standard);
+  overflow: visible;
+}
+
+/* Both marks read at the one governed optical stroke, which is what Figma
+   draws and what the iconography contract calls contextual stroke
+   normalization: peer marks in one family match apparent weight. */
+.ol8-chip__mark > svg > * {
+  vector-effect: non-scaling-stroke;
+  stroke-width: var(--ol8-component-choice-optical-stroke);
+}

package/src/styles/choice-group.css

@@ -0,0 +1,95 @@
+/* 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)
+ * Figma: Documentation / Organism / Choice Group
+ *   Checkbox Hierarchy 273:603  Aggregate = None | Some | All
+ *   Radio Group        859:5180 Behavior  = Safe Default | No Default |
+ *                                           Horizontal | Invalid
+ *
+ * First organism in the system, and the first tier allowed to hold logic:
+ * the checkbox group computes its parent from its children, and the radio
+ * group owns group-level validation.
+ *
+ * From Figma (273:603): "Aggregate None/Some/All is computed from nested
+ * Checkbox molecules; MIXED IS NEVER A THIRD PREFERENCE. Runtime recursion,
+ * parent-child synchronization, group naming, required behavior, reset, and
+ * announcements live in code."
+ *
+ * So Aggregate is an OUTPUT, never an input. Nothing may author it.
+ *
+ * The two shells differ, deliberately:
+ *   checkbox  bordered, radius-container (24px), legend Title/Small
+ *   radio     unbordered, radius-standard (12px), legend Body/Medium
+ */
+
+.ol8-choice-group {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-spacing-stack-related);
+  padding: var(--ol8-spacing-inset-standard);
+  background: var(--ol8-color-surface-raised);
+  border: 0;
+  border-radius: var(--ol8-shape-radius-standard);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  min-inline-size: 0;   /* fieldset defaults to min-content; this lets it shrink */
+}
+
+.ol8-choice-group--checkbox {
+  border: 1px solid var(--ol8-color-border-subtle);
+  border-radius: var(--ol8-shape-radius-container);
+}
+
+/* <legend> is taken out of flow by default, so it is laid out as a normal
+   flex child instead — the group label is a real legend for assistive tech. */
+.ol8-choice-group__legend {
+  display: block;
+  float: none;
+  padding: 0;
+  inline-size: 100%;
+  color: var(--ol8-color-text-primary);
+}
+.ol8-choice-group--checkbox > .ol8-choice-group__legend {
+  font-size: var(--ol8-font-size-021);
+  line-height: var(--ol8-font-line-030);
+  font-weight: var(--ol8-font-weight-semibold);
+}
+.ol8-choice-group--radio > .ol8-choice-group__legend {
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+}
+
+.ol8-choice-group__instruction {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+}
+
+.ol8-choice-group__options { display: flex; flex-direction: column; }
+.ol8-choice-group[data-ol8-orientation="horizontal"] > .ol8-choice-group__options {
+  flex-direction: row;
+  gap: var(--ol8-spacing-stack-related);
+  flex-wrap: wrap;
+}
+
+/* Children of a hierarchy sit under their parent, indented one 24px step. */
+.ol8-choice-group__children {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: var(--ol8-dimension-scale-024);
+}
+
+/* Group-level validation message. */
+.ol8-choice-group__message {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+}
+.ol8-choice-group[data-ol8-invalid="true"] > .ol8-choice-group__message {
+  color: var(--ol8-color-feedbackcritical-inlinecontent);
+}