@frontfactory/readmore 1.3.1 → 1.5.0

package/README.md

@@ -7,7 +7,7 @@
 Lightweight, framework-agnostic plugin to clamp text to N lines (or a fixed pixel height) with an ellipsis and a
 `Read more` / `Read less` toggle button.
 
-- Zero dependencies, ~1.3 KB gzipped
+- Zero dependencies, ~1.9 KB gzipped
 - TypeScript types included
 - CSS-driven clamping via `-webkit-line-clamp` or `max-height`
 - The toggle button is only created when the text actually overflows
@@ -19,8 +19,23 @@ Lightweight, framework-agnostic plugin to clamp text to N lines (or a fixed pixe
 npm install @frontfactory/readmore
 ```
 
-Requires Node.js `>=20.19` to build from source. The published package runs in any modern browser supporting 
-`ResizeObserver`.
+Requires Node.js `^22.22.2 || >=24.22` to build from source. The published package is shipped as untranspiled ES2022
+(private class members, logical assignment, `ResizeObserver`) and runs in Chrome/Edge 85+, Firefox 90+ and Safari 15+.
+
+### From a CDN
+
+Without a bundler, load the stylesheet and the IIFE build, which exposes `FrontFactory.ReadMore` (an existing
+`FrontFactory` global is extended, not replaced). Pin the major version in production:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@frontfactory/readmore@1/dist/readmore.css">
+<script src="https://cdn.jsdelivr.net/npm/@frontfactory/readmore@1/dist/readmore.iife.js"></script>
+<script>
+    FrontFactory.ReadMore.init('.excerpt', {
+        lines: 3
+    });
+</script>
+```
 
 ## Playground
 
@@ -51,14 +66,23 @@ ReadMore.init('.excerpt', {
 });
 ```
 
-`ReadMore.init()` also accepts a `NodeList` or an array of elements:
+`ReadMore.init()` also accepts an element, or any iterable or array-like of elements (`NodeList`, `HTMLCollection`,
+array, `Set`…). A third argument restricts a selector to a container:
 
 ```ts
 ReadMore.init(document.querySelectorAll<HTMLElement>('.excerpt'), {
     lines: 3
 });
+
+// only the excerpts inside #news
+ReadMore.init('.excerpt', {
+    lines: 3
+}, document.querySelector('#news')!);
 ```
 
+Calling `ReadMore.init()` again is safe: elements that are already initialized keep their instance (and its options) and
+are returned as is, so you can re-run it after injecting new content.
+
 Or instantiate against a single element:
 
 ```ts
@@ -70,19 +94,71 @@ if (el) new ReadMore(el, {
 });
 ```
 
+Each toggle also dispatches a bubbling `readmore:toggle` event on the element, handy for event delegation:
+
+```ts
+document.addEventListener('readmore:toggle', (event) => {
+    const { expanded, instance } = event.detail;
+});
+```
+
+Pass `true` or `false` to `toggle()` to force a state, e.g. for an "Expand all" button. Instances already in that
+state are left untouched and fire neither `onToggle` nor the event:
+
+```ts
+const instances = ReadMore.init('.excerpt');
+
+expandAllButton.addEventListener('click', () => instances.forEach((instance) => instance.toggle(true)));
+```
+
+The clamp is re-measured when the element resizes and once web fonts finish loading. Content changes that keep the
+element's size are not detected: call `refresh()` so the button is mounted or removed as needed:
+
+```ts
+instance.el.textContent = newText;
+instance.refresh();
+```
+
+### With a framework (React, Vue, Svelte…)
+
+The instance holds a button outside the element and is watched by a `ResizeObserver`, so call `destroy()` when the
+component unmounts. By default the button is inserted as a sibling of the element, which a framework may remove or
+leave behind when it re-renders. The recommended fix is `buttonContainer`: pass an element the framework owns (a ref)
+and the button is appended there instead. For example with React:
+
+```tsx
+useEffect(() => {
+    const instance = new ReadMore(textRef.current!, {
+        buttonContainer: buttonRef.current!
+    });
+
+    return () => instance.destroy();
+}, []);
+
+return (
+    <>
+        <p ref={textRef}>{children}</p>
+        <div ref={buttonRef} />
+    </>
+);
+```
+
 ## Options
 
-| Option          | Type                          | Default          | Description                                                         |
-|-----------------|-------------------------------|------------------|---------------------------------------------------------------------|
-| `lines`         | `number`                      | `3`              | Number of lines to clamp to (min `1`). Ignored if `height` is set.  |
-| `height`        | `number`                      | —                | Max height in pixels (min `1`). Takes precedence over `lines`.      |
-| `moreText`      | `string`                      | `'Read more'`    | Label of the button when the text is collapsed.                     |
-| `lessText`      | `string`                      | `'Read less'`    | Label of the button when the text is expanded.                      |
-| `buttonClass`   | `string`                      | `'readmore-btn'` | Class applied to the toggle button.                                 |
-| `expandedClass` | `string`                      | `'is-expanded'`  | Class applied to the target element while expanded.                 |
-| `openingClass`  | `string`                      | `'is-opening'`   | Transient class applied while expanding, removed after transition.  |
-| `closingClass`  | `string`                      | `'is-closing'`   | Transient class applied while collapsing, removed after transition. |
-| `onToggle`      | `(expanded: boolean) => void` | —                | Callback fired after each toggle with the current `expanded` state. |
+| Option            | Type                                              | Default          | Description                                                                                           |
+|-------------------|---------------------------------------------------|------------------|-------------------------------------------------------------------------------------------------------|
+| `lines`           | `number`                                          | `3`              | Number of lines to clamp to (min `1`). Ignored if `height` is set.                                    |
+| `height`          | `number`                                          | —                | Max height in pixels (greater than `0`). Takes precedence over `lines`.                                        |
+| `moreText`        | `string`                                          | `'Read more'`    | Label of the button when the text is collapsed.                                                       |
+| `lessText`        | `string`                                          | `'Read less'`    | Label of the button when the text is expanded.                                                        |
+| `moreLabel`       | `string`                                          | —                | `aria-label` of the button when collapsed. Should contain `moreText`.                                 |
+| `lessLabel`       | `string`                                          | —                | `aria-label` of the button when expanded. Should contain `lessText`.                                  |
+| `buttonClass`     | `string`                                          | `'readmore-btn'` | Class applied to the toggle button.                                                                   |
+| `buttonContainer` | `HTMLElement`                                     | —                | Element the button is appended to, instead of being inserted after the text.                          |
+| `expandedClass`   | `string`                                          | `'is-expanded'`  | Class applied to the target element while expanded.                                                   |
+| `openingClass`    | `string`                                          | `'is-opening'`   | Transient class applied while expanding, removed after transition.                                    |
+| `closingClass`    | `string`                                          | `'is-closing'`   | Transient class applied while collapsing, removed after transition.                                   |
+| `onToggle`        | `(expanded: boolean, instance: ReadMore) => void` | —                | Callback fired after each toggle, before the `readmore:toggle` event (still dispatched if it throws). |
 
 ## API
 
@@ -90,13 +166,17 @@ if (el) new ReadMore(el, {
 const instance = new ReadMore(element, options);
 
 instance.el;            // the target element
-instance.options;       // resolved options
+instance.options;       // resolved options (read-only)
 instance.toggle();      // expand / collapse programmatically
+instance.toggle(true);  // force expand (false: force collapse); no-op if already in that state
 instance.expanded;      // boolean getter
-instance.destroy();     // remove button, classes, listeners and generated id
+instance.refresh();     // re-check the overflow after a content change
+instance.destroy();     // remove button, classes, listeners and generated id; toggle() is a no-op afterwards
+
+ReadMore.init(target, options, root);  // target: selector | element | iterable of elements — returns ReadMore[], reusing existing instances
+ReadMore.getInstance(element);         // returns the ReadMore bound to an element, or undefined
 
-ReadMore.init(target, options);   // target: selector | NodeList | HTMLElement[] — returns ReadMore[]
-ReadMore.getInstance(element);    // returns the ReadMore bound to an element, or undefined
+// event: 'readmore:toggle' (bubbles) — event.detail: { expanded, instance }
 ```
 
 ### Errors
@@ -107,29 +187,47 @@ The constructor throws instead of failing silently:
 |--------------|-------------------------------------------------------------------------------|
 | `TypeError`  | `element` is not an `HTMLElement`.                                            |
 | `Error`      | The element is already initialized — call `destroy()` before re-initializing. |
-| `RangeError` | `lines` is lower than `1`, or `height` is lower than or equal to `0`.         |
+| `RangeError` | `lines` is not an integer `>= 1`, or `height` is not a finite number `> 0`.   |
+
+A `buttonContainer` that is not an `HTMLElement` also throws a `TypeError`.
+
+`lines` and `height` also accept numeric strings such as `'3'` (e.g. read from a `data-*` attribute); blank or
+non-numeric strings throw a `RangeError`.
 
 ## Accessibility
 
 When the button is mounted, it gets `aria-expanded` (kept in sync on every toggle) and `aria-controls`
-pointing to the target element. If the element has no `id`, a unique one (`readmore-1`, `readmore-2`, …)
-is generated and removed again on `destroy()`; an existing `id` is always preserved.
+pointing to the target element. If the element has no `id`, a unique one (`readmore-1`, `readmore-2`, …, skipping ids
+already used in the page) is generated and removed again on `destroy()`; an existing `id` is always preserved.
+
+When several buttons share the same visible text, give each one a distinct accessible name with `moreLabel` and
+`lessLabel`. Keep the visible text inside the label so voice control users can still activate the button by its text:
+
+```ts
+new ReadMore(el, {
+    moreLabel: 'Read more about Product A',
+    lessLabel: 'Read less about Product A'
+});
+```
 
 ## How it works
 
 The plugin sets a CSS custom property on the target element and toggles `.readmore-clamp`. In **lines mode** (default),
 it sets `--readmore-lines` and the bundled stylesheet applies `-webkit-line-clamp`, producing an ellipsis at the end of
 the last visible line. In **height mode** (`height` option), it sets `--readmore-height` and applies `max-height` via
-the `.readmore-clamp--height` modifier class instead. The toggle button is mounted right after the element only when the
-content actually overflows; a `ResizeObserver` watches the element and unmounts the button again if the text ends up
-fitting (or mounts it later if it starts overflowing).
+the `.readmore-clamp--height` modifier class instead. The toggle button is mounted (right after the element, or inside
+`buttonContainer` when set) only when the content actually overflows; a single `ResizeObserver`, shared by every instance, watches the elements and unmounts the
+button again if the text ends up fitting (or mounts it later if it starts overflowing). All resized elements are
+measured before any button is added or removed, to avoid a layout per element.
 
 ### Transient classes for animations
 
 In addition to `expandedClass` (which stays applied for the entire expanded state), the plugin applies short-lived
 `openingClass` and `closingClass` markers on the target element at the moment of expand and collapse respectively. Each
-is added when the toggle starts and removed automatically once the CSS transition on the element ends — or on the next
-tick if no transition is declared. Use them as hooks to drive enter/leave animations:
+is added when the toggle starts and removed automatically once the longest CSS transition declared on the element
+(duration + delay) has elapsed — or on the next tick if no transition is declared. The overflow check that mounts or
+unmounts the button waits for that moment too, so the button stays in place during a collapse animation. Use them as
+hooks to drive enter/leave animations:
 
 ```css
 .is-opening { 
@@ -140,3 +238,35 @@ tick if no transition is declared. Use them as hooks to drive enter/leave animat
     /* collapse animation */ 
 }
 ```
+
+### Reduced motion
+
+If you animate the expansion, turn the transition off for users who ask for less motion:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+    .excerpt {
+        transition: none;
+    }
+}
+```
+
+### Fade in height mode
+
+Add the `readmore-fade` class to the element to fade out the bottom of the clamped text in height mode (lines mode
+already ends with an ellipsis). The fade is removed while expanded; its size defaults to `2em` and can be changed with
+the `--readmore-fade-size` custom property:
+
+```html
+<p class="excerpt readmore-fade" style="--readmore-fade-size: 3em">…</p>
+```
+
+## Limitations
+
+- While collapsed, `.readmore-clamp` sets `display: -webkit-box` (lines mode) or `display: block` (height mode), which
+  overrides the element's own `display`. To clamp a flex or grid container, wrap its content in an inner element and
+  initialize the plugin on that element instead.
+- In lines mode, how `-webkit-line-clamp` handles several block children (e.g. multiple `<p>`) varies between browsers.
+  For rich content, prefer height mode.
+- Lines mode cannot be animated: neither `display` nor `line-clamp` can transition. For an animated expand/collapse, use
+  height mode with a `max-height` transition.

package/dist/readmore.css

@@ -1 +1 @@
-.readmore-clamp{-webkit-line-clamp:var(--readmore-lines,3);line-clamp:var(--readmore-lines,3);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.readmore-clamp--height{max-height:var(--readmore-height);-webkit-line-clamp:none;line-clamp:none;display:block}
+.readmore-clamp{-webkit-line-clamp:var(--readmore-lines,3);line-clamp:var(--readmore-lines,3);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.readmore-clamp--height{max-height:var(--readmore-height);-webkit-line-clamp:none;line-clamp:none;display:block}.readmore-fade.readmore-clamp--height{-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--readmore-fade-size,2em)), transparent);mask-image:linear-gradient(to bottom, #000 calc(100% - var(--readmore-fade-size,2em)), transparent)}

package/dist/readmore.d.ts

@@ -6,14 +6,14 @@ export interface ReadMoreOptions {
      * Number of lines to clamp to. Ignored when {@link ReadMoreOptions.height} is set.
      *
      * @defaultValue 3
-     * @throws RangeError - if lower than 1.
+     * @throws RangeError - if not an integer greater than or equal to 1.
      */
     lines?: number;
     /**
      * Max height in pixels. Takes precedence over {@link ReadMoreOptions.lines}
      * and clamps with `max-height` instead of `-webkit-line-clamp`.
      *
-     * @throws RangeError - if lower than or equal to 0.
+     * @throws RangeError - if not a finite number greater than 0.
      */
     height?: number;
     /**
@@ -28,12 +28,31 @@ export interface ReadMoreOptions {
      * @defaultValue 'Read less'
      */
     lessText?: string;
+    /**
+     * Accessible name (`aria-label`) of the toggle button while the text is
+     * collapsed, e.g. `'Read more about Product A'` when several buttons share
+     * the same visible text. It should contain {@link ReadMoreOptions.moreText}.
+     */
+    moreLabel?: string;
+    /**
+     * Accessible name (`aria-label`) of the toggle button while the text is
+     * expanded. It should contain {@link ReadMoreOptions.lessText}.
+     */
+    lessLabel?: string;
     /**
      * Class applied to the toggle button.
      *
      * @defaultValue 'readmore-btn'
      */
     buttonClass?: string;
+    /**
+     * Element the toggle button is appended to, instead of being inserted right
+     * after the clamped element. Use an element owned by your framework (a ref)
+     * so reconciliation cannot drop the button.
+     *
+     * @throws TypeError - if not an `HTMLElement`.
+     */
+    buttonContainer?: HTMLElement;
     /**
      * Class applied to the target element for the whole expanded state.
      *
@@ -41,34 +60,51 @@ export interface ReadMoreOptions {
      */
     expandedClass?: string;
     /**
-     * Transient class applied when expanding, removed once the CSS transition
-     * on the element ends — or on the next tick if no transition is declared.
+     * Transient class applied when expanding, removed once the longest CSS
+     * transition on the element (duration + delay) has elapsed — or on the next
+     * tick if no transition is declared.
      *
      * @defaultValue 'is-opening'
      */
     openingClass?: string;
     /**
-     * Transient class applied when collapsing, removed once the CSS transition
-     * on the element ends — or on the next tick if no transition is declared.
+     * Transient class applied when collapsing, removed once the longest CSS
+     * transition on the element (duration + delay) has elapsed — or on the next
+     * tick if no transition is declared.
      *
      * @defaultValue 'is-closing'
      */
     closingClass?: string;
     /**
-     * Called after each toggle with the resulting state.
+     * Called after each toggle with the resulting state, right before the
+     * `readmore:toggle` event is dispatched.
      *
      * @param expanded - `true` once expanded, `false` once collapsed.
+     * @param instance - The instance that was toggled.
      */
-    onToggle?: (expanded: boolean) => void;
+    onToggle?: (expanded: boolean, instance: ReadMore) => void;
 }
+type OptionalKeys = 'height' | 'buttonContainer' | 'moreLabel' | 'lessLabel' | 'onToggle';
 /**
  * {@link ReadMoreOptions} merged with the defaults, as exposed on
  * {@link ReadMore.options}.
  */
-export type ResolvedOptions = Required<Omit<ReadMoreOptions, 'height' | 'onToggle'>> & {
-    height?: number;
-    onToggle?: (expanded: boolean) => void;
-};
+export type ResolvedOptions = Required<Omit<ReadMoreOptions, OptionalKeys>> & Pick<ReadMoreOptions, OptionalKeys>;
+/** `detail` of the `readmore:toggle` event. */
+export interface ReadMoreToggleDetail {
+    /** `true` once expanded, `false` once collapsed. */
+    expanded: boolean;
+    /** The instance that was toggled. */
+    instance: ReadMore;
+}
+declare global {
+    interface HTMLElementEventMap {
+        'readmore:toggle': CustomEvent<ReadMoreToggleDetail>;
+    }
+    interface DocumentEventMap {
+        'readmore:toggle': CustomEvent<ReadMoreToggleDetail>;
+    }
+}
 /**
  * Clamps an element to a number of lines (or a fixed height) and mounts a
  * `Read more` / `Read less` button right after it, but only while the content
@@ -87,33 +123,51 @@ export declare class ReadMore {
     /** The clamped element. */
     readonly el: HTMLElement;
     /** The options this instance was built with, merged with the defaults. */
-    readonly options: ResolvedOptions;
+    readonly options: Readonly<ResolvedOptions>;
     /**
      * @param element - The element to clamp.
      * @param options - See {@link ReadMoreOptions}.
      * @throws TypeError - if `element` is not an `HTMLElement`.
      * @throws Error - if `element` is already initialized; call
      * {@link ReadMore.destroy} first.
-     * @throws RangeError - if `lines` is lower than 1, or `height` lower than
-     * or equal to 0.
+     * @throws RangeError - if `lines` is not an integer greater than or equal
+     * to 1, or `height` is not a finite number greater than 0.
+     * @throws TypeError - if `buttonContainer` is set but is not an `HTMLElement`.
      */
     constructor(element: HTMLElement, options?: ReadMoreOptions);
     /**
-     * Instantiates {@link ReadMore} on every matching element.
+     * Instantiates {@link ReadMore} on every matching element. Elements that are
+     * already initialized are left untouched and their existing instance is
+     * returned, so it is safe to call again after new content is added.
      *
-     * @param target - A CSS selector, a `NodeList` or an array of elements.
-     * @param options - See {@link ReadMoreOptions}.
+     * @param target - A CSS selector, an element, or any iterable or array-like
+     * of elements (`NodeList`, `HTMLCollection`, array, `Set`…).
+     * @param options - See {@link ReadMoreOptions}. Not applied to elements
+     * that are already initialized.
+     * @param root - Where to look for `target` when it is a selector.
      * @returns One instance per element, in document order.
      */
-    static init(target: string | NodeListOf<HTMLElement> | HTMLElement[], options?: ReadMoreOptions): ReadMore[];
+    static init(target: string | HTMLElement | Iterable<HTMLElement> | ArrayLike<HTMLElement>, options?: ReadMoreOptions, root?: ParentNode): ReadMore[];
     /** Whether the text is currently expanded. */
     get expanded(): boolean;
     /**
      * Expands or collapses the text, updating the button label, the
      * `aria-expanded` attribute and the state classes, then calls
-     * {@link ReadMoreOptions.onToggle}.
+     * {@link ReadMoreOptions.onToggle} and dispatches a bubbling
+     * `readmore:toggle` event on the element. Does nothing once destroyed.
+     *
+     * @param force - `true` to expand, `false` to collapse; the state is
+     * inverted when omitted. Does nothing if the text is already in the
+     * requested state.
+     */
+    toggle(force?: boolean): void;
+    /**
+     * Checks again whether the content overflows, mounting or unmounting the
+     * button. Resizes of the element are already tracked; call it after
+     * changing the content in a way that keeps the element's size. Does nothing
+     * while expanded, during a toggle transition, or once destroyed.
      */
-    toggle(): void;
+    refresh(): void;
     /**
      * @param element - An element possibly initialized by this plugin.
      * @returns The instance bound to it, or `undefined`.
@@ -122,7 +176,8 @@ export declare class ReadMore {
     /**
      * Restores the element: removes the button, the classes, the CSS custom
      * properties, the listeners and the generated `id`. The element can then be
-     * initialized again.
+     * initialized again. Calling it again does nothing.
      */
     destroy(): void;
 }
+export {};

package/dist/readmore.iife.js

@@ -0,0 +1,2 @@
+(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`readmore-clamp`,n=`readmore-clamp--height`,r=/* @__PURE__ */ new WeakMap,i=0,a={lines:3,moreText:`Read more`,lessText:`Read less`,buttonClass:`readmore-btn`,expandedClass:`is-expanded`,openingClass:`is-opening`,closingClass:`is-closing`};function o(e){return e.split(`,`).map(e=>parseFloat(e)*1e3||0)}e.ReadMore=class e{static#e;static#t=null;static#n=null;el;options;#r=null;#i=!1;#a=!1;#o=null;#s=()=>this.toggle();get#c(){return r.get(this.el)!==this}constructor(e,t={}){if(!(e instanceof HTMLElement))throw TypeError(`ReadMore: an HTMLElement is required.`);if(r.has(e))throw Error(`ReadMore: element is already initialized. Call destroy() first.`);this.el=e,this.options={...a,...Object.fromEntries(Object.entries(t).filter(e=>e[1]!==void 0))};for(let e of[`height`,`lines`]){let t=this.options[e];typeof t==`string`&&t.trim()!==``&&(this.options[e]=Number(t))}let{height:n,lines:i,buttonContainer:o}=this.options;if(o!=null&&!(o instanceof HTMLElement))throw TypeError(`ReadMore: buttonContainer must be an HTMLElement.`);if(n!=null&&!(Number.isFinite(n)&&n>0))throw RangeError(`ReadMore: height must be a finite number greater than 0.`);if(!(Number.isInteger(i)&&i>=1))throw RangeError(`ReadMore: lines must be an integer of at least 1.`);r.set(e,this),this.#d()}static init(t,n,i=document){let a=typeof t==`string`?i.querySelectorAll(t):t instanceof HTMLElement?[t]:t,o=[];e.#t=o;try{return Array.from(a).map(t=>r.get(t)??new e(t,n))}finally{e.#t=null,e.#u(o)}}get expanded(){return this.#i}toggle(e){let r=typeof e==`boolean`?e:!this.#i;if(this.#c||r===this.#i)return;this.#i=r,this.el.classList.toggle(t,!this.#i),this.options.height!=null&&this.el.classList.toggle(n,!this.#i),this.el.classList.toggle(this.options.expandedClass,this.#i),this.#v();let i=this.#i?this.options.openingClass:this.options.closingClass,a=this.#i?this.options.closingClass:this.options.openingClass;this.el.classList.remove(a),this.#h(i);try{this.options.onToggle?.(this.#i,this)}finally{this.el.dispatchEvent(new CustomEvent(`readmore:toggle`,{bubbles:!0,detail:{expanded:this.#i,instance:this}}))}}refresh(){this.#m(this.#p())}static getInstance(e){return r.get(e)}destroy(){this.#c||(r.delete(this.el),e.#e?.unobserve(this.el),this.#o!==null&&(clearTimeout(this.#o),this.#o=null),this.#y(),this.el.classList.remove(t,n,this.options.expandedClass,this.options.openingClass,this.options.closingClass),this.el.style.removeProperty(`--readmore-lines`),this.el.style.removeProperty(`--readmore-height`),this.#a&&=(this.el.removeAttribute(`id`),!1))}static#l(t){e.#u(t.map(e=>r.get(e.target)))}static#u(e){let t=/* @__PURE__ */ new Map;for(let n of e)n&&t.set(n,n.#p());t.forEach((e,t)=>t.#m(e))}#d(){this.options.height==null?(this.el.style.setProperty(`--readmore-lines`,String(this.options.lines)),this.el.classList.add(t)):(this.el.style.setProperty(`--readmore-height`,`${this.options.height}px`),this.el.classList.add(t,n)),e.#e??=new ResizeObserver(e.#l),e.#e.observe(this.el),e.#t?e.#t.push(this):this.refresh(),this.#f()}#f(){if(typeof document>`u`||!document.fonts)return;if(e.#n){e.#n.push(this);return}let t=e.#n=[this];document.fonts.ready.then(()=>{e.#n=null,e.#u(t.filter(e=>!e.#c))})}#p(){return this.el.scrollHeight-this.el.clientHeight>1}#m(e){this.#i||this.#o!==null||this.#c||(e&&!this.#r?this.#_():!e&&this.#r&&this.#y())}#h(e){this.#o!==null&&clearTimeout(this.#o),this.el.classList.add(e);let t=setTimeout(()=>{let n=this.el.getAnimations?.().filter(e=>e instanceof CSSTransition)??[],r=()=>{this.#o===t&&(this.#o=null,this.el.classList.remove(e),this.refresh())};n.length?Promise.allSettled(n.map(e=>e.finished)).then(r):r()},this.#g());this.#o=t}#g(){let e=getComputedStyle(this.el),t=o(e.transitionDuration),n=o(e.transitionDelay),r=0;for(let e=0;e<Math.max(t.length,n.length);e++)r=Math.max(r,t[e%t.length]+n[e%n.length]);return r}#_(){if(!this.el.id){let e;do e=`readmore-${++i}`;while(document.getElementById(e));this.el.id=e,this.#a=!0}let e=document.createElement(`button`);e.type=`button`,e.className=this.options.buttonClass,e.setAttribute(`aria-controls`,this.el.id),e.addEventListener(`click`,this.#s),this.#r=e,this.#v(),this.options.buttonContainer?this.options.buttonContainer.appendChild(e):this.el.insertAdjacentElement(`afterend`,e)}#v(){if(!this.#r)return;let{moreText:e,lessText:t,moreLabel:n,lessLabel:r}=this.options,i=this.#i?r:n;this.#r.textContent=this.#i?t:e,this.#r.setAttribute(`aria-expanded`,String(this.#i)),i?this.#r.setAttribute(`aria-label`,i):this.#r.removeAttribute(`aria-label`)}#y(){if(this.#r){if(this.#r.removeEventListener(`click`,this.#s),document.activeElement===this.#r){let{el:e}=this;e.hasAttribute(`tabindex`)||(e.tabIndex=-1,e.addEventListener(`blur`,()=>e.removeAttribute(`tabindex`),{once:!0})),e.focus()}this.#r.remove(),this.#r=null}}}})(this.FrontFactory=this.FrontFactory||{});
+//# sourceMappingURL=readmore.iife.js.map

package/dist/readmore.iife.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readmore.iife.js","names":["exports","CLAMP_CLASS","CLAMP_HEIGHT_CLASS","instances","idCounter","DEFAULTS","toMs","list","v","ReadMore","#resizeObserver","#batch","#fontQueue","#destroyed","element","options","entry","key","value","buttonContainer","height","lines","#init","nodes","target","root","batch","n","#syncAll","#expanded","expanded","force","#updateButton","stateClass","otherClass","#applyTransientClass","#sync","#isOverflowing","#transientTimer","#unmountButton","#generatedId","#onResize","entries","measured","instance","overflowing","#refreshOnFonts","queue","#button","#mountButton","timer","running","a","done","#transitionTime","style","durations","delays","max","i","id","btn","#onClick","label","lessLabel","moreLabel","lessText","moreText","el"],"sources":["../src/readmore.ts"],"sourcesContent":["/**\n * Options accepted by {@link ReadMore}. Every field is optional.\n */\nexport interface ReadMoreOptions {\n    /**\n     * Number of lines to clamp to. Ignored when {@link ReadMoreOptions.height} is set.\n     *\n     * @defaultValue 3\n     * @throws RangeError - if not an integer greater than or equal to 1.\n     */\n    lines?: number;\n\n    /**\n     * Max height in pixels. Takes precedence over {@link ReadMoreOptions.lines}\n     * and clamps with `max-height` instead of `-webkit-line-clamp`.\n     *\n     * @throws RangeError - if not a finite number greater than 0.\n     */\n    height?: number;\n\n    /**\n     * Label of the toggle button while the text is collapsed.\n     *\n     * @defaultValue 'Read more'\n     */\n    moreText?: string;\n\n    /**\n     * Label of the toggle button while the text is expanded.\n     *\n     * @defaultValue 'Read less'\n     */\n    lessText?: string;\n\n    /**\n     * Accessible name (`aria-label`) of the toggle button while the text is\n     * collapsed, e.g. `'Read more about Product A'` when several buttons share\n     * the same visible text. It should contain {@link ReadMoreOptions.moreText}.\n     */\n    moreLabel?: string;\n\n    /**\n     * Accessible name (`aria-label`) of the toggle button while the text is\n     * expanded. It should contain {@link ReadMoreOptions.lessText}.\n     */\n    lessLabel?: string;\n\n    /**\n     * Class applied to the toggle button.\n     *\n     * @defaultValue 'readmore-btn'\n     */\n    buttonClass?: string;\n\n    /**\n     * Element the toggle button is appended to, instead of being inserted right\n     * after the clamped element. Use an element owned by your framework (a ref)\n     * so reconciliation cannot drop the button.\n     *\n     * @throws TypeError - if not an `HTMLElement`.\n     */\n    buttonContainer?: HTMLElement;\n\n    /**\n     * Class applied to the target element for the whole expanded state.\n     *\n     * @defaultValue 'is-expanded'\n     */\n    expandedClass?: string;\n\n    /**\n     * Transient class applied when expanding, removed once the longest CSS\n     * transition on the element (duration + delay) has elapsed — or on the next\n     * tick if no transition is declared.\n     *\n     * @defaultValue 'is-opening'\n     */\n    openingClass?: string;\n\n    /**\n     * Transient class applied when collapsing, removed once the longest CSS\n     * transition on the element (duration + delay) has elapsed — or on the next\n     * tick if no transition is declared.\n     *\n     * @defaultValue 'is-closing'\n     */\n    closingClass?: string;\n\n    /**\n     * Called after each toggle with the resulting state, right before the\n     * `readmore:toggle` event is dispatched.\n     *\n     * @param expanded - `true` once expanded, `false` once collapsed.\n     * @param instance - The instance that was toggled.\n     */\n    onToggle?: (expanded: boolean, instance: ReadMore) => void;\n}\n\ntype OptionalKeys = 'height' | 'buttonContainer' | 'moreLabel' | 'lessLabel' | 'onToggle';\n\n/**\n * {@link ReadMoreOptions} merged with the defaults, as exposed on\n * {@link ReadMore.options}.\n */\nexport type ResolvedOptions = Required<Omit<ReadMoreOptions, OptionalKeys>> & Pick<ReadMoreOptions, OptionalKeys>;\n\n/** `detail` of the `readmore:toggle` event. */\nexport interface ReadMoreToggleDetail {\n    /** `true` once expanded, `false` once collapsed. */\n    expanded: boolean;\n\n    /** The instance that was toggled. */\n    instance: ReadMore;\n}\n\n// Types `event.detail` in `addEventListener('readmore:toggle', …)`, on elements\n// and on `document` (the event bubbles).\ndeclare global {\n    interface HTMLElementEventMap {\n        'readmore:toggle': CustomEvent<ReadMoreToggleDetail>;\n    }\n\n    interface DocumentEventMap {\n        'readmore:toggle': CustomEvent<ReadMoreToggleDetail>;\n    }\n}\n\nconst CLAMP_CLASS = 'readmore-clamp';\nconst CLAMP_HEIGHT_CLASS = 'readmore-clamp--height';\n\nconst instances = new WeakMap<HTMLElement, ReadMore>();\nlet idCounter = 0;\n\nconst DEFAULTS: ResolvedOptions = {\n    lines: 3,\n    moreText: 'Read more',\n    lessText: 'Read less',\n    buttonClass: 'readmore-btn',\n    expandedClass: 'is-expanded',\n    openingClass: 'is-opening',\n    closingClass: 'is-closing'\n};\n\n/**\n * Parses a computed `transition-duration` / `transition-delay` list into\n * milliseconds. Computed times are always serialized in seconds.\n */\nfunction toMs(list: string): number[] {\n    return list.split(',').map((v) => parseFloat(v) * 1000 || 0);\n}\n\n/**\n * Clamps an element to a number of lines (or a fixed height) and mounts a\n * `Read more` / `Read less` button right after it, but only while the content\n * actually overflows.\n *\n * @example\n * ```ts\n * import { ReadMore } from '@frontfactory/readmore';\n * import '@frontfactory/readmore/style.css';\n *\n * ReadMore.init('.excerpt', { lines: 3 });\n * ```\n */\nexport class ReadMore {\n    /** Shared by every instance, created with the first one. */\n    static #resizeObserver: ResizeObserver | undefined;\n\n    /** Instances created by the running {@link ReadMore.init}, synced together once all exist. */\n    static #batch: ReadMore[] | null = null;\n\n    /** Instances waiting for `document.fonts.ready`, measured together. */\n    static #fontQueue: ReadMore[] | null = null;\n\n    /** The clamped element. */\n    readonly el: HTMLElement;\n\n    /** The options this instance was built with, merged with the defaults. */\n    readonly options: Readonly<ResolvedOptions>;\n\n    #button: HTMLButtonElement | null = null;\n    #expanded = false;\n    #generatedId = false;\n    #transientTimer: ReturnType<typeof setTimeout> | null = null;\n    #onClick = (): void => this.toggle();\n\n    // Destroyed once the element is no longer bound to this instance: after\n    // destroy(), or if the element was re-initialized by another instance.\n    get #destroyed(): boolean {\n        return instances.get(this.el) !== this;\n    }\n\n    /**\n     * @param element - The element to clamp.\n     * @param options - See {@link ReadMoreOptions}.\n     * @throws TypeError - if `element` is not an `HTMLElement`.\n     * @throws Error - if `element` is already initialized; call\n     * {@link ReadMore.destroy} first.\n     * @throws RangeError - if `lines` is not an integer greater than or equal\n     * to 1, or `height` is not a finite number greater than 0.\n     * @throws TypeError - if `buttonContainer` is set but is not an `HTMLElement`.\n     */\n    constructor(element: HTMLElement, options: ReadMoreOptions = {}) {\n        if (!(element instanceof HTMLElement)) {\n            throw new TypeError('ReadMore: an HTMLElement is required.');\n        }\n\n        if (instances.has(element)) {\n            throw new Error('ReadMore: element is already initialized. Call destroy() first.');\n        }\n\n        this.el = element;\n        // Options explicitly set to `undefined` must not override the defaults.\n        this.options = {\n            ...DEFAULTS,\n            ...Object.fromEntries(Object.entries(options).filter((entry) => entry[1] !== undefined))\n        };\n\n        // Numeric strings (data-* attributes, framework props) are accepted; blank or non-numeric ones still fail below.\n        for (const key of [\n            'height',\n            'lines'\n        ] as const) {\n            const value: unknown = this.options[key];\n\n            if (typeof value === 'string' && value.trim() !== '') {\n                (this.options as Record<string, unknown>)[key] = Number(value);\n            }\n        }\n\n        const { height, lines, buttonContainer } = this.options;\n\n        if (buttonContainer != null && !(buttonContainer instanceof HTMLElement)) {\n            throw new TypeError('ReadMore: buttonContainer must be an HTMLElement.');\n        }\n\n        if (height != null && !(Number.isFinite(height) && height > 0)) {\n            throw new RangeError('ReadMore: height must be a finite number greater than 0.');\n        }\n\n        if (!(Number.isInteger(lines) && lines >= 1)) {\n            throw new RangeError('ReadMore: lines must be an integer of at least 1.');\n        }\n\n        instances.set(element, this);\n        this.#init();\n    }\n\n    /**\n     * Instantiates {@link ReadMore} on every matching element. Elements that are\n     * already initialized are left untouched and their existing instance is\n     * returned, so it is safe to call again after new content is added.\n     *\n     * @param target - A CSS selector, an element, or any iterable or array-like\n     * of elements (`NodeList`, `HTMLCollection`, array, `Set`…).\n     * @param options - See {@link ReadMoreOptions}. Not applied to elements\n     * that are already initialized.\n     * @param root - Where to look for `target` when it is a selector.\n     * @returns One instance per element, in document order.\n     */\n    static init(\n        target: string | HTMLElement | Iterable<HTMLElement> | ArrayLike<HTMLElement>,\n        options?: ReadMoreOptions,\n        root: ParentNode = document\n    ): ReadMore[] {\n        const nodes =\n            typeof target === 'string'\n                ? root.querySelectorAll<HTMLElement>(target)\n                : target instanceof HTMLElement ? [\n                    target\n                ] : target;\n\n        const batch: ReadMore[] = [];\n\n        ReadMore.#batch = batch;\n\n        try {\n            return Array.from(nodes).map((n) => instances.get(n) ?? new ReadMore(n, options));\n        } finally {\n            ReadMore.#batch = null;\n            ReadMore.#syncAll(batch);\n        }\n    }\n\n    /** Whether the text is currently expanded. */\n    get expanded(): boolean {\n        return this.#expanded;\n    }\n\n    /**\n     * Expands or collapses the text, updating the button label, the\n     * `aria-expanded` attribute and the state classes, then calls\n     * {@link ReadMoreOptions.onToggle} and dispatches a bubbling\n     * `readmore:toggle` event on the element. Does nothing once destroyed.\n     *\n     * @param force - `true` to expand, `false` to collapse; the state is\n     * inverted when omitted. Does nothing if the text is already in the\n     * requested state.\n     */\n    toggle(force?: boolean): void {\n        // Only a real boolean forces the state, so `toggle` still works as an\n        // event listener (`addEventListener('click', rm.toggle.bind(rm))`).\n        const expanded = typeof force === 'boolean' ? force : !this.#expanded;\n\n        if (this.#destroyed || expanded === this.#expanded) {\n            return;\n        }\n\n        this.#expanded = expanded;\n        this.el.classList.toggle(CLAMP_CLASS, !this.#expanded);\n\n        if (this.options.height != null) {\n            this.el.classList.toggle(CLAMP_HEIGHT_CLASS, !this.#expanded);\n        }\n\n        this.el.classList.toggle(this.options.expandedClass, this.#expanded);\n        this.#updateButton();\n\n        const stateClass = this.#expanded ? this.options.openingClass : this.options.closingClass;\n        const otherClass = this.#expanded ? this.options.closingClass : this.options.openingClass;\n\n        this.el.classList.remove(otherClass);\n        this.#applyTransientClass(stateClass);\n\n        try {\n            this.options.onToggle?.(this.#expanded, this);\n        } finally {\n            // The event is dispatched even if `onToggle` throws (the error still propagates).\n            this.el.dispatchEvent(new CustomEvent<ReadMoreToggleDetail>('readmore:toggle', {\n                bubbles: true,\n                detail: {\n                    expanded: this.#expanded,\n                    instance: this\n                }\n            }));\n        }\n    }\n\n    /**\n     * Checks again whether the content overflows, mounting or unmounting the\n     * button. Resizes of the element are already tracked; call it after\n     * changing the content in a way that keeps the element's size. Does nothing\n     * while expanded, during a toggle transition, or once destroyed.\n     */\n    refresh(): void {\n        this.#sync(this.#isOverflowing());\n    }\n\n    /**\n     * @param element - An element possibly initialized by this plugin.\n     * @returns The instance bound to it, or `undefined`.\n     */\n    static getInstance(element: HTMLElement): ReadMore | undefined {\n        return instances.get(element);\n    }\n\n    /**\n     * Restores the element: removes the button, the classes, the CSS custom\n     * properties, the listeners and the generated `id`. The element can then be\n     * initialized again. Calling it again does nothing.\n     */\n    destroy(): void {\n        if (this.#destroyed) {\n            return;\n        }\n\n        instances.delete(this.el);\n        ReadMore.#resizeObserver?.unobserve(this.el);\n\n        if (this.#transientTimer !== null) {\n            clearTimeout(this.#transientTimer);\n            this.#transientTimer = null;\n        }\n\n        this.#unmountButton();\n        this.el.classList.remove(\n            CLAMP_CLASS,\n            CLAMP_HEIGHT_CLASS,\n            this.options.expandedClass,\n            this.options.openingClass,\n            this.options.closingClass\n        );\n\n        this.el.style.removeProperty('--readmore-lines');\n        this.el.style.removeProperty('--readmore-height');\n\n        if (this.#generatedId) {\n            this.el.removeAttribute('id');\n            this.#generatedId = false;\n        }\n    }\n\n    // Measures every resized element before touching the DOM, so mounting a\n    // button does not force a new layout for each following element.\n    static #onResize(entries: ResizeObserverEntry[]): void {\n        ReadMore.#syncAll(entries.map((entry) => instances.get(entry.target as HTMLElement)));\n    }\n\n    static #syncAll(list: (ReadMore | undefined)[]): void {\n        const measured = new Map<ReadMore, boolean>();\n\n        for (const instance of list) {\n            if (instance) {\n                measured.set(instance, instance.#isOverflowing());\n            }\n        }\n\n        measured.forEach((overflowing, instance) => instance.#sync(overflowing));\n    }\n\n    #init(): void {\n        if (this.options.height != null) {\n            this.el.style.setProperty('--readmore-height', `${ this.options.height }px`);\n            this.el.classList.add(CLAMP_CLASS, CLAMP_HEIGHT_CLASS);\n        } else {\n            this.el.style.setProperty('--readmore-lines', String(this.options.lines));\n            this.el.classList.add(CLAMP_CLASS);\n        }\n\n        ReadMore.#resizeObserver ??= new ResizeObserver(ReadMore.#onResize);\n        ReadMore.#resizeObserver.observe(this.el);\n\n        // Inside init(), the batch measures all elements at once afterwards.\n        if (ReadMore.#batch) {\n            ReadMore.#batch.push(this);\n        } else {\n            this.refresh();\n        }\n\n        this.#refreshOnFonts();\n    }\n\n    // A font swap can change the overflow without resizing the element, which the\n    // ResizeObserver would miss. Instances created in the same tick share one\n    // measurement; destroyed ones are skipped by #sync.\n    #refreshOnFonts(): void {\n        if (typeof document === 'undefined' || !document.fonts) {\n            return;\n        }\n\n        if (ReadMore.#fontQueue) {\n            ReadMore.#fontQueue.push(this);\n\n            return;\n        }\n\n        const queue: ReadMore[] = ReadMore.#fontQueue = [\n            this\n        ];\n\n        void document.fonts.ready.then(() => {\n            ReadMore.#fontQueue = null;\n            ReadMore.#syncAll(queue.filter((instance) => !instance.#destroyed));\n        });\n    }\n\n    #isOverflowing(): boolean {\n        return this.el.scrollHeight - this.el.clientHeight > 1;\n    }\n\n    #sync(overflowing: boolean): void {\n        // While a toggle transition runs, the element's size is not final: measuring\n        // it mid-collapse would remove the button. The timer refreshes once it ends.\n        if (this.#expanded || this.#transientTimer !== null || this.#destroyed) {\n            return;\n        }\n\n        if (overflowing && !this.#button) {\n            this.#mountButton();\n        } else if (!overflowing && this.#button) {\n            this.#unmountButton();\n        }\n    }\n\n    #applyTransientClass(stateClass: string): void {\n        if (this.#transientTimer !== null) {\n            clearTimeout(this.#transientTimer);\n        }\n\n        this.el.classList.add(stateClass);\n\n        // A timer rather than `transitionend`, which never fires when no declared\n        // property actually changes (e.g. `transition: all` in lines mode).\n        const timer = setTimeout(() => {\n            // Some engines (WebKit) start the transition later than the timer assumes:\n            // wait for it to end, or the size is measured mid-way and the button remounted.\n            const running = this.el.getAnimations?.().filter(a => a instanceof CSSTransition) ?? [];\n            const done = () => {\n                // Superseded by another toggle, or destroyed meanwhile.\n                if (this.#transientTimer !== timer) {\n                    return;\n                }\n\n                this.#transientTimer = null;\n                this.el.classList.remove(stateClass);\n                this.refresh();\n            };\n\n            if (running.length) {\n                Promise.allSettled(running.map(a => a.finished)).then(done);\n            } else {\n                done();\n            }\n        }, this.#transitionTime());\n\n        this.#transientTimer = timer;\n    }\n\n    /** Longest `duration + delay` among the transitions declared on the element, in ms. */\n    #transitionTime(): number {\n        const style = getComputedStyle(this.el);\n        const durations = toMs(style.transitionDuration);\n        const delays = toMs(style.transitionDelay);\n        let max = 0;\n\n        // Shorter lists repeat to match the longer one, as CSS does.\n        for (let i = 0; i < Math.max(durations.length, delays.length); i++) {\n            max = Math.max(max, durations[i % durations.length] + delays[i % delays.length]);\n        }\n\n        return max;\n    }\n\n    #mountButton(): void {\n        if (!this.el.id) {\n            let id: string;\n\n            // Skip ids already used in the page (server-rendered markup, another copy of the plugin…).\n            do {\n                id = `readmore-${++idCounter}`;\n            } while (document.getElementById(id));\n\n            this.el.id = id;\n            this.#generatedId = true;\n        }\n\n        const btn = document.createElement('button');\n\n        btn.type = 'button';\n        btn.className = this.options.buttonClass;\n        btn.setAttribute('aria-controls', this.el.id);\n        btn.addEventListener('click', this.#onClick);\n        this.#button = btn;\n        this.#updateButton();\n\n        if (this.options.buttonContainer) {\n            this.options.buttonContainer.appendChild(btn);\n        } else {\n            this.el.insertAdjacentElement('afterend', btn);\n        }\n    }\n\n    /** Syncs the button's text, `aria-expanded` and `aria-label` with the state. */\n    #updateButton(): void {\n        if (!this.#button) {\n            return;\n        }\n\n        const { moreText, lessText, moreLabel, lessLabel } = this.options;\n        const label = this.#expanded ? lessLabel : moreLabel;\n\n        this.#button.textContent = this.#expanded ? lessText : moreText;\n        this.#button.setAttribute('aria-expanded', String(this.#expanded));\n\n        if (label) {\n            this.#button.setAttribute('aria-label', label);\n        } else {\n            this.#button.removeAttribute('aria-label');\n        }\n    }\n\n    #unmountButton(): void {\n        if (!this.#button) {\n            return;\n        }\n\n        this.#button.removeEventListener('click', this.#onClick);\n\n        // Removing the focused button would drop focus to <body>: keep it on the element.\n        if (document.activeElement === this.#button) {\n            const { el } = this;\n\n            if (!el.hasAttribute('tabindex')) {\n                el.tabIndex = -1;\n                el.addEventListener('blur', () => el.removeAttribute('tabindex'), {\n                    once: true\n                });\n            }\n\n            el.focus();\n        }\n\n        this.#button.remove();\n        this.#button = null;\n    }\n}\n"],"mappings":"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"}

package/dist/readmore.js

@@ -1,5 +1,9 @@
-//#region src/readmore.ts
-var e = "readmore-clamp", t = "readmore-clamp--height", n = /* @__PURE__ */ new WeakMap(), r = 0, i = {
+// src/readmore.ts
+var CLAMP_CLASS = "readmore-clamp";
+var CLAMP_HEIGHT_CLASS = "readmore-clamp--height";
+var instances = /* @__PURE__ */ new WeakMap();
+var idCounter = 0;
+var DEFAULTS = {
 	lines: 3,
 	moreText: "Read more",
 	lessText: "Read less",
@@ -7,74 +11,285 @@ var e = "readmore-clamp", t = "readmore-clamp--height", n = /* @__PURE__ */ new
 	expandedClass: "is-expanded",
 	openingClass: "is-opening",
 	closingClass: "is-closing"
-}, a = class a {
+};
+/**
+* Parses a computed `transition-duration` / `transition-delay` list into
+* milliseconds. Computed times are always serialized in seconds.
+*/
+function toMs(list) {
+	return list.split(",").map((v) => parseFloat(v) * 1e3 || 0);
+}
+/**
+* Clamps an element to a number of lines (or a fixed height) and mounts a
+* `Read more` / `Read less` button right after it, but only while the content
+* actually overflows.
+*
+* @example
+* ```ts
+* import { ReadMore } from '@frontfactory/readmore';
+* import '@frontfactory/readmore/style.css';
+*
+* ReadMore.init('.excerpt', { lines: 3 });
+* ```
+*/
+var ReadMore = class ReadMore {
+	/** Shared by every instance, created with the first one. */
+	static #resizeObserver;
+	/** Instances created by the running {@link ReadMore.init}, synced together once all exist. */
+	static #batch = null;
+	/** Instances waiting for `document.fonts.ready`, measured together. */
+	static #fontQueue = null;
+	/** The clamped element. */
 	el;
+	/** The options this instance was built with, merged with the defaults. */
 	options;
-	#e = null;
-	#t = !1;
-	#n = !1;
-	#r;
-	#i = null;
-	#a = () => this.toggle();
-	constructor(e, t = {}) {
-		if (!(e instanceof HTMLElement)) throw TypeError("ReadMore: an HTMLElement is required.");
-		if (n.has(e)) throw Error("ReadMore: element is already initialized. Call destroy() first.");
-		if (this.el = e, this.options = {
-			...i,
-			...t
-		}, this.options.height != null && this.options.height <= 0) throw RangeError("ReadMore: height must be greater than 0.");
-		if (this.options.lines < 1) throw RangeError("ReadMore: lines must be at least 1.");
-		this.#r = new ResizeObserver(() => this.#c()), n.set(e, this), this.#o();
-	}
-	static init(e, t) {
-		let n = typeof e == "string" ? document.querySelectorAll(e) : e;
-		return Array.from(n).map((e) => new a(e, t));
+	#button = null;
+	#expanded = false;
+	#generatedId = false;
+	#transientTimer = null;
+	#onClick = () => this.toggle();
+	get #destroyed() {
+		return instances.get(this.el) !== this;
+	}
+	/**
+	* @param element - The element to clamp.
+	* @param options - See {@link ReadMoreOptions}.
+	* @throws TypeError - if `element` is not an `HTMLElement`.
+	* @throws Error - if `element` is already initialized; call
+	* {@link ReadMore.destroy} first.
+	* @throws RangeError - if `lines` is not an integer greater than or equal
+	* to 1, or `height` is not a finite number greater than 0.
+	* @throws TypeError - if `buttonContainer` is set but is not an `HTMLElement`.
+	*/
+	constructor(element, options = {}) {
+		if (!(element instanceof HTMLElement)) throw new TypeError("ReadMore: an HTMLElement is required.");
+		if (instances.has(element)) throw new Error("ReadMore: element is already initialized. Call destroy() first.");
+		this.el = element;
+		this.options = {
+			...DEFAULTS,
+			...Object.fromEntries(Object.entries(options).filter((entry) => entry[1] !== void 0))
+		};
+		for (const key of ["height", "lines"]) {
+			const value = this.options[key];
+			if (typeof value === "string" && value.trim() !== "") this.options[key] = Number(value);
+		}
+		const { height, lines, buttonContainer } = this.options;
+		if (buttonContainer != null && !(buttonContainer instanceof HTMLElement)) throw new TypeError("ReadMore: buttonContainer must be an HTMLElement.");
+		if (height != null && !(Number.isFinite(height) && height > 0)) throw new RangeError("ReadMore: height must be a finite number greater than 0.");
+		if (!(Number.isInteger(lines) && lines >= 1)) throw new RangeError("ReadMore: lines must be an integer of at least 1.");
+		instances.set(element, this);
+		this.#init();
+	}
+	/**
+	* Instantiates {@link ReadMore} on every matching element. Elements that are
+	* already initialized are left untouched and their existing instance is
+	* returned, so it is safe to call again after new content is added.
+	*
+	* @param target - A CSS selector, an element, or any iterable or array-like
+	* of elements (`NodeList`, `HTMLCollection`, array, `Set`…).
+	* @param options - See {@link ReadMoreOptions}. Not applied to elements
+	* that are already initialized.
+	* @param root - Where to look for `target` when it is a selector.
+	* @returns One instance per element, in document order.
+	*/
+	static init(target, options, root = document) {
+		const nodes = typeof target === "string" ? root.querySelectorAll(target) : target instanceof HTMLElement ? [target] : target;
+		const batch = [];
+		ReadMore.#batch = batch;
+		try {
+			return Array.from(nodes).map((n) => instances.get(n) ?? new ReadMore(n, options));
+		} finally {
+			ReadMore.#batch = null;
+			ReadMore.#syncAll(batch);
+		}
 	}
+	/** Whether the text is currently expanded. */
 	get expanded() {
-		return this.#t;
+		return this.#expanded;
 	}
-	toggle() {
-		this.#t = !this.#t, this.el.classList.toggle(e, !this.#t), this.options.height != null && this.el.classList.toggle(t, !this.#t), this.el.classList.toggle(this.options.expandedClass, this.#t), this.#e && (this.#e.textContent = this.#t ? this.options.lessText : this.options.moreText, this.#e.setAttribute("aria-expanded", String(this.#t)));
-		let n = this.#t ? this.options.openingClass : this.options.closingClass, r = this.#t ? this.options.closingClass : this.options.openingClass;
-		this.el.classList.remove(r), this.#l(n), this.#t || this.#c(), this.options.onToggle?.(this.#t);
+	/**
+	* Expands or collapses the text, updating the button label, the
+	* `aria-expanded` attribute and the state classes, then calls
+	* {@link ReadMoreOptions.onToggle} and dispatches a bubbling
+	* `readmore:toggle` event on the element. Does nothing once destroyed.
+	*
+	* @param force - `true` to expand, `false` to collapse; the state is
+	* inverted when omitted. Does nothing if the text is already in the
+	* requested state.
+	*/
+	toggle(force) {
+		const expanded = typeof force === "boolean" ? force : !this.#expanded;
+		if (this.#destroyed || expanded === this.#expanded) return;
+		this.#expanded = expanded;
+		this.el.classList.toggle(CLAMP_CLASS, !this.#expanded);
+		if (this.options.height != null) this.el.classList.toggle(CLAMP_HEIGHT_CLASS, !this.#expanded);
+		this.el.classList.toggle(this.options.expandedClass, this.#expanded);
+		this.#updateButton();
+		const stateClass = this.#expanded ? this.options.openingClass : this.options.closingClass;
+		const otherClass = this.#expanded ? this.options.closingClass : this.options.openingClass;
+		this.el.classList.remove(otherClass);
+		this.#applyTransientClass(stateClass);
+		try {
+			this.options.onToggle?.(this.#expanded, this);
+		} finally {
+			this.el.dispatchEvent(new CustomEvent("readmore:toggle", {
+				bubbles: true,
+				detail: {
+					expanded: this.#expanded,
+					instance: this
+				}
+			}));
+		}
+	}
+	/**
+	* Checks again whether the content overflows, mounting or unmounting the
+	* button. Resizes of the element are already tracked; call it after
+	* changing the content in a way that keeps the element's size. Does nothing
+	* while expanded, during a toggle transition, or once destroyed.
+	*/
+	refresh() {
+		this.#sync(this.#isOverflowing());
 	}
-	static getInstance(e) {
-		return n.get(e);
+	/**
+	* @param element - An element possibly initialized by this plugin.
+	* @returns The instance bound to it, or `undefined`.
+	*/
+	static getInstance(element) {
+		return instances.get(element);
 	}
+	/**
+	* Restores the element: removes the button, the classes, the CSS custom
+	* properties, the listeners and the generated `id`. The element can then be
+	* initialized again. Calling it again does nothing.
+	*/
 	destroy() {
-		n.delete(this.el), this.#r.disconnect(), this.#i &&= (this.el.removeEventListener("transitionend", this.#i), null), this.#d(), this.el.classList.remove(e, t, this.options.expandedClass, this.options.openingClass, this.options.closingClass), this.el.style.removeProperty("--readmore-lines"), this.el.style.removeProperty("--readmore-height"), this.#n &&= (this.el.removeAttribute("id"), !1);
+		if (this.#destroyed) return;
+		instances.delete(this.el);
+		ReadMore.#resizeObserver?.unobserve(this.el);
+		if (this.#transientTimer !== null) {
+			clearTimeout(this.#transientTimer);
+			this.#transientTimer = null;
+		}
+		this.#unmountButton();
+		this.el.classList.remove(CLAMP_CLASS, CLAMP_HEIGHT_CLASS, this.options.expandedClass, this.options.openingClass, this.options.closingClass);
+		this.el.style.removeProperty("--readmore-lines");
+		this.el.style.removeProperty("--readmore-height");
+		if (this.#generatedId) {
+			this.el.removeAttribute("id");
+			this.#generatedId = false;
+		}
 	}
-	#o() {
-		this.options.height == null ? (this.el.style.setProperty("--readmore-lines", String(this.options.lines)), this.el.classList.add(e)) : (this.el.style.setProperty("--readmore-height", `${this.options.height}px`), this.el.classList.add(e, t)), this.#r.observe(this.el), this.#c();
+	static #onResize(entries) {
+		ReadMore.#syncAll(entries.map((entry) => instances.get(entry.target)));
 	}
-	#s() {
-		return this.el.scrollHeight - this.el.clientHeight > 1;
+	static #syncAll(list) {
+		const measured = /* @__PURE__ */ new Map();
+		for (const instance of list) if (instance) measured.set(instance, instance.#isOverflowing());
+		measured.forEach((overflowing, instance) => instance.#sync(overflowing));
 	}
-	#c() {
-		if (this.#t) return;
-		let e = this.#s();
-		e && !this.#e ? this.#u() : !e && this.#e && this.#d();
+	#init() {
+		if (this.options.height != null) {
+			this.el.style.setProperty("--readmore-height", `${this.options.height}px`);
+			this.el.classList.add(CLAMP_CLASS, CLAMP_HEIGHT_CLASS);
+		} else {
+			this.el.style.setProperty("--readmore-lines", String(this.options.lines));
+			this.el.classList.add(CLAMP_CLASS);
+		}
+		ReadMore.#resizeObserver ??= new ResizeObserver(ReadMore.#onResize);
+		ReadMore.#resizeObserver.observe(this.el);
+		if (ReadMore.#batch) ReadMore.#batch.push(this);
+		else this.refresh();
+		this.#refreshOnFonts();
 	}
-	#l(e) {
-		this.#i &&= (this.el.removeEventListener("transitionend", this.#i), null), this.el.classList.add(e);
-		let t = () => this.el.classList.remove(e);
-		if (!getComputedStyle(this.el).transitionDuration.split(",").some((e) => parseFloat(e) > 0)) {
-			setTimeout(t, 0);
+	#refreshOnFonts() {
+		if (typeof document === "undefined" || !document.fonts) return;
+		if (ReadMore.#fontQueue) {
+			ReadMore.#fontQueue.push(this);
 			return;
 		}
-		let n = (e) => {
-			e.target === this.el && (this.el.removeEventListener("transitionend", n), this.#i = null, t());
-		};
-		this.#i = n, this.el.addEventListener("transitionend", n);
+		const queue = ReadMore.#fontQueue = [this];
+		document.fonts.ready.then(() => {
+			ReadMore.#fontQueue = null;
+			ReadMore.#syncAll(queue.filter((instance) => !instance.#destroyed));
+		});
+	}
+	#isOverflowing() {
+		return this.el.scrollHeight - this.el.clientHeight > 1;
+	}
+	#sync(overflowing) {
+		if (this.#expanded || this.#transientTimer !== null || this.#destroyed) return;
+		if (overflowing && !this.#button) this.#mountButton();
+		else if (!overflowing && this.#button) this.#unmountButton();
 	}
-	#u() {
-		this.el.id || (this.el.id = `readmore-${++r}`, this.#n = !0);
-		let e = document.createElement("button");
-		e.type = "button", e.className = this.options.buttonClass, e.textContent = this.options.moreText, e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-controls", this.el.id), e.addEventListener("click", this.#a), this.el.insertAdjacentElement("afterend", e), this.#e = e;
+	#applyTransientClass(stateClass) {
+		if (this.#transientTimer !== null) clearTimeout(this.#transientTimer);
+		this.el.classList.add(stateClass);
+		const timer = setTimeout(() => {
+			const running = this.el.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];
+			const done = () => {
+				if (this.#transientTimer !== timer) return;
+				this.#transientTimer = null;
+				this.el.classList.remove(stateClass);
+				this.refresh();
+			};
+			if (running.length) Promise.allSettled(running.map((a) => a.finished)).then(done);
+			else done();
+		}, this.#transitionTime());
+		this.#transientTimer = timer;
 	}
-	#d() {
-		this.#e &&= (this.#e.removeEventListener("click", this.#a), this.#e.remove(), null);
+	/** Longest `duration + delay` among the transitions declared on the element, in ms. */
+	#transitionTime() {
+		const style = getComputedStyle(this.el);
+		const durations = toMs(style.transitionDuration);
+		const delays = toMs(style.transitionDelay);
+		let max = 0;
+		for (let i = 0; i < Math.max(durations.length, delays.length); i++) max = Math.max(max, durations[i % durations.length] + delays[i % delays.length]);
+		return max;
+	}
+	#mountButton() {
+		if (!this.el.id) {
+			let id;
+			do
+				id = `readmore-${++idCounter}`;
+			while (document.getElementById(id));
+			this.el.id = id;
+			this.#generatedId = true;
+		}
+		const btn = document.createElement("button");
+		btn.type = "button";
+		btn.className = this.options.buttonClass;
+		btn.setAttribute("aria-controls", this.el.id);
+		btn.addEventListener("click", this.#onClick);
+		this.#button = btn;
+		this.#updateButton();
+		if (this.options.buttonContainer) this.options.buttonContainer.appendChild(btn);
+		else this.el.insertAdjacentElement("afterend", btn);
+	}
+	/** Syncs the button's text, `aria-expanded` and `aria-label` with the state. */
+	#updateButton() {
+		if (!this.#button) return;
+		const { moreText, lessText, moreLabel, lessLabel } = this.options;
+		const label = this.#expanded ? lessLabel : moreLabel;
+		this.#button.textContent = this.#expanded ? lessText : moreText;
+		this.#button.setAttribute("aria-expanded", String(this.#expanded));
+		if (label) this.#button.setAttribute("aria-label", label);
+		else this.#button.removeAttribute("aria-label");
+	}
+	#unmountButton() {
+		if (!this.#button) return;
+		this.#button.removeEventListener("click", this.#onClick);
+		if (document.activeElement === this.#button) {
+			const { el } = this;
+			if (!el.hasAttribute("tabindex")) {
+				el.tabIndex = -1;
+				el.addEventListener("blur", () => el.removeAttribute("tabindex"), { once: true });
+			}
+			el.focus();
+		}
+		this.#button.remove();
+		this.#button = null;
 	}
 };
-//#endregion
-export { a as ReadMore };
+
+export { ReadMore };
+//# sourceMappingURL=readmore.js.map

package/dist/readmore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readmore.js","names":[],"sources":["../src/readmore.ts"],"sourcesContent":["/**\n * Options accepted by {@link ReadMore}. Every field is optional.\n */\nexport interface ReadMoreOptions {\n    /**\n     * Number of lines to clamp to. Ignored when {@link ReadMoreOptions.height} is set.\n     *\n     * @defaultValue 3\n     * @throws RangeError - if not an integer greater than or equal to 1.\n     */\n    lines?: number;\n\n    /**\n     * Max height in pixels. Takes precedence over {@link ReadMoreOptions.lines}\n     * and clamps with `max-height` instead of `-webkit-line-clamp`.\n     *\n     * @throws RangeError - if not a finite number greater than 0.\n     */\n    height?: number;\n\n    /**\n     * Label of the toggle button while the text is collapsed.\n     *\n     * @defaultValue 'Read more'\n     */\n    moreText?: string;\n\n    /**\n     * Label of the toggle button while the text is expanded.\n     *\n     * @defaultValue 'Read less'\n     */\n    lessText?: string;\n\n    /**\n     * Accessible name (`aria-label`) of the toggle button while the text is\n     * collapsed, e.g. `'Read more about Product A'` when several buttons share\n     * the same visible text. It should contain {@link ReadMoreOptions.moreText}.\n     */\n    moreLabel?: string;\n\n    /**\n     * Accessible name (`aria-label`) of the toggle button while the text is\n     * expanded. It should contain {@link ReadMoreOptions.lessText}.\n     */\n    lessLabel?: string;\n\n    /**\n     * Class applied to the toggle button.\n     *\n     * @defaultValue 'readmore-btn'\n     */\n    buttonClass?: string;\n\n    /**\n     * Element the toggle button is appended to, instead of being inserted right\n     * after the clamped element. Use an element owned by your framework (a ref)\n     * so reconciliation cannot drop the button.\n     *\n     * @throws TypeError - if not an `HTMLElement`.\n     */\n    buttonContainer?: HTMLElement;\n\n    /**\n     * Class applied to the target element for the whole expanded state.\n     *\n     * @defaultValue 'is-expanded'\n     */\n    expandedClass?: string;\n\n    /**\n     * Transient class applied when expanding, removed once the longest CSS\n     * transition on the element (duration + delay) has elapsed — or on the next\n     * tick if no transition is declared.\n     *\n     * @defaultValue 'is-opening'\n     */\n    openingClass?: string;\n\n    /**\n     * Transient class applied when collapsing, removed once the longest CSS\n     * transition on the element (duration + delay) has elapsed — or on the next\n     * tick if no transition is declared.\n     *\n     * @defaultValue 'is-closing'\n     */\n    closingClass?: string;\n\n    /**\n     * Called after each toggle with the resulting state, right before the\n     * `readmore:toggle` event is dispatched.\n     *\n     * @param expanded - `true` once expanded, `false` once collapsed.\n     * @param instance - The instance that was toggled.\n     */\n    onToggle?: (expanded: boolean, instance: ReadMore) => void;\n}\n\ntype OptionalKeys = 'height' | 'buttonContainer' | 'moreLabel' | 'lessLabel' | 'onToggle';\n\n/**\n * {@link ReadMoreOptions} merged with the defaults, as exposed on\n * {@link ReadMore.options}.\n */\nexport type ResolvedOptions = Required<Omit<ReadMoreOptions, OptionalKeys>> & Pick<ReadMoreOptions, OptionalKeys>;\n\n/** `detail` of the `readmore:toggle` event. */\nexport interface ReadMoreToggleDetail {\n    /** `true` once expanded, `false` once collapsed. */\n    expanded: boolean;\n\n    /** The instance that was toggled. */\n    instance: ReadMore;\n}\n\n// Types `event.detail` in `addEventListener('readmore:toggle', …)`, on elements\n// and on `document` (the event bubbles).\ndeclare global {\n    interface HTMLElementEventMap {\n        'readmore:toggle': CustomEvent<ReadMoreToggleDetail>;\n    }\n\n    interface DocumentEventMap {\n        'readmore:toggle': CustomEvent<ReadMoreToggleDetail>;\n    }\n}\n\nconst CLAMP_CLASS = 'readmore-clamp';\nconst CLAMP_HEIGHT_CLASS = 'readmore-clamp--height';\n\nconst instances = new WeakMap<HTMLElement, ReadMore>();\nlet idCounter = 0;\n\nconst DEFAULTS: ResolvedOptions = {\n    lines: 3,\n    moreText: 'Read more',\n    lessText: 'Read less',\n    buttonClass: 'readmore-btn',\n    expandedClass: 'is-expanded',\n    openingClass: 'is-opening',\n    closingClass: 'is-closing'\n};\n\n/**\n * Parses a computed `transition-duration` / `transition-delay` list into\n * milliseconds. Computed times are always serialized in seconds.\n */\nfunction toMs(list: string): number[] {\n    return list.split(',').map((v) => parseFloat(v) * 1000 || 0);\n}\n\n/**\n * Clamps an element to a number of lines (or a fixed height) and mounts a\n * `Read more` / `Read less` button right after it, but only while the content\n * actually overflows.\n *\n * @example\n * ```ts\n * import { ReadMore } from '@frontfactory/readmore';\n * import '@frontfactory/readmore/style.css';\n *\n * ReadMore.init('.excerpt', { lines: 3 });\n * ```\n */\nexport class ReadMore {\n    /** Shared by every instance, created with the first one. */\n    static #resizeObserver: ResizeObserver | undefined;\n\n    /** Instances created by the running {@link ReadMore.init}, synced together once all exist. */\n    static #batch: ReadMore[] | null = null;\n\n    /** Instances waiting for `document.fonts.ready`, measured together. */\n    static #fontQueue: ReadMore[] | null = null;\n\n    /** The clamped element. */\n    readonly el: HTMLElement;\n\n    /** The options this instance was built with, merged with the defaults. */\n    readonly options: Readonly<ResolvedOptions>;\n\n    #button: HTMLButtonElement | null = null;\n    #expanded = false;\n    #generatedId = false;\n    #transientTimer: ReturnType<typeof setTimeout> | null = null;\n    #onClick = (): void => this.toggle();\n\n    // Destroyed once the element is no longer bound to this instance: after\n    // destroy(), or if the element was re-initialized by another instance.\n    get #destroyed(): boolean {\n        return instances.get(this.el) !== this;\n    }\n\n    /**\n     * @param element - The element to clamp.\n     * @param options - See {@link ReadMoreOptions}.\n     * @throws TypeError - if `element` is not an `HTMLElement`.\n     * @throws Error - if `element` is already initialized; call\n     * {@link ReadMore.destroy} first.\n     * @throws RangeError - if `lines` is not an integer greater than or equal\n     * to 1, or `height` is not a finite number greater than 0.\n     * @throws TypeError - if `buttonContainer` is set but is not an `HTMLElement`.\n     */\n    constructor(element: HTMLElement, options: ReadMoreOptions = {}) {\n        if (!(element instanceof HTMLElement)) {\n            throw new TypeError('ReadMore: an HTMLElement is required.');\n        }\n\n        if (instances.has(element)) {\n            throw new Error('ReadMore: element is already initialized. Call destroy() first.');\n        }\n\n        this.el = element;\n        // Options explicitly set to `undefined` must not override the defaults.\n        this.options = {\n            ...DEFAULTS,\n            ...Object.fromEntries(Object.entries(options).filter((entry) => entry[1] !== undefined))\n        };\n\n        // Numeric strings (data-* attributes, framework props) are accepted; blank or non-numeric ones still fail below.\n        for (const key of [\n            'height',\n            'lines'\n        ] as const) {\n            const value: unknown = this.options[key];\n\n            if (typeof value === 'string' && value.trim() !== '') {\n                (this.options as Record<string, unknown>)[key] = Number(value);\n            }\n        }\n\n        const { height, lines, buttonContainer } = this.options;\n\n        if (buttonContainer != null && !(buttonContainer instanceof HTMLElement)) {\n            throw new TypeError('ReadMore: buttonContainer must be an HTMLElement.');\n        }\n\n        if (height != null && !(Number.isFinite(height) && height > 0)) {\n            throw new RangeError('ReadMore: height must be a finite number greater than 0.');\n        }\n\n        if (!(Number.isInteger(lines) && lines >= 1)) {\n            throw new RangeError('ReadMore: lines must be an integer of at least 1.');\n        }\n\n        instances.set(element, this);\n        this.#init();\n    }\n\n    /**\n     * Instantiates {@link ReadMore} on every matching element. Elements that are\n     * already initialized are left untouched and their existing instance is\n     * returned, so it is safe to call again after new content is added.\n     *\n     * @param target - A CSS selector, an element, or any iterable or array-like\n     * of elements (`NodeList`, `HTMLCollection`, array, `Set`…).\n     * @param options - See {@link ReadMoreOptions}. Not applied to elements\n     * that are already initialized.\n     * @param root - Where to look for `target` when it is a selector.\n     * @returns One instance per element, in document order.\n     */\n    static init(\n        target: string | HTMLElement | Iterable<HTMLElement> | ArrayLike<HTMLElement>,\n        options?: ReadMoreOptions,\n        root: ParentNode = document\n    ): ReadMore[] {\n        const nodes =\n            typeof target === 'string'\n                ? root.querySelectorAll<HTMLElement>(target)\n                : target instanceof HTMLElement ? [\n                    target\n                ] : target;\n\n        const batch: ReadMore[] = [];\n\n        ReadMore.#batch = batch;\n\n        try {\n            return Array.from(nodes).map((n) => instances.get(n) ?? new ReadMore(n, options));\n        } finally {\n            ReadMore.#batch = null;\n            ReadMore.#syncAll(batch);\n        }\n    }\n\n    /** Whether the text is currently expanded. */\n    get expanded(): boolean {\n        return this.#expanded;\n    }\n\n    /**\n     * Expands or collapses the text, updating the button label, the\n     * `aria-expanded` attribute and the state classes, then calls\n     * {@link ReadMoreOptions.onToggle} and dispatches a bubbling\n     * `readmore:toggle` event on the element. Does nothing once destroyed.\n     *\n     * @param force - `true` to expand, `false` to collapse; the state is\n     * inverted when omitted. Does nothing if the text is already in the\n     * requested state.\n     */\n    toggle(force?: boolean): void {\n        // Only a real boolean forces the state, so `toggle` still works as an\n        // event listener (`addEventListener('click', rm.toggle.bind(rm))`).\n        const expanded = typeof force === 'boolean' ? force : !this.#expanded;\n\n        if (this.#destroyed || expanded === this.#expanded) {\n            return;\n        }\n\n        this.#expanded = expanded;\n        this.el.classList.toggle(CLAMP_CLASS, !this.#expanded);\n\n        if (this.options.height != null) {\n            this.el.classList.toggle(CLAMP_HEIGHT_CLASS, !this.#expanded);\n        }\n\n        this.el.classList.toggle(this.options.expandedClass, this.#expanded);\n        this.#updateButton();\n\n        const stateClass = this.#expanded ? this.options.openingClass : this.options.closingClass;\n        const otherClass = this.#expanded ? this.options.closingClass : this.options.openingClass;\n\n        this.el.classList.remove(otherClass);\n        this.#applyTransientClass(stateClass);\n\n        try {\n            this.options.onToggle?.(this.#expanded, this);\n        } finally {\n            // The event is dispatched even if `onToggle` throws (the error still propagates).\n            this.el.dispatchEvent(new CustomEvent<ReadMoreToggleDetail>('readmore:toggle', {\n                bubbles: true,\n                detail: {\n                    expanded: this.#expanded,\n                    instance: this\n                }\n            }));\n        }\n    }\n\n    /**\n     * Checks again whether the content overflows, mounting or unmounting the\n     * button. Resizes of the element are already tracked; call it after\n     * changing the content in a way that keeps the element's size. Does nothing\n     * while expanded, during a toggle transition, or once destroyed.\n     */\n    refresh(): void {\n        this.#sync(this.#isOverflowing());\n    }\n\n    /**\n     * @param element - An element possibly initialized by this plugin.\n     * @returns The instance bound to it, or `undefined`.\n     */\n    static getInstance(element: HTMLElement): ReadMore | undefined {\n        return instances.get(element);\n    }\n\n    /**\n     * Restores the element: removes the button, the classes, the CSS custom\n     * properties, the listeners and the generated `id`. The element can then be\n     * initialized again. Calling it again does nothing.\n     */\n    destroy(): void {\n        if (this.#destroyed) {\n            return;\n        }\n\n        instances.delete(this.el);\n        ReadMore.#resizeObserver?.unobserve(this.el);\n\n        if (this.#transientTimer !== null) {\n            clearTimeout(this.#transientTimer);\n            this.#transientTimer = null;\n        }\n\n        this.#unmountButton();\n        this.el.classList.remove(\n            CLAMP_CLASS,\n            CLAMP_HEIGHT_CLASS,\n            this.options.expandedClass,\n            this.options.openingClass,\n            this.options.closingClass\n        );\n\n        this.el.style.removeProperty('--readmore-lines');\n        this.el.style.removeProperty('--readmore-height');\n\n        if (this.#generatedId) {\n            this.el.removeAttribute('id');\n            this.#generatedId = false;\n        }\n    }\n\n    // Measures every resized element before touching the DOM, so mounting a\n    // button does not force a new layout for each following element.\n    static #onResize(entries: ResizeObserverEntry[]): void {\n        ReadMore.#syncAll(entries.map((entry) => instances.get(entry.target as HTMLElement)));\n    }\n\n    static #syncAll(list: (ReadMore | undefined)[]): void {\n        const measured = new Map<ReadMore, boolean>();\n\n        for (const instance of list) {\n            if (instance) {\n                measured.set(instance, instance.#isOverflowing());\n            }\n        }\n\n        measured.forEach((overflowing, instance) => instance.#sync(overflowing));\n    }\n\n    #init(): void {\n        if (this.options.height != null) {\n            this.el.style.setProperty('--readmore-height', `${ this.options.height }px`);\n            this.el.classList.add(CLAMP_CLASS, CLAMP_HEIGHT_CLASS);\n        } else {\n            this.el.style.setProperty('--readmore-lines', String(this.options.lines));\n            this.el.classList.add(CLAMP_CLASS);\n        }\n\n        ReadMore.#resizeObserver ??= new ResizeObserver(ReadMore.#onResize);\n        ReadMore.#resizeObserver.observe(this.el);\n\n        // Inside init(), the batch measures all elements at once afterwards.\n        if (ReadMore.#batch) {\n            ReadMore.#batch.push(this);\n        } else {\n            this.refresh();\n        }\n\n        this.#refreshOnFonts();\n    }\n\n    // A font swap can change the overflow without resizing the element, which the\n    // ResizeObserver would miss. Instances created in the same tick share one\n    // measurement; destroyed ones are skipped by #sync.\n    #refreshOnFonts(): void {\n        if (typeof document === 'undefined' || !document.fonts) {\n            return;\n        }\n\n        if (ReadMore.#fontQueue) {\n            ReadMore.#fontQueue.push(this);\n\n            return;\n        }\n\n        const queue: ReadMore[] = ReadMore.#fontQueue = [\n            this\n        ];\n\n        void document.fonts.ready.then(() => {\n            ReadMore.#fontQueue = null;\n            ReadMore.#syncAll(queue.filter((instance) => !instance.#destroyed));\n        });\n    }\n\n    #isOverflowing(): boolean {\n        return this.el.scrollHeight - this.el.clientHeight > 1;\n    }\n\n    #sync(overflowing: boolean): void {\n        // While a toggle transition runs, the element's size is not final: measuring\n        // it mid-collapse would remove the button. The timer refreshes once it ends.\n        if (this.#expanded || this.#transientTimer !== null || this.#destroyed) {\n            return;\n        }\n\n        if (overflowing && !this.#button) {\n            this.#mountButton();\n        } else if (!overflowing && this.#button) {\n            this.#unmountButton();\n        }\n    }\n\n    #applyTransientClass(stateClass: string): void {\n        if (this.#transientTimer !== null) {\n            clearTimeout(this.#transientTimer);\n        }\n\n        this.el.classList.add(stateClass);\n\n        // A timer rather than `transitionend`, which never fires when no declared\n        // property actually changes (e.g. `transition: all` in lines mode).\n        const timer = setTimeout(() => {\n            // Some engines (WebKit) start the transition later than the timer assumes:\n            // wait for it to end, or the size is measured mid-way and the button remounted.\n            const running = this.el.getAnimations?.().filter(a => a instanceof CSSTransition) ?? [];\n            const done = () => {\n                // Superseded by another toggle, or destroyed meanwhile.\n                if (this.#transientTimer !== timer) {\n                    return;\n                }\n\n                this.#transientTimer = null;\n                this.el.classList.remove(stateClass);\n                this.refresh();\n            };\n\n            if (running.length) {\n                Promise.allSettled(running.map(a => a.finished)).then(done);\n            } else {\n                done();\n            }\n        }, this.#transitionTime());\n\n        this.#transientTimer = timer;\n    }\n\n    /** Longest `duration + delay` among the transitions declared on the element, in ms. */\n    #transitionTime(): number {\n        const style = getComputedStyle(this.el);\n        const durations = toMs(style.transitionDuration);\n        const delays = toMs(style.transitionDelay);\n        let max = 0;\n\n        // Shorter lists repeat to match the longer one, as CSS does.\n        for (let i = 0; i < Math.max(durations.length, delays.length); i++) {\n            max = Math.max(max, durations[i % durations.length] + delays[i % delays.length]);\n        }\n\n        return max;\n    }\n\n    #mountButton(): void {\n        if (!this.el.id) {\n            let id: string;\n\n            // Skip ids already used in the page (server-rendered markup, another copy of the plugin…).\n            do {\n                id = `readmore-${++idCounter}`;\n            } while (document.getElementById(id));\n\n            this.el.id = id;\n            this.#generatedId = true;\n        }\n\n        const btn = document.createElement('button');\n\n        btn.type = 'button';\n        btn.className = this.options.buttonClass;\n        btn.setAttribute('aria-controls', this.el.id);\n        btn.addEventListener('click', this.#onClick);\n        this.#button = btn;\n        this.#updateButton();\n\n        if (this.options.buttonContainer) {\n            this.options.buttonContainer.appendChild(btn);\n        } else {\n            this.el.insertAdjacentElement('afterend', btn);\n        }\n    }\n\n    /** Syncs the button's text, `aria-expanded` and `aria-label` with the state. */\n    #updateButton(): void {\n        if (!this.#button) {\n            return;\n        }\n\n        const { moreText, lessText, moreLabel, lessLabel } = this.options;\n        const label = this.#expanded ? lessLabel : moreLabel;\n\n        this.#button.textContent = this.#expanded ? lessText : moreText;\n        this.#button.setAttribute('aria-expanded', String(this.#expanded));\n\n        if (label) {\n            this.#button.setAttribute('aria-label', label);\n        } else {\n            this.#button.removeAttribute('aria-label');\n        }\n    }\n\n    #unmountButton(): void {\n        if (!this.#button) {\n            return;\n        }\n\n        this.#button.removeEventListener('click', this.#onClick);\n\n        // Removing the focused button would drop focus to <body>: keep it on the element.\n        if (document.activeElement === this.#button) {\n            const { el } = this;\n\n            if (!el.hasAttribute('tabindex')) {\n                el.tabIndex = -1;\n                el.addEventListener('blur', () => el.removeAttribute('tabindex'), {\n                    once: true\n                });\n            }\n\n            el.focus();\n        }\n\n        this.#button.remove();\n        this.#button = null;\n    }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,26 +1,33 @@
 {
     "name": "@frontfactory/readmore",
-    "version": "1.3.1",
+    "version": "1.5.0",
     "description": "Zero-dependency plugin to truncate text to N lines or a fixed height, with an ellipsis and an accessible read more / read less toggle.",
     "type": "module",
     "scripts": {
         "dev": "vite",
+        "lint": "eslint .",
         "lint:js": "eslint --fix .",
         "build": "vite build",
         "preview": "vite preview",
+        "docs:dev": "vitepress dev docs",
+        "docs:build": "vitepress build docs",
+        "docs:preview": "vitepress preview docs",
         "typecheck": "tsc --noEmit",
-        "test": "vitest run",
+        "test": "vitest run --project unit",
+        "test:browser": "vitest run --project browser --outputFile.junit=junit-browser.xml",
         "test:watch": "vitest",
-        "test:coverage": "vitest run --coverage",
+        "test:coverage": "vitest run --project unit --coverage",
         "prepare": "husky",
         "prepack": "npm run build",
         "release": "semantic-release"
     },
     "engines": {
-        "node": ">=20"
+        "node": "^22.22.2 || >=24.22"
     },
     "main": "./dist/readmore.js",
     "types": "./dist/readmore.d.ts",
+    "unpkg": "./dist/readmore.iife.js",
+    "jsdelivr": "./dist/readmore.iife.js",
     "exports": {
         ".": {
             "types": "./dist/readmore.d.ts",
@@ -31,25 +38,31 @@
         "./package.json": "./package.json"
     },
     "devDependencies": {
-        "@commitlint/cli": "^20.5.3",
-        "@commitlint/config-conventional": "^20.5.3",
-        "@front-factory/eslint-config": "^2.4.2",
-        "@semantic-release/changelog": "^6.0.3",
-        "@semantic-release/git": "^10.0.1",
-        "@semantic-release/github": "^12.0.6",
-        "@vitest/coverage-v8": "^4.1.5",
+        "@commitlint/cli": "^21.2.4",
+        "@commitlint/config-conventional": "^21.2.4",
+        "@front-factory/eslint-config": "^3.0.0",
+        "@frontfactory/vitepress-theme": "^1.7.0",
+        "@semantic-release/changelog": "^7.0.0",
+        "@semantic-release/git": "^11.0.1",
+        "@semantic-release/github": "^12.0.10",
+        "@types/node": "^24.19.2",
+        "@vitest/browser-playwright": "^5.0.5",
+        "@vitest/coverage-v8": "^5.0.5",
         "conventional-changelog-conventionalcommits": "^9.3.1",
-        "eslint": "^10.3.0",
+        "eslint": "^10.13.0",
         "husky": "^9.1.7",
-        "jsdom": "^29.1.1",
-        "lightningcss": "^1.32.0",
-        "semantic-release": "^25.0.3",
-        "typescript": "^5.4.0",
-        "typescript-eslint": "^8.59.2",
-        "vite": "^8.0.11",
-        "vite-plugin-dts": "^5.0.0",
-        "vite-plugin-static-copy": "^4.1.0",
-        "vitest": "^4.1.5"
+        "jsdom": "^30.1.3",
+        "lightningcss": "^1.33.0",
+        "playwright": "^1.64.1",
+        "semantic-release": "^25.0.9",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.72.0",
+        "vite": "^8.3.5",
+        "vite-plugin-dts": "^5.1.2",
+        "vite-plugin-static-copy": "^4.1.1",
+        "vitepress": "^2.0.0-alpha.21",
+        "vitest": "^5.0.5",
+        "vue": "^3.5.44"
     },
     "keywords": [
         "readmore",