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

package/README.md

@@ -19,11 +19,15 @@ export function Actions() {
 
 | Tier | Components |
 |---|---|
-| Atom | `Icon`, `SelectionIndicator` |
-| Molecule | `Button`, `IconButton`, `ChoiceItem`, `SelectionOption` |
-| Organism | `RadioGroup`, `CheckboxGroup` |
+| Atom | `Icon`, `SelectionIndicator`, `NavigationBadge` |
+| Molecule | `Button`, `IconButton`, `Link`, `TextField`, `FormMessage`, `Select`, `ChoiceItem`, `SelectionOption`, `ChoiceChip`, `Token` |
+| Organism | `Tabs`, `TabBar`, `SegmentedControl`, `RadioGroup`, `CheckboxGroup`, `SelectionPopup`, `Combobox`, `MultiSelectField`, `ChoicePicker` |
 | Material | Gem, an attribute adapter rather than a tier |
 
+Twenty one components, matching `@oneli8/core` one for one. Both packages are
+checked against each other on every build, so the two cannot answer differently
+about a role, a name, a relationship or a state.
+
 ## The system travels with the package
 
 If you need a component OneLi8 does not ship, build it from these foundations
@@ -48,6 +52,32 @@ Point your agent at them:
 Read @oneli8/react/ai-context.json and PRINCIPLES.md before writing any OneLi8 UI.
 ```
 
+## Why this exists
+
+OneLi8 means One Light. It was created by Akshay Dhore, intended for broad human
+benefit and conceived as service to Guruji Shrii Arnav, whose teachings inspire
+it. Service, clarity, harmony, proportion, restraint and evolution guide its
+decisions. `PRINCIPLES.md` ships inside this package and sets them out in full.
+
+The practical intention: most design systems hand you components and hope you
+stay inside them. This one hands you the reasoning too, so when you need
+something it does not ship you can build it and have it still belong.
+
+## Naming
+
+The structure is borrowed from Sanskrit grammar rather than a CSS convention.
+
+**A compound naming one thing is one word.** `actionprimary` is not action plus
+primary, it is a single role. `cutedge` is one feature of the Gem material.
+
+**A qualifier stays separate from what it qualifies.** In
+`--ol8-material-control-gem--primary-hover-start`, `hover` is a state applied to
+`start`, so it keeps its hyphen. That is why `disabledcontent` is joined and
+`hover-start` is not.
+
+Hyphens separate levels of the hierarchy, never words inside a level. The words
+themselves stay readable: no abbreviations and no truncation.
+
 ## Rules that matter most
 
 Reach for a **semantic** token, never a primitive and never a literal.
@@ -58,7 +88,7 @@ Every dimension sits on the **3px grid**. An exception needs an approval record.
 
 Icons come from the pool. `OL8_ICONS` is the whole set, an invented name throws.
 A new glyph is a 24px neutral source on the shared **1.8 stroke**, never a
-per-size stroke.
+per size stroke.
 
 Margins belong to the parent, never to the component.
 

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.4",
+  "version": "1.0.0-beta.6",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",
@@ -42,6 +42,14 @@
       ],
       "constraint": "Composes no other component. Native elements only."
     },
+    {
+      "tier": "atom",
+      "module": "atoms/NavigationBadge.js",
+      "exports": [
+        "NavigationBadge"
+      ],
+      "constraint": "Composes no other component. Native elements only."
+    },
     {
       "tier": "atom",
       "module": "atoms/SelectionIndicator.js",
@@ -58,6 +66,14 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/ChoiceChip.js",
+      "exports": [
+        "ChoiceChip"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/ChoiceItem.js",
@@ -66,6 +82,14 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/FormMessage.js",
+      "exports": [
+        "FormMessage"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/IconButton.js",
@@ -74,6 +98,23 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/Link.js",
+      "exports": [
+        "Link"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
+    {
+      "tier": "molecule",
+      "module": "molecules/Select.js",
+      "exports": [
+        "OL8_SELECT_NATIVE_POLICIES",
+        "Select"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "molecule",
       "module": "molecules/SelectionOption.js",
@@ -82,6 +123,24 @@
       ],
       "constraint": "Composed of atoms. Reusable and more specialised."
     },
+    {
+      "tier": "molecule",
+      "module": "molecules/TextField.js",
+      "exports": [
+        "TextField",
+        "countGraphemes",
+        "clipToGraphemes"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
+    {
+      "tier": "molecule",
+      "module": "molecules/Token.js",
+      "exports": [
+        "Token"
+      ],
+      "constraint": "Composed of atoms. Reusable and more specialised."
+    },
     {
       "tier": "organism",
       "module": "organisms/ChoiceGroup.js",
@@ -90,6 +149,62 @@
         "CheckboxGroup"
       ],
       "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/ChoicePicker.js",
+      "exports": [
+        "ChoicePicker"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/Combobox.js",
+      "exports": [
+        "Combobox"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/MultiSelectField.js",
+      "exports": [
+        "MultiSelectField"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/SegmentedControl.js",
+      "exports": [
+        "SegmentedControl"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/SelectionPopup.js",
+      "exports": [
+        "SelectionPopup"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/TabBar.js",
+      "exports": [
+        "TabBar"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
+    },
+    {
+      "tier": "organism",
+      "module": "organisms/Tabs.js",
+      "exports": [
+        "Tabs"
+      ],
+      "constraint": "Composed of atoms, molecules or organisms. May hold application state."
     }
   ],
   "buildingWhatIsNotHere": {

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@oneli8/react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "OneLi8 Design System for React. Components, design tokens, the Gem material, and the design language they follow.",
-  "keywords": ["react", "design-system", "components", "design-tokens", "accessibility", "atomic-design", "oneli8"],
+  "keywords": [
+    "react",
+    "design-system",
+    "components",
+    "design-tokens",
+    "accessibility",
+    "atomic-design",
+    "oneli8"
+  ],
   "homepage": "https://github.com/Akshay007ad/OneLi8-Design-System#readme",
-  "bugs": { "url": "https://github.com/Akshay007ad/OneLi8-Design-System/issues" },
+  "bugs": {
+    "url": "https://github.com/Akshay007ad/OneLi8-Design-System/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Akshay007ad/OneLi8-Design-System.git",
@@ -14,7 +24,11 @@
   "author": "Akshay Dhore",
   "type": "module",
   "exports": {
-    ".": { "types": "./src/index.d.ts", "import": "./src/index.js", "default": "./src/index.js" },
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
     "./styles.css": "./styles.css",
     "./styles/*.css": "./src/styles/*.css",
     "./ai-context.json": "./ai-context.json",
@@ -22,7 +36,10 @@
     "./package.json": "./package.json"
   },
   "types": "./src/index.d.ts",
-  "sideEffects": ["./styles.css", "**/*.css"],
+  "sideEffects": [
+    "./styles.css",
+    "**/*.css"
+  ],
   "files": [
     "src",
     "styles.css",
@@ -35,11 +52,15 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@oneli8/tokens": "1.0.0-beta.4"
+    "@oneli8/tokens": "1.0.0-beta.6"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "engines": { "node": ">=20" },
-  "publishConfig": { "access": "public" }
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/atoms/NavigationBadge.js

@@ -0,0 +1,19 @@
+import { createElement, forwardRef } from 'react';
+
+/**
+ * ATOM. Figma 989:484: "Content comes from item.badge; geometry and colors are
+ * semantic token controlled." One atom serves all three navigation organisms.
+ *
+ * The count sits beside a label that already names the destination, so it is
+ * not announced twice. A product that needs it announced spells it into the
+ * item's own accessible name.
+ */
+export const NavigationBadge = forwardRef(function NavigationBadge({ children, className = '', ...rest }, ref) {
+  if (children === undefined || children === null || children === '') {
+    throw new Error('[ol8] a navigation badge with nothing to say should not be rendered at all.');
+  }
+  return createElement('span', {
+    ...rest, ref, 'aria-hidden': 'true',
+    className: `ol8-nav-badge${className ? ` ${className}` : ''}`,
+  }, children);
+});

package/src/foundations/geometry.js

@@ -28,7 +28,78 @@ export const OL8_SELECTION_STATES = {
 
 export const OL8_CHOICE_KINDS = OL8_SELECTION_KINDS;
 export const OL8_CHOICE_SIZES = OL8_BUTTON_SIZES;
+export const OL8_LINK_FORMS = ['inline', 'standalone', 'navigation'];
+export const OL8_LINK_SIZES = ['small', 'standard', 'large'];
+export const OL8_LINK_MOTIONS = ['system', 'none'];
+
+export const OL8_TEXT_FIELD_SIZES = OL8_BUTTON_SIZES;
+export const OL8_TEXT_FIELD_APPEARANCES = ['outline', 'filled'];
+export const OL8_TEXT_FIELD_MATERIALS = OL8_MATERIALS;
+/** The four tones a message can carry. Pending is not one of them. */
+export const OL8_MESSAGE_TONES = ['critical', 'caution', 'positive', 'informative'];
+/** "Pending is a validation process status, not a fifth message tone." */
+export const OL8_VALIDATION_STATUSES = ['idle', 'pending', 'resolved'];
+/** Soft lets a person overshoot and then correct. Hard is for real technical limits. */
+export const OL8_CHARACTER_LIMIT_BEHAVIORS = ['soft', 'hard'];
+
+/** Form Message itself draws all five, because Figma 177:13 enumerates five. */
+export const OL8_FORM_MESSAGE_TONES = [...OL8_MESSAGE_TONES, 'pending'];
+/** Figma pairs one status icon with each tone (Form Message 177:13). */
+export const OL8_FORM_MESSAGE_ICONS = {
+  critical: 'critical',
+  caution: 'caution',
+  positive: 'positive',
+  informative: 'informative',
+  pending: 'loading',
+};
+
+export const OL8_NAVIGATION_SIZES = OL8_BUTTON_SIZES;
+export const OL8_TABS_HIERARCHIES = ['primary', 'secondary', 'tertiary'];
+export const OL8_TABS_ORIENTATIONS = ['horizontal', 'vertical'];
+export const OL8_TABS_ACTIVATIONS = ['automatic', 'manual'];
+/** "Declare exactly one behavior." */
+export const OL8_SEGMENT_BEHAVIORS = ['single', 'multi', 'momentary'];
+/** "Presentation never changes behavior." */
+export const OL8_SEGMENT_PRESENTATIONS = [
+  'inset-fill', 'line-indicator', 'outlined-selection', 'soft-pill', 'icon-only', 'stacked-label',
+];
+export const OL8_TAB_BAR_PRESENTATIONS = ['bottom', 'inline', 'sidebar', 'spatial-rail'];
+
+export const OL8_CHIP_SIZES = OL8_BUTTON_SIZES;
+export const OL8_TOKEN_SIZES = OL8_CHIP_SIZES;
+/** Figma draws the last three; `auto` resolves to one of them in code. */
+export const OL8_TOKEN_MARKS = ['auto', 'none', 'check', 'remove'];
+
+/** The contract's resolution, stated once so both packages agree. */
+export function resolveTokenMark(mark, { removable = true, selected = false } = {}) {
+  if (mark !== 'auto') return mark;
+  if (removable) return 'remove';
+  return selected ? 'check' : 'none';
+}
+
 export const OL8_OPTION_SIZES = ['standard', 'large'];
+export const OL8_POPUP_WIDTHS = ['content', 'anchor', 'wide'];
+export const OL8_POPUP_SIZES = OL8_OPTION_SIZES;
+export const OL8_MULTI_SELECT_SIZES = OL8_BUTTON_SIZES;
+export const OL8_MULTI_SELECT_APPEARANCES = ['outline', 'filled'];
+export const OL8_MULTI_SELECT_MATERIALS = OL8_MATERIALS;
+/** Constrained resolves from a known set; suggestive may also author values. */
+export const OL8_VALUE_POLICIES = ['constrained', 'suggestive'];
+
+export const OL8_COMBOBOX_SIZES = OL8_BUTTON_SIZES;
+export const OL8_COMBOBOX_APPEARANCES = ['outline', 'filled'];
+export const OL8_COMBOBOX_MATERIALS = OL8_MATERIALS;
+export const OL8_AUTOCOMPLETE_MODES = ['none', 'list-manual', 'list-automatic'];
+export const OL8_FILTER_SOURCES = ['local', 'remote', 'external'];
+
+export const OL8_PICKER_SIZES = OL8_BUTTON_SIZES;
+export const OL8_PICKER_MATERIALS = OL8_MATERIALS;
+export const OL8_COMMIT_BEHAVIORS = ['immediate', 'apply'];
+export const OL8_PICKER_PRESENTATIONS = ['inline', 'popup'];
+/** One treatment across an instance; peers never mix Check and None. */
+export const OL8_PICKER_MARKS = ['check', 'none'];
+
+export const OL8_POPUP_STATUSES = ['none', 'loading', 'empty', 'error'];
 export const OL8_AGGREGATE = ['none', 'some', 'all'];
 
 /** Compact and Standard take the 18px icon; Comfortable and Large take 24px. */

package/src/index.d.ts

@@ -15,6 +15,46 @@ export type Ol8Selection =
   | 'unchecked' | 'checked' | 'mixed'
   | 'unselected' | 'selected'
   | 'off' | 'on';
+export type Ol8LinkForm = 'inline' | 'standalone' | 'navigation';
+export type Ol8LinkSize = 'small' | 'standard' | 'large';
+export type Ol8LinkMotion = 'system' | 'none';
+export declare const OL8_LINK_FORMS: readonly Ol8LinkForm[];
+export declare const OL8_LINK_SIZES: readonly Ol8LinkSize[];
+export declare const OL8_LINK_MOTIONS: readonly Ol8LinkMotion[];
+
+export type Ol8TextFieldSize = 'compact' | 'standard' | 'comfortable' | 'large';
+export type Ol8TextFieldAppearance = 'outline' | 'filled';
+/** Pending is a validation process status, not a fifth message tone. */
+export type Ol8MessageTone = 'critical' | 'caution' | 'positive' | 'informative';
+export type Ol8ValidationStatus = 'idle' | 'pending' | 'resolved';
+export type Ol8CharacterLimitBehavior = 'soft' | 'hard';
+/** Form Message itself draws all five, because Figma 177:13 enumerates five. */
+export type Ol8FormMessageTone = Ol8MessageTone | 'pending';
+export declare const OL8_TEXT_FIELD_SIZES: readonly Ol8TextFieldSize[];
+export declare const OL8_TEXT_FIELD_APPEARANCES: readonly Ol8TextFieldAppearance[];
+export declare const OL8_TEXT_FIELD_MATERIALS: readonly Ol8Material[];
+export declare const OL8_MESSAGE_TONES: readonly Ol8MessageTone[];
+export declare const OL8_VALIDATION_STATUSES: readonly Ol8ValidationStatus[];
+export declare const OL8_CHARACTER_LIMIT_BEHAVIORS: readonly Ol8CharacterLimitBehavior[];
+export declare const OL8_FORM_MESSAGE_TONES: readonly Ol8FormMessageTone[];
+export declare const OL8_FORM_MESSAGE_ICONS: Readonly<Record<Ol8FormMessageTone, string>>;
+
+export type Ol8NavigationSize = 'compact' | 'standard' | 'comfortable' | 'large';
+export type Ol8TabsHierarchy = 'primary' | 'secondary' | 'tertiary';
+export type Ol8TabsOrientation = 'horizontal' | 'vertical';
+export type Ol8TabsActivation = 'automatic' | 'manual';
+export type Ol8SegmentBehavior = 'single' | 'multi' | 'momentary';
+export type Ol8SegmentPresentation =
+  | 'inset-fill' | 'line-indicator' | 'outlined-selection'
+  | 'soft-pill' | 'icon-only' | 'stacked-label';
+export type Ol8TabBarPresentation = 'bottom' | 'inline' | 'sidebar' | 'spatial-rail';
+export declare const OL8_TABS_HIERARCHIES: readonly Ol8TabsHierarchy[];
+export declare const OL8_TABS_ORIENTATIONS: readonly Ol8TabsOrientation[];
+export declare const OL8_TABS_ACTIVATIONS: readonly Ol8TabsActivation[];
+export declare const OL8_SEGMENT_BEHAVIORS: readonly Ol8SegmentBehavior[];
+export declare const OL8_SEGMENT_PRESENTATIONS: readonly Ol8SegmentPresentation[];
+export declare const OL8_TAB_BAR_PRESENTATIONS: readonly Ol8TabBarPresentation[];
+
 export type Ol8OptionSize = 'standard' | 'large';
 export type Ol8Aggregate = 'none' | 'some' | 'all';
 
@@ -113,6 +153,62 @@ export interface ChoiceItemProps extends Omit<ComponentPropsWithoutRef<'input'>,
 }
 export declare const ChoiceItem: ForwardRefExoticComponent<ChoiceItemProps & RefAttributes<HTMLInputElement>>;
 
+/** MOLECULE. States are CSS, never props. Icons are intentionally parked. */
+export interface LinkProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'> {
+  children?: ReactNode;
+  href: string;
+  form?: Ol8LinkForm;
+  size?: Ol8LinkSize;
+  /** Navigation only. `true` emits aria-current="page"; a string names the kind. */
+  current?: boolean | string;
+  motion?: Ol8LinkMotion;
+}
+export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+
+/** MOLECULE. Tone maps to semantic message tone; Pending is the validating state. */
+export interface FormMessageProps extends ComponentPropsWithoutRef<'div'> {
+  children?: ReactNode;
+  tone?: Ol8FormMessageTone;
+  /** Figma's Show Icon. */
+  icon?: boolean;
+}
+export declare const FormMessage: ForwardRefExoticComponent<FormMessageProps & RefAttributes<HTMLDivElement>>;
+
+/** MOLECULE. Conditions are CSS and native state, never props. Gem changes material only. */
+export interface TextFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'prefix'> {
+  /** Required and visible. A placeholder is never the label. */
+  label: string;
+  /** Default Comfortable, the cross platform size. */
+  size?: Ol8TextFieldSize;
+  appearance?: Ol8TextFieldAppearance;
+  material?: Ol8Material;
+  /** False keeps the label as the accessible name without showing it, which needs a documented exception. */
+  showLabel?: boolean;
+  /** Correction is required. Never set without also exposing a Critical message. */
+  invalid?: boolean;
+  leadingIcon?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  trailingAction?: { icon: string; label: string; onClick?: () => void; pressed?: boolean };
+  instruction?: ReactNode;
+  message?: ReactNode;
+  messageTone?: Ol8MessageTone;
+  messageIcon?: boolean;
+  /** Pending shows the loader; it never freezes typing. */
+  validationStatus?: Ol8ValidationStatus;
+  /** Counted in graphemes, so an emoji counts as one. */
+  characterLimit?: number;
+  /** Soft lets a person overshoot and then correct. Hard is for real technical limits. */
+  characterLimitBehavior?: Ol8CharacterLimitBehavior;
+}
+export declare const TextField: ForwardRefExoticComponent<TextFieldProps & RefAttributes<HTMLInputElement>>;
+
+/** Counts what a reader would call characters. */
+export declare function countGraphemes(value: unknown): number;
+
+/** Keeps the first `limit` graphemes, so a cluster is never cut in half. */
+export declare function clipToGraphemes(value: unknown, limit: number): string;
+
 /** MOLECULE. Never focusable; a listbox moves a virtual cursor instead. */
 export interface SelectionOptionProps extends Omit<ComponentPropsWithoutRef<'li'>, 'children'> {
   children?: ReactNode;
@@ -165,3 +261,121 @@ export interface CheckboxGroupProps extends Ol8GroupShell {
   onChange?: (state: Record<string, boolean>) => void;
 }
 export declare function CheckboxGroup(props: CheckboxGroupProps): ReactElement;
+
+/** ATOM. One badge serves all three navigation organisms. */
+export interface NavigationBadgeProps extends ComponentPropsWithoutRef<'span'> {
+  children: ReactNode;
+}
+export declare const NavigationBadge: ForwardRefExoticComponent<NavigationBadgeProps & RefAttributes<HTMLSpanElement>>;
+
+export interface Ol8TabItem {
+  /** Required: exactly one panel is paired with it. */
+  id: string;
+  label?: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+  /** Required when the item shows an icon and no label. */
+  ariaLabel?: string;
+}
+
+/** ORGANISM. Emits tablist, tab and tabpanel, and keeps one enabled tab stop. */
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+  /** Required. A region nobody can name is a region nobody can reach. */
+  label: string;
+  items: Ol8TabItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (id: string) => void;
+  hierarchy?: Ol8TabsHierarchy;
+  size?: Ol8NavigationSize;
+  material?: Ol8Material;
+  orientation?: Ol8TabsOrientation;
+  activation?: Ol8TabsActivation;
+  /** Supply it and Tabs renders the owned panel for each item. */
+  renderPanel?: (item: Ol8TabItem) => ReactNode;
+}
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+
+export interface Ol8SegmentItem {
+  id: string;
+  label?: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+  /** Required when the item shows an icon and no label. */
+  ariaLabel?: string;
+}
+
+/** ORGANISM. Behaviour is declared, never inferred; presentation never changes it. */
+export interface SegmentedControlProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+  /** Required accessible name. */
+  label: string;
+  /** Exactly one: single is a radio group, multi is toggle buttons, momentary stores nothing. */
+  behavior: Ol8SegmentBehavior;
+  items: Ol8SegmentItem[];
+  /** One value for single, an array for multi, nothing for momentary. */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  presentation?: Ol8SegmentPresentation;
+  size?: Ol8NavigationSize;
+  material?: Ol8Material;
+}
+export declare const SegmentedControl: ForwardRefExoticComponent<SegmentedControlProps & RefAttributes<HTMLDivElement>>;
+
+export interface Ol8Destination {
+  /** Required. A tab bar navigates, so it uses real links. */
+  href: string;
+  label?: string;
+  icon?: string;
+  badge?: string | number;
+  /** Required when the destination shows an icon and no label. */
+  ariaLabel?: string;
+}
+
+/** ORGANISM. Native destination links, one current destination, no disabled pseudo destinations. */
+export interface TabBarProps extends ComponentPropsWithoutRef<'nav'> {
+  /** Required navigation name, so a person can tell one landmark from another. */
+  label: string;
+  items: Ol8Destination[];
+  /** The href of the destination a person is on. */
+  current?: string;
+  /** Routes an ordinary left click while the link stays a real link. */
+  onNavigate?: (href: string, event: MouseEvent) => void;
+  presentation?: Ol8TabBarPresentation;
+  size?: Ol8NavigationSize;
+  material?: Ol8Material;
+}
+export declare const TabBar: ForwardRefExoticComponent<TabBarProps & RefAttributes<HTMLElement>>;
+
+export type Ol8SelectNativePolicy = 'preferred' | 'required' | 'custom-allowed';
+export declare const OL8_SELECT_NATIVE_POLICIES: readonly Ol8SelectNativePolicy[];
+
+export interface Ol8SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  group?: string;
+}
+
+/** MOLECULE. Native first: a real select, wearing the Text Field geometry Figma reuses. */
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<'select'>, 'size'> {
+  /** Required and visible. A placeholder is never the label. */
+  label: string;
+  options: Ol8SelectOption[];
+  size?: Ol8TextFieldSize;
+  appearance?: Ol8TextFieldAppearance;
+  material?: Ol8Material;
+  showLabel?: boolean;
+  invalid?: boolean;
+  /** Only when an unselected value is valid, or required validation needs a prompt. */
+  placeholderOption?: string;
+  leadingIcon?: string;
+  instruction?: ReactNode;
+  message?: ReactNode;
+  messageTone?: Ol8MessageTone;
+  /** 'custom-allowed' is refused: use Combobox, which implements the full contract. */
+  native?: Ol8SelectNativePolicy;
+}
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;

package/src/index.js

@@ -2,8 +2,22 @@ export { Icon } from './atoms/Icon.js';
 export { SelectionIndicator } from './atoms/SelectionIndicator.js';
 export { Button } from './molecules/Button.js';
 export { IconButton } from './molecules/IconButton.js';
+export { Link } from './molecules/Link.js';
 export { ChoiceItem } from './molecules/ChoiceItem.js';
 export { SelectionOption } from './molecules/SelectionOption.js';
+export { FormMessage } from './molecules/FormMessage.js';
+export { TextField, countGraphemes, clipToGraphemes } from './molecules/TextField.js';
+export { Select, OL8_SELECT_NATIVE_POLICIES } from './molecules/Select.js';
+export { ChoiceChip } from './molecules/ChoiceChip.js';
+export { Token } from './molecules/Token.js';
 export { RadioGroup, CheckboxGroup } from './organisms/ChoiceGroup.js';
+export { SelectionPopup } from './organisms/SelectionPopup.js';
+export { MultiSelectField } from './organisms/MultiSelectField.js';
+export { ChoicePicker } from './organisms/ChoicePicker.js';
+export { Combobox } from './organisms/Combobox.js';
+export { NavigationBadge } from './atoms/NavigationBadge.js';
+export { Tabs } from './organisms/Tabs.js';
+export { SegmentedControl } from './organisms/SegmentedControl.js';
+export { TabBar } from './organisms/TabBar.js';
 export * from './foundations/geometry.js';
 export { OL8_ICONS, OL8_ICON_VIEWBOX } from './foundations/icons.generated.js';