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

package/README.md

@@ -26,13 +26,15 @@ hydrateButtons();
 
 | Tier | Component |
 |---|---|
-| Atom | `Icon`, `Selection Indicator` (checkbox, radio, switch) |
-| Molecule | `Button`, `Icon Button`, `Choice Item`, `Selection Option` |
-| Organism | `Choice Group` (checkbox hierarchy, radio group) |
+| Atom | `Icon`, `Selection Indicator` (checkbox, radio, switch), `Navigation Badge` |
+| Molecule | `Button`, `Icon Button`, `Link`, `Text Field`, `Form Message`, `Select`, `Choice Item`, `Selection Option`, `Choice Chip`, `Token` |
+| Organism | `Tabs`, `Tab Bar`, `Segmented Control`, `Choice Group`, `Selection Popup`, `Combobox`, `Multi-select Field`, `Choice Picker` |
 | Material | `Gem`, an attribute adapter, not a tier |
 
-Anything not listed is not exported. Tokens exist for component families whose
-implementations are not in this release; a token is not a promise of a component.
+Twenty one components, every one of them drawn from a component set in the
+Figma file rather than invented here. Anything not listed is not exported.
+Tokens exist for families whose implementations are not in this release; a token
+is not a promise of a component.
 
 ## Why this exists
 
@@ -70,8 +72,18 @@ what markup genuinely cannot express:
 - A `<button>` without an explicit `type` submits its form. Hydration pins it.
 - Links cannot be natively disabled, so they get `aria-disabled` and their
   activation is swallowed.
-
-Hydration is idempotent, running it twice changes nothing.
+- Tabs and Segmented Control move one tab stop across their items with the
+  arrow keys, which is a roving focus model markup cannot describe.
+- Combobox keeps real focus on its input and carries the active option as a
+  virtual cursor, so the cursor has to be moved in script.
+- Multi-select Field walks its committed values with the arrow keys and takes
+  two presses to remove one, so a stray Backspace cannot drop a value.
+- Choice Picker in Apply mode commits on Enter and restores on Escape, and
+  leaves a composing input method alone.
+
+Fifteen `hydrate*` functions ship, one per family that needs one. Hydration is
+idempotent, running it twice changes nothing, and a page that never calls it
+still renders and still reads correctly.
 
 ## Styles
 

package/ai-context.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
   "system": "OneLi8",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",
@@ -46,6 +46,14 @@
       ],
       "constraint": "Composes no other component. Native elements only."
     },
+    {
+      "tier": "atom",
+      "module": "atoms/navigation-badge/navigation-badge.js",
+      "exports": [
+        "renderNavigationBadge"
+      ],
+      "constraint": "Composes no other component. Native elements only."
+    },
     {
       "tier": "atom",
       "module": "atoms/selection-indicator/selection-indicator.js",
@@ -72,6 +80,17 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/choice-chip/choice-chip.js",
+      "exports": [
+        "OL8_CHIP_SIZES",
+        "renderChoiceChip",
+        "hydrateChoiceChips",
+        "syncChip"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/choice-item/choice-item.js",
@@ -87,6 +106,17 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/form-message/form-message.js",
+      "exports": [
+        "OL8_FORM_MESSAGE_TONES",
+        "OL8_FORM_MESSAGE_ICONS",
+        "renderFormMessage",
+        "hydrateFormMessages"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/icon-button/icon-button.js",
@@ -100,6 +130,30 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/link/link.js",
+      "exports": [
+        "OL8_LINK_FORMS",
+        "OL8_LINK_SIZES",
+        "OL8_LINK_MOTIONS",
+        "renderLink",
+        "hydrateLinks"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
+    {
+      "tier": "molecule",
+      "module": "molecules/select/select.js",
+      "exports": [
+        "OL8_SELECT_SIZES",
+        "OL8_SELECT_APPEARANCES",
+        "OL8_SELECT_MATERIALS",
+        "OL8_SELECT_NATIVE_POLICIES",
+        "renderSelect"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/selection-option/selection-option.js",
@@ -111,6 +165,34 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/text-field/text-field.js",
+      "exports": [
+        "OL8_TEXT_FIELD_SIZES",
+        "OL8_TEXT_FIELD_APPEARANCES",
+        "OL8_TEXT_FIELD_MATERIALS",
+        "OL8_MESSAGE_TONES",
+        "OL8_VALIDATION_STATUSES",
+        "OL8_CHARACTER_LIMIT_BEHAVIORS",
+        "renderTextField",
+        "hydrateTextFields",
+        "countGraphemes",
+        "clipToGraphemes"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
+    {
+      "tier": "molecule",
+      "module": "molecules/token/token.js",
+      "exports": [
+        "OL8_TOKEN_SIZES",
+        "OL8_TOKEN_MARKS",
+        "resolveTokenMark",
+        "renderToken"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "organism",
       "module": "organisms/choice-group/choice-group.js",
@@ -122,6 +204,91 @@
         "hydrateChoiceGroups"
       ],
       "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/choice-picker/choice-picker.js",
+      "exports": [
+        "OL8_PICKER_SIZES",
+        "OL8_PICKER_MATERIALS",
+        "OL8_COMMIT_BEHAVIORS",
+        "OL8_PICKER_PRESENTATIONS",
+        "OL8_PICKER_MARKS",
+        "renderChoicePicker",
+        "hydrateChoicePickers"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/combobox/combobox.js",
+      "exports": [
+        "OL8_COMBOBOX_SIZES",
+        "OL8_COMBOBOX_APPEARANCES",
+        "OL8_COMBOBOX_MATERIALS",
+        "OL8_AUTOCOMPLETE_MODES",
+        "OL8_FILTER_SOURCES",
+        "renderCombobox",
+        "hydrateComboboxes"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/multi-select-field/multi-select-field.js",
+      "exports": [
+        "OL8_MULTI_SELECT_SIZES",
+        "OL8_MULTI_SELECT_APPEARANCES",
+        "OL8_MULTI_SELECT_MATERIALS",
+        "renderMultiSelectField",
+        "hydrateMultiSelectFields"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/segmented-control/segmented-control.js",
+      "exports": [
+        "OL8_SEGMENT_BEHAVIORS",
+        "OL8_SEGMENT_PRESENTATIONS",
+        "renderSegmentedControl",
+        "hydrateSegmentedControls"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/selection-popup/selection-popup.js",
+      "exports": [
+        "OL8_POPUP_WIDTHS",
+        "OL8_POPUP_SIZES",
+        "OL8_POPUP_STATUSES",
+        "renderSelectionPopup"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/tab-bar/tab-bar.js",
+      "exports": [
+        "OL8_TAB_BAR_PRESENTATIONS",
+        "renderTabBar",
+        "hydrateTabBars"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/tabs/tabs.js",
+      "exports": [
+        "OL8_TABS_HIERARCHIES",
+        "OL8_TABS_ORIENTATIONS",
+        "OL8_TABS_ACTIVATIONS",
+        "renderTabs",
+        "renderTabPanel",
+        "hydrateTabs"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
     }
   ],
   "buildingWhatIsNotHere": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneli8/core",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "OneLi8 Design System, framework agnostic. renderX returns an HTML string, hydrateX wires existing DOM. Ships the design language and the rules it follows.",
   "keywords": [
     "design-system",
@@ -46,12 +46,27 @@
     },
     "./styles.css": "./styles.css",
     "./styles/icon.css": "./src/atoms/icon/icon.css",
+    "./styles/navigation-badge.css": "./src/atoms/navigation-badge/navigation-badge.css",
     "./styles/selection-indicator.css": "./src/atoms/selection-indicator/selection-indicator.css",
     "./styles/button.css": "./src/molecules/button/button.css",
-    "./styles/icon-button.css": "./src/molecules/icon-button/icon-button.css",
+    "./styles/choice-chip.css": "./src/molecules/choice-chip/choice-chip.css",
     "./styles/choice-item.css": "./src/molecules/choice-item/choice-item.css",
+    "./styles/form-message.css": "./src/molecules/form-message/form-message.css",
+    "./styles/icon-button.css": "./src/molecules/icon-button/icon-button.css",
+    "./styles/link.css": "./src/molecules/link/link.css",
+    "./styles/navigation-item.css": "./src/molecules/navigation-item/navigation-item.css",
+    "./styles/select.css": "./src/molecules/select/select.css",
     "./styles/selection-option.css": "./src/molecules/selection-option/selection-option.css",
+    "./styles/text-field.css": "./src/molecules/text-field/text-field.css",
+    "./styles/token.css": "./src/molecules/token/token.css",
     "./styles/choice-group.css": "./src/organisms/choice-group/choice-group.css",
+    "./styles/choice-picker.css": "./src/organisms/choice-picker/choice-picker.css",
+    "./styles/combobox.css": "./src/organisms/combobox/combobox.css",
+    "./styles/multi-select-field.css": "./src/organisms/multi-select-field/multi-select-field.css",
+    "./styles/segmented-control.css": "./src/organisms/segmented-control/segmented-control.css",
+    "./styles/selection-popup.css": "./src/organisms/selection-popup/selection-popup.css",
+    "./styles/tab-bar.css": "./src/organisms/tab-bar/tab-bar.css",
+    "./styles/tabs.css": "./src/organisms/tabs/tabs.css",
     "./styles/gem.css": "./src/materials/gem/gem.css",
     "./package.json": "./package.json",
     "./ai-context.json": "./ai-context.json",
@@ -74,7 +89,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@oneli8/tokens": "1.0.0-beta.5"
+    "@oneli8/tokens": "1.0.0-beta.6"
   },
   "engines": {
     "node": ">=20"

package/src/atoms/index.d.ts

@@ -1,2 +1,3 @@
 export * from './icon/index.js';
 export * from './selection-indicator/index.js';
+export * from './navigation-badge/index.js';

package/src/atoms/index.js

@@ -1,2 +1,3 @@
 export * from './icon/index.js';
 export * from './selection-indicator/index.js';
+export * from './navigation-badge/index.js';

package/src/atoms/navigation-badge/index.d.ts

@@ -0,0 +1 @@
+export * from './navigation-badge.js';

package/src/atoms/navigation-badge/index.js

@@ -0,0 +1 @@
+export { renderNavigationBadge } from './navigation-badge.js';

package/src/atoms/navigation-badge/navigation-badge.css

@@ -0,0 +1,35 @@
+/**
+ * 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/atoms/navigation-badge/navigation-badge.d.ts

@@ -0,0 +1,5 @@
+/** Navigation Badge (ATOM). Figma 989:484. One atom serves all three navigation organisms. */
+export interface Ol8NavigationBadgeOptions { className?: string }
+
+/** @throws when there is nothing to say. */
+export declare function renderNavigationBadge(label: string | number, options?: Ol8NavigationBadgeOptions): string;

package/src/atoms/navigation-badge/navigation-badge.js

@@ -0,0 +1,21 @@
+/**
+ * Oneli8 · Navigation Badge — headless behavior.
+ *
+ * Figma (989:484): "Canonical optional navigation badge. Content comes from
+ * item.badge; geometry and colors are semantic token controlled."
+ *
+ * One atom serves Tabs, Segmented Control and Tab Bar. None of them owns a
+ * private copy of it.
+ */
+export function renderNavigationBadge(label, options = {}) {
+  const { className } = options;
+  const text = String(label ?? '');
+  if (text === '') throw new Error('[ol8] a navigation badge with nothing to say should not be rendered at all.');
+
+  // The count is decoration beside a label that already names the destination,
+  // so the badge is not announced twice. A product that needs it announced
+  // spells it into the item's own accessible name.
+  return `<span class="ol8-nav-badge${className ? ` ${className}` : ''}" aria-hidden="true">${escapeText(text)}</span>`;
+}
+
+function escapeText(v) { return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

package/src/atoms/selection-indicator/selection-indicator.css

@@ -71,12 +71,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/materials/gem/gem.css

@@ -32,7 +32,8 @@
  */
 
 .ol8-btn[data-ol8-material="gem"],
-.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface {
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface,
+.ol8-field[data-ol8-material="gem"] > .ol8-field__control-stack > .ol8-field__control {
   position: relative;
   isolation: isolate;
   --_rim: var(--ol8-material-control-gem-rim-default);
@@ -41,7 +42,8 @@
 /* The regular opaque background stays underneath on purpose — it is what
    shows through when the gem layer is suppressed for Reduced Transparency. */
 .ol8-btn[data-ol8-material="gem"]::before,
-.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before {
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before,
+.ol8-field[data-ol8-material="gem"] .ol8-field__control::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -58,7 +60,8 @@
 }
 
 .ol8-btn[data-ol8-material="gem"]::after,
-.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after {
+.ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after,
+.ol8-field[data-ol8-material="gem"] .ol8-field__control::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -143,9 +146,48 @@
   --_g3: var(--ol8-material-control-gem-secondary-loadinglow);
 }
 
+/* ---- Text Field · the same Secondary body, per Figma 211:36 and 215:226 ---
+   Outline follows the Cut Edge, Filled sits on the Stabilized Face and follows
+   the Inner Thin Cut. Hover moves Filled onto the Cut Edge. Invalid keeps the
+   critical boundary, because a material must never hide a validation result. */
+.ol8-field[data-ol8-material="gem"] .ol8-field__control {
+  --_g1: var(--ol8-material-control-gem-secondary-high);
+  --_g2: var(--ol8-material-control-gem-secondary-mid);
+  --_g3: var(--ol8-material-control-gem-secondary-low);
+  --_surface: transparent;
+  --_border: var(--ol8-material-gem-color-cutedge-high);
+}
+.ol8-field[data-ol8-material="gem"]:hover:not([data-ol8-disabled]) .ol8-field__control {
+  --_g1: var(--ol8-material-control-gem-secondary-hoverhigh);
+  --_g2: var(--ol8-material-control-gem-secondary-hovermid);
+  --_g3: var(--ol8-material-control-gem-secondary-hoverlow);
+  --_rim: var(--ol8-material-control-gem-rim-hover);
+  --_border: var(--ol8-material-gem-color-cutedge-high);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-appearance="filled"] .ol8-field__control {
+  --_surface: var(--ol8-material-gem-color-quiet-stabilizedface);
+  --_border: var(--ol8-material-gem-color-innerthincut-high);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-readonly][data-ol8-appearance="filled"] .ol8-field__control {
+  --_border: var(--ol8-material-gem-color-innerthincut-high);
+}
+.ol8-field[data-ol8-material="gem"]:has(.ol8-field__input[aria-invalid="true"]) .ol8-field__control,
+.ol8-field[data-ol8-material="gem"][data-ol8-status="invalid"] .ol8-field__control {
+  --_border: var(--ol8-color-feedbackcritical-inlinecontent);
+}
+/* Disabled resolves to the opaque equivalent, which is the same answer Reduced
+   Transparency gives. */
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] .ol8-field__control {
+  --_surface: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+  --_border: var(--ol8-color-border-disabled);
+}
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] .ol8-field__control::before,
+.ol8-field[data-ol8-material="gem"][data-ol8-disabled] .ol8-field__control::after { display: none; }
+
 /* Content must sit above the ::before body. */
 .ol8-btn[data-ol8-material="gem"] > *,
-.ol8-icon-btn[data-ol8-material="gem"] .ol8-icon { position: relative; z-index: 0; }
+.ol8-icon-btn[data-ol8-material="gem"] .ol8-icon,
+.ol8-field[data-ol8-material="gem"] .ol8-field__control > * { position: relative; z-index: 0; }
 
 /* ---- Disabled inherits the regular opaque treatment ------------------ */
 .ol8-btn[data-ol8-material="gem"]:disabled::before,
@@ -160,7 +202,12 @@
   .ol8-btn[data-ol8-material="gem"]::before,
   .ol8-btn[data-ol8-material="gem"]::after,
   .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::before,
-  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after { display: none; }
+  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface::after,
+  .ol8-field[data-ol8-material="gem"] .ol8-field__control::before,
+  .ol8-field[data-ol8-material="gem"] .ol8-field__control::after { display: none; }
+  .ol8-field[data-ol8-material="gem"] .ol8-field__control {
+    --_surface: var(--ol8-material-gem-color-quiet-opaqueequivalent);
+  }
   .ol8-btn--secondary[data-ol8-material="gem"] {
     --_bw: var(--ol8-component-button-secondaryboundary);
     --_bd: var(--ol8-color-actionsecondary-contentdefault);