@oneli8/react 1.0.0-beta.2 → 1.0.0-beta.4

package/src/styles/icon-button.css

@@ -0,0 +1,224 @@
+/* GENERATED from packages/core/src/molecules/icon-button/icon-button.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Icon Button
+ * Figma: section "Icon Button" (1034:10546) — Primary 86:2, Secondary 87:26,
+ *        Quiet 88:50, Destructive 89:74, plus the four Circle sets.
+ *        4 families × 2 shapes × 4 sizes × 6 states = 192 components.
+ *
+ * Documentation (85:9):
+ *   "Visible boxes: 36/42/48/60px · protected targets: 48/48/48/60px
+ *    Artwork: 18/18/24/36px
+ *    Hover changes the container only; the symbol never translates, rotates
+ *    or scales. Accessible name is mandatory. Rounded Square is the canonical
+ *    base; Circle is a governed presentation extension."
+ *
+ * The component is TWO boxes, and that is the whole point:
+ *   .ol8-icon-btn           — the protected TARGET. Transparent, no paint.
+ *                             Never smaller than 48px even when the visible
+ *                             box is 36px, so the hit area stays compliant.
+ *   .ol8-icon-btn__surface  — the VISIBLE box. Carries bg, 2px border, radius.
+ *
+ * Collapsing these into one element would silently shrink the touch target
+ * to 36px at Compact. Don't.
+ */
+
+.ol8-icon-btn {
+  --_target:  var(--ol8-component-iconbutton-target-standard);
+  --_box:     var(--ol8-component-iconbutton-box-standard);
+  --_radius:  var(--ol8-component-iconbutton-radius-standard);
+  --_artwork: var(--ol8-component-iconbutton-artwork-standard);
+
+  --_bg: transparent;
+  --_bd: transparent;
+  --_ink: var(--ol8-color-icon-primary);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_target);
+  block-size: var(--_target);
+  padding: 0;
+  border: 0;
+  background: none;          /* the target paints nothing */
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ol8-icon-btn__surface {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_box);
+  block-size: var(--_box);
+  border: var(--ol8-border-width-standard) solid var(--_bd);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  color: var(--_ink);
+}
+
+/* The surface governs artwork size — never set a size on the glyph. */
+.ol8-icon-btn .ol8-icon { --_ol8-icon-size: var(--_artwork); }
+
+/* "the symbol never translates, rotates, or scales" — no transform on the
+   glyph in any state. Hover changes the container only. */
+
+/* ---- Size ------------------------------------------------------------ */
+.ol8-icon-btn[data-ol8-size="compact"] {
+  --_target: var(--ol8-component-iconbutton-target-compact);
+  --_box: var(--ol8-component-iconbutton-box-compact);
+  --_radius: var(--ol8-component-iconbutton-radius-compact);
+  --_artwork: var(--ol8-component-iconbutton-artwork-compact);
+}
+.ol8-icon-btn[data-ol8-size="standard"] {
+  --_target: var(--ol8-component-iconbutton-target-standard);
+  --_box: var(--ol8-component-iconbutton-box-standard);
+  --_radius: var(--ol8-component-iconbutton-radius-standard);
+  --_artwork: var(--ol8-component-iconbutton-artwork-standard);
+}
+.ol8-icon-btn[data-ol8-size="comfortable"] {
+  --_target: var(--ol8-component-iconbutton-target-comfortable);
+  --_box: var(--ol8-component-iconbutton-box-comfortable);
+  --_radius: var(--ol8-component-iconbutton-radius-comfortable);
+  --_artwork: var(--ol8-component-iconbutton-artwork-comfortable);
+}
+.ol8-icon-btn[data-ol8-size="large"] {
+  --_target: var(--ol8-component-iconbutton-target-large);
+  --_box: var(--ol8-component-iconbutton-box-large);
+  --_radius: var(--ol8-component-iconbutton-radius-large);
+  --_artwork: var(--ol8-component-iconbutton-artwork-large);
+}
+
+/* ---- Shape: Circle is a governed presentation extension -------------- */
+.ol8-icon-btn[data-ol8-shape="circle"] { --_radius: var(--ol8-shape-radius-full); }
+
+/* ---- Family: Primary ------------------------------------------------- */
+/* The glyph binds to the action's CONTENT colour, not the neutral ink role.
+   Figma binds --ol8-color-icon-primary (#151817) here, which lands a near-black
+   glyph on a #2c438b surface: 1.94:1, against the 3:1 WCAG 1.4.11 minimum for
+   graphical objects. --ol8-color-actionprimary-content measures 8.81:1. */
+.ol8-icon-btn--primary {
+  --_bg: var(--ol8-color-actionprimary-default);
+  --_bd: var(--ol8-color-actionprimary-default);
+  --_ink: var(--ol8-color-actionprimary-content);
+}
+.ol8-icon-btn--primary:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--primary[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionprimary-hover); --_bd: var(--ol8-color-actionprimary-hover);
+}
+.ol8-icon-btn--primary:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--primary[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionprimary-pressed); --_bd: var(--ol8-color-actionprimary-pressed);
+}
+.ol8-icon-btn--primary:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionprimary-disabled);
+  --_bd: var(--ol8-color-border-disabled);
+  /* Disabled flips to a LIGHT surface, so the glyph flips back to dark ink. */
+  --_ink: var(--ol8-color-actionprimary-disabledcontent);
+}
+
+/* ---- Family: Destructive --------------------------------------------- */
+/* Same defect as Primary: #151817 on #922824 measures 2.17:1. */
+.ol8-icon-btn--destructive {
+  --_bg: var(--ol8-color-actiondestructive-default);
+  --_bd: var(--ol8-color-actiondestructive-default);
+  --_ink: var(--ol8-color-actiondestructive-content);
+}
+.ol8-icon-btn--destructive:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--destructive[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actiondestructive-hover); --_bd: var(--ol8-color-actiondestructive-hover);
+}
+.ol8-icon-btn--destructive:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--destructive[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actiondestructive-pressed); --_bd: var(--ol8-color-actiondestructive-pressed);
+}
+.ol8-icon-btn--destructive:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actiondestructive-disabled);
+  --_bd: var(--ol8-color-border-disabled);
+  --_ink: var(--ol8-color-actiondestructive-disabledcontent);
+}
+
+/* ---- Family: Secondary (bordered, transparent) ----------------------- */
+.ol8-icon-btn--secondary {
+  --_bg: var(--ol8-color-actionsecondary-surfacedefault);
+  --_bd: var(--ol8-color-actionsecondary-contentdefault);
+  --_ink: var(--ol8-color-actionsecondary-contentdefault);
+}
+.ol8-icon-btn--secondary:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--secondary[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionsecondary-surfacehover);
+  --_bd: var(--ol8-color-actionsecondary-contenthover);
+  --_ink: var(--ol8-color-actionsecondary-contenthover);
+}
+.ol8-icon-btn--secondary:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--secondary[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionsecondary-surfacepressed);
+  --_bd: var(--ol8-color-actionsecondary-contentpressed);
+  --_ink: var(--ol8-color-actionsecondary-contentpressed);
+}
+.ol8-icon-btn--secondary:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionsecondary-surfacedisabled);
+  --_bd: var(--ol8-color-border-disabled);
+  --_ink: var(--ol8-color-actionsecondary-contentdisabled);
+}
+
+/* ---- Family: Quiet (no boundary) ------------------------------------- */
+.ol8-icon-btn--quiet {
+  --_bg: var(--ol8-color-actionquiet-surfacedefault);
+  --_bd: transparent;
+  --_ink: var(--ol8-color-actionquiet-contentdefault);
+}
+.ol8-icon-btn--quiet:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface,
+.ol8-icon-btn--quiet[data-ol8-loading] > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionquiet-surfacehover); --_ink: var(--ol8-color-actionquiet-contenthover);
+}
+.ol8-icon-btn--quiet:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn--quiet[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionquiet-surfacepressed); --_ink: var(--ol8-color-actionquiet-contentpressed);
+}
+.ol8-icon-btn--quiet:disabled > .ol8-icon-btn__surface {
+  --_bg: var(--ol8-color-actionquiet-surfacedisabled); --_ink: var(--ol8-color-actionquiet-contentdisabled);
+}
+
+/* ---- Pressed scrim ---------------------------------------------------
+   Figma layers a 3px inset scrim over the pressed surface, in addition to
+   the darker fill. Reproduced as an inset shadow rather than an extra node. */
+.ol8-icon-btn:active:not(:disabled) > .ol8-icon-btn__surface,
+.ol8-icon-btn[aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
+  box-shadow: inset 0 0 0 3px var(--ol8-component-iconbutton-pressedscrim);
+}
+
+/* ---- Focus -----------------------------------------------------------
+   OUTSIDE two-tone ring, unlike the labelled Button's inside stroke.
+
+   Figma declares the 6px outer shadow FIRST, and box-shadow paints the first
+   shadow on top — so the 6px dark spread completely covers the 3px light one
+   and only a flat dark band renders. Sampling the Figma export confirms it:
+   uniform #101b3a at every perimeter position and at both 2px and 4px depth.
+
+   The inner band is declared here first so both are visible: light from the
+   edge out to 3px, dark from 3px to 6px. That is the ring the two tokens
+   describe. To restore the Figma-exact single-band ring, swap these two
+   lines back.
+
+   Both focus-ring tokens are BAND THICKNESSES (3px each). box-shadow spread is
+   cumulative from the edge, so the outer band's spread is the sum of the two —
+   3px light from the edge, then dark from 3px out to 6px. Do not pass
+   --ol8-focus-ring-outerwidth here on its own: that would paint the dark band
+   at the same 3px radius as the light one and hide it completely. */
+.ol8-icon-btn:focus-visible { outline: none; }
+.ol8-icon-btn:focus-visible > .ol8-icon-btn__surface {
+  box-shadow:
+    0 0 0 var(--ol8-focus-ring-innerwidth) var(--ol8-color-focus-inner),
+    0 0 0 calc(var(--ol8-focus-ring-innerwidth) + var(--ol8-focus-ring-outerwidth)) var(--ol8-color-focus-outer);
+}
+
+/* ---- Disabled / Loading ---------------------------------------------- */
+.ol8-icon-btn:disabled { cursor: not-allowed; }
+.ol8-icon-btn[data-ol8-loading] { cursor: progress; }
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-icon-btn[data-ol8-loading] .ol8-icon > svg { animation: ol8-spin 900ms linear infinite; }
+}

package/src/styles/icon.css

@@ -0,0 +1,56 @@
+/* GENERATED from packages/core/src/atoms/icon/icon.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Icon atom
+ * Figma: page "Iconography" — masters "Icon Library / Masters" (426:55),
+ *        sizing from "Icon Frame" (418:51).
+ *
+ * Contract, straight from the Figma component descriptions:
+ *   - one canonical 24px source per glyph
+ *   - the Icon Frame *geometrically* scales the complete source instance, so
+ *     the 1.8-unit stroke scales with the artwork (48px icon => 3.6px stroke).
+ *     This is why the SVG keeps viewBox="0 0 24 24" and we size the box only —
+ *     never `vector-effect: non-scaling-stroke`.
+ *   - the source is neutral; the consumer supplies semantic color, which is
+ *     why every stroke/fill is `currentColor`.
+ */
+
+.ol8-icon {
+  /* The outer asset box. Defaults to the canonical 24px source size. */
+  --_ol8-icon-size: var(--ol8-size-icon-standard);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--_ol8-icon-size);
+  block-size: var(--_ol8-icon-size);
+  /* Inherit ink from the consuming component (semantic color lives there). */
+  color: inherit;
+}
+
+/* The inner leaf. Both dimensions are explicit — never `auto`. */
+.ol8-icon > svg {
+  display: block;
+  inline-size: var(--_ol8-icon-size);
+  block-size: var(--_ol8-icon-size);
+  overflow: visible; /* matches the Figma export; round caps may kiss the edge */
+}
+
+/* ---- Icon Frame · universal sizes (Figma 418:51) ---------------------- */
+.ol8-icon[data-ol8-icon-size="9"]   { --_ol8-icon-size: var(--ol8-size-icon-micro); }
+.ol8-icon[data-ol8-icon-size="12"]  { --_ol8-icon-size: var(--ol8-size-icon-compact); }
+.ol8-icon[data-ol8-icon-size="18"]  { --_ol8-icon-size: var(--ol8-size-icon-small); }
+.ol8-icon[data-ol8-icon-size="24"]  { --_ol8-icon-size: var(--ol8-size-icon-standard); }
+.ol8-icon[data-ol8-icon-size="30"]  { --_ol8-icon-size: var(--ol8-size-icon-medium); }
+.ol8-icon[data-ol8-icon-size="36"]  { --_ol8-icon-size: var(--ol8-size-icon-large); }
+.ol8-icon[data-ol8-icon-size="48"]  { --_ol8-icon-size: var(--ol8-size-icon-xlarge); }
+.ol8-icon[data-ol8-icon-size="60"]  { --_ol8-icon-size: var(--ol8-size-icon-spacious); }
+.ol8-icon[data-ol8-icon-size="72"]  { --_ol8-icon-size: var(--ol8-size-icon-display); }
+.ol8-icon[data-ol8-icon-size="96"]  { --_ol8-icon-size: var(--ol8-size-icon-hero); }
+.ol8-icon[data-ol8-icon-size="108"] { --_ol8-icon-size: var(--ol8-size-icon-landmark); }
+
+/* ---- Direction ------------------------------------------------------- */
+/* "Direction: semantic registry controls RTL mirroring" (Iconography doc 84:13).
+   The registry sets data-ol8-icon-mirror; CSS only obeys it. */
+[dir="rtl"] .ol8-icon[data-ol8-icon-mirror="true"] > svg { transform: scaleX(-1); }

package/src/styles/selection-indicator.css

@@ -0,0 +1,153 @@
+/* GENERATED from packages/core/src/atoms/selection-indicator/selection-indicator.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Selection Indicator (ATOM)
+ * 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 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-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/styles/selection-option.css

@@ -0,0 +1,123 @@
+/* GENERATED from packages/core/src/molecules/selection-option/selection-option.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Selection Option (MOLECULE)
+ * Figma: Select and Combobox -> 01 · Atomic Selection Building Blocks
+ *        Building Blocks / Selection Option 570:122 (8 variants)
+ *        Size Standard|Large x Selection x Availability
+ *
+ * From the Figma description (570:122):
+ *   "Description is associated through aria-describedby and REMAINS OUTSIDE
+ *    the option accessible name. Selection Popup composes this owner;
+ *    KEYBOARD FOCUS REMAINS ON THE COMBOBOX INPUT through
+ *    aria-activedescendant."
+ *
+ * Two consequences that shape everything here:
+ *   - the option is never focusable and carries no tabindex
+ *   - "active" (the aria-activedescendant highlight) is a DIFFERENT thing from
+ *     :hover and from selected, so it gets its own attribute
+ *
+ * Row geometry: 48px (Standard) / 60px (Large) minimum, but the content box
+ * stays 24px tall in both — the padding absorbs the difference.
+ *   padding-block = (minimum - 24) / 2  ->  12px and 18px
+ */
+
+.ol8-option {
+  --_min:   var(--ol8-component-selectionoption-minimum-standard);
+  --_inset: var(--ol8-component-selectionoption-inset-standard);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-block-size: var(--_min);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  list-style: none;
+  cursor: pointer;
+}
+.ol8-option[data-ol8-size="large"] {
+  --_min:   var(--ol8-component-selectionoption-minimum-large);
+  --_inset: var(--ol8-component-selectionoption-inset-large);
+}
+.ol8-option[aria-disabled="true"] { cursor: not-allowed; }
+
+/* The surface carries every wash and the focus ring; the row itself stays
+   clean so a popup can lay options out without fighting them. */
+.ol8-option__surface {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-choice-gap-standard);
+  flex: 1 0 0;
+  min-inline-size: 0;
+  block-size: 100%;
+  padding-inline: var(--_inset);
+  padding-block: calc((var(--_min) - var(--ol8-font-line-024)) / 2);
+  border-radius: var(--ol8-shape-radius-medium);
+  overflow: clip;
+}
+
+/* Selected, hover and active all paint the same wash. Selected is a state of
+   the data; active is the aria-activedescendant cursor; hover is the pointer.
+   They coincide visually by design. */
+.ol8-option[aria-selected="true"] > .ol8-option__surface,
+.ol8-option[data-ol8-active="true"] > .ol8-option__surface,
+.ol8-option:hover:not([aria-disabled="true"]) > .ol8-option__surface {
+  background: var(--ol8-color-selection-surface);
+}
+.ol8-option:active:not([aria-disabled="true"]) > .ol8-option__surface {
+  background: var(--ol8-color-selection-surface);
+  opacity: 0.84;
+}
+
+/* Focus lives on the combobox input, never here — but the option still shows
+   the active ring when a popup marks it, so the two-tone ring is reproduced. */
+.ol8-option[data-ol8-focus-ring="true"] > .ol8-option__surface {
+  border: var(--ol8-focus-ring-outerwidth) solid var(--ol8-color-focus-outer);
+}
+.ol8-option[data-ol8-focus-ring="true"] > .ol8-option__surface::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  border-radius: 7px;
+  pointer-events: none;
+}
+
+.ol8-option__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  min-inline-size: 0;
+}
+.ol8-option__label {
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+  color: var(--ol8-color-text-primary);
+  overflow-wrap: break-word;
+}
+.ol8-option__description {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+  overflow-wrap: break-word;
+}
+.ol8-option[aria-disabled="true"] .ol8-option__label,
+.ol8-option[aria-disabled="true"] .ol8-option__description {
+  color: var(--ol8-color-text-disabled);
+}
+
+/* The trailing slot is ALWAYS reserved, selected or not, so the label column
+   never shifts when selection changes. Figma keeps an empty 18px node there. */
+.ol8-option__check {
+  flex: none;
+  inline-size: var(--ol8-size-icon-small);
+  block-size: var(--ol8-size-icon-small);
+  color: var(--ol8-color-selection-content);
+}
+.ol8-option__check > svg { display: block; inline-size: 100%; block-size: 100%; }
+
+.ol8-option .ol8-icon { --_ol8-icon-size: var(--ol8-size-icon-small); }

package/styles.css

@@ -1,7 +1,13 @@
+/* OneLi8 · complete stylesheet for @oneli8/react.
+   Load order matters: tokens define the custom properties every rule reads,
+   atoms before the molecules that compose them, and the Gem material last
+   because it adapts surfaces the component rules have already painted. */
 @import "@oneli8/tokens/css";
-@import "./styles/accessibility.css";
-@import "./styles/icon-frame.css";
-@import "./styles/button.css";
-@import "./styles/icon-button.css";
-@import "./styles/gem-control-focus.css";
-@import "./styles/link.css";
+@import "./src/styles/icon.css";
+@import "./src/styles/selection-indicator.css";
+@import "./src/styles/button.css";
+@import "./src/styles/icon-button.css";
+@import "./src/styles/choice-item.css";
+@import "./src/styles/selection-option.css";
+@import "./src/styles/choice-group.css";
+@import "./src/styles/gem.css";

package/src/Button.d.ts

@@ -1,20 +0,0 @@
-import type {ButtonHTMLAttributes, ReactNode} from "react";
-
-export type ButtonVariant="primary"|"secondary"|"quiet"|"destructive";
-export type ButtonSize="compact"|"standard"|"comfortable"|"large";
-export type ButtonIconMotion="none"|"rotate"|"forward"|"backward";
-export type ButtonMaterial="regular"|"gem";
-
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,"size">{
-  variant?:ButtonVariant;
-  size?:ButtonSize;
-  material?:ButtonMaterial;
-  loading?:boolean;
-  pressed?:boolean;
-  leadingIcon?:ReactNode;
-  trailingIcon?:ReactNode;
-  iconMotion?:ButtonIconMotion;
-  fullWidth?:boolean;
-}
-
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps&import("react").RefAttributes<HTMLButtonElement>>;

package/src/Button.js

@@ -1 +0,0 @@
-export {Button} from "./molecules/Button.js";

package/src/Icon.d.ts

@@ -1,4 +0,0 @@
-export type IconName="add"|"forward"|"critical"|"visibility-open"|"loading"|"caution"|"positive"|"informative"|"visibility-closed"|"chevron-down"|"chevron-up"|"search"|"clear"|"close"|"selection-check"|"selection-mixed"|"selection-dot";
-export interface IconProps{name:IconName;className?:string}
-export declare const iconNames:readonly IconName[];
-export declare function Icon(props:IconProps):import("react").ReactNode;

package/src/Icon.js

@@ -1 +0,0 @@
-export {Icon,iconNames} from "./atoms/Icon.js";

package/src/IconButton.d.ts

@@ -1,20 +0,0 @@
-import type {ButtonHTMLAttributes,ReactNode} from "react";
-import type {ButtonSize,ButtonVariant} from "./Button.js";
-
-export type IconButtonShape="rounded"|"circle";
-export type IconButtonMaterial="regular"|"gem";
-export type IconButtonMotion="system"|"none";
-
-export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,"children"|"size">{
-  icon:ReactNode;
-  accessibleName:string;
-  variant?:ButtonVariant;
-  size?:ButtonSize;
-  shape?:IconButtonShape;
-  material?:IconButtonMaterial;
-  loading?:boolean;
-  pressed?:boolean;
-  motion?:IconButtonMotion;
-}
-
-export declare const IconButton:import("react").ForwardRefExoticComponent<IconButtonProps&import("react").RefAttributes<HTMLButtonElement>>;

package/src/IconButton.js

@@ -1 +0,0 @@
-export {IconButton} from "./molecules/IconButton.js";

package/src/Link.d.ts

@@ -1,16 +0,0 @@
-import type {AnchorHTMLAttributes,HTMLAttributes,ReactNode} from "react";
-
-export type LinkForm="inline"|"standalone"|"navigation";
-export type LinkSize="small"|"standard"|"large"|"inherit";
-export type LinkCurrent="page"|"step"|"location"|"date"|"time"|"true"|boolean;
-export type LinkMotion="system"|"none";
-
-export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>,"href">{
-  href:string;
-  form?:LinkForm;
-  size?:LinkSize;
-  current?:LinkCurrent;
-  motion?:LinkMotion;
-}
-
-export declare const Link:import("react").ForwardRefExoticComponent<LinkProps&import("react").RefAttributes<HTMLAnchorElement>>;

package/src/Link.js

@@ -1 +0,0 @@
-export {Link} from "./molecules/Link.js";

package/src/atoms/AnchorControl.js

@@ -1,7 +0,0 @@
-import {createElement,forwardRef} from "react";
-import {cx} from "../foundations/runtime.js";
-
-export const AnchorControl=forwardRef(function AnchorControl({href,current,className="",children,...rest},ref){
-  if(typeof href!=="string"||!href.trim())throw new TypeError("Link requires a non-empty href.");
-  return createElement("a",{...rest,ref,href,"aria-current":current||undefined,className:cx("ol8-AnchorControl",className)},children);
-});