@oneli8/react 1.0.0-beta.10

package/src/styles/selection-indicator.css

@@ -0,0 +1,162 @@
+/* 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 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/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/src/styles/selection-popup.css

@@ -0,0 +1,92 @@
+/* GENERATED from packages/core/src/organisms/selection-popup/selection-popup.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 Popup (ORGANISM)
+ * Figma: Building Blocks / Selection Popup 574:534 — Width, Size.
+ *
+ * The rail is a div with role="listbox" rather than a list element, because a
+ * list carries a user agent margin that a component may not zero here, and the
+ * role already carries every semantic the list element would have added.
+ *
+ * Read from Figma: a raised floating surface at the standard radius with a
+ * default border, padded by the minimal step inline and the related step
+ * block, holding one Option Rail. "Width and Size govern layout only; content
+ * must be canonical Selection Option instances."
+ *
+ * The maximum block is a suggestion, not a cage: the region scrolls rather than
+ * clipping, because an option a person cannot reach is an option that does not
+ * exist.
+ */
+
+.ol8-popup {
+  box-sizing: border-box;
+  padding-block: var(--ol8-component-selectionpopup-paddingblock);
+  padding-inline: var(--ol8-component-selectionpopup-paddinginline);
+  border: var(--ol8-border-width-hairline) solid var(--ol8-color-border-default);
+  border-radius: var(--ol8-shape-radius-standard);
+  background: var(--ol8-color-surface-raised);
+  box-shadow: var(--ol8-elevation-surface-floating);
+}
+
+.ol8-popup__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-component-selectionpopup-gap);
+  padding-inline: var(--ol8-component-selectionpopup-railinsetinline);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---- Size ------------------------------------------------------------- */
+.ol8-popup[data-ol8-size="standard"] .ol8-popup__rail {
+  max-block-size: var(--ol8-component-selectionpopup-maximumblock-standard);
+}
+.ol8-popup[data-ol8-size="large"] .ol8-popup__rail {
+  max-block-size: var(--ol8-component-selectionpopup-maximumblock-large);
+}
+
+/* ---- Width · layout only, never meaning -------------------------------
+   Content hugs, Anchor matches the control it belongs to, and Wide may exceed
+   it when the options are longer than the field. */
+.ol8-popup[data-ol8-width="content"] { inline-size: max-content; }
+.ol8-popup[data-ol8-width="anchor"]  { inline-size: 100%; }
+.ol8-popup[data-ol8-width="wide"]    { inline-size: max-content; min-inline-size: 100%; }
+
+/* ---- Group labels ------------------------------------------------------ */
+.ol8-popup__group-label {
+  padding-block: var(--ol8-component-selectionpopup-gap);
+  padding-inline: var(--ol8-component-selectionoption-inset-standard);
+  color: var(--ol8-color-text-secondary);
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-012);
+  font-weight: var(--ol8-font-weight-semibold);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: var(--ol8-font-tracking-open);
+}
+
+/* ---- Status ------------------------------------------------------------
+   "No results is never represented by a selectable option", so a status is a
+   plain region, never an option, and it can never be chosen by mistake. */
+.ol8-popup__status {
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-textfield-gap-status);
+  padding-block: var(--ol8-component-selectionpopup-paddingblock);
+  padding-inline: var(--ol8-component-selectionoption-inset-standard);
+  color: var(--ol8-color-text-secondary);
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-012);
+  font-weight: var(--ol8-font-weight-regular);
+  line-height: var(--ol8-font-line-018);
+}
+.ol8-popup__status[data-ol8-status="error"] { color: var(--ol8-color-feedbackcritical-inlinecontent); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-popup__status[data-ol8-status="loading"] .ol8-icon > svg {
+    animation: ol8-spin 900ms linear infinite;
+  }
+}
+
+@media (forced-colors: active) {
+  .ol8-popup { border-color: CanvasText; box-shadow: none; }
+}

package/src/styles/tab-bar.css

@@ -0,0 +1,47 @@
+/* GENERATED from packages/core/src/organisms/tab-bar/tab-bar.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 · Tab Bar (ORGANISM)
+ * Figma: Navigation / Tab Bar 701:460 — Bottom, Inline, Sidebar, Spatial Rail.
+ *
+ * "Tab Bar contains destinations, never a central action disguised as a
+ * destination." Every presentation below keeps the same route identity and the
+ * same current destination; only the container changes.
+ *
+ * Read from Figma at Standard, Regular: Bottom, Sidebar and Spatial Rail all
+ * sit on a raised surface with a subtle border at the tab bar radius, protected
+ * by the tab bar inset. Inline has no surface and no border, and uses the
+ * tighter inline inset on its horizontal edges. Destinations meet with no gap.
+ */
+
+.ol8-tab-bar {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  gap: var(--ol8-component-tab-bar-gap);
+  padding: var(--ol8-component-tab-bar-inset);
+  border: var(--ol8-border-width-hairline) solid var(--ol8-color-border-subtle);
+  border-radius: var(--ol8-component-tab-bar-radius);
+  background: var(--ol8-color-surface-raised);
+}
+
+.ol8-tab-bar > .ol8-nav-item { flex: 1 1 0; }
+
+/* Inline sits in the page rather than on it, so it drops the surface, the
+   border and the radius, and protects only its horizontal edges. */
+.ol8-tab-bar[data-ol8-presentation="inline"] {
+  padding-block: var(--ol8-component-tab-bar-inset);
+  padding-inline: var(--ol8-component-tab-bar-inline-inset);
+  border: 0;
+  border-radius: var(--ol8-shape-radius-none);
+  background: none;
+}
+
+.ol8-tab-bar[data-ol8-presentation="sidebar"],
+.ol8-tab-bar[data-ol8-presentation="spatial-rail"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* The spatial rail carries no labels, so its destinations are square targets. */
+.ol8-tab-bar[data-ol8-presentation="spatial-rail"] > .ol8-nav-item { flex: none; }

package/src/styles/tabs.css

@@ -0,0 +1,55 @@
+/* GENERATED from packages/core/src/organisms/tabs/tabs.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 · Tabs (ORGANISM)
+ * Figma: Navigation / Tabs 693:171 — Hierarchy, Material, Size.
+ *
+ * The organism owns sibling separation and the rail; the item owns its own
+ * inset. Read from Figma: tabs meet with no gap, and a Primary tab list carries
+ * an adaptive secondary rail behind them at the hairline thickness in the
+ * secondary text colour. Secondary and Tertiary carry no rail.
+ */
+
+.ol8-tabs {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  /* "Narrow Tab lists scroll or use an explicitly governed overflow policy;
+     labels never wrap into competing heights." */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.ol8-tabs::-webkit-scrollbar { display: none; }
+
+.ol8-tabs[data-ol8-hierarchy="primary"]::after {
+  content: "";
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: var(--ol8-component-tab-item-rail);
+  background: var(--ol8-color-text-secondary);
+}
+
+/* Vertical tabs turn the rail onto the logical inline edge and let each tab
+   fill the width, so the indicator reads as a column marker. */
+.ol8-tabs[data-ol8-orientation="vertical"] {
+  flex-direction: column;
+  overflow-x: visible;
+}
+.ol8-tabs[data-ol8-orientation="vertical"][data-ol8-hierarchy="primary"]::after {
+  inset-block: 0;
+  inset-inline: auto 0;
+  inline-size: var(--ol8-component-tab-item-rail);
+  block-size: auto;
+}
+.ol8-tabs[data-ol8-orientation="vertical"] .ol8-nav-item__indicator {
+  inset-block: var(--ol8-component-tab-item-indicator-inset);
+  inset-inline: auto 0;
+  inline-size: var(--ol8-component-tab-item-indicator-thickness);
+  block-size: auto;
+}
+
+.ol8-tabs__panel:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ol8-component-navigation-focus-inset) var(--ol8-color-focus-inner);
+}