@oneli8/react 1.0.0-beta.10

package/src/styles/choice-item.css

@@ -0,0 +1,267 @@
+/* GENERATED from packages/core/src/molecules/choice-item/choice-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 · Choice Item (MOLECULE)
+ * Figma: Documentation / Molecule / Choice Item
+ *   Checkbox 252:301 (24 variants) · Radio 331:1309 (16) · Switch 825:1591 (16)
+ *
+ * From the Figma description (252:301):
+ *   "Selection maps Unchecked/Checked/Mixed to checked/indeterminate;
+ *    Availability maps enabled/disabled ... The indicator is a shared
+ *    selection atom, not local artwork. Native input, name/value, required,
+ *    reset, form submission, and onCheckedChange live in code."
+ *
+ * So the molecule is: a real <input>, the selection-indicator atom, a label,
+ * an optional description — and NOTHING that duplicates native behaviour.
+ *
+ * ANATOMY (Figma 266:257 / 252:74 / 252:77)
+ *   <label class=ol8-choice>          the whole row is the target
+ *     input                            visually hidden, still focusable
+ *     __surface                        hover / pressed / gem wash, bleeds 9px inline
+ *     __indicator                      slot: indicator wide, label-line tall
+ *     __content                        label + optional description
+ *
+ * ROW GEOMETRY — every size resolves to the same 48px minimum row:
+ *   size         gap  indicator  slot h   label          padding-block
+ *   compact       6      18        18     Body/Small      15
+ *   standard      9      18        24     Body/Medium     12
+ *   comfortable   9      24        24     Body/Medium     12
+ *   large         9      24        30     Body/Large       9
+ * padding-block is derived: (48 - slot height) / 2.
+ */
+
+.ol8-choice {
+  --_gap:    var(--ol8-component-choice-gap-standard);
+  --_slot-h: var(--ol8-font-line-024);
+  --_pad:    calc((var(--ol8-component-choice-rowminimum) - var(--_slot-h)) / 2);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+  --_indicator: var(--ol8-size-icon-small);
+  /* The hover / pressed / focus wash bleeds outside the text column. */
+  --_bleed: var(--ol8-dimension-scale-009);
+
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--_gap);
+  min-block-size: var(--ol8-component-choice-rowminimum);
+  padding-block: var(--_pad);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
+  cursor: pointer;
+}
+.ol8-choice[data-ol8-availability="disabled"] { cursor: not-allowed; }
+
+/* ---- Size ------------------------------------------------------------ */
+.ol8-choice[data-ol8-size="compact"] {
+  --_gap: var(--ol8-component-choice-gap-compact);
+  --_slot-h: var(--ol8-font-line-018);
+  --_label-size: var(--ol8-font-size-012);
+  --_label-line: var(--ol8-font-line-018);
+  --_indicator: var(--ol8-size-icon-small);
+}
+.ol8-choice[data-ol8-size="standard"] {
+  --_slot-h: var(--ol8-font-line-024);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+  --_indicator: var(--ol8-size-icon-small);
+}
+.ol8-choice[data-ol8-size="comfortable"] {
+  --_slot-h: var(--ol8-font-line-024);
+  --_label-size: var(--ol8-font-size-016);
+  --_label-line: var(--ol8-font-line-024);
+  --_indicator: var(--ol8-size-icon-standard);
+}
+.ol8-choice[data-ol8-size="large"] {
+  --_slot-h: var(--ol8-font-line-030);
+  --_label-size: var(--ol8-font-size-021);
+  --_label-line: var(--ol8-font-line-030);
+  --_indicator: var(--ol8-size-icon-standard);
+}
+/* Compact's label carries the Body/Small tracking. */
+.ol8-choice[data-ol8-size="compact"] .ol8-choice__label { letter-spacing: 1px; }
+
+/* ---- The native input owns everything semantic ----------------------- */
+.ol8-choice__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+  /* No margin reset needed — it is absolutely positioned, so margin cannot
+     affect layout. The structure lint would reject one regardless. */
+}
+
+/* ---- Wash: hover, pressed, focus, gem -------------------------------- */
+.ol8-choice__surface {
+  position: absolute;
+  inset-block: 0;
+  inset-inline: calc(-1 * var(--_bleed));
+  border-radius: var(--ol8-shape-radius-medium);
+  pointer-events: none;
+}
+.ol8-choice:hover:not([data-ol8-availability="disabled"]) > .ol8-choice__surface,
+.ol8-choice:active:not([data-ol8-availability="disabled"]) > .ol8-choice__surface {
+  background: var(--ol8-color-selection-surface);
+}
+
+/* Two nested rings, both visible — outer 3px, inner 3px at a 2px inset.
+   This is the same two-tone ring the Icon Button focus tokens describe. */
+.ol8-choice:has(> .ol8-choice__input:focus-visible) > .ol8-choice__surface {
+  border: var(--ol8-focus-ring-outerwidth) solid var(--ol8-color-focus-outer);
+}
+.ol8-choice:has(> .ol8-choice__input:focus-visible) > .ol8-choice__surface::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  border-radius: 7px;
+}
+
+/* ---- Indicator slot -------------------------------------------------- */
+.ol8-choice__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex: none;
+  inline-size: var(--_indicator);
+  block-size: var(--_slot-h);
+}
+
+/* Invalid draws an extra boundary over the indicator, same shape. */
+.ol8-choice[data-ol8-invalid="true"] .ol8-choice__indicator::after {
+  content: "";
+  position: absolute;
+  inline-size: var(--_indicator);
+  block-size: var(--_indicator);
+  border: var(--ol8-component-checkbox-boundary) solid var(--ol8-color-feedbackcritical-inlinecontent);
+  border-radius: var(--ol8-component-checkbox-radius-compact);
+  pointer-events: none;
+}
+.ol8-choice[data-ol8-size="comfortable"][data-ol8-invalid="true"] .ol8-choice__indicator::after,
+.ol8-choice[data-ol8-size="large"][data-ol8-invalid="true"] .ol8-choice__indicator::after {
+  border-radius: var(--ol8-component-checkbox-radius-comfortable);
+}
+.ol8-choice--radio[data-ol8-invalid="true"] .ol8-choice__indicator::after {
+  border-radius: var(--ol8-shape-radius-full);
+}
+
+/* ---- Content --------------------------------------------------------- */
+.ol8-choice__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-dimension-scale-003);
+  flex: 1 0 0;
+  min-inline-size: 0;
+  position: relative;
+}
+.ol8-choice__label {
+  font-size: var(--_label-size);
+  line-height: var(--_label-line);
+  font-weight: var(--ol8-font-weight-regular);
+  color: var(--ol8-color-text-primary);
+  overflow-wrap: break-word;
+}
+.ol8-choice__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-choice[data-ol8-availability="disabled"] .ol8-choice__label,
+.ol8-choice[data-ol8-availability="disabled"] .ol8-choice__description {
+  color: var(--ol8-color-text-disabled);
+}
+
+/* ---- Gem material ----------------------------------------------------
+   "Gem is one Boolean material adapter over the same anatomy; Regular
+   remains the default." A wash on the row, not a different component. */
+.ol8-choice[data-ol8-material="gem"] > .ol8-choice__surface {
+  background: var(--ol8-material-gem-color-quiet-environmentalface);
+  border: 1px solid var(--ol8-material-gem-color-cutedge-high);
+  border-radius: var(--ol8-shape-radius-standard);
+  inset-inline: 0;
+}
+/* The quiet face is clear glass — near-white at 0.18/0.27, not a dark tint —
+   so it cannot guarantee what sits behind it at all. Content on it therefore
+   takes the stable near-white gem ink rather than body text, and carries its
+   own halo, which is the only thing standing between the label and whatever
+   the environment happens to be. Unlike the gem text field, the label and
+   description here really are on the face: .ol8-choice__surface spans the row
+   beneath them. Disabled is excluded — it resolves to the opaque equivalent,
+   where the regular disabled ink applies and no halo is wanted. */
+/* ONE GLOW, TWO SYNTAXES.
+   Content on Gem means ALL content — glyphs and control geometry alike. Text
+   takes the halo through text-shadow; an SVG stroke cannot, so the indicator
+   takes the identical halo through chained drop-shadow filters. Both are built
+   from the same two tokens and the same four repetitions, which is what makes
+   the label's glow and the checkbox's glow read as one field rather than two
+   near-misses. Change the radius or the colour and both follow. */
+.ol8-choice[data-ol8-material="gem"] {
+  --_gem-glow: 0 0 var(--ol8-material-gem-blur-contentglow)
+               var(--ol8-material-gem-color-quiet-contentglow);
+  /* Control geometry takes one stack FEWER than text, on purpose. WCAG 1.4.11
+     asks 3:1 of a graphical object where 1.4.3 asks 4.5:1 of text, so the
+     boundary does not need the fourth repetition — and leaving it off is what
+     keeps the indicator blended into the glass instead of ringed. Measured at
+     3px: text in four stacks is 5.06:1, the boundary in three is 3.75:1. */
+  --_gem-glow-filter:
+    drop-shadow(var(--_gem-glow)) drop-shadow(var(--_gem-glow))
+    drop-shadow(var(--_gem-glow));
+}
+
+/* DISABLED ON GEM IS ONE GREY, SHARED.
+   color.text.disabled is dark in the Light appearance, so a disabled row on
+   glass whose enabled content is near-white ended up with a dark label beside
+   a dark box — it read broken rather than unavailable. On Gem, disabled text
+   and disabled control geometry take the SAME whitish grey, and neither takes
+   the halo: the absence of the glow is part of how unavailable reads.
+   Disabled content is exempt from 1.4.3, which excludes inactive controls. */
+.ol8-choice[data-ol8-material="gem"][data-ol8-availability="disabled"] .ol8-choice__label,
+.ol8-choice[data-ol8-material="gem"][data-ol8-availability="disabled"] .ol8-choice__description {
+  color: var(--ol8-material-gem-color-quiet-contentdisabled);
+  text-shadow: none;
+}
+.ol8-choice[data-ol8-material="gem"][data-ol8-availability="disabled"] .ol8-selection {
+  --_edge: var(--ol8-material-gem-color-quiet-contentdisabled);
+  --_ink: var(--ol8-material-gem-color-quiet-contentdisabled);
+  filter: none;
+}
+
+/* The unselected control boundary is content, not chrome. It was
+   color.border.strong, which is dark in the Light appearance and left the
+   checkbox reading as a dark hole in a surface whose text had gone near-white.
+   On Gem it takes the same ink as the label. Selected and mixed are untouched:
+   those fill with the primary action family and carry their own white mark,
+   which already reads on glass. */
+.ol8-choice[data-ol8-material="gem"]:not([data-ol8-availability="disabled"]) .ol8-selection {
+  --_edge: var(--ol8-material-gem-color-quiet-content);
+  filter: var(--_gem-glow-filter);
+}
+
+/* Any iconography sitting on the face takes the token that already exists for
+   exactly this and is already stable across appearances. */
+.ol8-choice[data-ol8-material="gem"]:not([data-ol8-availability="disabled"]) .ol8-icon {
+  color: var(--ol8-color-icon-on-gem);
+  filter: var(--_gem-glow-filter);
+}
+
+.ol8-choice[data-ol8-material="gem"]:not([data-ol8-availability="disabled"]) .ol8-choice__label,
+.ol8-choice[data-ol8-material="gem"]:not([data-ol8-availability="disabled"]) .ol8-choice__description {
+  color: var(--ol8-material-gem-color-quiet-content);
+  /* Stacked three times on purpose. A single shadow at this radius reaches
+     only 1.71:1 against near-white ink on a bright plate, and widening the
+     radius makes it WEAKER because blur spreads a fixed alpha budget over more
+     area. Repeating the same shadow accumulates alpha instead of spreading it:
+     1 - (1 - a)^4. Measured in proof/gem-halo-contrast.html. */
+  text-shadow: var(--_gem-glow), var(--_gem-glow),
+               var(--_gem-glow), var(--_gem-glow);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ol8-choice[data-ol8-material="gem"] > .ol8-choice__surface {
+    background: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+  }
+}

package/src/styles/choice-picker.css

@@ -0,0 +1,100 @@
+/* GENERATED from packages/core/src/organisms/choice-picker/choice-picker.css by packages/sync/src/build-styles.mjs — do not edit.
+   Edit the source in packages/core/src and re-run `npm run sync:styles`. */
+/**
+ * Oneli8 · Choice Picker (ORGANISM)
+ * Figma: Organism / Choice Picker / Soft Hexagon 906:2898 (16 variants)
+ *
+ * Three parts stacked twelve apart: a search field, a wrapping matrix of chips,
+ * and in Apply mode a commitment line. The search field is the canonical Text
+ * Field owner and the chips are the canonical Choice Chip owner, so neither is
+ * restyled here.
+ *
+ * Read from all four sizes in Figma: the root gap, the matrix gap and the
+ * commitment typography do NOT scale with the picker size. They are twelve,
+ * six, and 12/18 at Compact, Standard, Comfortable and Large alike. Only the
+ * search field and the chips take the size.
+ */
+
+.ol8-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-spacing-stack-related);
+  inline-size: 100%;
+}
+
+/* "The matrix wraps with 6px gaps and preserves source/reading order; it is not
+   a masonry layout." A plain wrapping flex row is exactly that. */
+.ol8-picker__matrix {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ol8-component-choice-chip-gap);
+}
+
+/* Figma: HORIZONTAL, space between, 24 tall, both texts secondary at 12/18. */
+.ol8-picker__commitment {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ol8-spacing-inline-standard);
+  min-block-size: var(--ol8-size-icon-standard);
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  color: var(--ol8-color-text-secondary);
+}
+
+.ol8-picker__summary {
+  font-family: var(--ol8-font-family-functional);
+  color: inherit;
+}
+
+/* Clear all and the apply hint are text weight actions rather than Button
+   instances. The contract asks for Clear all to be quiet, and Figma's row is
+   twenty four tall, which a Button's protected forty eight target would break.
+   They are still real buttons, so they are reachable and announced. */
+.ol8-picker__apply,
+.ol8-picker__clear {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-family: var(--ol8-font-family-functional);
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--ol8-color-actionquiet-contentdefault);
+  cursor: pointer;
+}
+.ol8-picker__apply:hover,
+.ol8-picker__clear:hover {
+  color: var(--ol8-color-actionquiet-contenthover);
+  text-decoration: underline;
+}
+.ol8-picker__apply:focus-visible,
+.ol8-picker__clear:focus-visible {
+  outline: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  outline-offset: var(--ol8-focus-ring-offset);
+}
+
+.ol8-picker[data-ol8-availability="disabled"] .ol8-picker__apply,
+.ol8-picker[data-ol8-availability="disabled"] .ol8-picker__clear {
+  color: var(--ol8-color-actionquiet-contentdisabled);
+  cursor: not-allowed;
+}
+
+/* The search label stays associated while the composition hides it. */
+.ol8-picker__label-row--hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Retrieval and result counts are announced rather than only drawn. */
+.ol8-picker__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/styles/combobox.css

@@ -0,0 +1,42 @@
+/* GENERATED from packages/core/src/organisms/combobox/combobox.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 · Combobox (ORGANISM)
+ * Figma: Organism / Combobox 883:2159 — "Reuses approved Text Field, Selection
+ * Popup and governed icon atoms."
+ *
+ * So the field geometry is the field's, the popup is the popup's, and this
+ * file adds only what belongs to the combination: where the popup sits, and
+ * the two marks at the trailing edge.
+ */
+
+.ol8-combobox { position: relative; }
+
+/* "Closed control to popup block gap" is a token, so the popup sits where the
+   design says rather than wherever absolute positioning lands it. */
+.ol8-combobox__popup {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-start: calc(100% + var(--ol8-component-selectionpopup-gap));
+}
+
+.ol8-combobox__disclosure {
+  flex: none;
+  display: inline-flex;
+  color: var(--ol8-color-icon-secondary);
+  cursor: pointer;
+}
+
+.ol8-combobox__clear {
+  flex: none;
+  display: inline-flex;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--ol8-color-icon-secondary);
+  cursor: pointer;
+}
+.ol8-combobox__clear:disabled { color: var(--ol8-color-icon-disabled); cursor: not-allowed; }
+
+.ol8-combobox[data-ol8-disabled] .ol8-combobox__disclosure { color: var(--ol8-color-icon-disabled); cursor: not-allowed; }

package/src/styles/form-message.css

@@ -0,0 +1,48 @@
+/* GENERATED from packages/core/src/molecules/form-message/form-message.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 · Form Message (MOLECULE)
+ * Figma: Form Message 177:13, five tones.
+ *
+ * Anatomy read from Figma: a horizontal row, gap Component / Text Field / Gap /
+ * Status, items centred, one Small status icon beside twelve over eighteen
+ * regular text. Tone changes exactly one thing, the inline content colour,
+ * which both the icon stroke and the text take.
+ */
+
+.ol8-form-message {
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-textfield-gap-status);
+  color: var(--_tone);
+  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-form-message__icon { flex: none; color: var(--_tone); }
+
+/* ---- Tone ------------------------------------------------------------- */
+.ol8-form-message[data-ol8-tone="critical"]    { --_tone: var(--ol8-color-feedbackcritical-inlinecontent); }
+.ol8-form-message[data-ol8-tone="caution"]     { --_tone: var(--ol8-color-feedbackcaution-inlinecontent); }
+.ol8-form-message[data-ol8-tone="positive"]    { --_tone: var(--ol8-color-feedbackpositive-inlinecontent); }
+.ol8-form-message[data-ol8-tone="informative"] { --_tone: var(--ol8-color-feedbackinformative-inlinecontent); }
+
+/* Pending reads as informative text, and Figma gives its loading mark the
+   primary icon colour rather than a feedback colour, because nothing has been
+   decided yet. */
+.ol8-form-message[data-ol8-tone="pending"] {
+  --_tone: var(--ol8-color-feedbackinformative-inlinecontent);
+}
+.ol8-form-message[data-ol8-tone="pending"] .ol8-form-message__icon {
+  color: var(--ol8-color-icon-primary);
+}
+
+/* Same treatment the Button gives its busy mark: rotation is opt in and motion
+   guarded, and Reduced Motion keeps the static mark. */
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-form-message[data-ol8-tone="pending"] .ol8-form-message__icon > svg {
+    animation: ol8-spin 900ms linear infinite;
+  }
+}