@oneli8/react 1.0.0-beta.5 → 1.0.0-beta.6

package/src/styles/multi-select-field.css

@@ -0,0 +1,78 @@
+/* GENERATED from packages/core/src/organisms/multi-select-field/multi-select-field.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 · Multi-select Field (ORGANISM)
+ * Figma: Organism / Multi-select Field / Outline 904:2507 (16 variants)
+ *        Organism / Multi-select Field / Filled  978:4472 (16 variants)
+ *
+ * Almost everything here is inherited rather than declared. The field shell,
+ * its four sizes, both appearances, the Gem material and the focus treatment
+ * all come from the Text Field stylesheet, because Figma builds this organism
+ * from the canonical Text Field owner and only swaps that owner between the
+ * Outline and Filled sets. What is left is the one thing a Text Field has never
+ * had to do: let committed values and the editable input share a run that
+ * wraps.
+ */
+
+/* Figma's root is a vertical stack: the field composition, then the popup,
+   twelve apart. That gap is now bound in Figma to Spacing / Stack / Related. */
+.ol8-multiselect {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-spacing-stack-related);
+  inline-size: 100%;
+}
+
+/* A Text Field pins this stack to one row's height, because a single line
+   input never needs more. A multi value field does: releasing the stack is what
+   lets the control below it grow, and without it the tokens simply spill out of
+   the boundary they are supposed to sit inside. */
+.ol8-multiselect__field > .ol8-field__control-stack {
+  block-size: auto;
+  min-block-size: var(--_height);
+}
+
+/* The control grows instead of scrolling or shrinking its contents. The
+   contract is explicit: the field "starts at its approved Text Field minimum
+   height and grows in 6px or 12px-aligned increments as tokens wrap" and "never
+   compresses tokens to preserve one nominal row". Every token keeps its own
+   protected 48 unit interaction line, so a populated row is taller than an
+   empty field by design. */
+.ol8-multiselect__control {
+  flex-wrap: wrap;
+  align-content: center;
+  block-size: auto;
+  min-block-size: var(--_height);
+  gap: var(--ol8-component-token-field-gap);
+  padding-block: var(--ol8-component-token-field-padding-block);
+}
+
+/* The editable input keeps a usable measure before it gives up its row. */
+.ol8-multiselect__input {
+  min-inline-size: var(--ol8-component-token-field-minimum-input);
+}
+
+/* A token awaiting a second Backspace. The first press only activates, so this
+   has to be visible: a silent activation would make the second press feel like
+   a single key deleting a value. */
+.ol8-multiselect__token[data-ol8-active] {
+  --_surface: var(--ol8-color-selection-surface);
+  --_edge: var(--ol8-color-focus-outer);
+}
+
+/* A read only field's values are labelled content, so nothing inside invites a
+   click that would do nothing. */
+.ol8-multiselect[data-ol8-readonly="true"] .ol8-multiselect__token,
+.ol8-multiselect[data-ol8-availability="disabled"] .ol8-multiselect__token {
+  cursor: default;
+}
+
+/* Announcements only. Removing a value says so, with the remaining count. */
+.ol8-multiselect__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/styles/navigation-badge.css

@@ -0,0 +1,37 @@
+/* GENERATED from packages/core/src/atoms/navigation-badge/navigation-badge.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 · Navigation Badge (ATOM)
+ * Figma: Atom / Navigation Badge 989:484 — a full radius pill at the standard
+ * indicator height, padded by the related inline step, whose surface and
+ * content are the only things that change when the item is selected or gem.
+ */
+
+.ol8-nav-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--ol8-size-indicator-standard);
+  padding-inline: var(--ol8-spacing-inline-related);
+  border-radius: var(--ol8-shape-radius-full);
+  background: var(--ol8-color-navigation-badge-surface-default);
+  color: var(--ol8-color-navigation-badge-content-default);
+  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);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Selection and material reach the badge through the item that owns it. */
+[data-ol8-selected="true"] > * > .ol8-nav-badge,
+[aria-selected="true"] > * > .ol8-nav-badge,
+[aria-current] > * > .ol8-nav-badge {
+  background: var(--ol8-color-navigation-badge-surface-selected);
+  color: var(--ol8-color-navigation-badge-content-selected);
+}
+
+[data-ol8-material="gem"] .ol8-nav-badge {
+  background: var(--ol8-color-navigation-badge-surface-gem);
+  color: var(--ol8-color-navigation-badge-content-gem);
+}

package/src/styles/navigation-item.css

@@ -0,0 +1,155 @@
+/* GENERATED from packages/core/src/molecules/navigation-item/navigation-item.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 · Navigation Item (MOLECULE, internal)
+ * Figma: Tab Item 688:51, Segment Item 695:167, Destination Item 700:292.
+ *
+ * All three are one molecule. Read from Figma: a box at the size's control
+ * height with centred content, a horizontal content row at the canonical
+ * navigation gap, an eighteen unit icon, a Semibold label at the size's reading
+ * step, and an optional badge. States are identical across the three:
+ *
+ *   Hover     Action Quiet Surface Hover   + Action Quiet Content Hover
+ *   Pressed   Action Quiet Surface Pressed + Action Quiet Content Pressed
+ *   Focus     an inward Focus Inner edge, so a parent cannot crop it
+ *   Disabled  Text Disabled, no surface
+ *
+ * Only the selection language differs. Tab Item raises an indicator bar in the
+ * primary colour, inset by the governed amount. Segment Item and Destination
+ * Item take the selection surface and content instead.
+ */
+
+.ol8-nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  block-size: var(--_height);
+  border: 0;
+  border-radius: var(--_radius);
+  padding-inline: var(--_inset);
+  background: transparent;
+  color: var(--ol8-color-text-secondary);
+  font-family: var(--ol8-font-family-functional);
+  font-weight: var(--ol8-font-weight-semibold);
+  text-decoration: none;
+  cursor: pointer;
+  transition-property: background-color, color;
+  transition-duration: var(--ol8-motion-interaction-hover-duration);
+  transition-timing-function: var(--ol8-motion-interaction-hover-timing-function);
+}
+
+.ol8-nav-item__content {
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-navigation-item-gap);
+  min-inline-size: 0;
+}
+
+/* "Labels do not wrap." A narrow list scrolls; it never grows a second line. */
+.ol8-nav-item__label {
+  white-space: nowrap;
+  font-size: var(--_label-size);
+  line-height: var(--_label-line);
+}
+
+.ol8-nav-item__icon { flex: none; }
+
+.ol8-nav-item[data-ol8-layout="stacked"] .ol8-nav-item__content {
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ---- Size ------------------------------------------------------------- */
+.ol8-nav-item[data-ol8-size="compact"] {
+  --_height: var(--ol8-component-tab-item-height-compact);
+  --_inset:  var(--ol8-component-tab-item-inset-compact);
+  --_label-size: var(--ol8-font-size-012);
+  --_label-line: var(--ol8-font-line-018);
+}
+.ol8-nav-item[data-ol8-size="standard"] {
+  --_height: var(--ol8-component-tab-item-height-standard);
+  --_inset:  var(--ol8-component-tab-item-inset-standard);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+}
+.ol8-nav-item[data-ol8-size="comfortable"] {
+  --_height: var(--ol8-component-tab-item-height-comfortable);
+  --_inset:  var(--ol8-component-tab-item-inset-comfortable);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+}
+.ol8-nav-item[data-ol8-size="large"] {
+  --_height: var(--ol8-component-tab-item-height-large);
+  --_inset:  var(--ol8-component-tab-item-inset-large);
+  --_label-size: var(--ol8-font-size-021);
+  --_label-line: var(--ol8-font-line-030);
+}
+
+.ol8-nav-item--tab,
+.ol8-nav-item--segment     { --_radius: var(--ol8-component-tab-item-radius); }
+.ol8-nav-item--destination { --_radius: var(--ol8-component-tab-bar-item-radius); }
+
+/* ---- State ------------------------------------------------------------ */
+@media (hover: hover) and (pointer: fine) {
+  .ol8-nav-item:hover:not(:disabled) {
+    background: var(--ol8-color-actionquiet-surfacehover);
+    color: var(--ol8-color-actionquiet-contenthover);
+  }
+}
+.ol8-nav-item:active:not(:disabled) {
+  background: var(--ol8-color-actionquiet-surfacepressed);
+  color: var(--ol8-color-actionquiet-contentpressed);
+}
+
+/* "Focus uses the approved inward treatment so parent clipping cannot crop it."
+   An outward ring would be cut by a scrolling tab list. */
+.ol8-nav-item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ol8-component-navigation-focus-inset) var(--ol8-color-focus-inner);
+}
+
+.ol8-nav-item:disabled {
+  color: var(--ol8-color-text-disabled);
+  background: transparent;
+  cursor: not-allowed;
+}
+
+/* ---- Selection · Tab Item raises an indicator ------------------------- */
+.ol8-nav-item__indicator {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: var(--ol8-component-tab-item-indicator-inset);
+  block-size: var(--ol8-component-tab-item-indicator-thickness);
+  border-radius: var(--ol8-shape-radius-full);
+  background: transparent;
+}
+.ol8-nav-item--tab[aria-selected="true"] {
+  color: var(--ol8-color-actionprimary-default);
+}
+.ol8-nav-item--tab[aria-selected="true"] > .ol8-nav-item__indicator {
+  background: var(--ol8-color-actionprimary-default);
+}
+
+/* ---- Selection · Segment and Destination take the surface ------------- */
+.ol8-nav-item--segment[aria-pressed="true"],
+.ol8-nav-item--destination[aria-current] {
+  background: var(--ol8-color-selection-surface);
+  color: var(--ol8-color-selection-content);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ol8-nav-item { transition-duration: var(--ol8-motion-duration-instant); }
+}
+
+@media (forced-colors: active) {
+  .ol8-nav-item:focus-visible {
+    outline: var(--ol8-component-navigation-focus-inset) solid Highlight;
+    outline-offset: calc(var(--ol8-component-navigation-focus-inset) * -1);
+    box-shadow: none;
+  }
+  .ol8-nav-item--tab[aria-selected="true"] > .ol8-nav-item__indicator { background: Highlight; }
+  .ol8-nav-item--segment[aria-pressed="true"],
+  .ol8-nav-item--destination[aria-current] { background: Highlight; color: HighlightText; }
+}

package/src/styles/segmented-control.css

@@ -0,0 +1,115 @@
+/* GENERATED from packages/core/src/organisms/segmented-control/segmented-control.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 · Segmented Control (ORGANISM)
+ * Figma: Navigation / Segmented Control 698:4792 — six presentations.
+ *
+ * "Presentation never changes behavior." Every presentation below is a
+ * treatment of the same Segment molecule, and none of them touches which
+ * behaviour the consumer declared.
+ *
+ * Read from Figma at Standard, Regular:
+ *   Inset Fill          sunken track, Border Default at the standard boundary,
+ *                       segments inset by the track inset, selected takes the
+ *                       selection surface
+ *   Line Indicator      no track; an adaptive secondary rail with a separate
+ *                       indicator in the primary colour, inset like a tab
+ *   Outlined Selection  no track; each segment carries its own boundary, the
+ *                       selected one in the primary colour at the strong width,
+ *                       with a deliberate gap between segments
+ *   Soft Pill           raised track at full radius; segments at full radius
+ *   Icon-only           the Inset Fill track, with icon only segments
+ *   Stacked Label       no track; segments stack their icon over their label
+ */
+
+.ol8-segmented {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--ol8-component-tab-bar-gap);
+}
+
+.ol8-segmented > .ol8-nav-item { flex: 1 1 0; }
+
+/* ---- Inset Fill and Icon-only share one track ------------------------- */
+.ol8-segmented[data-ol8-presentation="inset-fill"],
+.ol8-segmented[data-ol8-presentation="icon-only"] {
+  padding: var(--ol8-component-segmented-control-track-inset);
+  border: var(--ol8-border-width-standard) solid var(--ol8-color-border-default);
+  border-radius: var(--ol8-component-segmented-control-track-radius);
+  background: var(--ol8-color-surface-sunken);
+}
+.ol8-segmented[data-ol8-presentation="inset-fill"] > .ol8-nav-item,
+.ol8-segmented[data-ol8-presentation="icon-only"] > .ol8-nav-item {
+  --_radius: var(--ol8-component-segmented-control-item-radius);
+}
+
+/* ---- Soft Pill -------------------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="soft-pill"] {
+  padding: var(--ol8-component-segmented-control-track-inset);
+  border-radius: var(--ol8-shape-radius-full);
+  background: var(--ol8-color-surface-raised);
+}
+.ol8-segmented[data-ol8-presentation="soft-pill"] > .ol8-nav-item {
+  --_radius: var(--ol8-shape-radius-full);
+}
+
+/* ---- Line Indicator --------------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="line-indicator"] {
+  position: relative;
+  gap: 0;
+}
+.ol8-segmented[data-ol8-presentation="line-indicator"]::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);
+}
+/* The active segment raises the line itself, so the indicator travels with the
+   selection rather than being positioned by script. */
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item { --_radius: 0; }
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: var(--ol8-component-tab-item-indicator-inset);
+  block-size: var(--ol8-component-segmented-control-line);
+  border-radius: var(--ol8-shape-radius-full);
+  background: transparent;
+}
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item[aria-pressed="true"] {
+  background: transparent;
+  color: var(--ol8-color-actionprimary-default);
+}
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item[aria-pressed="true"]::after {
+  background: var(--ol8-color-actionprimary-default);
+}
+
+/* ---- Outlined Selection ----------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="outlined-selection"] {
+  gap: var(--ol8-component-segmented-control-outlined-gap);
+}
+.ol8-segmented[data-ol8-presentation="outlined-selection"] > .ol8-nav-item {
+  --_radius: var(--ol8-component-segmented-control-item-radius);
+  border: var(--ol8-component-segmented-control-boundary) solid var(--ol8-color-border-default);
+}
+.ol8-segmented[data-ol8-presentation="outlined-selection"] > .ol8-nav-item[aria-pressed="true"] {
+  border-width: var(--ol8-border-width-standard);
+  border-color: var(--ol8-color-actionprimary-default);
+  background: transparent;
+  color: var(--ol8-color-actionprimary-default);
+}
+
+/* ---- Stacked Label ---------------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="stacked-label"] > .ol8-nav-item {
+  --_radius: var(--ol8-component-segmented-control-item-radius);
+}
+
+@media (forced-colors: active) {
+  .ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item[aria-pressed="true"]::after {
+    background: Highlight;
+  }
+}

package/src/styles/select.css

@@ -0,0 +1,33 @@
+/* GENERATED from packages/core/src/molecules/select/select.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 · Select (MOLECULE)
+ * Figma: Select / Trigger 583:338, Molecule / Select 875:1778.
+ *
+ * "Geometry and appearance reuse approved Text Field tokens", and Figma proves
+ * it: every bound variable on the trigger control is a Text Field one. So
+ * Select carries the field classes and adds only what a native select needs,
+ * which is the disclosure mark and the removal of the platform's own arrow.
+ */
+
+.ol8-select__input {
+  appearance: none;
+  cursor: pointer;
+}
+.ol8-select__input:disabled { cursor: not-allowed; }
+
+/* The native control keeps its own text colour rules, so the value takes the
+   primary ink while an unselected placeholder option stays secondary. */
+.ol8-select__input:has(option[value=""]:checked) { color: var(--ol8-color-text-secondary); }
+
+.ol8-select__disclosure {
+  flex: none;
+  color: var(--ol8-color-icon-secondary);
+  pointer-events: none;
+}
+.ol8-select[data-ol8-disabled] .ol8-select__disclosure { color: var(--ol8-color-icon-disabled); }
+
+/* The disclosure sits over the control, so a click anywhere still reaches the
+   native select underneath and opens the platform picker. */
+.ol8-select .ol8-field__control { position: relative; }
+.ol8-select__input { flex: 1 1 auto; min-inline-size: 0; }

package/src/styles/selection-indicator.css

@@ -73,12 +73,21 @@
   --_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. */
+/* 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(--_box);
-  block-size: var(--_box);
+  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

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);
+}