@oneli8/core 1.0.0-beta.3

package/src/molecules/selection-option/selection-option.css

@@ -0,0 +1,121 @@
+/**
+ * Oneli8 · Selection Option (MOLECULE)
+ * Figma: Select and Combobox -> 01 · Atomic Selection Building Blocks
+ *        Building Blocks / Selection Option 570:122 (8 variants)
+ *        Size Standard|Large x Selection x Availability
+ *
+ * From the Figma description (570:122):
+ *   "Description is associated through aria-describedby and REMAINS OUTSIDE
+ *    the option accessible name. Selection Popup composes this owner;
+ *    KEYBOARD FOCUS REMAINS ON THE COMBOBOX INPUT through
+ *    aria-activedescendant."
+ *
+ * Two consequences that shape everything here:
+ *   - the option is never focusable and carries no tabindex
+ *   - "active" (the aria-activedescendant highlight) is a DIFFERENT thing from
+ *     :hover and from selected, so it gets its own attribute
+ *
+ * Row geometry: 48px (Standard) / 60px (Large) minimum, but the content box
+ * stays 24px tall in both — the padding absorbs the difference.
+ *   padding-block = (minimum - 24) / 2  ->  12px and 18px
+ */
+
+.ol8-option {
+  --_min:   var(--ol8-component-selectionoption-minimum-standard);
+  --_inset: var(--ol8-component-selectionoption-inset-standard);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-block-size: var(--_min);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: var(--ol8-font-variation-functional);
+  list-style: none;
+  cursor: pointer;
+}
+.ol8-option[data-ol8-size="large"] {
+  --_min:   var(--ol8-component-selectionoption-minimum-large);
+  --_inset: var(--ol8-component-selectionoption-inset-large);
+}
+.ol8-option[aria-disabled="true"] { cursor: not-allowed; }
+
+/* The surface carries every wash and the focus ring; the row itself stays
+   clean so a popup can lay options out without fighting them. */
+.ol8-option__surface {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-choice-gap-standard);
+  flex: 1 0 0;
+  min-inline-size: 0;
+  block-size: 100%;
+  padding-inline: var(--_inset);
+  padding-block: calc((var(--_min) - var(--ol8-font-line-024)) / 2);
+  border-radius: var(--ol8-shape-radius-medium);
+  overflow: clip;
+}
+
+/* Selected, hover and active all paint the same wash. Selected is a state of
+   the data; active is the aria-activedescendant cursor; hover is the pointer.
+   They coincide visually by design. */
+.ol8-option[aria-selected="true"] > .ol8-option__surface,
+.ol8-option[data-ol8-active="true"] > .ol8-option__surface,
+.ol8-option:hover:not([aria-disabled="true"]) > .ol8-option__surface {
+  background: var(--ol8-color-selection-surface);
+}
+.ol8-option:active:not([aria-disabled="true"]) > .ol8-option__surface {
+  background: var(--ol8-color-selection-surface);
+  opacity: 0.84;
+}
+
+/* Focus lives on the combobox input, never here — but the option still shows
+   the active ring when a popup marks it, so the two-tone ring is reproduced. */
+.ol8-option[data-ol8-focus-ring="true"] > .ol8-option__surface {
+  border: var(--ol8-focus-ring-outerwidth) solid var(--ol8-color-focus-outer);
+}
+.ol8-option[data-ol8-focus-ring="true"] > .ol8-option__surface::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border: var(--ol8-focus-ring-innerwidth) solid var(--ol8-color-focus-inner);
+  border-radius: 7px;
+  pointer-events: none;
+}
+
+.ol8-option__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  min-inline-size: 0;
+}
+.ol8-option__label {
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+  color: var(--ol8-color-text-primary);
+  overflow-wrap: break-word;
+}
+.ol8-option__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-option[aria-disabled="true"] .ol8-option__label,
+.ol8-option[aria-disabled="true"] .ol8-option__description {
+  color: var(--ol8-color-text-disabled);
+}
+
+/* The trailing slot is ALWAYS reserved, selected or not, so the label column
+   never shifts when selection changes. Figma keeps an empty 18px node there. */
+.ol8-option__check {
+  flex: none;
+  inline-size: var(--ol8-size-icon-small);
+  block-size: var(--ol8-size-icon-small);
+  color: var(--ol8-color-selection-content);
+}
+.ol8-option__check > svg { display: block; inline-size: 100%; block-size: 100%; }
+
+.ol8-option .ol8-icon { --_ol8-icon-size: var(--ol8-size-icon-small); }

package/src/molecules/selection-option/selection-option.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Selection Option (MOLECULE) — headless. The option is NEVER focusable: a
+ * listbox moves a virtual cursor with aria-activedescendant while real focus
+ * stays on the controlling combobox input.
+ */
+import type { Ol8IconName } from '../../atoms/icon/icons.generated.js';
+
+export type Ol8OptionSize = 'standard' | 'large';
+export declare const OL8_OPTION_SIZES: readonly Ol8OptionSize[];
+
+export interface Ol8SelectionOptionOptions {
+  value?: string;
+  size?: Ol8OptionSize;
+  selected?: boolean;
+  /** The listbox's virtual cursor, not DOM focus. */
+  active?: boolean;
+  /** Options cannot be natively disabled, so this emits aria-disabled. */
+  disabled?: boolean;
+  /** Associated with aria-describedby, kept out of the accessible name. */
+  description?: string;
+  leadingIcon?: Ol8IconName;
+  id?: string;
+  focusRing?: boolean;
+  className?: string;
+}
+
+export declare function renderSelectionOption(
+  label: string,
+  options?: Ol8SelectionOptionOptions,
+): string;
+
+export declare function setOptionSelected(option: Element, selected: boolean): void;
+
+/**
+ * Moves the virtual cursor within a listbox: marks one option active and points
+ * the controller's aria-activedescendant at it. Real focus is never moved.
+ */
+export declare function setActiveOption(
+  listbox: Element,
+  option: Element,
+  controller: Element,
+): void;

package/src/molecules/selection-option/selection-option.js

@@ -0,0 +1,97 @@
+/**
+ * Oneli8 · Selection Option (MOLECULE) — headless.
+ *
+ * Figma (570:122): "Description is associated through aria-describedby and
+ * remains outside the option accessible name. Selection Popup composes this
+ * owner; keyboard focus remains on the Combobox input through
+ * aria-activedescendant."
+ *
+ * That single sentence sets the whole contract:
+ *   - role="option", named by its LABEL only. The description is referenced,
+ *     never nested into the name, so aria-labelledby points at the label and
+ *     aria-describedby at the description.
+ *   - the option is NOT focusable. No tabindex, ever. A listbox moves a
+ *     virtual cursor with aria-activedescendant while real focus stays put.
+ *   - "active" (the cursor) is distinct from "selected" (the data) and from
+ *     :hover (the pointer), so it is its own attribute.
+ *   - options cannot use the `disabled` attribute — it is not valid on <li> —
+ *     so unavailability is aria-disabled.
+ */
+import { renderIcon, renderIconSvg, isOl8IconName } from '../../atoms/icon/icon.js';
+
+export const OL8_OPTION_SIZES = ['standard', 'large'];
+
+/**
+ * @param {string} label
+ * @param {{value?:string,size?:string,selected?:boolean,active?:boolean,disabled?:boolean,
+ *          description?:string,leadingIcon?:string,id?:string,focusRing?:boolean,className?:string}} [options]
+ */
+export function renderSelectionOption(label, options = {}) {
+  const {
+    value, size = 'standard', selected = false, active = false, disabled = false,
+    description, leadingIcon, id, focusRing = false, className,
+  } = options;
+
+  if (!OL8_OPTION_SIZES.includes(size)) throw new Error(`[ol8] unknown option size "${size}"`);
+  if (!label || !String(label).trim()) throw new Error('[ol8] a selection option requires a label');
+  if (leadingIcon && !isOl8IconName(leadingIcon)) throw new Error(`[ol8] unknown icon "${leadingIcon}"`);
+
+  const uid = id ?? `ol8-option-${Math.random().toString(36).slice(2, 9)}`;
+  const labelId = `${uid}-label`;
+  const descId = description ? `${uid}-desc` : null;
+
+  const attrs = [
+    `class="ol8-option${className ? ` ${className}` : ''}"`,
+    'role="option"',
+    `id="${uid}"`,
+    value !== undefined ? `data-ol8-value="${escapeAttr(value)}"` : '',
+    `data-ol8-size="${size}"`,
+    `aria-selected="${selected ? 'true' : 'false'}"`,
+    active ? 'data-ol8-active="true"' : '',
+    disabled ? 'aria-disabled="true"' : '',
+    focusRing ? 'data-ol8-focus-ring="true"' : '',
+    // Named by the label alone; the description is referenced, not nested.
+    `aria-labelledby="${labelId}"`,
+    descId ? `aria-describedby="${descId}"` : '',
+  ].filter(Boolean).join(' ');
+
+  const lead = leadingIcon ? renderIcon(leadingIcon, { size: 18 }) : '';
+  const check = `<span class="ol8-option__check" aria-hidden="true">${selected ? renderIconSvg('check') : ''}</span>`;
+
+  return `<li ${attrs}><span class="ol8-option__surface">` +
+    lead +
+    `<span class="ol8-option__text">` +
+      `<span class="ol8-option__label" id="${labelId}">${escapeText(label)}</span>` +
+      (description ? `<span class="ol8-option__description" id="${descId}">${escapeText(description)}</span>` : '') +
+    `</span>` +
+    check +
+    `</span></li>`;
+}
+
+/** Flips one option's selected state and repaints its trailing check. */
+export function setOptionSelected(option, selected) {
+  option.setAttribute('aria-selected', selected ? 'true' : 'false');
+  const check = option.querySelector('.ol8-option__check');
+  if (check) check.innerHTML = selected ? renderIconSvg('check') : '';
+}
+
+/**
+ * Moves the virtual cursor within a listbox: marks one option active and
+ * points the controlling element's aria-activedescendant at it. Real focus is
+ * never moved, which is the entire point of the pattern.
+ */
+export function setActiveOption(listbox, option, controller) {
+  for (const other of listbox.querySelectorAll('.ol8-option[data-ol8-active="true"]')) {
+    if (other !== option) delete other.dataset.ol8Active;
+  }
+  if (!option) {
+    controller?.removeAttribute('aria-activedescendant');
+    return;
+  }
+  option.dataset.ol8Active = 'true';
+  controller?.setAttribute('aria-activedescendant', option.id);
+  option.scrollIntoView({ block: 'nearest' });
+}
+
+function escapeAttr(v) { return String(v).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
+function escapeText(v) { return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

package/src/organisms/choice-group/choice-group.css

@@ -0,0 +1,93 @@
+/**
+ * Oneli8 · Choice Group (ORGANISM)
+ * Figma: Documentation / Organism / Choice Group
+ *   Checkbox Hierarchy 273:603  Aggregate = None | Some | All
+ *   Radio Group        859:5180 Behavior  = Safe Default | No Default |
+ *                                           Horizontal | Invalid
+ *
+ * First organism in the system, and the first tier allowed to hold logic:
+ * the checkbox group computes its parent from its children, and the radio
+ * group owns group-level validation.
+ *
+ * From Figma (273:603): "Aggregate None/Some/All is computed from nested
+ * Checkbox molecules; MIXED IS NEVER A THIRD PREFERENCE. Runtime recursion,
+ * parent-child synchronization, group naming, required behavior, reset, and
+ * announcements live in code."
+ *
+ * So Aggregate is an OUTPUT, never an input. Nothing may author it.
+ *
+ * The two shells differ, deliberately:
+ *   checkbox  bordered, radius-container (24px), legend Title/Small
+ *   radio     unbordered, radius-standard (12px), legend Body/Medium
+ */
+
+.ol8-choice-group {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-spacing-stack-related);
+  padding: var(--ol8-spacing-inset-standard);
+  background: var(--ol8-color-surface-raised);
+  border: 0;
+  border-radius: var(--ol8-shape-radius-standard);
+  font-family: var(--ol8-font-family-functional);
+  font-variation-settings: var(--ol8-font-variation-functional);
+  min-inline-size: 0;   /* fieldset defaults to min-content; this lets it shrink */
+}
+
+.ol8-choice-group--checkbox {
+  border: 1px solid var(--ol8-color-border-subtle);
+  border-radius: var(--ol8-shape-radius-container);
+}
+
+/* <legend> is taken out of flow by default, so it is laid out as a normal
+   flex child instead — the group label is a real legend for assistive tech. */
+.ol8-choice-group__legend {
+  display: block;
+  float: none;
+  padding: 0;
+  inline-size: 100%;
+  color: var(--ol8-color-text-primary);
+}
+.ol8-choice-group--checkbox > .ol8-choice-group__legend {
+  font-size: var(--ol8-font-size-021);
+  line-height: var(--ol8-font-line-030);
+  font-weight: var(--ol8-font-weight-semibold);
+}
+.ol8-choice-group--radio > .ol8-choice-group__legend {
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+}
+
+.ol8-choice-group__instruction {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+}
+
+.ol8-choice-group__options { display: flex; flex-direction: column; }
+.ol8-choice-group[data-ol8-orientation="horizontal"] > .ol8-choice-group__options {
+  flex-direction: row;
+  gap: var(--ol8-spacing-stack-related);
+  flex-wrap: wrap;
+}
+
+/* Children of a hierarchy sit under their parent, indented one 24px step. */
+.ol8-choice-group__children {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: var(--ol8-dimension-scale-024);
+}
+
+/* Group-level validation message. */
+.ol8-choice-group__message {
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  letter-spacing: 0.12px;
+  color: var(--ol8-color-text-secondary);
+}
+.ol8-choice-group[data-ol8-invalid="true"] > .ol8-choice-group__message {
+  color: var(--ol8-color-feedbackcritical-inlinecontent);
+}

package/src/organisms/choice-group/choice-group.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Choice Group (ORGANISM) — headless behavior. Aggregate None/Some/All is
+ * computed from nested checkboxes; Mixed is never a third preference. The radio
+ * group needs almost nothing: native radios already give roving focus, single
+ * selection and form submission.
+ */
+import type { Ol8ChoiceSize } from '../../molecules/choice-item/choice-item.js';
+
+export type Ol8Aggregate = 'none' | 'some' | 'all';
+export declare const OL8_AGGREGATE: readonly Ol8Aggregate[];
+
+/** Disabled children are excluded from the tally. */
+export declare function computeAggregate(
+  children: Iterable<HTMLInputElement> | ArrayLike<HTMLInputElement>,
+): Ol8Aggregate;
+
+interface Ol8ChoiceGroupShell {
+  legend: string;
+  instruction?: string;
+  message?: string;
+  invalid?: boolean;
+  disabled?: boolean;
+  size?: Ol8ChoiceSize;
+  material?: 'regular' | 'gem';
+  id?: string;
+  className?: string;
+}
+
+export interface Ol8RadioOption {
+  label: string;
+  value: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface Ol8RadioGroupConfig extends Ol8ChoiceGroupShell {
+  /** Required — it is what makes the radios a group. */
+  name: string;
+  options: Ol8RadioOption[];
+  /** The selected option's value. Omit for no default. */
+  value?: string;
+  orientation?: 'vertical' | 'horizontal';
+  required?: boolean;
+}
+
+export interface Ol8CheckboxOption {
+  label: string;
+  value: string;
+  /** Checkboxes are independent, so each carries its own state. */
+  checked?: boolean;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface Ol8CheckboxGroupConfig extends Ol8ChoiceGroupShell {
+  /** Required — the hierarchy's parent row. */
+  parentLabel: string;
+  options: Ol8CheckboxOption[];
+  /** Shared input name for the children. Optional: checkboxes need no group name. */
+  name?: string;
+}
+
+/**
+ * Native semantics do the work; this only builds the shell.
+ * @throws if legend, name or options are missing.
+ */
+export declare function renderRadioGroup(config: Ol8RadioGroupConfig): string;
+
+/**
+ * Checkbox hierarchy: one parent whose state is computed from its children. The
+ * parent renders unchecked; hydration derives its real state.
+ * @throws if legend, parentLabel or options are missing.
+ */
+export declare function renderCheckboxGroup(config: Ol8CheckboxGroupConfig): string;
+
+/**
+ * Wires every checkbox hierarchy under `root`. Idempotent.
+ * Radio groups need no wiring — the browser already owns their behaviour.
+ */
+export declare function hydrateChoiceGroups(root?: ParentNode): void;

package/src/organisms/choice-group/choice-group.js

@@ -0,0 +1,159 @@
+/**
+ * Oneli8 · Choice Group (ORGANISM) — headless behavior.
+ *
+ * Figma (273:603): "Aggregate None/Some/All is computed from nested Checkbox
+ * molecules; Mixed is never a third preference. Runtime recursion,
+ * parent-child synchronization, group naming, required behavior, reset, and
+ * announcements live in code."
+ *
+ * Two consequences drive this module:
+ *
+ *  1. Aggregate is an OUTPUT. Nothing may author it. `computeAggregate` is the
+ *     single source, and the parent's indeterminate flag is derived from it.
+ *  2. Mixed is never a preference a user can choose. Clicking a Mixed parent
+ *     resolves the whole subtree to checked — it never cycles back through
+ *     Mixed.
+ *
+ * The radio group needs almost nothing: a native radio group already gives
+ * arrow-key roving focus, single selection and form submission. Adding JS for
+ * those would only break them.
+ */
+import { renderChoiceItem, syncIndicator, setChoiceMixed } from '../../molecules/choice-item/choice-item.js';
+
+export const OL8_AGGREGATE = ['none', 'some', 'all'];
+
+/** @returns {'none'|'some'|'all'} */
+export function computeAggregate(children) {
+  const boxes = [...children].filter(c => !c.disabled);
+  if (boxes.length === 0) return 'none';
+  const checked = boxes.filter(c => c.checked).length;
+  if (checked === 0) return 'none';
+  return checked === boxes.length ? 'all' : 'some';
+}
+
+function shell({ kind, legend, instruction, message, invalid, orientation, id, className, body }) {
+  const uid = id ?? `ol8-group-${Math.random().toString(36).slice(2, 9)}`;
+  const instrId = instruction ? `${uid}-instr` : null;
+  const msgId = message ? `${uid}-msg` : null;
+  const described = [instrId, msgId].filter(Boolean).join(' ');
+
+  const attrs = [
+    `class="ol8-choice-group ol8-choice-group--${kind}${className ? ` ${className}` : ''}"`,
+    `id="${uid}"`,
+    `data-ol8-kind="${kind}"`,
+    orientation === 'horizontal' ? 'data-ol8-orientation="horizontal"' : '',
+    invalid ? 'data-ol8-invalid="true" aria-invalid="true"' : '',
+    described ? `aria-describedby="${described}"` : '',
+  ].filter(Boolean).join(' ');
+
+  return `<fieldset ${attrs}>` +
+    `<legend class="ol8-choice-group__legend">${escapeText(legend)}</legend>` +
+    (instruction ? `<p class="ol8-choice-group__instruction" id="${instrId}">${escapeText(instruction)}</p>` : '') +
+    body +
+    (message ? `<p class="ol8-choice-group__message" id="${msgId}"${invalid ? ' role="alert"' : ''}>${escapeText(message)}</p>` : '') +
+    `</fieldset>`;
+}
+
+/**
+ * Radio group. Native semantics do the work; this only builds the shell.
+ * @param {{legend:string,name:string,options:Array<{label:string,value:string,description?:string,disabled?:boolean}>,
+ *          value?:string,instruction?:string,message?:string,invalid?:boolean,disabled?:boolean,
+ *          orientation?:'vertical'|'horizontal',size?:string,material?:string,required?:boolean,id?:string,className?:string}} config
+ */
+export function renderRadioGroup(config) {
+  const { legend, name, options, value, instruction, message, invalid = false, disabled = false,
+          orientation = 'vertical', size = 'standard', material = 'regular', required = false,
+          id, className } = config;
+  if (!legend) throw new Error('[ol8] a radio group requires a legend');
+  if (!name) throw new Error('[ol8] a radio group requires a name — it is what makes it a group');
+  if (!options?.length) throw new Error('[ol8] a radio group requires options');
+
+  const items = options.map(o => renderChoiceItem('radio', o.label, {
+    size, name, value: o.value, material, required,
+    checked: value !== undefined && o.value === value,
+    disabled: disabled || !!o.disabled,
+    invalid, description: o.description,
+  })).join('');
+
+  return shell({ kind: 'radio', legend, instruction, message, invalid, orientation, id, className,
+    body: `<div class="ol8-choice-group__options">${items}</div>` });
+}
+
+/**
+ * Checkbox hierarchy: one parent whose state is computed from its children.
+ * The parent is rendered unchecked; hydration derives its real state.
+ */
+export function renderCheckboxGroup(config) {
+  const { legend, parentLabel, options, instruction, message, invalid = false, disabled = false,
+          size = 'standard', material = 'regular', name, id, className } = config;
+  if (!legend) throw new Error('[ol8] a checkbox group requires a legend');
+  if (!parentLabel) throw new Error('[ol8] a checkbox hierarchy requires a parent label');
+  if (!options?.length) throw new Error('[ol8] a checkbox group requires options');
+
+  const parent = renderChoiceItem('checkbox', parentLabel, {
+    size, material, disabled, invalid, className: 'ol8-choice-group__parent',
+  });
+  const children = options.map(o => renderChoiceItem('checkbox', o.label, {
+    size, material, name, value: o.value, checked: !!o.checked,
+    disabled: disabled || !!o.disabled, description: o.description,
+    className: 'ol8-choice-group__child',
+  })).join('');
+
+  return shell({ kind: 'checkbox', legend, instruction, message, invalid, orientation: 'vertical',
+    id, className,
+    body: parent + `<div class="ol8-choice-group__children">${children}</div>` });
+}
+
+/**
+ * Wires every checkbox hierarchy under `root`. Idempotent.
+ * Radio groups need no wiring — the browser already owns their behaviour.
+ */
+export function hydrateChoiceGroups(root = document) {
+  const groups = [...root.querySelectorAll('.ol8-choice-group--checkbox')];
+
+  for (const group of groups) {
+    const parentRow = group.querySelector(':scope > .ol8-choice-group__parent');
+    const parent = parentRow?.querySelector(':scope > .ol8-choice__input');
+    const children = [...group.querySelectorAll('.ol8-choice-group__child > .ol8-choice__input')];
+    if (!parent || children.length === 0) continue;
+
+    applyAggregate(group, parentRow, parent, children);
+
+    if (group.dataset.ol8GroupBound === 'true') continue;
+
+    // Mixed is never a preference: a Mixed parent resolves to all-checked.
+    parent.addEventListener('change', () => {
+      const target = parent.indeterminate ? true : parent.checked;
+      for (const child of children) {
+        if (child.disabled) continue;
+        child.checked = target;
+        syncIndicator(child.closest('.ol8-choice'));
+      }
+      applyAggregate(group, parentRow, parent, children);
+      group.dispatchEvent(new CustomEvent('ol8:aggregatechange', {
+        bubbles: true, detail: { aggregate: computeAggregate(children) },
+      }));
+    });
+
+    for (const child of children) {
+      child.addEventListener('change', () => {
+        applyAggregate(group, parentRow, parent, children);
+        group.dispatchEvent(new CustomEvent('ol8:aggregatechange', {
+          bubbles: true, detail: { aggregate: computeAggregate(children) },
+        }));
+      });
+    }
+    group.dataset.ol8GroupBound = 'true';
+  }
+  return groups.length;
+}
+
+function applyAggregate(group, parentRow, parent, children) {
+  const aggregate = computeAggregate(children);
+  group.dataset.ol8Aggregate = aggregate;
+  parent.checked = aggregate === 'all';
+  setChoiceMixed(parentRow, aggregate === 'some');
+  syncIndicator(parentRow);
+}
+
+function escapeText(v) { return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

package/src/organisms/choice-group/index.d.ts

@@ -0,0 +1 @@
+export * from './choice-group.js';

package/src/organisms/choice-group/index.js

@@ -0,0 +1 @@
+export * from './choice-group.js';

package/src/organisms/index.d.ts

@@ -0,0 +1 @@
+export * from './choice-group/index.js';

package/src/organisms/index.js

@@ -0,0 +1 @@
+export * from './choice-group/index.js';

package/styles.css

@@ -0,0 +1,13 @@
+/* OneLi8 · complete stylesheet for @oneli8/core.
+   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/atoms/icon/icon.css";
+@import "./src/atoms/selection-indicator/selection-indicator.css";
+@import "./src/molecules/button/button.css";
+@import "./src/molecules/icon-button/icon-button.css";
+@import "./src/molecules/choice-item/choice-item.css";
+@import "./src/molecules/selection-option/selection-option.css";
+@import "./src/organisms/choice-group/choice-group.css";
+@import "./src/materials/gem/gem.css";