@design-edito/tools 0.5.7 → 0.5.8

package/agnostic/arrays/index.d.ts

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
 export * as findDuplicates from './find-duplicates/index.js'
-export * as isArrayOf from './is-array-of/index.js'
 export * as make from './make/index.js'
-export * as randomPick from './random-pick/index.js'
+export * as isArrayOf from './is-array-of/index.js'
 export * as shuffle from './shuffle/index.js'
+export * as randomPick from './random-pick/index.js'

package/agnostic/arrays/index.js

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
 export * as findDuplicates from './find-duplicates/index.js'
-export * as isArrayOf from './is-array-of/index.js'
 export * as make from './make/index.js'
-export * as randomPick from './random-pick/index.js'
+export * as isArrayOf from './is-array-of/index.js'
 export * as shuffle from './shuffle/index.js'
+export * as randomPick from './random-pick/index.js'

package/agnostic/colors/index.d.ts

@@ -4,9 +4,9 @@ export * as convert from './convert/index.js'
 export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
-export * as lerp from './lerp/index.js'
-export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
-export * as rotate from './rotate/index.js'
+export * as lerp from './lerp/index.js'
 export * as tidy from './tidy/index.js'
+export * as rotate from './rotate/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as luminance from './luminance/index.js'

package/agnostic/colors/index.js

@@ -4,9 +4,9 @@ export * as convert from './convert/index.js'
 export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
-export * as lerp from './lerp/index.js'
-export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
-export * as rotate from './rotate/index.js'
+export * as lerp from './lerp/index.js'
 export * as tidy from './tidy/index.js'
+export * as rotate from './rotate/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as luminance from './luminance/index.js'

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
 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 clss from './clss/index.js'
 export * as scale from './scale/index.js'
+export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
 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 clss from './clss/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,40 +1,40 @@
 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 append from './append/index.js'
 export * as call from './call/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as clone from './clone/index.js'
 export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
+export * as getproperties from './getproperties/index.js'
 export * as hjparse from './hjparse/index.js'
+export * as getproperty from './getproperty/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 join from './join/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 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 join from './join/index.js'
 export * as print from './print/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 push from './push/index.js'
 export * as removeattribute from './removeattribute/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 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 set from './set/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
@@ -48,5 +48,5 @@ 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 transformselected from './transformselected/index.js'
+export * as trim from './trim/index.js'

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

@@ -1,40 +1,40 @@
 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 append from './append/index.js'
 export * as call from './call/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as clone from './clone/index.js'
 export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
+export * as getproperties from './getproperties/index.js'
 export * as hjparse from './hjparse/index.js'
+export * as getproperty from './getproperty/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 join from './join/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 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 join from './join/index.js'
 export * as print from './print/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 push from './push/index.js'
 export * as removeattribute from './removeattribute/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 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 set from './set/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
@@ -48,5 +48,5 @@ 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 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 nodelist from './nodelist/index.js'
-export * as null from './null/index.js'
 export * as guess from './guess/index.js'
+export * as null from './null/index.js'
+export * as nodelist from './nodelist/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 record from './record/index.js'
 export * as string from './string/index.js'
 export * as text from './text/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 nodelist from './nodelist/index.js'
-export * as null from './null/index.js'
 export * as guess from './guess/index.js'
+export * as null from './null/index.js'
+export * as nodelist from './nodelist/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 record from './record/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/index.d.ts

@@ -1,10 +1,10 @@
 export * as deepSelect from './deep-select/index.js'
-export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
+export * as getNodeAncestors from './get-node-ancestors/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 watchSelection from './watch-selection/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'

package/agnostic/html/index.js

@@ -1,10 +1,10 @@
 export * as deepSelect from './deep-select/index.js'
-export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
+export * as getNodeAncestors from './get-node-ancestors/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 watchSelection from './watch-selection/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'

package/agnostic/index.d.ts

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
-export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
-export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
+export * as misc from './misc/index.js'
 export * as objects from './objects/index.js'
+export * as colors from './colors/index.js'
 export * as optim from './optim/index.js'
-export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
+export * as random from './random/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 time from './time/index.js'
+export * as subtitles from './subtitles/index.js'
 export * as typescript from './typescript/index.js'
+export * as time from './time/index.js'

package/agnostic/index.js

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
-export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
-export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
+export * as misc from './misc/index.js'
 export * as objects from './objects/index.js'
+export * as colors from './colors/index.js'
 export * as optim from './optim/index.js'
-export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
+export * as random from './random/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 time from './time/index.js'
+export * as subtitles from './subtitles/index.js'
 export * as typescript from './typescript/index.js'
+export * as time from './time/index.js'

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
-export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
+export * as connection from './connection/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'
+export * as normalizeExtension from './normalize-extension/index.js'

package/agnostic/misc/index.js

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
-export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
+export * as connection from './connection/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'
+export * as normalizeExtension from './normalize-extension/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 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 isRecord from './is-record/index.js'
 export * as recordMap from './record-map/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
+export * as enums from './enums/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 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 isRecord from './is-record/index.js'
 export * as recordMap from './record-map/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
+export * as enums from './enums/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

@@ -1,8 +1,8 @@
 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 replaceAll from './replace-all/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 toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'

package/agnostic/strings/index.js

@@ -1,8 +1,8 @@
 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 replaceAll from './replace-all/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 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/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/ResizeObserver/index.d.ts

@@ -20,9 +20,14 @@ export type Props = PropsWithChildren<WithClassName<{
  * rect on its root element. Both sets stay absent until the first measurement
  * lands.
  *
+ * ### Root element modifiers
+ * - `--measured` — a first measurement landed, so the sets below are populated.
+ *
  * ### Data attributes
  * `data-x`, `data-y`, `data-top`, `data-left`, `data-bottom`, `data-right`,
- * `data-width` and `data-height` — the content rect, as plain numbers.
+ * `data-width` and `data-height` — the content rect, as plain numbers. They carry
+ * what a custom property cannot reach: `content: attr(data-width)`, and attribute
+ * selectors.
  *
  * ### CSS custom properties
  * The same eight measurements, each exposed twice: `--lm-resize-observer-width`

package/components/ResizeObserver/index.js

@@ -9,9 +9,14 @@ import cssModule from './styles.module.css';
  * rect on its root element. Both sets stay absent until the first measurement
  * lands.
  *
+ * ### Root element modifiers
+ * - `--measured` — a first measurement landed, so the sets below are populated.
+ *
  * ### Data attributes
  * `data-x`, `data-y`, `data-top`, `data-left`, `data-bottom`, `data-right`,
- * `data-width` and `data-height` — the content rect, as plain numbers.
+ * `data-width` and `data-height` — the content rect, as plain numbers. They carry
+ * what a custom property cannot reach: `content: attr(data-width)`, and attribute
+ * selectors.
  *
  * ### CSS custom properties
  * The same eight measurements, each exposed twice: `--lm-resize-observer-width`
@@ -89,6 +94,6 @@ export const ResizeObserverComponent = ({ className, onResized, children }) => {
         };
     }
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), className);
+    const rootClss = mergeClassNames(c(null, { measured: contentRect !== undefined }), className);
     return _jsx("div", { ...dataAttributes, className: rootClss, ref: rootRef, style: { ...cssCustomProps }, children: children });
 };

package/components/ScrollListener/index.d.ts

@@ -37,6 +37,11 @@ export type Props = PropsWithChildren<WithClassName<WithViewportObservation<{
  * properties on its root element, so scroll-driven styling needs no JavaScript
  * of its own.
  *
+ * ### Root element modifiers
+ * - `--measured` — a first measurement landed, so the properties below are set.
+ * - `--scrolling-up` / `--scrolling-down` — the document's last known direction.
+ *   Neither is present before the first scroll.
+ *
  * ### CSS custom properties on the root element
  * Each measurement comes as a `px` length under its bare name, and as a `-raw`
  * twin holding the plain number:

package/components/ScrollListener/index.js

@@ -12,6 +12,11 @@ import cssModule from './styles.module.css';
  * properties on its root element, so scroll-driven styling needs no JavaScript
  * of its own.
  *
+ * ### Root element modifiers
+ * - `--measured` — a first measurement landed, so the properties below are set.
+ * - `--scrolling-up` / `--scrolling-down` — the document's last known direction.
+ *   Neither is present before the first scroll.
+ *
  * ### CSS custom properties on the root element
  * Each measurement comes as a `px` length under its bare name, and as a `-raw`
  * twin holding the plain number:
@@ -92,7 +97,11 @@ export const ScrollListener = ({ startOnVisible, stopOnHidden, threshold, root,
     }, [startOnVisible, stopOnHidden, onVisibilityChanged]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), className);
+    const rootClss = mergeClassNames(c(null, {
+        measured: scrollState !== undefined,
+        'scrolling-up': scrollDirection === 'up',
+        'scrolling-down': scrollDirection === 'down'
+    }), className);
     const customProps = scrollState === undefined
         ? {}
         : toScrollCssProps(scrollState);

package/components/Select/index.d.ts

@@ -24,6 +24,10 @@ export type Props = SelectHTMLAttributes<HTMLSelectElement> & PropsWithChildren<
  * 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/Select/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 Select = ({ 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("select", { ...rest, id: id, className: rootClss, value: currentValue, onChange: handleChange, children: children }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
 };

package/components/ShadowRoot/index.d.ts

@@ -28,6 +28,10 @@ export type Props = PropsWithChildren<WithClassName<{
  * Component that creates a Shadow Root on its host element and renders
  * its children inside that Shadow Root using a React portal.
  *
+ * ### Root element modifiers
+ * - `--attached` — the shadow root exists and the children are rendered into it.
+ * Absent on the first render, before the host element is in the document.
+ *
  * @param props - Component properties
  * @see {@link Props}
  * @returns A host `div` element that owns the created Shadow Root.

package/components/ShadowRoot/index.js

@@ -9,6 +9,10 @@ import cssModule from './styles.module.css';
  * Component that creates a Shadow Root on its host element and renders
  * its children inside that Shadow Root using a React portal.
  *
+ * ### Root element modifiers
+ * - `--attached` — the shadow root exists and the children are rendered into it.
+ * Absent on the first render, before the host element is in the document.
+ *
  * @param props - Component properties
  * @see {@link Props}
  * @returns A host `div` element that owns the created Shadow Root.
@@ -38,6 +42,6 @@ export const ShadowRootComponent = ({ mode = 'open', delegatesFocus, slotAssignm
     ]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), className);
+    const rootClss = mergeClassNames(c(null, { attached: shadowRoot !== null }), className);
     return _jsx("div", { ref: hostRef, className: rootClss, children: shadowRoot !== null && createPortal(_jsxs(_Fragment, { children: [styles !== undefined && _jsx("style", { children: styles }), children] }), shadowRoot) });
 };

package/components/Textarea/index.d.ts

@@ -26,6 +26,10 @@ export type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & 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/Textarea/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`
@@ -53,6 +57,10 @@ export const Textarea = ({ label, error, autoHeight = false, value, defaultValue
     };
     // 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("textarea", { ...rest, ref: textareaRef, id: id, className: rootClss, value: currentValue, onChange: handleChange }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
 };

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

@@ -146,8 +146,14 @@ export type Props = PropsWithChildren<WithClassName<{
  * - `data-total-time-ms` — total duration in milliseconds.
  *
  * ### CSS custom properties on the root element
- * - `--video-current-time-ratio` — current / total ratio, fixed to 8 decimals.
- * Useful for driving progress-bar animations purely in CSS.
+ * Durations come as a `ms` time under the bare name and as a plain number under a
+ * `-raw` twin; ratios are unitless and have no twin.
+ * - `--lm-video-current-time` / `--lm-video-current-time-raw`
+ * - `--lm-video-total-time` / `--lm-video-total-time-raw`
+ * - `--lm-video-current-time-ratio` — how far through the media the playhead is.
+ * What a progress bar animates on, with no JavaScript of its own.
+ * - `--lm-video-volume-ratio`
+ * - `--lm-video-playback-rate` — a multiplier, not a ratio: `1` is normal speed.
  *
  * @param props - Component properties.
  * @see {@link Props}

package/components/Video/index.controlled.js

@@ -35,8 +35,14 @@ import { forceExitFullscreen, forceFullscreen, forceLoud, forceMute, forcePause,
  * - `data-total-time-ms` — total duration in milliseconds.
  *
  * ### CSS custom properties on the root element
- * - `--video-current-time-ratio` — current / total ratio, fixed to 8 decimals.
- * Useful for driving progress-bar animations purely in CSS.
+ * Durations come as a `ms` time under the bare name and as a plain number under a
+ * `-raw` twin; ratios are unitless and have no twin.
+ * - `--lm-video-current-time` / `--lm-video-current-time-raw`
+ * - `--lm-video-total-time` / `--lm-video-total-time-raw`
+ * - `--lm-video-current-time-ratio` — how far through the media the playhead is.
+ * What a progress bar animates on, with no JavaScript of its own.
+ * - `--lm-video-volume-ratio`
+ * - `--lm-video-playback-rate` — a multiplier, not a ratio: `1` is normal speed.
  *
  * @param props - Component properties.
  * @see {@link Props}
@@ -159,7 +165,13 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
         'data-total-time-ms': totalTimeMs
     };
     const rootStyles = {
-        [`--${publicClassName}-current-time-ratio`]: currentTimeRatio.toFixed(8)
+        '--lm-video-current-time': `${currentTimeMs}ms`,
+        '--lm-video-current-time-raw': `${currentTimeMs}`,
+        '--lm-video-total-time': `${totalTimeMs}ms`,
+        '--lm-video-total-time-raw': `${totalTimeMs}`,
+        '--lm-video-current-time-ratio': `${currentTimeRatio}`,
+        '--lm-video-volume-ratio': `${volume}`,
+        '--lm-video-playback-rate': `${playbackRate}`
     };
     const parsedSources = useMemo(() => {
         if (sources === undefined)

package/components/index.d.ts

@@ -10,16 +10,16 @@ export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
-export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
-export * as paginator from './Paginator/index.js'
-export * as resizeObserver from './ResizeObserver/index.js'
-export * as scrllgngn from './Scrllgngn/index.js'
+export * as listLoader from './ListLoader/index.js'
 export * as scrollListener from './ScrollListener/index.js'
-export * as select from './Select/index.js'
+export * as paginator from './Paginator/index.js'
 export * as sequencer from './Sequencer/index.js'
+export * as select from './Select/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
 export * as textarea from './Textarea/index.js'
 export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'

package/components/index.js

@@ -10,16 +10,16 @@ export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
-export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
-export * as paginator from './Paginator/index.js'
-export * as resizeObserver from './ResizeObserver/index.js'
-export * as scrllgngn from './Scrllgngn/index.js'
+export * as listLoader from './ListLoader/index.js'
 export * as scrollListener from './ScrollListener/index.js'
-export * as select from './Select/index.js'
+export * as paginator from './Paginator/index.js'
 export * as sequencer from './Sequencer/index.js'
+export * as select from './Select/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
 export * as textarea from './Textarea/index.js'
 export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'

package/node/@aws-s3/storage/file/index.d.ts

@@ -1,7 +1,7 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
-export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as move from './move/index.js'
 export * as upload from './upload/index.js'

package/node/@aws-s3/storage/file/index.js

@@ -1,7 +1,7 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
-export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as move from './move/index.js'
 export * as upload from './upload/index.js'

package/node/@google-cloud/storage/directory/index.d.ts

@@ -1,4 +1,4 @@
-export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
+export * as copyDir from './copy-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'

package/node/@google-cloud/storage/directory/index.js

@@ -1,4 +1,4 @@
-export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
+export * as copyDir from './copy-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'

package/node/@google-cloud/storage/file/index.d.ts

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
-export * as download from './download/index.js'
-export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as exists from './exists/index.js'
+export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
+export * as download from './download/index.js'
 export * as remove from './remove/index.js'
-export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
+export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'

package/node/@google-cloud/storage/file/index.js

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
-export * as download from './download/index.js'
-export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as exists from './exists/index.js'
+export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
+export * as download from './download/index.js'
 export * as remove from './remove/index.js'
-export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
+export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'

package/node/cloud-storage/operations/index.d.ts

@@ -3,8 +3,8 @@ export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
+export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'

package/node/cloud-storage/operations/index.js

@@ -3,8 +3,8 @@ export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
+export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'

package/node/files/index.d.ts

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as subpaths from './subpaths/index.js'
 export * as readWrite from './read-write/index.js'
+export * as subpaths from './subpaths/index.js'

package/node/files/index.js

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as subpaths from './subpaths/index.js'
 export * as readWrite from './read-write/index.js'
+export * as subpaths from './subpaths/index.js'

package/node/images/index.d.ts

@@ -1,5 +1,5 @@
-export * as create from './create/index.js'
 export * as format from './format/index.js'
 export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as create from './create/index.js'

package/node/images/index.js

@@ -1,5 +1,5 @@
-export * as create from './create/index.js'
 export * as format from './format/index.js'
 export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as create from './create/index.js'

package/node/images/transform/operations/index.d.ts

@@ -1,15 +1,15 @@
-export * as blur from './blur/index.js'
 export * as brighten from './brighten/index.js'
+export * as blur from './blur/index.js'
 export * as extend from './extend/index.js'
-export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
+export * as extract from './extract/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
-export * as hue from './hue/index.js'
 export * as level from './level/index.js'
-export * as lighten from './lighten/index.js'
+export * as hue from './hue/index.js'
 export * as normalize from './normalize/index.js'
+export * as lighten from './lighten/index.js'
 export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
-export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'
+export * as rotate from './rotate/index.js'

package/node/images/transform/operations/index.js

@@ -1,15 +1,15 @@
-export * as blur from './blur/index.js'
 export * as brighten from './brighten/index.js'
+export * as blur from './blur/index.js'
 export * as extend from './extend/index.js'
-export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
+export * as extract from './extract/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
-export * as hue from './hue/index.js'
 export * as level from './level/index.js'
-export * as lighten from './lighten/index.js'
+export * as hue from './hue/index.js'
 export * as normalize from './normalize/index.js'
+export * as lighten from './lighten/index.js'
 export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
-export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'
+export * as rotate from './rotate/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",