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

package/src/styles/text-field.css

@@ -0,0 +1,268 @@
+/* GENERATED from packages/core/src/molecules/text-field/text-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 · Text Field (MOLECULE)
+ * Figma: Text Field / Outline 182:33, Text Field / Filled 186:53,
+ *        Text Field / Outline / Gem 211:36, Text Field / Filled / Gem 215:226,
+ *        Text Field / Content 175:2, Form Message 177:13.
+ *
+ * ANATOMY, read from Figma rather than assumed:
+ *   root                vertical, gap Component / Text Field / Gap / Supporting
+ *   · Label Row         horizontal, gap Component / Text Field / Gap / Label
+ *     · Label           twelve over eighteen, Semibold, Tracking Open, Text Primary
+ *     · Requirement     a star in Feedback Critical Content, Regular weight
+ *   · Control Stack     fixed at Component / Text Field / Height / <size>
+ *     · Focus Edge      shown only while focused, Focus Ring Inner Width
+ *     · Control         gap Inline; inset, radius and boundary per size; surface and border
+ *                       per appearance and condition
+ *       · Leading Icon  Size / Icon / Small
+ *       · Prefix        the content size, Text Secondary
+ *       · Input         fills the row
+ *       · Suffix        the content size, Text Secondary
+ *       · Trailing      twenty four
+ *   · Instruction       twelve over eighteen, Text Secondary
+ *   · Supporting Region horizontal, space between, gap Message Counter
+ *     · Form Message    its own molecule
+ *     · Counter         twelve over eighteen, Text Secondary
+ *
+ * CONDITION IS NOT A CLASS. Figma's five Conditions are review evidence. Here
+ * they are :hover, [aria-invalid], [readonly] and :disabled on the real input,
+ * exactly as the Figma description asks.
+ */
+
+.ol8-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-component-textfield-gap-supporting);
+  inline-size: 100%;
+
+  --_surface: var(--ol8-color-surface-default);
+  --_border:  var(--ol8-color-border-default);
+  --_label:   var(--ol8-color-text-primary);
+  --_ink:     var(--ol8-color-text-primary);
+  --_muted:   var(--ol8-color-text-secondary);
+}
+
+/* ---- Label ------------------------------------------------------------ */
+.ol8-field__label-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ol8-component-textfield-gap-requirement);
+}
+.ol8-field__label {
+  color: var(--_label);
+  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);
+}
+.ol8-field__requirement {
+  color: var(--ol8-color-feedbackcritical-content);
+  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);
+}
+
+/* ---- Control ---------------------------------------------------------- */
+.ol8-field__control-stack {
+  position: relative;
+  display: flex;
+  block-size: var(--_height);
+}
+
+/* The contract asks a coarse pointer adapter to expand the activation region
+   for Compact and Standard, which are shorter than the protected minimum,
+   without overlapping a neighbouring field. That belongs to a platform adapter:
+   an overlay drawn here would sit over the value and take the caret away from
+   the person, which is worse than the shortfall it fixes. Not implemented. */
+
+.ol8-field__control {
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-textfield-gap-inline);
+  inline-size: 100%;
+  block-size: var(--_height);
+  padding-inline: var(--_inset);
+  border: var(--ol8-component-textfield-boundary) solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_surface);
+  transition-property: border-color, background-color;
+  transition-duration: var(--ol8-motion-interaction-hover-duration);
+  transition-timing-function: var(--ol8-motion-interaction-hover-timing-function);
+}
+
+.ol8-field__leading-icon { flex: none; color: var(--ol8-color-icon-secondary); }
+
+.ol8-field__affix {
+  flex: none;
+  color: var(--_muted);
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--_content-size);
+  font-weight: var(--ol8-font-weight-regular);
+  line-height: var(--_content-line);
+}
+
+/* The input carries the value, so it takes the primary ink and hands the
+   secondary ink to its placeholder. That is exactly the Content molecule's
+   Value and Placeholder types. */
+.ol8-field__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--_ink);
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--_content-size);
+  font-weight: var(--ol8-font-weight-regular);
+  line-height: var(--_content-line);
+}
+.ol8-field__input::placeholder { color: var(--_muted); opacity: 1; }
+.ol8-field__input:focus { outline: none; }
+
+.ol8-field__trailing-action {
+  flex: none;
+  display: inline-flex;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--ol8-color-icon-secondary);
+  cursor: pointer;
+}
+.ol8-field__trailing-action:disabled { color: var(--ol8-color-icon-disabled); cursor: not-allowed; }
+
+/* ---- Size ------------------------------------------------------------- */
+.ol8-field[data-ol8-size="compact"] {
+  --_height: var(--ol8-component-textfield-height-compact);
+  --_inset:  var(--ol8-component-textfield-inset-compact);
+  --_radius: var(--ol8-component-textfield-radius-compact);
+  --_content-size: var(--ol8-font-size-012);
+  --_content-line: var(--ol8-font-line-018);
+}
+.ol8-field[data-ol8-size="standard"] {
+  --_height: var(--ol8-component-textfield-height-standard);
+  --_inset:  var(--ol8-component-textfield-inset-standard);
+  --_radius: var(--ol8-component-textfield-radius-standard);
+  --_content-size: var(--ol8-font-size-016);
+  --_content-line: var(--ol8-font-line-024);
+}
+/* Comfortable grows its box and keeps the standard reading size, which is what
+   Figma's Content set does at this step. */
+.ol8-field[data-ol8-size="comfortable"] {
+  --_height: var(--ol8-component-textfield-height-comfortable);
+  --_inset:  var(--ol8-component-textfield-inset-comfortable);
+  --_radius: var(--ol8-component-textfield-radius-comfortable);
+  --_content-size: var(--ol8-font-size-016);
+  --_content-line: var(--ol8-font-line-024);
+}
+.ol8-field[data-ol8-size="large"] {
+  --_height: var(--ol8-component-textfield-height-large);
+  --_inset:  var(--ol8-component-textfield-inset-large);
+  --_radius: var(--ol8-component-textfield-radius-large);
+  --_content-size: var(--ol8-font-size-021);
+  --_content-line: var(--ol8-font-line-030);
+}
+
+/* ---- Appearance ------------------------------------------------------- */
+.ol8-field[data-ol8-appearance="filled"] {
+  --_surface: var(--ol8-color-surface-sunken);
+  --_border:  var(--ol8-color-border-subtle);
+}
+
+/* ---- Condition, carried by the real input ----------------------------- */
+/* Base condition precedence is Disabled, then Read only, then Invalid, then
+   Default. Hover is an overlay that renders only above Default or Invalid, and
+   only for a fine pointer. */
+@media (hover: hover) and (pointer: fine) {
+  .ol8-field:hover:not([data-ol8-disabled]):not([data-ol8-readonly]) .ol8-field__control {
+    --_border: var(--ol8-color-border-strong);
+  }
+}
+
+.ol8-field[data-ol8-readonly] .ol8-field__control { --_border: var(--ol8-color-border-subtle); }
+
+/* Focus never suppresses Invalid; the focus edge is added on top of it. */
+.ol8-field[data-ol8-invalid] .ol8-field__control,
+.ol8-field:has(.ol8-field__input[aria-invalid="true"]) .ol8-field__control {
+  --_border: var(--ol8-color-feedbackcritical-inlinecontent);
+}
+
+.ol8-field[data-ol8-disabled] {
+  --_label: var(--ol8-color-text-disabled);
+  --_muted: var(--ol8-color-text-disabled);
+  --_ink:   var(--ol8-color-text-disabled);
+}
+.ol8-field[data-ol8-disabled] .ol8-field__control {
+  --_surface: var(--ol8-color-surface-disabled);
+  --_border:  var(--ol8-color-border-disabled);
+}
+.ol8-field[data-ol8-disabled] .ol8-field__input { cursor: not-allowed; }
+.ol8-field[data-ol8-disabled] .ol8-field__leading-icon { color: var(--ol8-color-icon-disabled); }
+
+/* ---- Focus -----------------------------------------------------------
+   Figma draws a Focus Edge sibling that is shown only while focused, at the
+   Focus Ring Inner Width in the outer focus colour. The stack owns it so the
+   edge cannot change the control's own metrics. */
+.ol8-field__control-stack::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--_radius);
+  box-shadow: inset 0 0 0 var(--ol8-focus-ring-innerwidth) var(--ol8-color-focus-outer);
+  opacity: 0;
+  pointer-events: none;
+  transition-property: opacity;
+  transition-duration: var(--ol8-motion-interaction-focus-duration);
+  transition-timing-function: var(--ol8-motion-interaction-focus-timing-function);
+}
+.ol8-field:has(.ol8-field__input:focus-visible) .ol8-field__control-stack::after { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ol8-field__control,
+  .ol8-field__control-stack::after { transition-duration: var(--ol8-motion-duration-instant); }
+}
+
+/* ---- Instruction, message and counter --------------------------------- */
+.ol8-field__instruction {
+  color: var(--_muted);
+  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);
+  letter-spacing: var(--ol8-font-tracking-open);
+}
+
+/* The message and the counter share one row, counter at the logical inline end.
+   At a narrow width or with enlarged text the counter wraps below the message in
+   source order, and the row gap becomes the tighter status step. The counter is
+   never hidden merely because a message appeared. */
+.ol8-field__supporting {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  column-gap: var(--ol8-component-textfield-gap-messagecounter);
+  row-gap: var(--ol8-component-textfield-gap-status);
+}
+.ol8-field__supporting-spacer { flex: 1 1 auto; }
+
+/* Counter is information, not validation, so it never takes a feedback colour. */
+.ol8-field__counter {
+  flex: none;
+  color: var(--_muted);
+  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);
+  letter-spacing: var(--ol8-font-tracking-open);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (forced-colors: active) {
+  .ol8-field__control { border-color: ButtonBorder; }
+  .ol8-field:has(.ol8-field__input:focus-visible) .ol8-field__control-stack::after {
+    box-shadow: inset 0 0 0 var(--ol8-focus-ring-innerwidth) Highlight;
+  }
+}

package/src/styles/token.css

@@ -0,0 +1,65 @@
+/* GENERATED from packages/core/src/molecules/token/token.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 · Token (MOLECULE)
+ * Figma: Select and Combobox / Molecule / Token 897:2106 (24 variants)
+ *
+ * The silhouette, sizes and colours all come from the Choice Chip stylesheet,
+ * because Figma's Token instantiates the Choice Chip Geometry Owner rather than
+ * redrawing it. Every rule here is about the one axis Token adds: the Mark.
+ */
+
+/* A token is content, not a control. Only its Remove mark is interactive. */
+.ol8-token.ol8-chip { cursor: default; }
+
+/* ---- Remove ---------------------------------------------------------- */
+.ol8-token__remove {
+  position: relative;      /* anchors the expanded target below */
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  /* The ring follows the mark, not the chip: the chip is not the target. */
+  border-radius: var(--ol8-shape-radius-full);
+}
+
+/* The mark is drawn at 18 because that is what Figma draws, but the contract
+   asks for a target of at least 24 that does not overlap anything. The target
+   is expanded with a pseudo element so the drawn size and the reachable size
+   can differ without moving the label: it grows 3 into the 9 gap on one side
+   and into the rail inset on the other, so it still touches neither. */
+.ol8-token__remove::before {
+  content: "";
+  position: absolute;
+  inline-size: var(--ol8-component-choice-chip-mark-target);
+  block-size: var(--ol8-component-choice-chip-mark-target);
+  transform: translate(-50%, -50%);
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+}
+
+.ol8-token__remove:focus-visible {
+  outline: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  outline-offset: var(--ol8-focus-ring-offset);
+}
+
+/* ---- Mark size parity ------------------------------------------------
+   The two marks have to read as one size, and they did not. The Icon Library's
+   cross spans 12 x 12 in the canonical 24 space while the check spans
+   10.2 x 6.9, so drawn at one frame size the cross was fifteen percent wider
+   and well over half again as tall, and it swamped the check beside it.
+
+   Figma does not draw it that way: its Remove mark is an Icon Frame instance at
+   18, so the cross comes out at 9 x 9 there, a little narrower than the check
+   and balanced against it. The oversized cross was this stylesheet rendering
+   the library source at full size, not a decision in the design.
+
+   So the cross is scaled to the 9 span Figma draws. The stroke does not follow
+   it: it is a non scaling stroke, so it stays the governed 1.8 that every glyph
+   in the system uses, which is also what Figma keeps. */
+.ol8-token__remove > svg > * {
+  transform: scale(0.75);        /* 9 / 12, the span Figma draws */
+  transform-box: fill-box;
+  transform-origin: center;
+}

package/styles.css

@@ -1,13 +1,29 @@
-/* OneLi8 · complete stylesheet for @oneli8/react.
+/* GENERATED by packages/sync/src/build-styles.mjs — do not edit.
+   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 "./src/styles/icon.css";
+@import "./src/styles/navigation-badge.css";
 @import "./src/styles/selection-indicator.css";
 @import "./src/styles/button.css";
-@import "./src/styles/icon-button.css";
+@import "./src/styles/choice-chip.css";
 @import "./src/styles/choice-item.css";
+@import "./src/styles/form-message.css";
+@import "./src/styles/icon-button.css";
+@import "./src/styles/link.css";
+@import "./src/styles/navigation-item.css";
+@import "./src/styles/select.css";
 @import "./src/styles/selection-option.css";
+@import "./src/styles/text-field.css";
+@import "./src/styles/token.css";
 @import "./src/styles/choice-group.css";
+@import "./src/styles/choice-picker.css";
+@import "./src/styles/combobox.css";
+@import "./src/styles/multi-select-field.css";
+@import "./src/styles/segmented-control.css";
+@import "./src/styles/selection-popup.css";
+@import "./src/styles/tab-bar.css";
+@import "./src/styles/tabs.css";
 @import "./src/styles/gem.css";