@oneli8/core 1.0.0-beta.10

package/src/molecules/button/button.css

@@ -0,0 +1,193 @@
+/**
+ * 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/molecules/button/button.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Button (MOLECULE) — headless behavior. Native semantics, disabled, loading,
+ * pressed and fullWidth live here, never as visual-only axes.
+ */
+import type { Ol8IconName } from '../../atoms/icon/icons.generated.js';
+
+export type Ol8ButtonVariant = 'primary' | 'secondary' | 'quiet' | 'destructive';
+export type Ol8ButtonSize = 'compact' | 'standard' | 'comfortable' | 'large';
+export type Ol8Material = 'regular' | 'gem';
+/** Gem is approved for Primary and Secondary only (Figma 100:3). */
+export type Ol8GemVariant = 'primary' | 'secondary';
+
+export declare const OL8_BUTTON_VARIANTS: readonly Ol8ButtonVariant[];
+export declare const OL8_BUTTON_SIZES: readonly Ol8ButtonSize[];
+export declare const OL8_MATERIALS: readonly Ol8Material[];
+export declare const GEM_VARIANTS: readonly Ol8GemVariant[];
+
+/** Compact+Standard take the 18px icon; Comfortable+Large take 24px. */
+export declare function iconSizeForButton(size: Ol8ButtonSize): 18 | 24;
+
+export interface Ol8ButtonOptions {
+  variant?: Ol8ButtonVariant;
+  size?: Ol8ButtonSize;
+  leadingIcon?: Ol8IconName;
+  trailingIcon?: Ol8IconName;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Emits aria-pressed. Omit entirely for a non-toggle button. */
+  pressed?: boolean;
+  fullWidth?: boolean;
+  /** Renders an <a> instead of a <button>. */
+  href?: string;
+  /** Ignored when href is set. Defaults to "button", never a stray submit. */
+  type?: 'button' | 'submit' | 'reset';
+  /** Throws for quiet and destructive: Gem has no approved treatment there. */
+  material?: Ol8Material;
+  /**
+   * By default the spinner takes the leading slot so the button never shows two
+   * competing glyphs. Set true for Figma's literal reading (icon AND spinner).
+   */
+  keepLeadingIconWhileLoading?: boolean;
+  className?: string;
+}
+
+/** @throws if variant, size or material is unknown, or Gem is asked for on quiet/destructive. */
+export declare function renderButton(label: string, options?: Ol8ButtonOptions): string;
+
+/** Enforces the runtime contract on existing `.ol8-btn` markup. Idempotent. */
+export declare function hydrateButtons(root?: ParentNode): void;
+
+export declare function setButtonLoading(el: Element, loading: boolean): void;

package/src/molecules/button/button.js

@@ -0,0 +1,134 @@
+/**
+ * Oneli8 · Button — headless behavior.
+ *
+ * The Figma component description is explicit that native semantics, disabled,
+ * loading, pressed and fullWidth "remain implemented and tested in code; they
+ * must not become fake visual axes." This module is that code.
+ */
+import { renderIcon, renderIconSvg, isOl8IconName } from '../../atoms/icon/icon.js';
+
+export const OL8_BUTTON_VARIANTS = ['primary', 'secondary', 'quiet', 'destructive'];
+export const OL8_BUTTON_SIZES = ['compact', 'standard', 'comfortable', 'large'];
+export const OL8_MATERIALS = ['regular', 'gem'];
+/** Gem is approved for Primary and Secondary only (Figma 100:3). */
+export const GEM_VARIANTS = ['primary', 'secondary'];
+
+/** Compact+Standard take the 18px icon; Comfortable+Large take 24px. */
+export function iconSizeForButton(size) {
+  return size === 'comfortable' || size === 'large' ? 24 : 18;
+}
+
+/**
+ * @param {string} label
+ * @param {{variant?:string,size?:string,leadingIcon?:string,trailingIcon?:string,
+ *          disabled?:boolean,loading?:boolean,pressed?:boolean,fullWidth?:boolean,
+ *          href?:string,type?:string,className?:string}} [options]
+ */
+export function renderButton(label, options = {}) {
+  const {
+    variant = 'primary', size = 'standard', leadingIcon, trailingIcon,
+    disabled = false, loading = false, pressed, fullWidth = false,
+    href, type = 'button', className, material = 'regular',
+    keepLeadingIconWhileLoading = false,
+  } = options;
+
+  if (!OL8_BUTTON_VARIANTS.includes(variant)) throw new Error(`[ol8] unknown button variant "${variant}"`);
+  if (!OL8_BUTTON_SIZES.includes(size)) throw new Error(`[ol8] unknown button size "${size}"`);
+  if (!OL8_MATERIALS.includes(material)) throw new Error(`[ol8] unknown material "${material}"`);
+  if (material === 'gem' && !GEM_VARIANTS.includes(variant)) {
+    throw new Error(`[ol8] Gem has no approved treatment for "${variant}" — Figma 100:3 says Quiet and Destructive use the regular material.`);
+  }
+
+  const isLink = typeof href === 'string';
+  const inert = disabled || loading;
+  const iconSize = iconSizeForButton(size);
+
+  const attrs = [
+    `class="ol8-btn ol8-btn--${variant}${className ? ` ${className}` : ''}"`,
+    `data-ol8-size="${size}"`,
+    isLink ? (inert ? 'role="button" aria-disabled="true" tabindex="-1"' : `href="${escapeAttr(href)}"`)
+           : `type="${type}"`,
+    !isLink && inert ? 'disabled' : '',
+    loading ? 'data-ol8-loading="true" aria-busy="true"' : '',
+    pressed !== undefined ? `aria-pressed="${pressed}"` : '',
+    fullWidth ? 'data-ol8-fullwidth="true"' : '',
+    material === 'gem' ? 'data-ol8-material="gem"' : '',
+    loading && keepLeadingIconWhileLoading ? 'data-ol8-loading-keep-icon="true"' : '',
+  ].filter(Boolean).join(' ');
+
+  // Loading + leading icon is genuinely ambiguous in the source. Figma's
+  // codegen emits BOTH the leading icon and the spinner, but the measured
+  // Loading widths (101/107/122/134 = default + spinner + gap) come from
+  // variants that carry no leading icon, so they do not disambiguate.
+  //
+  // Default here: the spinner TAKES the leading slot, so the button never
+  // shows two competing leading glyphs and its width stays predictable.
+  // Pass keepLeadingIconWhileLoading to get Figma's literal reading.
+  const spinner = `<span class="ol8-btn__spinner ol8-icon" aria-hidden="true">${renderIconSvg('loading')}</span>`;
+  const leadingGlyph = leadingIcon ? renderIcon(leadingIcon, { size: iconSize }) : '';
+  const leading = loading
+    ? (keepLeadingIconWhileLoading ? leadingGlyph + spinner : spinner)
+    : leadingGlyph;
+  const trailing = trailingIcon ? renderIcon(trailingIcon, { size: iconSize }) : '';
+
+  const tag = isLink ? 'a' : 'button';
+  return `<${tag} ${attrs}>${leading}<span class="ol8-btn__label">${escapeText(label)}</span>${trailing}</${tag}>`;
+}
+
+/**
+ * Enforces the runtime contract on existing `.ol8-btn` markup. Idempotent.
+ *   - <button> gets an explicit type (default "button", never a stray submit)
+ *   - [data-ol8-loading] implies disabled + aria-busy and grows a spinner
+ *   - links can't be natively disabled, so they get aria-disabled + tabindex=-1
+ *     and their activation is swallowed
+ */
+export function hydrateButtons(root = document) {
+  for (const el of root.querySelectorAll('.ol8-btn')) {
+    const isLink = el.tagName === 'A';
+    const loading = el.dataset.ol8Loading === 'true';
+
+    if (!isLink && !el.hasAttribute('type')) el.setAttribute('type', 'button');
+
+    if (loading) {
+      el.setAttribute('aria-busy', 'true');
+      if (isLink) { el.setAttribute('aria-disabled', 'true'); el.setAttribute('tabindex', '-1'); }
+      else el.disabled = true;
+
+      if (!el.querySelector('.ol8-btn__spinner')) {
+        // Same call as renderButton: the spinner takes the leading slot unless
+        // data-ol8-loading-keep-icon opts into Figma's literal both-glyphs read.
+        if (el.dataset.ol8LoadingKeepIcon !== 'true') {
+          el.querySelector(':scope > .ol8-icon:first-child')?.remove();
+        }
+        const spinner = document.createElement('span');
+        spinner.className = 'ol8-btn__spinner ol8-icon';
+        spinner.setAttribute('aria-hidden', 'true');
+        spinner.innerHTML = renderIconSvg('loading');
+        const keep = el.dataset.ol8LoadingKeepIcon === 'true';
+        const after = keep ? el.querySelector(':scope > .ol8-icon:first-child') : null;
+        if (after) after.after(spinner); else el.prepend(spinner);
+      }
+    } else {
+      el.removeAttribute('aria-busy');
+      el.querySelector('.ol8-btn__spinner')?.remove();
+    }
+
+    if (isLink && (el.getAttribute('aria-disabled') === 'true') && !el.dataset.ol8InertBound) {
+      el.addEventListener('click', swallow);
+      el.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') swallow(e); });
+      el.dataset.ol8InertBound = 'true';
+    }
+  }
+}
+
+function swallow(event) { event.preventDefault(); event.stopPropagation(); }
+
+/** Flip a button into or out of its loading state at runtime. */
+export function setButtonLoading(el, loading) {
+  if (loading) el.dataset.ol8Loading = 'true';
+  else delete el.dataset.ol8Loading;
+  hydrateButtons(el.parentNode ?? document);
+}
+
+function escapeAttr(v) { return String(v).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
+function escapeText(v) { return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

package/src/molecules/button/index.d.ts

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

package/src/molecules/button/index.js

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

package/src/molecules/choice-chip/choice-chip.css

@@ -0,0 +1,214 @@
+/**
+ * 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/molecules/choice-chip/choice-chip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Choice Chip (MOLECULE) — the Soft Hexagon. A real checkbox wearing the
+ * approved quiet chip appearance, so selection is carried by native checked
+ * state and a stronger edge, never by colour alone.
+ */
+export type Ol8ChipSize = 'compact' | 'standard' | 'comfortable' | 'large';
+
+export declare const OL8_CHIP_SIZES: readonly Ol8ChipSize[];
+
+export interface Ol8ChoiceChipOptions {
+  size?: Ol8ChipSize;
+  /** Figma's Selection axis. Maps to the input's checked state. */
+  selected?: boolean;
+  /** Figma's Show Mark boolean: the optional Check inside a selected chip. */
+  showMark?: boolean;
+  disabled?: boolean;
+  name?: string;
+  value?: string;
+  id?: string;
+  className?: string;
+}
+
+export declare function renderChoiceChip(label: string, options?: Ol8ChoiceChipOptions): string;
+
+/** Mirrors each chip's input state onto the attribute the stylesheet reads. */
+export declare function hydrateChoiceChips(root?: ParentNode): number;
+export declare function syncChip(chip: Element): void;