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

package/src/organisms/multi-select-field/multi-select-field.js

@@ -0,0 +1,317 @@
+/**
+ * Oneli8 · Multi-select Field (ORGANISM)
+ *
+ * Figma: Select and Combobox
+ *   Organism / Multi-select Field / Outline · Soft Hexagon 904:2507 (16)
+ *   Organism / Multi-select Field / Filled  · Soft Hexagon 978:4472 (16)
+ *
+ * From the Figma description:
+ *   "Outline multi-select organism built from canonical Text Field, Token,
+ *    Input Text, and Suggestion Popup owners. Size propagates through all
+ *    children." The Filled set adds: "Same atomic composition and size
+ *    behavior as Outline; only the canonical field appearance owner changes."
+ *
+ * That last sentence is why this is ONE component with an appearance axis
+ * rather than two. The two Figma sets differ by which field owner they
+ * instantiate, and in code that owner is the same stylesheet reading one
+ * attribute.
+ *
+ * WHAT FIGMA DRAWS AND WHAT IT DOES NOT
+ * In Figma the tokens are absolutely positioned over the field shell, because
+ * a design file draws a picture of a filled field rather than a layout that
+ * reflows. The real layout comes from the contract: tokens and the editable
+ * input share one wrapping row, "the field starts at its approved Text Field
+ * minimum height and grows in 6px or 12px-aligned increments as tokens wrap",
+ * and "it never compresses tokens to preserve one nominal row".
+ *
+ * WHY THE TOKENS ARE NOT A LIST
+ * The committed values and the input have to wrap as one run, so they must be
+ * siblings in one flex container. Wrapping a <ul> around the tokens would make
+ * the whole collection a single flex item that cannot share rows with the
+ * input. The order is still truthful, every token carries its own labelled
+ * Remove button, and changes are announced through the live region.
+ */
+import { renderToken } from '../../molecules/token/token.js';
+import { renderSelectionPopup } from '../selection-popup/selection-popup.js';
+
+export const OL8_MULTI_SELECT_SIZES = ['compact', 'standard', 'comfortable', 'large'];
+export const OL8_MULTI_SELECT_APPEARANCES = ['outline', 'filled'];
+export const OL8_MULTI_SELECT_MATERIALS = ['regular', 'gem'];
+/** Constrained resolves from a known set; suggestive may also author values. */
+export const OL8_VALUE_POLICIES = ['constrained', 'suggestive'];
+
+/**
+ * A committed value may be given as a bare string. In a constrained field that
+ * string is an option's value, so the token must show that option's label: a
+ * field holding "ui" reads "Interface", never "ui". Only a value with no
+ * matching option falls back to showing itself, which is what a suggestive
+ * field's authored entries are.
+ */
+const toEntry = (v, options) => {
+  if (typeof v !== 'string') return v;
+  const match = options.find(o => o.value === v);
+  return match ? { value: match.value, label: match.label } : { value: v, label: v };
+};
+
+/**
+ * @param {{
+ *   label:string, id?:string, name?:string,
+ *   values?:Array<string|{value:string,label:string}>,
+ *   options?:Array<{value:string,label:string,description?:string,disabled?:boolean}>,
+ *   valuePolicy?:string, size?:string, appearance?:string, material?:string,
+ *   expanded?:boolean, inputValue?:string, placeholder?:string,
+ *   maximumValues?:number, allowDuplicates?:boolean,
+ *   showLabel?:boolean, required?:boolean, disabled?:boolean, readOnly?:boolean,
+ *   invalid?:boolean, instruction?:string, message?:string, messageTone?:string,
+ *   status?:string, statusText?:string, className?:string,
+ * }} options
+ */
+export function renderMultiSelectField(options = {}) {
+  const {
+    label, id, name,
+    values = [], options: items = [],
+    valuePolicy = 'constrained', size = 'comfortable',
+    appearance = 'outline', material = 'regular',
+    expanded = false, inputValue = '', placeholder,
+    maximumValues, allowDuplicates = false,
+    showLabel = true, required = false, disabled = false, readOnly = false,
+    invalid = false, instruction, message, messageTone = 'critical',
+    status = 'none', statusText, className,
+  } = options;
+
+  if (!label || !String(label).trim()) throw new Error('[ol8] a Multi-select Field requires a label');
+  if (!OL8_MULTI_SELECT_SIZES.includes(size)) throw new Error(`[ol8] unknown size "${size}"`);
+  if (!OL8_MULTI_SELECT_APPEARANCES.includes(appearance)) throw new Error(`[ol8] unknown appearance "${appearance}"`);
+  if (!OL8_MULTI_SELECT_MATERIALS.includes(material)) throw new Error(`[ol8] unknown material "${material}"`);
+  if (!OL8_VALUE_POLICIES.includes(valuePolicy)) throw new Error(`[ol8] unknown value policy "${valuePolicy}"`);
+  if (readOnly && invalid) {
+    throw new Error('[ol8] a read only field cannot be invalid, because nobody can act on the message');
+  }
+
+  const committed = values.map(v => toEntry(v, items));
+
+  // "Constrained mode cannot create a non-option token."
+  if (valuePolicy === 'constrained' && items.length) {
+    const known = new Set(items.map(o => o.value));
+    const stray = committed.find(v => !known.has(v.value));
+    if (stray) {
+      throw new Error(`[ol8] "${stray.value}" is not one of the options, and a constrained field may not hold an authored value`);
+    }
+  }
+  // "A duplicate is prevented or surfaced according to policy; it is never
+  //  added invisibly."
+  if (!allowDuplicates) {
+    const seen = new Set();
+    for (const v of committed) {
+      if (seen.has(v.value)) throw new Error(`[ol8] "${v.value}" is committed twice and allowDuplicates is false`);
+      seen.add(v.value);
+    }
+  }
+  if (maximumValues !== undefined && committed.length > maximumValues) {
+    throw new Error(`[ol8] ${committed.length} values exceed the maximum of ${maximumValues}`);
+  }
+
+  const uid = id ?? `ol8-multiselect-${Math.random().toString(36).slice(2, 9)}`;
+  const popupId = `${uid}-popup`;
+  const statusId = `${uid}-status`;
+  const instructionId = instruction ? `${uid}-instruction` : null;
+  const messageId = message ? `${uid}-message` : null;
+  const full = maximumValues !== undefined && committed.length >= maximumValues;
+
+  // Tokens carry the field's size. A read only field's values are labelled
+  // content, so they lose the Remove path rather than keeping a dead button.
+  const tokens = committed.map((v, i) => renderToken(v.label, {
+    size,
+    selected: true,
+    mark: readOnly || disabled ? 'none' : 'remove',
+    removable: !(readOnly || disabled),
+    focusable: false,
+    id: `${uid}-token-${i}`,
+    className: 'ol8-multiselect__token',
+  })).join('');
+
+  const describedBy = [instructionId, messageId, statusId].filter(Boolean).join(' ');
+
+  const input =
+    `<input class="ol8-field__input ol8-multiselect__input" id="${uid}"` +
+    (name ? ` name="${escapeAttr(name)}"` : '') +
+    ` type="text" role="combobox" aria-expanded="${expanded}" aria-controls="${popupId}"` +
+    ` aria-autocomplete="list" aria-haspopup="listbox"` +
+    (showLabel ? '' : ` aria-label="${escapeAttr(label)}"`) +
+    ` value="${escapeAttr(inputValue)}"` +
+    (placeholder ? ` placeholder="${escapeAttr(placeholder)}"` : '') +
+    (required ? ' required' : '') + (disabled ? ' disabled' : '') + (readOnly ? ' readonly' : '') +
+    (invalid ? ' aria-invalid="true"' : '') +
+    (messageId ? ` aria-errormessage="${messageId}"` : '') +
+    (describedBy ? ` aria-describedby="${describedBy}"` : '') +
+    '>';
+
+  const control =
+    `<div class="ol8-field__control ol8-multiselect__control">${tokens}${input}</div>`;
+
+  // Figma's root is a vertical stack of the field composition and the popup,
+  // twelve apart. The field group keeps its own six unit internal stack, so the
+  // two gaps stay separate things rather than one compromise.
+  const rootAttrs = [
+    `class="ol8-multiselect${className ? ` ${className}` : ''}"`,
+    `data-ol8-expanded="${expanded}"`,
+    `data-ol8-value-policy="${valuePolicy}"`,
+    disabled ? 'data-ol8-availability="disabled"' : '',
+    readOnly ? 'data-ol8-readonly="true"' : '',
+    full ? 'data-ol8-full="true"' : '',
+  ].filter(Boolean).join(' ');
+
+  const fieldAttrs = [
+    'class="ol8-field ol8-multiselect__field"',
+    `data-ol8-size="${size}"`,
+    `data-ol8-appearance="${appearance}"`,
+    material === 'gem' ? 'data-ol8-material="gem"' : '',
+    invalid ? 'data-ol8-validity="invalid"' : '',
+    disabled ? 'data-ol8-availability="disabled"' : '',
+  ].filter(Boolean).join(' ');
+
+  return `<div ${rootAttrs}>` +
+    `<div ${fieldAttrs}>` +
+      (showLabel
+        ? `<div class="ol8-field__label-row">` +
+          `<label class="ol8-field__label" for="${uid}">${escapeText(label)}</label>` +
+          (required ? `<span class="ol8-field__requirement" aria-hidden="true">*</span>` : '') +
+          `</div>`
+        : '') +
+      `<div class="ol8-field__control-stack">${control}</div>` +
+      (instruction ? `<div class="ol8-field__instruction" id="${instructionId}">${escapeText(instruction)}</div>` : '') +
+      (message
+        ? `<div class="ol8-field__supporting"><span class="ol8-field__message" id="${messageId}"` +
+          ` data-ol8-tone="${escapeAttr(messageTone)}" role="${messageTone === 'critical' ? 'alert' : 'status'}">` +
+          `${escapeText(message)}</span></div>`
+        : '') +
+    `</div>` +
+    (expanded
+      ? renderSelectionPopup({
+          id: popupId, label, options: items, multiple: true,
+          selected: committed.map(v => v.value),
+          width: 'anchor', size: size === 'large' ? 'large' : 'standard',
+          status, statusText, className: 'ol8-multiselect__popup',
+        })
+      : `<div id="${popupId}" hidden></div>`) +
+    // Selection and removal are announced here, with the remaining count, so a
+    // screen reader hears the result rather than inferring it from the DOM.
+    `<span class="ol8-multiselect__status" id="${statusId}" role="status" aria-live="polite">` +
+      (full ? `Maximum of ${maximumValues} reached` : '') +
+    `</span>` +
+    `</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;'); }
+
+/**
+ * Binds every field under `root`. Idempotent.
+ *
+ * This implements the keyboard model the contract writes down, which is the
+ * part of a multi value field that markup cannot express:
+ *
+ *   - Tab enters at the input. Tokens are not tab stops, so their Remove
+ *     buttons are reached with arrows instead.
+ *   - With the caret at logical start, Left walks back through the committed
+ *     values and Right walks forward and returns to the input. This uses
+ *     logical order rather than screen direction, so it is already correct
+ *     in a right to left document.
+ *   - Backspace on an empty query activates the preceding token; a second
+ *     Backspace or Delete removes it. Two steps, so one stray key cannot
+ *     silently drop a value.
+ *   - Escape cancels an active token preview and never clears the field.
+ *
+ * Removal dispatches `ol8:removevalue` rather than mutating the DOM, because
+ * the values belong to the application. The event is cancelable: call
+ * preventDefault to keep the token.
+ */
+export function hydrateMultiSelectFields(root = document) {
+  const fields = [...root.querySelectorAll('.ol8-multiselect')];
+
+  for (const field of fields) {
+    if (field.dataset.ol8MultiselectBound === 'true') continue;
+    const input = field.querySelector(':scope .ol8-multiselect__input');
+    if (!input) continue;
+
+    const tokens = () => [...field.querySelectorAll(':scope .ol8-multiselect__token')];
+    const atStart = () => input.selectionStart === 0 && input.selectionEnd === 0;
+
+    const activate = (token) => {
+      for (const other of tokens()) delete other.dataset.ol8Active;
+      if (!token) return;
+      token.dataset.ol8Active = 'true';
+      const button = token.querySelector('.ol8-token__remove');
+      if (button) button.focus();
+    };
+    const clearActive = () => {
+      for (const token of tokens()) delete token.dataset.ol8Active;
+    };
+    const remove = (token) => {
+      const button = token.querySelector('.ol8-token__remove');
+      const label = token.querySelector('.ol8-chip__label');
+      const detail = { value: label ? label.textContent : null, token };
+      const proceed = field.dispatchEvent(
+        new CustomEvent('ol8:removevalue', { detail, bubbles: true, cancelable: true }));
+      if (!proceed) return;
+      const list = tokens();
+      const next = list[list.indexOf(token) + 1] ?? null;
+      announce(field, `${detail.value} removed, ${list.length - 1} remaining`);
+      if (next) activate(next); else input.focus();
+    };
+
+    input.addEventListener('keydown', (event) => {
+      if (event.key === 'Backspace' && input.value === '' && atStart()) {
+        const list = tokens();
+        if (!list.length) return;
+        event.preventDefault();
+        activate(list[list.length - 1]);       // first press activates only
+        return;
+      }
+      if (event.key === 'ArrowLeft' && atStart()) {
+        const list = tokens();
+        if (!list.length) return;
+        event.preventDefault();
+        activate(list[list.length - 1]);
+      }
+    });
+
+    field.addEventListener('keydown', (event) => {
+      const token = event.target.closest && event.target.closest('.ol8-multiselect__token');
+      if (!token) return;
+      const list = tokens();
+      const index = list.indexOf(token);
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        activate(list[Math.max(0, index - 1)]);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (index === list.length - 1) { clearActive(); input.focus(); }
+        else activate(list[index + 1]);
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
+        event.preventDefault();
+        remove(token);                          // second press removes
+      } else if (event.key === 'Escape') {
+        // Escape cancels the preview. It never clears committed values.
+        event.preventDefault();
+        clearActive();
+        input.focus();
+      }
+    });
+
+    field.addEventListener('click', (event) => {
+      const button = event.target.closest && event.target.closest('.ol8-token__remove');
+      if (!button) return;
+      const token = button.closest('.ol8-multiselect__token');
+      if (token) remove(token);
+    });
+
+    field.dataset.ol8MultiselectBound = 'true';
+  }
+  return fields.length;
+}
+
+function announce(field, words) {
+  const region = field.querySelector(':scope > .ol8-multiselect__status');
+  if (region) region.textContent = words;
+}

package/src/organisms/navigation-keys.js

@@ -0,0 +1,58 @@
+/**
+ * Shared roving focus for the navigation organisms.
+ *
+ * From the navigation contract: "Arrow keys move through enabled Tabs; Home and
+ * End reach the boundaries", "Disabled choices are skipped by roving focus",
+ * and "mirrors horizontal Arrow keys in RTL". One implementation serves Tabs
+ * and Segmented Control so the three organisms cannot drift apart.
+ */
+
+/** Which key means forward, given the orientation and the reading direction. */
+export function navigationStep(key, orientation, rtl) {
+  const forwardInline = rtl ? 'ArrowLeft' : 'ArrowRight';
+  const backwardInline = rtl ? 'ArrowRight' : 'ArrowLeft';
+  if (orientation === 'vertical') {
+    if (key === 'ArrowDown') return 1;
+    if (key === 'ArrowUp') return -1;
+  } else {
+    if (key === forwardInline) return 1;
+    if (key === backwardInline) return -1;
+  }
+  return 0;
+}
+
+/** The next enabled index, wrapping, skipping anything disabled. */
+export function nextEnabled(items, from, step) {
+  const n = items.length;
+  if (n === 0) return -1;
+  for (let hop = 1; hop <= n; hop += 1) {
+    const i = (from + step * hop + n * hop) % n;
+    if (!items[i].disabled) return i;
+  }
+  return from;
+}
+
+/** The first or last enabled index. */
+export function edgeEnabled(items, edge) {
+  const order = edge === 'end' ? [...items.keys()].reverse() : [...items.keys()];
+  for (const i of order) if (!items[i].disabled) return i;
+  return -1;
+}
+
+/**
+ * Resolves a key press into the index that should now hold focus, or -1 when
+ * the key is not ours to handle.
+ */
+export function resolveNavigationKey(event, items, activeIndex, { orientation = 'horizontal', rtl = false } = {}) {
+  if (event.key === 'Home') return edgeEnabled(items, 'start');
+  if (event.key === 'End') return edgeEnabled(items, 'end');
+  const step = navigationStep(event.key, orientation, rtl);
+  if (step === 0) return -1;
+  return nextEnabled(items, activeIndex, step);
+}
+
+/** True when the element sits in a right to left context. */
+export function isRtl(element) {
+  if (typeof window === 'undefined' || !element) return false;
+  return window.getComputedStyle(element).direction === 'rtl';
+}

package/src/organisms/segmented-control/index.d.ts

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

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

@@ -0,0 +1 @@
+export { renderSegmentedControl, hydrateSegmentedControls, OL8_SEGMENT_BEHAVIORS, OL8_SEGMENT_PRESENTATIONS } from './segmented-control.js';

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

@@ -0,0 +1,113 @@
+/**
+ * Oneli8 · Segmented Control (ORGANISM)
+ * Figma: Navigation / Segmented Control 698:4792 — six presentations.
+ *
+ * "Presentation never changes behavior." Every presentation below is a
+ * treatment of the same Segment molecule, and none of them touches which
+ * behaviour the consumer declared.
+ *
+ * Read from Figma at Standard, Regular:
+ *   Inset Fill          sunken track, Border Default at the standard boundary,
+ *                       segments inset by the track inset, selected takes the
+ *                       selection surface
+ *   Line Indicator      no track; an adaptive secondary rail with a separate
+ *                       indicator in the primary colour, inset like a tab
+ *   Outlined Selection  no track; each segment carries its own boundary, the
+ *                       selected one in the primary colour at the strong width,
+ *                       with a deliberate gap between segments
+ *   Soft Pill           raised track at full radius; segments at full radius
+ *   Icon-only           the Inset Fill track, with icon only segments
+ *   Stacked Label       no track; segments stack their icon over their label
+ */
+
+.ol8-segmented {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--ol8-component-tab-bar-gap);
+}
+
+.ol8-segmented > .ol8-nav-item { flex: 1 1 0; }
+
+/* ---- Inset Fill and Icon-only share one track ------------------------- */
+.ol8-segmented[data-ol8-presentation="inset-fill"],
+.ol8-segmented[data-ol8-presentation="icon-only"] {
+  padding: var(--ol8-component-segmented-control-track-inset);
+  border: var(--ol8-border-width-standard) solid var(--ol8-color-border-default);
+  border-radius: var(--ol8-component-segmented-control-track-radius);
+  background: var(--ol8-color-surface-sunken);
+}
+.ol8-segmented[data-ol8-presentation="inset-fill"] > .ol8-nav-item,
+.ol8-segmented[data-ol8-presentation="icon-only"] > .ol8-nav-item {
+  --_radius: var(--ol8-component-segmented-control-item-radius);
+}
+
+/* ---- Soft Pill -------------------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="soft-pill"] {
+  padding: var(--ol8-component-segmented-control-track-inset);
+  border-radius: var(--ol8-shape-radius-full);
+  background: var(--ol8-color-surface-raised);
+}
+.ol8-segmented[data-ol8-presentation="soft-pill"] > .ol8-nav-item {
+  --_radius: var(--ol8-shape-radius-full);
+}
+
+/* ---- Line Indicator --------------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="line-indicator"] {
+  position: relative;
+  gap: 0;
+}
+.ol8-segmented[data-ol8-presentation="line-indicator"]::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);
+}
+/* The active segment raises the line itself, so the indicator travels with the
+   selection rather than being positioned by script. */
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item { --_radius: 0; }
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline: var(--ol8-component-tab-item-indicator-inset);
+  block-size: var(--ol8-component-segmented-control-line);
+  border-radius: var(--ol8-shape-radius-full);
+  background: transparent;
+}
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item[aria-pressed="true"] {
+  background: transparent;
+  color: var(--ol8-color-actionprimary-default);
+}
+.ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item[aria-pressed="true"]::after {
+  background: var(--ol8-color-actionprimary-default);
+}
+
+/* ---- Outlined Selection ----------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="outlined-selection"] {
+  gap: var(--ol8-component-segmented-control-outlined-gap);
+}
+.ol8-segmented[data-ol8-presentation="outlined-selection"] > .ol8-nav-item {
+  --_radius: var(--ol8-component-segmented-control-item-radius);
+  border: var(--ol8-component-segmented-control-boundary) solid var(--ol8-color-border-default);
+}
+.ol8-segmented[data-ol8-presentation="outlined-selection"] > .ol8-nav-item[aria-pressed="true"] {
+  border-width: var(--ol8-border-width-standard);
+  border-color: var(--ol8-color-actionprimary-default);
+  background: transparent;
+  color: var(--ol8-color-actionprimary-default);
+}
+
+/* ---- Stacked Label ---------------------------------------------------- */
+.ol8-segmented[data-ol8-presentation="stacked-label"] > .ol8-nav-item {
+  --_radius: var(--ol8-component-segmented-control-item-radius);
+}
+
+@media (forced-colors: active) {
+  .ol8-segmented[data-ol8-presentation="line-indicator"] > .ol8-nav-item[aria-pressed="true"]::after {
+    background: Highlight;
+  }
+}

package/src/organisms/segmented-control/segmented-control.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Segmented Control (ORGANISM). Figma 698:4792. Behaviour is declared, never
+ * inferred, and presentation never changes it.
+ */
+import type { Ol8NavigationSize } from '../tabs/tabs.js';
+
+export type Ol8SegmentBehavior = 'single' | 'multi' | 'momentary';
+export type Ol8SegmentPresentation =
+  | 'inset-fill' | 'line-indicator' | 'outlined-selection'
+  | 'soft-pill' | 'icon-only' | 'stacked-label';
+
+export declare const OL8_SEGMENT_BEHAVIORS: readonly Ol8SegmentBehavior[];
+export declare const OL8_SEGMENT_PRESENTATIONS: readonly Ol8SegmentPresentation[];
+
+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;
+}
+
+export interface Ol8SegmentedControlOptions {
+  /** 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. */
+  selected?: string | string[];
+  presentation?: Ol8SegmentPresentation;
+  size?: Ol8NavigationSize;
+  material?: 'regular' | 'gem';
+  className?: string;
+}
+
+/** @throws without a name or behaviour, or when the selection shape contradicts the behaviour. */
+export declare function renderSegmentedControl(options: Ol8SegmentedControlOptions): string;
+
+/** Wires selection and, for single selection, roving focus. Returns the number of groups wired. */
+export declare function hydrateSegmentedControls(root?: ParentNode): number;