@design-edito/tools 0.5.2 → 0.5.4

package/components/ScrollListener/utils.js

@@ -1,4 +1,9 @@
-export const globalDocumentScrollListener = () => {
+/* * * * * * * * * * * * * * * * *
+ *
+ * Measuring
+ *
+ * * * * * * * * * * * * * * * * */
+function measureGlobal() {
     const win = {
         height: window.innerHeight,
         width: window.innerWidth
@@ -18,34 +23,142 @@ export const globalDocumentScrollListener = () => {
         maxY: scroll.y + win.height
     };
     return { win, html, scroll, viewport };
-};
-export const localElementScrollListener = (div) => {
-    const offsetX = div.offsetLeft;
-    const offsetY = div.offsetTop;
-    const width = div.offsetWidth;
-    const height = div.offsetHeight;
+}
+function measureLocal(element) {
     return {
-        offsetX,
-        offsetY,
-        width,
-        height
+        offsetX: element.offsetLeft,
+        offsetY: element.offsetTop,
+        width: element.offsetWidth,
+        height: element.offsetHeight
     };
-};
-window.addEventListener('scroll', () => {
-    const global = globalDocumentScrollListener();
-    Array.from(registeredIds).forEach(([, item]) => {
-        const { rootRef, setData } = item;
-        if (rootRef.current === null)
+}
+/* * * * * * * * * * * * * * * * *
+ *
+ * The shared listener
+ *
+ * * * * * * * * * * * * * * * * */
+/**
+ * Every mounted {@link ScrollListener} shares one pair of `scroll` / `resize`
+ * listeners and one measurement pass per animation frame, however many
+ * components are on the page: the document is measured once, and only each
+ * subscriber's own element is measured individually.
+ *
+ * The listeners are attached on the first subscription and detached on the
+ * last, so importing this module has no effect on its own — which is what keeps
+ * it importable outside a browser.
+ */
+const subscribers = new Map();
+let scheduledFrame = null;
+function notifySubscribers() {
+    scheduledFrame = null;
+    const global = measureGlobal();
+    subscribers.forEach(({ rootRef, onScrollStateChange }) => {
+        const element = rootRef.current;
+        if (element === null)
             return;
-        const local = localElementScrollListener(rootRef.current);
-        setData({ global, local });
+        onScrollStateChange({ global, local: measureLocal(element) });
     });
-});
-export const registeredIds = new Map();
-export const register = (props) => {
-    const { id, rootRef, setData } = props;
-    registeredIds.set(id, { id, rootRef, setData });
-};
-export const unregister = (id) => {
-    registeredIds.delete(id);
-};
+}
+/** Coalesces every event of a frame into a single measurement pass. */
+function scheduleNotification() {
+    if (scheduledFrame !== null)
+        return;
+    scheduledFrame = window.requestAnimationFrame(notifySubscribers);
+}
+/**
+ * Starts tracking one element, attaching the shared listeners if this is the
+ * first subscriber. A measurement is scheduled right away, so a subscriber gets
+ * its initial state without waiting for a first scroll.
+ *
+ * @param id - Identifies the subscriber for {@link unsubscribe}.
+ * @param subscriber - The element to track and where to report.
+ */
+export function subscribe(id, subscriber) {
+    const isFirstSubscriber = subscribers.size === 0;
+    subscribers.set(id, subscriber);
+    if (isFirstSubscriber) {
+        window.addEventListener('scroll', scheduleNotification, { passive: true });
+        window.addEventListener('resize', scheduleNotification, { passive: true });
+    }
+    scheduleNotification();
+}
+/**
+ * Stops tracking one element, detaching the shared listeners once no subscriber
+ * is left. Unsubscribing an unknown id is a no-op.
+ *
+ * @param id - The id passed to {@link subscribe}.
+ */
+export function unsubscribe(id) {
+    subscribers.delete(id);
+    if (subscribers.size > 0)
+        return;
+    window.removeEventListener('scroll', scheduleNotification);
+    window.removeEventListener('resize', scheduleNotification);
+    if (scheduledFrame === null)
+        return;
+    window.cancelAnimationFrame(scheduledFrame);
+    scheduledFrame = null;
+}
+/* * * * * * * * * * * * * * * * *
+ *
+ * CSS custom properties
+ *
+ * * * * * * * * * * * * * * * * */
+/** Spans the scroll positions where the element is fully inside the viewport. */
+function innerRange(offset, size, winSize) {
+    return [offset + size - winSize, offset];
+}
+/** Spans the scroll positions where the element overlaps the viewport at all. */
+function outerRange(offset, size, winSize) {
+    return [offset - winSize, offset + size];
+}
+/** Where `scroll` sits in `range`, as a `0`–`1` ratio. */
+function progressIn(scroll, [from, to]) {
+    return (scroll - from) / Math.max(to - from, 1);
+}
+/**
+ * Builds the CSS custom properties exposed on a {@link ScrollListener} root.
+ *
+ * Measurements are lengths and come with a `-raw` twin carrying the plain number
+ * for `calc()`; ratios are unitless and have no twin.
+ *
+ * @param scrollState - The state to expose.
+ * @returns The custom properties, keyed by their full name.
+ */
+export function toScrollCssProps(scrollState) {
+    const { global: { win, html, scroll }, local } = scrollState;
+    const windowScrolledXRatio = scroll.x / Math.max(html.width - win.width, 1);
+    const windowScrolledYRatio = scroll.y / Math.max(html.height - win.height, 1);
+    const selfInnerScrolledXRatio = progressIn(scroll.x, innerRange(local.offsetX, local.width, win.width));
+    const selfOuterScrolledXRatio = progressIn(scroll.x, outerRange(local.offsetX, local.width, win.width));
+    const selfInnerScrolledYRatio = progressIn(scroll.y, innerRange(local.offsetY, local.height, win.height));
+    const selfOuterScrolledYRatio = progressIn(scroll.y, outerRange(local.offsetY, local.height, win.height));
+    return {
+        '--lm-scroll-listener-window-width': `${win.width}px`,
+        '--lm-scroll-listener-window-width-raw': `${win.width}`,
+        '--lm-scroll-listener-window-height': `${win.height}px`,
+        '--lm-scroll-listener-window-height-raw': `${win.height}`,
+        '--lm-scroll-listener-html-width': `${html.width}px`,
+        '--lm-scroll-listener-html-width-raw': `${html.width}`,
+        '--lm-scroll-listener-html-height': `${html.height}px`,
+        '--lm-scroll-listener-html-height-raw': `${html.height}`,
+        '--lm-scroll-listener-scroll-x': `${scroll.x}px`,
+        '--lm-scroll-listener-scroll-x-raw': `${scroll.x}`,
+        '--lm-scroll-listener-scroll-y': `${scroll.y}px`,
+        '--lm-scroll-listener-scroll-y-raw': `${scroll.y}`,
+        '--lm-scroll-listener-width': `${local.width}px`,
+        '--lm-scroll-listener-width-raw': `${local.width}`,
+        '--lm-scroll-listener-height': `${local.height}px`,
+        '--lm-scroll-listener-height-raw': `${local.height}`,
+        '--lm-scroll-listener-offset-x': `${local.offsetX}px`,
+        '--lm-scroll-listener-offset-x-raw': `${local.offsetX}`,
+        '--lm-scroll-listener-offset-y': `${local.offsetY}px`,
+        '--lm-scroll-listener-offset-y-raw': `${local.offsetY}`,
+        '--lm-scroll-listener-window-scrolled-x-ratio': `${windowScrolledXRatio}`,
+        '--lm-scroll-listener-window-scrolled-y-ratio': `${windowScrolledYRatio}`,
+        '--lm-scroll-listener-self-inner-scrolled-x-ratio': `${selfInnerScrolledXRatio}`,
+        '--lm-scroll-listener-self-outer-scrolled-x-ratio': `${selfOuterScrolledXRatio}`,
+        '--lm-scroll-listener-self-inner-scrolled-y-ratio': `${selfInnerScrolledYRatio}`,
+        '--lm-scroll-listener-self-outer-scrolled-y-ratio': `${selfOuterScrolledYRatio}`
+    };
+}

package/components/Select/index.d.ts

@@ -1,20 +1,28 @@
-import { type FunctionComponent } from 'react';
-import { type Props as ControlledProps } from './index.controlled.js';
+import { type FunctionComponent, type PropsWithChildren, type ReactNode, type SelectHTMLAttributes } from 'react';
+import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Select} component.
  *
- * Alias of {@link ControlledProps}.
+ * Extends all native {@link SelectHTMLAttributes} and {@link WithClassName}
+ * with optional label, error content, and option children.
  *
- * All native select attributes remain available, including `value`,
- * `defaultValue`, and `onChange`, allowing the component to operate
- * in either controlled or hybrid mode.
+ * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
+ * @property error - Content rendered as an error message below the select. When omitted, no error is rendered.
+ * @property className - Additional class name(s) applied to the select element.
+ * @property children - `<option>` or `<optgroup>` elements rendered inside the select.
  */
-export type Props = ControlledProps;
+export type Props = SelectHTMLAttributes<HTMLSelectElement> & PropsWithChildren<WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>>;
 /**
- * Select field component supporting controlled and hybrid usage.
+ * Select field supporting controlled and uncontrolled usage.
  *
- * Wraps {@link ControlledSelect} and automatically manages the selected
- * value when no `value` prop is provided.
+ * Renders a native `<select>` with optional label and error feedback. All
+ * standard select attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
  *
  * ### CSS elements
  * - `label`
@@ -22,17 +30,13 @@ export type Props = ControlledProps;
  *
  * @param props - Component properties.
  * @see {@link Props}
- *
- * @returns A labelled select with optional internal selection management.
+ * @returns A labelled select with optional error feedback.
  *
  * @remarks
- * - In controlled mode (`value` defined), the selected value is fully driven
- *   by the parent component and internal state is never updated.
- * - In hybrid mode, internal state is initialized from `defaultValue` and
- *   subsequently manages selection updates itself.
- * - In hybrid mode, the internal value is updated before forwarding the
- *   `onChange` callback.
- * - `defaultValue` is only used to initialize internal state and is not
- *   forwarded to the underlying controlled component.
+ * - In controlled mode (`value` defined), the selection is fully driven by the
+ *   parent and internal state is never updated.
+ * - In uncontrolled mode, internal state is initialized from `defaultValue` and
+ *   updated before `onChange` is forwarded.
+ * - `onChange` fires in both modes.
  */
 export declare const Select: FunctionComponent<Props>;

package/components/Select/index.js

@@ -1,11 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ControlledSelect } from './index.controlled.js';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { select as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
 /**
- * Select field component supporting controlled and hybrid usage.
+ * Select field supporting controlled and uncontrolled usage.
  *
- * Wraps {@link ControlledSelect} and automatically manages the selected
- * value when no `value` prop is provided.
+ * Renders a native `<select>` with optional label and error feedback. All
+ * standard select attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
  *
  * ### CSS elements
  * - `label`
@@ -13,27 +21,29 @@ import { ControlledSelect } from './index.controlled.js';
  *
  * @param props - Component properties.
  * @see {@link Props}
- *
- * @returns A labelled select with optional internal selection management.
+ * @returns A labelled select with optional error feedback.
  *
  * @remarks
- * - In controlled mode (`value` defined), the selected value is fully driven
- *   by the parent component and internal state is never updated.
- * - In hybrid mode, internal state is initialized from `defaultValue` and
- *   subsequently manages selection updates itself.
- * - In hybrid mode, the internal value is updated before forwarding the
- *   `onChange` callback.
- * - `defaultValue` is only used to initialize internal state and is not
- *   forwarded to the underlying controlled component.
+ * - In controlled mode (`value` defined), the selection is fully driven by the
+ *   parent and internal state is never updated.
+ * - In uncontrolled mode, internal state is initialized from `defaultValue` and
+ *   updated before `onChange` is forwarded.
+ * - `onChange` fires in both modes.
  */
-export const Select = ({ defaultValue, value, onChange, ...rest }) => {
+export const Select = ({ label, error, value, defaultValue, onChange, className, children, ...rest }) => {
+    // State
+    const [id] = useState(`_${randomHash(12)}`);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
     const isControlled = value !== undefined;
-    const [internal, setInternal] = useState(defaultValue ?? '');
-    const currentValue = isControlled ? value : internal;
+    const currentValue = isControlled ? value : internalValue;
+    // User action handlers
     const handleChange = (e) => {
         if (!isControlled)
-            setInternal(e.target.value);
+            setInternalValue(e.target.value);
         onChange?.(e);
     };
-    return _jsx(ControlledSelect, { ...rest, value: currentValue, onChange: handleChange });
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("select", { ...rest, id: id, className: rootClss, value: currentValue, onChange: handleChange, children: children }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
 };

package/components/Sequencer/index.controlled.d.ts

@@ -1,7 +1,7 @@
 import { type FunctionComponent, type PropsWithChildren } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
- * Props for the {@link SequencerControlled} component.
+ * Props for the {@link ControlledSequencer} component.
  *
  * This is the low-level controlled interface. All state is driven externally —
  * the component holds no internal state of its own. For the uncontrolled
@@ -16,32 +16,22 @@ import type { WithClassName } from '../utils/types.js';
  * child indices that should be active when `step === i`, allowing multiple
  * children to be simultaneously active on a given step. When omitted, exactly
  * one child is active at a time (the child at index `step`).
- * @property _modifiers - Internal modifier flags forwarded directly to the
- * BEM class builder on the root element. Intended to be injected by the
- * uncontrolled wrapper; avoid setting manually in consumer code.
- * - `playing` — sequence is currently progressing.
- * - `at-start` — current step is the first step.
- * - `at-end` — current step is the last step.
- * @property _dataAttributes - Internal data attribute values forwarded to the
- * root element as `data-<key>`. Intended to be injected by the uncontrolled
- * wrapper; avoid setting manually in consumer code.
- * - `tempo` — exposed as `data-tempo`, reflects the current playback tempo.
+ * @property isPlaying - Whether the sequence is currently progressing. The
+ * controlled layer never advances on its own; this only drives the `--playing`
+ * modifier. Defaults to `false`.
+ * @property tempo - Playback speed in beats per minute, exposed as `data-tempo`
+ * for styling and scripting. Purely informational here — the interval itself
+ * lives in the uncontrolled wrapper. When omitted, no attribute is rendered.
  * @property className - Optional additional class name(s) applied to the root element.
  * @property children - The items to sequence. Each child is wrapped in a
  * classifier `<div>` and receives one of the `--active`, `--previous`, or
  * `--next` modifiers depending on its position relative to the current `step`.
  */
-export type ControlledProps = PropsWithChildren<WithClassName<{
+export type Props = PropsWithChildren<WithClassName<{
     step?: number;
     activateOnStep?: number[][];
-    _modifiers?: {
-        playing?: boolean;
-        'at-start'?: boolean;
-        'at-end'?: boolean;
-    };
-    _dataAttributes?: {
-        tempo?: number;
-    };
+    isPlaying?: boolean;
+    tempo?: number;
 }>>;
 /**
  * Controlled sequencer component. Renders each child inside a classifier
@@ -54,14 +44,14 @@ export type ControlledProps = PropsWithChildren<WithClassName<{
  *
  * ### Root element modifiers
  * The root `<div>` receives the public class name defined by `sequencer` and
- * the following BEM-style modifier classes, sourced from `_modifiers`:
- * - `--playing` — when the sequence is actively progressing.
+ * the following BEM-style modifier classes:
+ * - `--playing` — when `isPlaying` is `true`.
  * - `--at-start` — when the current step is the first step.
  * - `--at-end` — when the current step is the last step.
  *
  * ### Data attributes on the root element
- * Derived from `_dataAttributes`, each key is prefixed with `data-`:
- * - `data-tempo` — current playback tempo, when provided.
+ * - `data-step` — the current step index.
+ * - `data-tempo` — current playback tempo, when `tempo` is provided.
  *
  * ### Child wrapper elements
  * Each child is wrapped in a `<div>` with the `__child` element class and
@@ -72,7 +62,7 @@ export type ControlledProps = PropsWithChildren<WithClassName<{
  * - `--next` — this child has not yet been reached.
  *
  * @param props - Component properties.
- * @see {@link ControlledProps}
+ * @see {@link Props}
  * @returns A root `<div>` containing one classifier wrapper per child.
  */
-export declare const SequencerControlled: FunctionComponent<ControlledProps>;
+export declare const ControlledSequencer: FunctionComponent<Props>;

package/components/Sequencer/index.controlled.js

@@ -15,14 +15,14 @@ import cssModule from './styles.module.css';
  *
  * ### Root element modifiers
  * The root `<div>` receives the public class name defined by `sequencer` and
- * the following BEM-style modifier classes, sourced from `_modifiers`:
- * - `--playing` — when the sequence is actively progressing.
+ * the following BEM-style modifier classes:
+ * - `--playing` — when `isPlaying` is `true`.
  * - `--at-start` — when the current step is the first step.
  * - `--at-end` — when the current step is the last step.
  *
  * ### Data attributes on the root element
- * Derived from `_dataAttributes`, each key is prefixed with `data-`:
- * - `data-tempo` — current playback tempo, when provided.
+ * - `data-step` — the current step index.
+ * - `data-tempo` — current playback tempo, when `tempo` is provided.
  *
  * ### Child wrapper elements
  * Each child is wrapped in a `<div>` with the `__child` element class and
@@ -33,17 +33,20 @@ import cssModule from './styles.module.css';
  * - `--next` — this child has not yet been reached.
  *
  * @param props - Component properties.
- * @see {@link ControlledProps}
+ * @see {@link Props}
  * @returns A root `<div>` containing one classifier wrapper per child.
  */
-export const SequencerControlled = ({ step = 0, activateOnStep, _modifiers, _dataAttributes, className, children }) => {
+export const ControlledSequencer = ({ step = 0, activateOnStep, isPlaying = false, tempo, className, children }) => {
+    const childrenArr = Children.toArray(children);
+    const stepsCount = activateOnStep?.length ?? childrenArr.length;
     // Rendering
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null, _modifiers), className);
-    const rootAttributes = Object
-        .entries({ ..._dataAttributes })
-        .reduce((acc, [key, val]) => ({ ...acc, [`data-${key}`]: val }), { 'data-step': step });
-    return _jsx("div", { className: rootClss, ...rootAttributes, children: Children.toArray(children)
+    const rootClss = mergeClassNames(c(null, {
+        playing: isPlaying,
+        'at-start': step === 0,
+        'at-end': step === stepsCount - 1
+    }), className);
+    return _jsx("div", { className: rootClss, "data-step": step, "data-tempo": tempo, children: childrenArr
             .map((child, childPos) => {
             const thisStepActivateOnStep = activateOnStep?.[step];
             const isPrevious = activateOnStep === undefined
@@ -62,6 +65,6 @@ export const SequencerControlled = ({ step = 0, activateOnStep, _modifiers, _dat
                 prev: isPrevious,
                 next: isNext
             });
-            return _jsx("div", { className: childClss, children: child });
+            return _jsx("div", { className: childClss, children: child }, childPos);
         }) });
 };

package/components/Sequencer/index.d.ts

@@ -1,11 +1,12 @@
 import { type FunctionComponent } from 'react';
 import { type Props as IOCompProps } from '../IntersectionObserver/index.js';
-import { type ControlledProps } from './index.controlled.js';
+import { type Props as ControlledProps } from './index.controlled.js';
 /**
  * Props for the {@link Sequencer} component.
  *
- * Extends {@link ControlledProps} (minus `_modifiers`, which are derived
- * internally) with uncontrolled playback and viewport-driven behaviour.
+ * Extends {@link ControlledProps} — minus `isPlaying` and `tempo`, which this
+ * component derives itself — with uncontrolled playback and viewport-driven
+ * behaviour.
  *
  * @property defaultStep - Initial step index when running in uncontrolled mode.
  * Ignored if `step` is provided. Defaults to `0`.
@@ -28,16 +29,15 @@ import { type ControlledProps } from './index.controlled.js';
  * component enters the viewport. No-op when `play` is controlled.
  * @property pauseOnHidden - When `true`, pauses internal playback when the
  * component leaves the viewport. No-op when `play` is controlled.
- * @property actionHandlers - Optional handlers for imperative actions triggered
- * by external events:
- * - `intersected` — forwarded verbatim to the internal
- * {@link IntersectionObserverComponent}'s `onIntersected`, called on every
- * intersection change regardless of controlled state.
- * @property stateHandlers - Optional callbacks invoked when derived state changes:
- * - `isPlaying` — called with the new play state whenever it changes.
- * - `stepChanged` — called with the new forwarded step index whenever it changes.
+ * @property onIntersected - Forwarded verbatim to the internal
+ * {@link IntersectionObserverComponent}, and called on every intersection
+ * change whichever mode the sequencer runs in.
+ * @property onIsPlayingChanged - Called after the effective play state changed,
+ * with the new value.
+ * @property onStepChanged - Called after the forwarded step changed, with the
+ * new value.
  */
-export type Props = Omit<ControlledProps, '_modifiers'> & {
+export type Props = Omit<ControlledProps, 'isPlaying' | 'tempo'> & {
     defaultStep?: number;
     tempo?: number;
     play?: boolean;
@@ -48,38 +48,33 @@ export type Props = Omit<ControlledProps, '_modifiers'> & {
     resetOnHidden?: boolean;
     playOnVisible?: boolean;
     pauseOnHidden?: boolean;
-    actionHandlers?: {
-        intersected?: IOCompProps['onIntersected'];
-    };
-    stateHandlers?: {
-        isPlaying?: (isPlaying: boolean) => void;
-        stepChanged?: (step: number) => void;
-    };
+    onIntersected?: IOCompProps['onIntersected'];
+    onIsPlayingChanged?: (isPlaying: boolean) => void;
+    onStepChanged?: (step: number) => void;
 };
 /**
  * Uncontrolled, self-advancing sequencer component. Drives a
- * {@link SequencerControlled} instance with an internal tempo-based interval,
+ * {@link ControlledSequencer} instance with an internal tempo-based interval,
  * optional loop/clamp boundary behaviour, and viewport-driven play/reset triggers
  * via an {@link IntersectionObserverComponent}.
  *
  * Supports mixed controlled/uncontrolled usage: passing `step` disables the
  * internal interval while still applying loop/clamp arithmetic before forwarding
  * to the controlled layer. Passing `play` disables internal play state management
- * while still allowing viewport handlers to fire `actionHandlers.intersected`.
+ * while still allowing viewport handlers to fire `onIntersected`.
  *
- * ### Forwarded modifiers to {@link SequencerControlled}
- * The following `_modifiers` are computed and injected automatically:
- * - `playing` — `true` when the effective play state is active.
- * - `at-start` — `true` when the forwarded step is `0`.
- * - `at-end` — `true` when the forwarded step equals `stepsCount - 1`.
+ * ### Forwarded to {@link ControlledSequencer}
+ * - `step` — the effective step, after loop/clamp arithmetic.
+ * - `isPlaying` — the effective play state, controlled or internal.
+ * - `tempo` — the current tempo, which the controlled layer exposes as `data-tempo`.
  *
- * ### Forwarded data attributes to {@link SequencerControlled}
- * - `data-tempo` — the current `tempo` value.
+ * The `--at-start` and `--at-end` modifiers are derived by the controlled layer
+ * from `step` and the children count.
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @see {@link SequencerControlled}
+ * @see {@link ControlledSequencer}
  * @returns An {@link IntersectionObserverComponent} wrapping a
- * {@link SequencerControlled} with the computed step and modifiers applied.
+ * {@link ControlledSequencer} with the computed step and modifiers applied.
  */
 export declare const Sequencer: FunctionComponent<Props>;