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

package/src/organisms/segmented-control/segmented-control.js

@@ -0,0 +1,163 @@
+/**
+ * Oneli8 · Segmented Control — headless behavior.
+ *
+ * Figma (698:4792): "Behavior is a consuming contract: single = Radio Group,
+ * multi = independent Toggle Buttons, momentary = grouped actions."
+ *
+ * The contract says to declare exactly one behaviour, so this module refuses to
+ * guess: behaviour is required, and the shape of `selected` must match it.
+ * "Presentation never changes behavior", so nothing below reads presentation.
+ */
+import { renderNavigationItem } from '../../molecules/navigation-item/index.js';
+import { resolveNavigationKey, isRtl } from '../navigation-keys.js';
+
+export const OL8_SEGMENT_BEHAVIORS = ['single', 'multi', 'momentary'];
+export const OL8_SEGMENT_PRESENTATIONS = [
+  'inset-fill', 'line-indicator', 'outlined-selection', 'soft-pill', 'icon-only', 'stacked-label',
+];
+
+/**
+ * @param {{
+ *   label:string, behavior:string,
+ *   items:Array<{id:string,label?:string,icon?:string,badge?:any,disabled?:boolean,ariaLabel?:string}>,
+ *   selected?:string|string[], presentation?:string, size?:string, material?:string, className?:string,
+ * }} options
+ */
+export function renderSegmentedControl(options) {
+  const {
+    label, behavior, items = [], selected,
+    presentation = 'inset-fill', size = 'standard', material = 'regular', className,
+  } = options ?? {};
+
+  assertSegmentedControl({ label, behavior, items, selected, presentation });
+
+  const isSelected = (id) => {
+    if (behavior === 'momentary') return false;
+    if (behavior === 'multi') return Array.isArray(selected) && selected.includes(id);
+    return selected === id;
+  };
+
+  // Icon only and stacked label are presentations, so they change how the item
+  // lays out its content, never what the item means.
+  const layout = presentation === 'stacked-label' ? 'stacked' : 'inline';
+  const iconOnly = presentation === 'icon-only';
+
+  const firstEnabled = items.find(i => !i.disabled);
+  const focusStop = behavior === 'single'
+    ? (items.find(i => isSelected(i.id) && !i.disabled) ?? firstEnabled)
+    : null;
+
+  const segments = items.map(item => renderNavigationItem({
+    kind: 'segment',
+    label: iconOnly ? undefined : item.label,
+    icon: item.icon,
+    badge: item.badge,
+    layout,
+    selected: isSelected(item.id),
+    disabled: item.disabled,
+    ariaLabel: item.ariaLabel ?? (iconOnly ? item.label : undefined),
+    extraAttrs: `data-ol8-size="${size}" data-ol8-value="${escapeAttr(item.id)}"`
+      // Single selection keeps one focus stop, the way a radio group does.
+      + (focusStop ? ` tabindex="${item.id === focusStop.id ? 0 : -1}"` : ''),
+  })).join('');
+
+  const attrs = [
+    `class="ol8-segmented${className ? ` ${className}` : ''}"`,
+    behavior === 'single' ? 'role="radiogroup"' : 'role="group"',
+    `aria-label="${escapeAttr(label)}"`,
+    `data-ol8-presentation="${presentation}"`,
+    `data-ol8-behavior="${behavior}"`,
+    `data-ol8-size="${size}"`,
+    material === 'gem' ? 'data-ol8-material="gem"' : '',
+  ].filter(Boolean).join(' ');
+
+  return `<div ${attrs}>${segments}</div>`;
+}
+
+/** Wires an existing `.ol8-segmented` group. Idempotent. */
+export function hydrateSegmentedControls(root = document) {
+  let count = 0;
+  for (const group of root.querySelectorAll('.ol8-segmented')) {
+    if (group.dataset.ol8Wired === 'true') continue;
+    group.dataset.ol8Wired = 'true';
+    count += 1;
+
+    const behavior = group.dataset.ol8Behavior;
+    const segmentsOf = () => [...group.querySelectorAll('.ol8-nav-item--segment')];
+
+    const announce = (segment) => segment.dispatchEvent(new CustomEvent('ol8:segmentchange', {
+      bubbles: true,
+      detail: {
+        value: segment.dataset.ol8Value,
+        selected: segmentsOf().filter(s => s.getAttribute('aria-pressed') === 'true').map(s => s.dataset.ol8Value),
+      },
+    }));
+
+    group.addEventListener('click', (event) => {
+      const segment = event.target.closest('.ol8-nav-item--segment');
+      if (!segment || segment.disabled) return;
+
+      if (behavior === 'momentary') { announce(segment); return; }
+      if (behavior === 'multi') {
+        segment.setAttribute('aria-pressed', String(segment.getAttribute('aria-pressed') !== 'true'));
+        announce(segment);
+        return;
+      }
+      for (const other of segmentsOf()) {
+        const on = other === segment;
+        other.setAttribute('aria-pressed', String(on));
+        other.tabIndex = on ? 0 : -1;
+      }
+      announce(segment);
+    });
+
+    // Only single selection roves, because that is the only behaviour where the
+    // group holds one value. Multi and momentary are ordinary buttons in a row.
+    if (behavior !== 'single') continue;
+    group.addEventListener('keydown', (event) => {
+      const segments = segmentsOf();
+      const activeIndex = segments.indexOf(document.activeElement);
+      if (activeIndex === -1) return;
+      const next = resolveNavigationKey(event, segments.map(s => ({ disabled: s.disabled })), activeIndex, {
+        orientation: 'horizontal', rtl: isRtl(group),
+      });
+      if (next === -1 || next === activeIndex) return;
+      event.preventDefault();
+      segments[next].focus();
+      segments[next].click();
+    });
+  }
+  return count;
+}
+
+function assertSegmentedControl({ label, behavior, items, selected, presentation }) {
+  if (typeof label !== 'string' || label === '') {
+    throw new Error('[ol8] a segmented control requires an accessible name.');
+  }
+  if (!OL8_SEGMENT_BEHAVIORS.includes(behavior)) {
+    throw new Error('[ol8] a segmented control must declare exactly one behavior: single, multi or momentary.');
+  }
+  if (!OL8_SEGMENT_PRESENTATIONS.includes(presentation)) {
+    throw new Error(`[ol8] unknown segmented control presentation "${presentation}"`);
+  }
+  if (!Array.isArray(items) || items.length === 0) {
+    throw new Error('[ol8] a segmented control needs at least one segment.');
+  }
+  if (behavior === 'multi' && selected !== undefined && !Array.isArray(selected)) {
+    throw new Error('[ol8] multi selection holds an array of values.');
+  }
+  if (behavior === 'single' && Array.isArray(selected)) {
+    throw new Error('[ol8] single selection holds one value, not an array.');
+  }
+  if (behavior === 'momentary' && selected !== undefined) {
+    throw new Error('[ol8] a momentary control invokes an action and stores no selected state.');
+  }
+  const seen = new Set();
+  for (const item of items) {
+    if (!item.id) throw new Error('[ol8] every segment needs an id.');
+    if (seen.has(item.id)) throw new Error(`[ol8] two segments share the id "${item.id}"`);
+    seen.add(item.id);
+  }
+}
+
+function escapeAttr(v) { return String(v).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }

package/src/organisms/selection-popup/index.js

@@ -0,0 +1 @@
+export { renderSelectionPopup, OL8_POPUP_WIDTHS, OL8_POPUP_SIZES, OL8_POPUP_STATUSES } from './selection-popup.js';

package/src/organisms/selection-popup/selection-popup.css

@@ -0,0 +1,90 @@
+/**
+ * Oneli8 · Selection Popup (ORGANISM)
+ * Figma: Building Blocks / Selection Popup 574:534 — Width, Size.
+ *
+ * The rail is a div with role="listbox" rather than a list element, because a
+ * list carries a user agent margin that a component may not zero here, and the
+ * role already carries every semantic the list element would have added.
+ *
+ * Read from Figma: a raised floating surface at the standard radius with a
+ * default border, padded by the minimal step inline and the related step
+ * block, holding one Option Rail. "Width and Size govern layout only; content
+ * must be canonical Selection Option instances."
+ *
+ * The maximum block is a suggestion, not a cage: the region scrolls rather than
+ * clipping, because an option a person cannot reach is an option that does not
+ * exist.
+ */
+
+.ol8-popup {
+  box-sizing: border-box;
+  padding-block: var(--ol8-component-selectionpopup-paddingblock);
+  padding-inline: var(--ol8-component-selectionpopup-paddinginline);
+  border: var(--ol8-border-width-hairline) solid var(--ol8-color-border-default);
+  border-radius: var(--ol8-shape-radius-standard);
+  background: var(--ol8-color-surface-raised);
+  box-shadow: var(--ol8-elevation-surface-floating);
+}
+
+.ol8-popup__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ol8-component-selectionpopup-gap);
+  padding-inline: var(--ol8-component-selectionpopup-railinsetinline);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---- Size ------------------------------------------------------------- */
+.ol8-popup[data-ol8-size="standard"] .ol8-popup__rail {
+  max-block-size: var(--ol8-component-selectionpopup-maximumblock-standard);
+}
+.ol8-popup[data-ol8-size="large"] .ol8-popup__rail {
+  max-block-size: var(--ol8-component-selectionpopup-maximumblock-large);
+}
+
+/* ---- Width · layout only, never meaning -------------------------------
+   Content hugs, Anchor matches the control it belongs to, and Wide may exceed
+   it when the options are longer than the field. */
+.ol8-popup[data-ol8-width="content"] { inline-size: max-content; }
+.ol8-popup[data-ol8-width="anchor"]  { inline-size: 100%; }
+.ol8-popup[data-ol8-width="wide"]    { inline-size: max-content; min-inline-size: 100%; }
+
+/* ---- Group labels ------------------------------------------------------ */
+.ol8-popup__group-label {
+  padding-block: var(--ol8-component-selectionpopup-gap);
+  padding-inline: var(--ol8-component-selectionoption-inset-standard);
+  color: var(--ol8-color-text-secondary);
+  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);
+}
+
+/* ---- Status ------------------------------------------------------------
+   "No results is never represented by a selectable option", so a status is a
+   plain region, never an option, and it can never be chosen by mistake. */
+.ol8-popup__status {
+  display: flex;
+  align-items: center;
+  gap: var(--ol8-component-textfield-gap-status);
+  padding-block: var(--ol8-component-selectionpopup-paddingblock);
+  padding-inline: var(--ol8-component-selectionoption-inset-standard);
+  color: var(--ol8-color-text-secondary);
+  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-popup__status[data-ol8-status="error"] { color: var(--ol8-color-feedbackcritical-inlinecontent); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .ol8-popup__status[data-ol8-status="loading"] .ol8-icon > svg {
+    animation: ol8-spin 900ms linear infinite;
+  }
+}
+
+@media (forced-colors: active) {
+  .ol8-popup { border-color: CanvasText; box-shadow: none; }
+}

package/src/organisms/selection-popup/selection-popup.js

@@ -0,0 +1,100 @@
+/**
+ * Oneli8 · Selection Popup — headless behavior.
+ *
+ * Figma (574:534): "Width and Size govern layout only; content must be
+ * canonical Selection Option instances. Runtime listbox naming, ownership,
+ * scrolling, active descendant, grouped results, loading/empty/error statuses
+ * and announcements live in code."
+ *
+ * So this module owns exactly those: the listbox and its name, the grouping,
+ * the four statuses, and the rule that a status is never an option.
+ */
+import { renderSelectionOption } from '../../molecules/selection-option/index.js';
+import { renderIcon } from '../../atoms/icon/index.js';
+
+export const OL8_POPUP_WIDTHS = ['content', 'anchor', 'wide'];
+export const OL8_POPUP_SIZES = ['standard', 'large'];
+
+/** Empty query, no matches, loading, and retrieval failure are distinct conditions. */
+export const OL8_POPUP_STATUSES = ['none', 'loading', 'empty', 'error'];
+
+/**
+ * @param {{
+ *   id:string, label:string,
+ *   options?:Array<{value:string,label:string,description?:string,leadingIcon?:string,disabled?:boolean,group?:string}>,
+ *   selected?:string|string[], active?:string, width?:string, size?:string,
+ *   status?:string, statusText?:string, multiple?:boolean, className?:string,
+ * }} options
+ */
+export function renderSelectionPopup(options) {
+  const {
+    id, label, options: items = [], selected, active,
+    width = 'anchor', size = 'standard', status = 'none', statusText,
+    multiple = false, className,
+  } = options ?? {};
+
+  if (!id) throw new Error('[ol8] a selection popup needs an id, because the combobox that owns it points at it.');
+  if (typeof label !== 'string' || label === '') {
+    throw new Error('[ol8] a listbox requires an accessible name, distinct from the value it holds.');
+  }
+  if (!OL8_POPUP_WIDTHS.includes(width)) throw new Error(`[ol8] unknown popup width "${width}"`);
+  if (!OL8_POPUP_SIZES.includes(size)) throw new Error(`[ol8] unknown popup size "${size}"`);
+  if (!OL8_POPUP_STATUSES.includes(status)) throw new Error(`[ol8] unknown popup status "${status}"`);
+  if (status !== 'none' && !statusText) {
+    throw new Error('[ol8] a popup status needs words. A spinner alone tells a screen reader nothing.');
+  }
+
+  const isSelected = (value) => Array.isArray(selected) ? selected.includes(value) : selected === value;
+
+  // Grouped results keep their source order; grouping never reorders matches.
+  const groups = [];
+  for (const item of items) {
+    const name = item.group ?? null;
+    const last = groups[groups.length - 1];
+    if (last && last.name === name) last.items.push(item);
+    else groups.push({ name, items: [item] });
+  }
+
+  const rail = groups.map((group, index) => {
+    const groupId = group.name ? `${id}-group-${index}` : null;
+    const rendered = group.items.map(item => renderSelectionOption(item.label, {
+      value: item.value,
+      size,
+      selected: isSelected(item.value),
+      active: item.value === active,
+      disabled: item.disabled,
+      description: item.description,
+      leadingIcon: item.leadingIcon,
+      id: `${id}-option-${item.value}`,
+    })).join('');
+
+    if (!group.name) return rendered;
+    return `<div role="group" aria-labelledby="${escapeAttr(groupId)}">` +
+      `<span class="ol8-popup__group-label" id="${escapeAttr(groupId)}">${escapeText(group.name)}</span>` +
+      `${rendered}</div>`;
+  }).join('');
+
+  // A status is a region, never an option: "No results is never represented by
+  // a selectable option."
+  const statusRegion = status === 'none' ? '' :
+    `<div class="ol8-popup__status" data-ol8-status="${status}" role="status" aria-live="polite">` +
+    (status === 'loading' ? renderIcon('loading', { size: 18 }) : '') +
+    (status === 'error' ? renderIcon('critical', { size: 18 }) : '') +
+    `<span>${escapeText(statusText)}</span></div>`;
+
+  const attrs = [
+    `class="ol8-popup${className ? ` ${className}` : ''}"`,
+    `data-ol8-width="${width}"`,
+    `data-ol8-size="${size}"`,
+  ].join(' ');
+
+  return `<div ${attrs}>` +
+    `<div class="ol8-popup__rail" role="listbox" id="${escapeAttr(id)}" aria-label="${escapeAttr(label)}"` +
+    (multiple ? ' aria-multiselectable="true"' : '') +
+    `>${rail}</div>` +
+    statusRegion +
+    `</div>`;
+}
+
+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/tab-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './tab-bar.js';

package/src/organisms/tab-bar/index.js

@@ -0,0 +1 @@
+export { renderTabBar, hydrateTabBars, OL8_TAB_BAR_PRESENTATIONS } from './tab-bar.js';

package/src/organisms/tab-bar/tab-bar.css

@@ -0,0 +1,45 @@
+/**
+ * Oneli8 · Tab Bar (ORGANISM)
+ * Figma: Navigation / Tab Bar 701:460 — Bottom, Inline, Sidebar, Spatial Rail.
+ *
+ * "Tab Bar contains destinations, never a central action disguised as a
+ * destination." Every presentation below keeps the same route identity and the
+ * same current destination; only the container changes.
+ *
+ * Read from Figma at Standard, Regular: Bottom, Sidebar and Spatial Rail all
+ * sit on a raised surface with a subtle border at the tab bar radius, protected
+ * by the tab bar inset. Inline has no surface and no border, and uses the
+ * tighter inline inset on its horizontal edges. Destinations meet with no gap.
+ */
+
+.ol8-tab-bar {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  gap: var(--ol8-component-tab-bar-gap);
+  padding: var(--ol8-component-tab-bar-inset);
+  border: var(--ol8-border-width-hairline) solid var(--ol8-color-border-subtle);
+  border-radius: var(--ol8-component-tab-bar-radius);
+  background: var(--ol8-color-surface-raised);
+}
+
+.ol8-tab-bar > .ol8-nav-item { flex: 1 1 0; }
+
+/* Inline sits in the page rather than on it, so it drops the surface, the
+   border and the radius, and protects only its horizontal edges. */
+.ol8-tab-bar[data-ol8-presentation="inline"] {
+  padding-block: var(--ol8-component-tab-bar-inset);
+  padding-inline: var(--ol8-component-tab-bar-inline-inset);
+  border: 0;
+  border-radius: var(--ol8-shape-radius-none);
+  background: none;
+}
+
+.ol8-tab-bar[data-ol8-presentation="sidebar"],
+.ol8-tab-bar[data-ol8-presentation="spatial-rail"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* The spatial rail carries no labels, so its destinations are square targets. */
+.ol8-tab-bar[data-ol8-presentation="spatial-rail"] > .ol8-nav-item { flex: none; }

package/src/organisms/tab-bar/tab-bar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Tab Bar (ORGANISM). Figma 701:460. Native destination links, one current
+ * destination, and no disabled pseudo destinations.
+ */
+import type { Ol8NavigationSize } from '../tabs/tabs.js';
+
+export type Ol8TabBarPresentation = 'bottom' | 'inline' | 'sidebar' | 'spatial-rail';
+
+export declare const OL8_TAB_BAR_PRESENTATIONS: readonly Ol8TabBarPresentation[];
+
+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;
+}
+
+export interface Ol8TabBarOptions {
+  /** 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;
+  presentation?: Ol8TabBarPresentation;
+  size?: Ol8NavigationSize;
+  material?: 'regular' | 'gem';
+  className?: string;
+}
+
+/** @throws without a name, without destinations, on a missing or duplicate href, on a disabled destination, or when current names nothing listed. */
+export declare function renderTabBar(options: Ol8TabBarOptions): string;
+
+/** Hands ordinary left clicks to a router while the link stays a real link. Returns the number of bars wired. */
+export declare function hydrateTabBars(root?: ParentNode, onNavigate?: (href: string, event: MouseEvent) => void): number;

package/src/organisms/tab-bar/tab-bar.js

@@ -0,0 +1,104 @@
+/**
+ * Oneli8 · Tab Bar — headless behavior.
+ *
+ * Figma (701:460): "Production uses native destination links, requires a non
+ * empty navigation name, resolves exactly one current destination, and rejects
+ * disabled pseudo destinations. Material and presentation never fork semantics."
+ *
+ * Every rule in that sentence is enforced below rather than described.
+ */
+import { renderNavigationItem } from '../../molecules/navigation-item/index.js';
+
+export const OL8_TAB_BAR_PRESENTATIONS = ['bottom', 'inline', 'sidebar', 'spatial-rail'];
+
+/**
+ * @param {{
+ *   label:string,
+ *   items:Array<{href:string,label?:string,icon?:string,badge?:any,ariaLabel?:string}>,
+ *   current?:string, presentation?:string, size?:string, material?:string, className?:string,
+ * }} options
+ */
+export function renderTabBar(options) {
+  const {
+    label, items = [], current,
+    presentation = 'bottom', size = 'standard', material = 'regular', className,
+  } = options ?? {};
+
+  assertTabBar({ label, items, current, presentation });
+
+  // The spatial rail carries no labels, so a name has to come from somewhere.
+  const iconOnly = presentation === 'spatial-rail';
+
+  const destinations = items.map(item => renderNavigationItem({
+    kind: 'destination',
+    label: iconOnly ? undefined : item.label,
+    icon: item.icon,
+    badge: item.badge,
+    href: item.href,
+    selected: item.href === current,
+    ariaLabel: item.ariaLabel ?? (iconOnly ? item.label : undefined),
+    extraAttrs: `data-ol8-size="${size}"`,
+  })).join('');
+
+  const attrs = [
+    `class="ol8-tab-bar${className ? ` ${className}` : ''}"`,
+    `aria-label="${escapeAttr(label)}"`,
+    `data-ol8-presentation="${presentation}"`,
+    `data-ol8-size="${size}"`,
+    material === 'gem' ? 'data-ol8-material="gem"' : '',
+  ].filter(Boolean).join(' ');
+
+  return `<nav ${attrs}>${destinations}</nav>`;
+}
+
+/**
+ * Lets a product route without replacing link semantics. The link stays a real
+ * link, so opening it in a new tab, copying it and middle clicking all still
+ * work; only an ordinary left click is intercepted.
+ */
+export function hydrateTabBars(root = document, onNavigate) {
+  let count = 0;
+  for (const bar of root.querySelectorAll('.ol8-tab-bar')) {
+    if (bar.dataset.ol8Wired === 'true') continue;
+    bar.dataset.ol8Wired = 'true';
+    count += 1;
+    if (typeof onNavigate !== 'function') continue;
+    bar.addEventListener('click', (event) => {
+      if (event.defaultPrevented || event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const link = event.target.closest('.ol8-nav-item--destination');
+      if (!link || link.target === '_blank') return;
+      event.preventDefault();
+      onNavigate(link.getAttribute('href'), event);
+    });
+  }
+  return count;
+}
+
+function assertTabBar({ label, items, current, presentation }) {
+  if (typeof label !== 'string' || label === '') {
+    throw new Error('[ol8] a tab bar requires a navigation name, so a person can tell one landmark from another.');
+  }
+  if (!OL8_TAB_BAR_PRESENTATIONS.includes(presentation)) {
+    throw new Error(`[ol8] unknown tab bar presentation "${presentation}"`);
+  }
+  if (!Array.isArray(items) || items.length === 0) {
+    throw new Error('[ol8] a tab bar needs at least one destination.');
+  }
+  const seen = new Set();
+  for (const item of items) {
+    if (typeof item.href !== 'string' || item.href === '') {
+      throw new Error('[ol8] every destination needs an href. A tab bar navigates, so it uses real links.');
+    }
+    if (item.disabled) {
+      throw new Error('[ol8] a destination cannot be disabled. Remove the place rather than showing a door that does not open.');
+    }
+    if (seen.has(item.href)) throw new Error(`[ol8] two destinations share the href "${item.href}"`);
+    seen.add(item.href);
+  }
+  if (current !== undefined && !seen.has(current)) {
+    throw new Error(`[ol8] the current destination "${current}" is not one of the destinations listed.`);
+  }
+}
+
+function escapeAttr(v) { return String(v).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }

package/src/organisms/tabs/index.d.ts

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

package/src/organisms/tabs/index.js

@@ -0,0 +1 @@
+export { renderTabs, renderTabPanel, hydrateTabs, OL8_TABS_HIERARCHIES, OL8_TABS_ORIENTATIONS, OL8_TABS_ACTIVATIONS } from './tabs.js';

package/src/organisms/tabs/tabs.css

@@ -0,0 +1,53 @@
+/**
+ * Oneli8 · Tabs (ORGANISM)
+ * Figma: Navigation / Tabs 693:171 — Hierarchy, Material, Size.
+ *
+ * The organism owns sibling separation and the rail; the item owns its own
+ * inset. Read from Figma: tabs meet with no gap, and a Primary tab list carries
+ * an adaptive secondary rail behind them at the hairline thickness in the
+ * secondary text colour. Secondary and Tertiary carry no rail.
+ */
+
+.ol8-tabs {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  /* "Narrow Tab lists scroll or use an explicitly governed overflow policy;
+     labels never wrap into competing heights." */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.ol8-tabs::-webkit-scrollbar { display: none; }
+
+.ol8-tabs[data-ol8-hierarchy="primary"]::after {
+  content: "";
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: var(--ol8-component-tab-item-rail);
+  background: var(--ol8-color-text-secondary);
+}
+
+/* Vertical tabs turn the rail onto the logical inline edge and let each tab
+   fill the width, so the indicator reads as a column marker. */
+.ol8-tabs[data-ol8-orientation="vertical"] {
+  flex-direction: column;
+  overflow-x: visible;
+}
+.ol8-tabs[data-ol8-orientation="vertical"][data-ol8-hierarchy="primary"]::after {
+  inset-block: 0;
+  inset-inline: auto 0;
+  inline-size: var(--ol8-component-tab-item-rail);
+  block-size: auto;
+}
+.ol8-tabs[data-ol8-orientation="vertical"] .ol8-nav-item__indicator {
+  inset-block: var(--ol8-component-tab-item-indicator-inset);
+  inset-inline: auto 0;
+  inline-size: var(--ol8-component-tab-item-indicator-thickness);
+  block-size: auto;
+}
+
+.ol8-tabs__panel:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ol8-component-navigation-focus-inset) var(--ol8-color-focus-inner);
+}

package/src/organisms/tabs/tabs.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Tabs (ORGANISM). Figma 693:171. Emits tablist, tab and tabpanel, keeps one
+ * enabled tab stop, mirrors horizontal arrows in right to left, and supports
+ * both orientations and both activation modes.
+ */
+export type Ol8TabsHierarchy = 'primary' | 'secondary' | 'tertiary';
+export type Ol8TabsOrientation = 'horizontal' | 'vertical';
+export type Ol8TabsActivation = 'automatic' | 'manual';
+export type Ol8NavigationSize = 'compact' | 'standard' | 'comfortable' | 'large';
+
+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 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;
+}
+
+export interface Ol8TabsOptions {
+  /** Required. A region nobody can name is a region nobody can reach. */
+  label: string;
+  items: Ol8TabItem[];
+  selected?: string;
+  hierarchy?: Ol8TabsHierarchy;
+  size?: Ol8NavigationSize;
+  material?: 'regular' | 'gem';
+  orientation?: Ol8TabsOrientation;
+  activation?: Ol8TabsActivation;
+  /** Shared with renderTabPanel so each tab owns its panel. */
+  idPrefix?: string;
+  className?: string;
+}
+
+/** @throws without a name, without tabs, when every tab is disabled, or on duplicate ids. */
+export declare function renderTabs(options: Ol8TabsOptions): string;
+
+/** @throws without the idPrefix that pairs the panel with its tab. */
+export declare function renderTabPanel(tabId: string, content: string, options: { idPrefix: string; hidden?: boolean }): string;
+
+/** Wires arrow keys, Home, End, activation and panel visibility. Returns the number of lists wired. */
+export declare function hydrateTabs(root?: ParentNode): number;