@design-edito/tools 0.5.7 → 0.5.9

package/agnostic/css/index.d.ts

@@ -2,5 +2,5 @@ export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as stylesSet from './styles-set/index.js'
 export * as scale from './scale/index.js'
+export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -2,5 +2,5 @@ export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as stylesSet from './styles-set/index.js'
 export * as scale from './scale/index.js'
+export * as stylesSet from './styles-set/index.js'

package/agnostic/errors/index.d.ts

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

package/agnostic/errors/index.js

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
-export * as clone from './clone/index.js'
 export * as call from './call/index.js'
+export * as addclass from './addclass/index.js'
+export * as clone from './clone/index.js'
+export * as getattribute from './getattribute/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as getproperties from './getproperties/index.js'
+export * as getproperty from './getproperty/index.js'
 export * as equals from './equals/index.js'
-export * as getattribute from './getattribute/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
-export * as getproperties from './getproperties/index.js'
-export * as length from './length/index.js'
+export * as if from './if/index.js'
 export * as join from './join/index.js'
+export * as hjparse from './hjparse/index.js'
 export * as map from './map/index.js'
-export * as negate from './negate/index.js'
-export * as notrailing from './notrailing/index.js'
-export * as pickrandom from './pickrandom/index.js'
+export * as length from './length/index.js'
 export * as or from './or/index.js'
-export * as getproperty from './getproperty/index.js'
+export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
+export * as negate from './negate/index.js'
 export * as pusheach from './pusheach/index.js'
-export * as push from './push/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
 export * as removeattribute from './removeattribute/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as removeclass from './removeclass/index.js'
-export * as renameproperty from './renameproperty/index.js'
-export * as replace from './replace/index.js'
+export * as push from './push/index.js'
 export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
-export * as sorton from './sorton/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as replace from './replace/index.js'
+export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
+export * as renameproperty from './renameproperty/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
-export * as trim from './trim/index.js'
+export * as toref from './toref/index.js'
+export * as tonull from './tonull/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as trim from './trim/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.js

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
-export * as clone from './clone/index.js'
 export * as call from './call/index.js'
+export * as addclass from './addclass/index.js'
+export * as clone from './clone/index.js'
+export * as getattribute from './getattribute/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as getproperties from './getproperties/index.js'
+export * as getproperty from './getproperty/index.js'
 export * as equals from './equals/index.js'
-export * as getattribute from './getattribute/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
-export * as getproperties from './getproperties/index.js'
-export * as length from './length/index.js'
+export * as if from './if/index.js'
 export * as join from './join/index.js'
+export * as hjparse from './hjparse/index.js'
 export * as map from './map/index.js'
-export * as negate from './negate/index.js'
-export * as notrailing from './notrailing/index.js'
-export * as pickrandom from './pickrandom/index.js'
+export * as length from './length/index.js'
 export * as or from './or/index.js'
-export * as getproperty from './getproperty/index.js'
+export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
+export * as negate from './negate/index.js'
 export * as pusheach from './pusheach/index.js'
-export * as push from './push/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
 export * as removeattribute from './removeattribute/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as removeclass from './removeclass/index.js'
-export * as renameproperty from './renameproperty/index.js'
-export * as replace from './replace/index.js'
+export * as push from './push/index.js'
 export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
-export * as sorton from './sorton/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as replace from './replace/index.js'
+export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
+export * as renameproperty from './renameproperty/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
-export * as trim from './trim/index.js'
+export * as toref from './toref/index.js'
+export * as tonull from './tonull/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as trim from './trim/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts

@@ -1,13 +1,13 @@
+export * as any from './any/index.js'
 export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
-export * as any from './any/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
+export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
-export * as guess from './guess/index.js'
 export * as number from './number/index.js'
-export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as string from './string/index.js'
 export * as text from './text/index.js'
+export * as string from './string/index.js'
+export * as record from './record/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.js

@@ -1,13 +1,13 @@
+export * as any from './any/index.js'
 export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
-export * as any from './any/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
+export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
-export * as guess from './guess/index.js'
 export * as number from './number/index.js'
-export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as string from './string/index.js'
 export * as text from './text/index.js'
+export * as string from './string/index.js'
+export * as record from './record/index.js'

package/agnostic/html/index.d.ts

@@ -5,6 +5,6 @@ export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
-export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
+export * as selectorToElement from './selector-to-element/index.js'
 export * as watchSelection from './watch-selection/index.js'

package/agnostic/html/index.js

@@ -5,6 +5,6 @@ export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
-export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
+export * as selectorToElement from './selector-to-element/index.js'
 export * as watchSelection from './watch-selection/index.js'

package/agnostic/index.d.ts

@@ -1,6 +1,6 @@
 export * as arrays from './arrays/index.js'
-export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
+export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
@@ -11,7 +11,7 @@ export * as optim from './optim/index.js'
 export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
-export * as subtitles from './subtitles/index.js'
 export * as strings from './strings/index.js'
+export * as subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/index.js

@@ -1,6 +1,6 @@
 export * as arrays from './arrays/index.js'
-export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
+export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
@@ -11,7 +11,7 @@ export * as optim from './optim/index.js'
 export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
-export * as subtitles from './subtitles/index.js'
 export * as strings from './strings/index.js'
+export * as subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/misc/index.d.ts

@@ -4,9 +4,9 @@ export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -4,9 +4,9 @@ export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/logs/index.d.ts

@@ -1,3 +1,3 @@
 export * as logger from './logger/index.js'
-export * as makeTextBlock from './make-text-block/index.js'
 export * as styles from './styles/index.js'
+export * as makeTextBlock from './make-text-block/index.js'

package/agnostic/misc/logs/index.js

@@ -1,3 +1,3 @@
 export * as logger from './logger/index.js'
-export * as makeTextBlock from './make-text-block/index.js'
 export * as styles from './styles/index.js'
+export * as makeTextBlock from './make-text-block/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
-export * as enums from './enums/index.js'
 export * as deepGetProperty from './deep-get-property/index.js'
+export * as enums from './enums/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
-export * as enums from './enums/index.js'
 export * as deepGetProperty from './deep-get-property/index.js'
+export * as enums from './enums/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'

package/agnostic/random/index.d.ts

@@ -1,3 +1,3 @@
 export * as hexChar from './hex-char/index.js'
-export * as uuid from './uuid/index.js'
 export * as random from './random/index.js'
+export * as uuid from './uuid/index.js'

package/agnostic/random/index.js

@@ -1,3 +1,3 @@
 export * as hexChar from './hex-char/index.js'
-export * as uuid from './uuid/index.js'
 export * as random from './random/index.js'
+export * as uuid from './uuid/index.js'

package/agnostic/strings/index.d.ts

@@ -2,7 +2,7 @@ export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as splitTrim from './split-trim/index.js'
 export * as replaceAll from './replace-all/index.js'
+export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'

package/agnostic/strings/index.js

@@ -2,7 +2,7 @@ export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as splitTrim from './split-trim/index.js'
 export * as replaceAll from './replace-all/index.js'
+export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'

package/agnostic/time/dates/index.d.ts

@@ -1,2 +1,2 @@
-export * as toFrenchRepublican from './to-french-republican/index.js'
 export * as formatDate from './format-date/index.js'
+export * as toFrenchRepublican from './to-french-republican/index.js'

package/agnostic/time/dates/index.js

@@ -1,2 +1,2 @@
-export * as toFrenchRepublican from './to-french-republican/index.js'
 export * as formatDate from './format-date/index.js'
+export * as toFrenchRepublican from './to-french-republican/index.js'

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
 export * as dates from './dates/index.js'
-export * as duration from './duration/index.js'
 export * as timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
+export * as duration from './duration/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
 export * as dates from './dates/index.js'
-export * as duration from './duration/index.js'
 export * as timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
+export * as duration from './duration/index.js'

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

@@ -30,10 +30,11 @@ export type Props = PropsWithChildren<WithClassName<{
  * as a ratio between `0` and `1`. Handles both mouse and touch input, telling a
  * click apart from a drag.
  *
- * The active ratio is exposed as:
- * - CSS custom properties `--lm-before-after-ratio` and
- * `--lm-before-after-ratio-percent`,
- * - a `data-ratio` attribute on the root element.
+ * The divider's position is exposed on the root element as:
+ * - the unitless custom property `--lm-before-after-ratio`. No percentage twin —
+ * `calc(var(--lm-before-after-ratio) * 100%)` covers it.
+ * - a `data-ratio` attribute, for what a custom property cannot reach:
+ * `content: attr(data-ratio)` and attribute selectors.
  *
  * ### CSS modifiers
  * - `horizontal` — applied when `mode` is `'horizontal'`.

package/components/BeforeAfter/index.controlled.js

@@ -13,10 +13,11 @@ import cssModule from './styles.module.css';
  * as a ratio between `0` and `1`. Handles both mouse and touch input, telling a
  * click apart from a drag.
  *
- * The active ratio is exposed as:
- * - CSS custom properties `--lm-before-after-ratio` and
- * `--lm-before-after-ratio-percent`,
- * - a `data-ratio` attribute on the root element.
+ * The divider's position is exposed on the root element as:
+ * - the unitless custom property `--lm-before-after-ratio`. No percentage twin —
+ * `calc(var(--lm-before-after-ratio) * 100%)` covers it.
+ * - a `data-ratio` attribute, for what a custom property cannot reach:
+ * `content: attr(data-ratio)` and attribute selectors.
  *
  * ### CSS modifiers
  * - `horizontal` — applied when `mode` is `'horizontal'`.
@@ -105,8 +106,7 @@ export const ControlledBeforeAfter = ({ mode = 'horizontal', ratio = 0, before,
     }), className);
     const roundedRatio = round(clampedRatio, 4);
     const customProps = {
-        '--lm-before-after-ratio': `${roundedRatio}`,
-        '--lm-before-after-ratio-percent': `${round(clampedRatio * 100, 2)}%`
+        '--lm-before-after-ratio': `${roundedRatio}`
     };
     return _jsxs("div", { ref: rootRef, className: rootClss, onMouseDown: handlePointerDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onTouchStart: handlePointerDown, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { ...customProps }, "data-ratio": roundedRatio, children: [_jsx("div", { className: c('before'), children: before }), _jsx("div", { className: c('after'), children: after }), _jsx("div", { className: c('separator') }), children] });
 };

package/components/Drawer/index.d.ts

@@ -43,6 +43,8 @@ export type Props = PropsWithChildren<WithClassName<{
  * - `opened` — the drawer is open.
  * - `closed` — the drawer is closed.
  *
+ * - `--measured` — the content has been measured, so the properties below are set.
+ *
  * ### CSS elements
  * - `opener`
  * - `closer`
@@ -54,8 +56,8 @@ export type Props = PropsWithChildren<WithClassName<{
  * Absent until the first measurement lands.
  *
  * ### Data attributes on the root element
- * - `data-content-width`, `data-content-height` — the measured content size.
  * Absent until the first measurement lands.
+ * - `data-content-width`, `data-content-height` — the measured content size.
  *
  * @param props - Component properties.
  * @see {@link Props}

package/components/Drawer/index.js

@@ -15,6 +15,8 @@ import cssModule from './styles.module.css';
  * - `opened` — the drawer is open.
  * - `closed` — the drawer is closed.
  *
+ * - `--measured` — the content has been measured, so the properties below are set.
+ *
  * ### CSS elements
  * - `opener`
  * - `closer`
@@ -26,8 +28,8 @@ import cssModule from './styles.module.css';
  * Absent until the first measurement lands.
  *
  * ### Data attributes on the root element
- * - `data-content-width`, `data-content-height` — the measured content size.
  * Absent until the first measurement lands.
+ * - `data-content-width`, `data-content-height` — the measured content size.
  *
  * @param props - Component properties.
  * @see {@link Props}
@@ -71,7 +73,8 @@ export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false,
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null, {
         'opened': isOpened,
-        'closed': !isOpened
+        'closed': !isOpened,
+        measured: contentDimensions !== undefined
     }), className);
     const openerClss = c('opener');
     const closerClss = c('closer');

package/components/Iframe/index.d.ts

@@ -24,6 +24,10 @@ export type Props = WithClassName<{
  * The parent component updates the iframe height via React state and `style`
  * prop (no direct DOM mutation).
  *
+ * ### Root element modifiers
+ * - `--auto-height` — the component is listening for a height from inside the frame.
+ * - `--measured` — one has arrived, and the frame is sized to it.
+ *
  * @param props - Component properties.
  * @see {@link Props}
  */

package/components/Iframe/index.js

@@ -33,6 +33,10 @@ const innerAutoHeightNotifier = (messageType) => `<script>
  * The parent component updates the iframe height via React state and `style`
  * prop (no direct DOM mutation).
  *
+ * ### Root element modifiers
+ * - `--auto-height` — the component is listening for a height from inside the frame.
+ * - `--measured` — one has arrived, and the frame is sized to it.
+ *
  * @param props - Component properties.
  * @see {@link Props}
  */
@@ -68,7 +72,10 @@ export const Iframe = ({ autoHeight = false, className, srcDoc, style, ...iframe
         return { ...base, height: `${height}px` };
     }, [style, autoHeight, height]);
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), className);
+    const rootClss = mergeClassNames(c(null, {
+        'auto-height': autoHeight,
+        measured: height !== null
+    }), className);
     const html = useMemo(() => {
         const autoHeightScript = autoHeight
             ? innerAutoHeightNotifier(innerMessageType)

package/components/Input/index.d.ts

@@ -23,6 +23,10 @@ export type Props = InputHTMLAttributes<HTMLInputElement> & WithClassName<{
  * A stable auto-generated `id` is created on mount and used to associate the
  * rendered label through the `htmlFor` attribute.
  *
+ * ### Root element modifiers
+ * - `--controlled` — the value comes from the parent, not from inside.
+ * - `--empty` / `--filled` — whether the current value is the empty string.
+ *
  * ### CSS elements
  * - `label`
  * - `error`

package/components/Input/index.js

@@ -15,6 +15,10 @@ import cssModule from './styles.module.css';
  * A stable auto-generated `id` is created on mount and used to associate the
  * rendered label through the `htmlFor` attribute.
  *
+ * ### Root element modifiers
+ * - `--controlled` — the value comes from the parent, not from inside.
+ * - `--empty` / `--filled` — whether the current value is the empty string.
+ *
  * ### CSS elements
  * - `label`
  * - `error`
@@ -44,6 +48,10 @@ export const Input = ({ label, error, value, defaultValue, onChange, className,
     };
     // Rendering
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), className);
+    const rootClss = mergeClassNames(c(null, {
+        controlled: isControlled,
+        empty: currentValue === '',
+        filled: currentValue !== ''
+    }), className);
     return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("input", { ...rest, id: id, className: rootClss, value: currentValue, onChange: handleChange }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
 };

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

@@ -60,6 +60,9 @@ export type Props<T> = WithClassName<ViewportObserverOptions & {
  * - in place of each page missing between two loaded pages,
  * - after the last loaded page, unless it is already `lastPagePos`.
  *
+ * ### Root element modifiers
+ * - `--loading` — at least one page is being fetched.
+ *
  * ### CSS elements
  * - `item` — wraps each rendered item. Carries `data-page`.
  * - `load` — a load button. Rendered empty, so its label belongs in CSS.

package/components/ListLoader/index.controlled.js

@@ -19,6 +19,9 @@ import cssModule from './styles.module.css';
  * - in place of each page missing between two loaded pages,
  * - after the last loaded page, unless it is already `lastPagePos`.
  *
+ * ### Root element modifiers
+ * - `--loading` — at least one page is being fetched.
+ *
  * ### CSS elements
  * - `item` — wraps each rendered item. Carries `data-page`.
  * - `load` — a load button. Rendered empty, so its label belongs in CSS.
@@ -78,7 +81,7 @@ export const ControlledListLoader = ({ className, pages, firstPagePos, lastPageP
         .filter(pagePos => inBoundsPages.includes(pagePos))
         .sort((a, b) => a - b);
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), className);
+    const rootClss = mergeClassNames(c(null, { loading: sortedLoadingPages.length > 0 }), className);
     const renderLoadButton = (pagePos, kind) => {
         const button = _jsx("button", { className: c('load', kind), "data-page": pagePos, onClick: () => onLoadPageClicked?.(pagePos) }, `load/${pagePos}`);
         const autoLoads = (kind === 'prev' && autoLoadPrevWhenVisible === true)

package/components/Paginator/index.d.ts

@@ -25,7 +25,9 @@ type DirectionState = 'forwards' | 'backwards' | null;
  *
  * @property thresholdOffsetPercent - Optional percentage offset used to compute
  * the {@link IntersectionObserver} root margin. Determines how far into the viewport
- * a page must be before it is considered `'curr'`. Defaults to `0`.
+ * a page must be before it is considered `'curr'`. Defaults to `0`. Clamped to
+ * 0–100, with a `console.warn` naming the value received — outside that range the
+ * root margin is invalid and the observer would throw.
  *
  * @property onDirectionChanged - Called after the scroll direction changed, with
  * the new {@link DirectionState}. Repeated scrolls in the same direction do not
@@ -64,7 +66,10 @@ export type Props = PropsWithChildren<WithClassName<{
  *   when the direction actually changes, using an internal ref to avoid stale
  *   closure comparisons.
  * - Page visibility is tracked via a single {@link IntersectionObserver} instance
- *   that is recreated when `thresholdOffsetPercent` or `children` change.
+ *   that is recreated when `thresholdOffsetPercent` or the **number** of children
+ *   changes. Not on `children` itself: a parent building its child list inline hands
+ *   over a new array on every render, which would tear down and rebuild one observer
+ *   per page each time, for nothing.
  * - `currCount` on each {@link PageState} increments each time a page transitions
  *   into the `'curr'` position, making it useful as a re-entry counter.
  */