@frontfactory/readmore 1.3.0 → 1.4.0

package/README.md

@@ -7,10 +7,11 @@
 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 KB
+- Zero dependencies, ~1.7 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
+- Accessible by default: `aria-expanded` and `aria-controls` on the toggle button
 
 ## Installation
 
@@ -18,6 +19,24 @@ Lightweight, framework-agnostic plugin to clamp text to N lines (or a fixed pixe
 npm install @frontfactory/readmore
 ```
 
+Requires Node.js `^22.22.2 || >=24.15` 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
 
 Try it live on StackBlitz — no installation required:
@@ -47,6 +66,23 @@ ReadMore.init('.excerpt', {
 });
 ```
 
+`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
@@ -58,30 +94,105 @@ 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)));
+```
+
+If you change the content without changing the element's size (resizes are already tracked), call `refresh()` so the
+button is mounted or removed as needed:
+
+```ts
+instance.el.textContent = newText;
+instance.refresh();
+```
+
+### With a framework
+
+The instance holds a button outside the element and is watched by a `ResizeObserver`, so call `destroy()` when the
+component unmounts. For example with React:
+
+```tsx
+useEffect(() => {
+    const instance = new ReadMore(ref.current!, {
+        lines: 3
+    });
+
+    return () => instance.destroy();
+}, []);
+```
+
 ## 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 (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.                              |
+| `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.                                         |
+| `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.       |
 
 ## API
 
 ```ts
 const instance = new ReadMore(element, options);
 
+instance.el;            // the target element
+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 and listeners
+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(selector, options); // returns ReadMore[]
+// event: 'readmore:toggle' (bubbles) — event.detail: { expanded, instance }
+```
+
+### Errors
+
+The constructor throws instead of failing silently:
+
+| Error        | When                                                                          |
+|--------------|-------------------------------------------------------------------------------|
+| `TypeError`  | `element` is not an `HTMLElement`.                                            |
+| `Error`      | The element is already initialized — call `destroy()` before re-initializing. |
+| `RangeError` | `lines` is not an integer `>= 1`, or `height` is not a finite number `> 0`.   |
+
+## 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`, …, 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
@@ -90,14 +201,18 @@ The plugin sets a CSS custom property on the target element and toggles `.readmo
 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, and unmounted again on resize if the text ends up fitting.
+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:
+`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 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 { 
@@ -108,3 +223,23 @@ next tick if no transition is declared. Use them as hooks to drive enter/leave a
     /* collapse animation */ 
 }
 ```
+
+### 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

@@ -1,27 +1,174 @@
+/**
+ * Options accepted by {@link ReadMore}. Every field is optional.
+ */
 export interface ReadMoreOptions {
+    /**
+     * Number of lines to clamp to. Ignored when {@link ReadMoreOptions.height} is set.
+     *
+     * @defaultValue 3
+     * @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 not a finite number greater than 0.
+     */
     height?: number;
+    /**
+     * Label of the toggle button while the text is collapsed.
+     *
+     * @defaultValue 'Read more'
+     */
     moreText?: string;
+    /**
+     * Label of the toggle button while the text is expanded.
+     *
+     * @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;
+    /**
+     * Class applied to the target element for the whole expanded state.
+     *
+     * @defaultValue 'is-expanded'
+     */
     expandedClass?: string;
+    /**
+     * 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 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;
-    onToggle?: (expanded: boolean) => void;
+    /**
+     * 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, instance: ReadMore) => void;
 }
-type ResolvedOptions = Required<Omit<ReadMoreOptions, 'height' | 'onToggle'>> & {
-    height?: number;
-    onToggle?: (expanded: boolean) => void;
-};
+type OptionalKeys = 'height' | 'moreLabel' | 'lessLabel' | 'onToggle';
+/**
+ * {@link ReadMoreOptions} merged with the defaults, as exposed on
+ * {@link ReadMore.options}.
+ */
+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
+ * actually overflows.
+ *
+ * @example
+ * ```ts
+ * import { ReadMore } from '@frontfactory/readmore';
+ * import '@frontfactory/readmore/style.css';
+ *
+ * ReadMore.init('.excerpt', { lines: 3 });
+ * ```
+ */
 export declare class ReadMore {
     #private;
+    /** The clamped element. */
     readonly el: HTMLElement;
-    readonly options: ResolvedOptions;
+    /** The options this instance was built with, merged with the defaults. */
+    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 not an integer greater than or equal
+     * to 1, or `height` is not a finite number greater than 0.
+     */
     constructor(element: HTMLElement, options?: ReadMoreOptions);
-    static init(target: string | NodeListOf<HTMLElement> | HTMLElement[], options?: ReadMoreOptions): ReadMore[];
+    /**
+     * 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: string | HTMLElement | Iterable<HTMLElement> | ArrayLike<HTMLElement>, options?: ReadMoreOptions, root?: ParentNode): ReadMore[];
+    /** Whether the text is currently expanded. */
     get expanded(): boolean;
-    toggle(): void;
+    /**
+     * 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?: 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.
+     */
+    refresh(): void;
+    /**
+     * @param element - An element possibly initialized by this plugin.
+     * @returns The instance bound to it, or `undefined`.
+     */
     static getInstance(element: HTMLElement): ReadMore | undefined;
+    /**
+     * 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(): void;
 }
 export {};

package/dist/readmore.iife.js

@@ -0,0 +1 @@
+(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`readmore-clamp`,n=`readmore-clamp--height`,r=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;el;options;#t=null;#n=!1;#r=!1;#i=null;#a=()=>this.toggle();get#o(){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))};let{height:n,lines:i}=this.options;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.#c()}static init(t,n,i=document){let a=typeof t==`string`?i.querySelectorAll(t):t instanceof HTMLElement?[t]:t;return Array.from(a).map(t=>r.get(t)??new e(t,n))}get expanded(){return this.#n}toggle(e){let r=typeof e==`boolean`?e:!this.#n;if(this.#o||r===this.#n)return;this.#n=r,this.el.classList.toggle(t,!this.#n),this.options.height!=null&&this.el.classList.toggle(n,!this.#n),this.el.classList.toggle(this.options.expandedClass,this.#n),this.#m();let i=this.#n?this.options.openingClass:this.options.closingClass,a=this.#n?this.options.closingClass:this.options.openingClass;this.el.classList.remove(a),this.#d(i),this.options.onToggle?.(this.#n,this),this.el.dispatchEvent(new CustomEvent(`readmore:toggle`,{bubbles:!0,detail:{expanded:this.#n,instance:this}}))}refresh(){this.#u(this.#l())}static getInstance(e){return r.get(e)}destroy(){this.#o||(r.delete(this.el),e.#e?.unobserve(this.el),this.#i!==null&&(clearTimeout(this.#i),this.#i=null),this.#h(),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.#r&&=(this.el.removeAttribute(`id`),!1))}static#s(e){let t=new Map;for(let n of e){let e=r.get(n.target);e&&t.set(e,e.#l())}t.forEach((e,t)=>t.#u(e))}#c(){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.#s),e.#e.observe(this.el),this.refresh()}#l(){return this.el.scrollHeight-this.el.clientHeight>1}#u(e){this.#n||this.#i!==null||this.#o||(e&&!this.#t?this.#p():!e&&this.#t&&this.#h())}#d(e){this.#i!==null&&clearTimeout(this.#i),this.el.classList.add(e),this.#i=setTimeout(()=>{this.#i=null,this.el.classList.remove(e),this.refresh()},this.#f())}#f(){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}#p(){if(!this.el.id){let e;do e=`readmore-${++i}`;while(document.getElementById(e));this.el.id=e,this.#r=!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.#a),this.#t=e,this.#m(),this.el.insertAdjacentElement(`afterend`,e)}#m(){if(!this.#t)return;let{moreText:e,lessText:t,moreLabel:n,lessLabel:r}=this.options,i=this.#n?r:n;this.#t.textContent=this.#n?t:e,this.#t.setAttribute(`aria-expanded`,String(this.#n)),i?this.#t.setAttribute(`aria-label`,i):this.#t.removeAttribute(`aria-label`)}#h(){this.#t&&=(this.#t.removeEventListener(`click`,this.#a),this.#t.remove(),null)}}})(this.FrontFactory=this.FrontFactory||{});

package/dist/readmore.js

@@ -7,74 +7,109 @@ var e = "readmore-clamp", t = "readmore-clamp--height", n = /* @__PURE__ */ new
 	expandedClass: "is-expanded",
 	openingClass: "is-opening",
 	closingClass: "is-closing"
-}, a = class a {
+};
+function a(e) {
+	return e.split(",").map((e) => parseFloat(e) * 1e3 || 0);
+}
+var o = class o {
+	static #e;
 	el;
 	options;
-	#e = null;
-	#t = !1;
+	#t = null;
 	#n = !1;
-	#r;
+	#r = !1;
 	#i = null;
 	#a = () => this.toggle();
+	get #o() {
+		return n.get(this.el) !== this;
+	}
 	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 = {
+		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();
+			...Object.fromEntries(Object.entries(t).filter((e) => e[1] !== void 0))
+		};
+		let { height: r, lines: a } = this.options;
+		if (r != null && !(Number.isFinite(r) && r > 0)) throw RangeError("ReadMore: height must be a finite number greater than 0.");
+		if (!(Number.isInteger(a) && a >= 1)) throw RangeError("ReadMore: lines must be an integer of at least 1.");
+		n.set(e, this), this.#c();
 	}
-	static init(e, t) {
-		let n = typeof e == "string" ? document.querySelectorAll(e) : e;
-		return Array.from(n).map((e) => new a(e, t));
+	static init(e, t, r = document) {
+		let i = typeof e == "string" ? r.querySelectorAll(e) : e instanceof HTMLElement ? [e] : e;
+		return Array.from(i).map((e) => n.get(e) ?? new o(e, t));
 	}
 	get expanded() {
-		return this.#t;
+		return this.#n;
+	}
+	toggle(n) {
+		let r = typeof n == "boolean" ? n : !this.#n;
+		if (this.#o || r === this.#n) return;
+		this.#n = r, this.el.classList.toggle(e, !this.#n), this.options.height != null && this.el.classList.toggle(t, !this.#n), this.el.classList.toggle(this.options.expandedClass, this.#n), this.#m();
+		let i = this.#n ? this.options.openingClass : this.options.closingClass, a = this.#n ? this.options.closingClass : this.options.openingClass;
+		this.el.classList.remove(a), this.#d(i), this.options.onToggle?.(this.#n, this), this.el.dispatchEvent(new CustomEvent("readmore:toggle", {
+			bubbles: !0,
+			detail: {
+				expanded: this.#n,
+				instance: this
+			}
+		}));
 	}
-	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);
+	refresh() {
+		this.#u(this.#l());
 	}
 	static getInstance(e) {
 		return n.get(e);
 	}
 	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);
+		this.#o || (n.delete(this.el), o.#e?.unobserve(this.el), this.#i !== null && (clearTimeout(this.#i), this.#i = null), this.#h(), 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.#r &&= (this.el.removeAttribute("id"), !1));
 	}
-	#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 #s(e) {
+		let t = /* @__PURE__ */ new Map();
+		for (let r of e) {
+			let e = n.get(r.target);
+			e && t.set(e, e.#l());
+		}
+		t.forEach((e, t) => t.#u(e));
+	}
+	#c() {
+		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)), o.#e ??= new ResizeObserver(o.#s), o.#e.observe(this.el), this.refresh();
 	}
-	#s() {
+	#l() {
 		return this.el.scrollHeight - this.el.clientHeight > 1;
 	}
-	#c() {
-		if (this.#t) return;
-		let e = this.#s();
-		e && !this.#e ? this.#u() : !e && this.#e && this.#d();
-	}
-	#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);
-			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);
+	#u(e) {
+		this.#n || this.#i !== null || this.#o || (e && !this.#t ? this.#p() : !e && this.#t && this.#h());
+	}
+	#d(e) {
+		this.#i !== null && clearTimeout(this.#i), this.el.classList.add(e), this.#i = setTimeout(() => {
+			this.#i = null, this.el.classList.remove(e), this.refresh();
+		}, this.#f());
 	}
-	#u() {
-		this.el.id || (this.el.id = `readmore-${++r}`, this.#n = !0);
+	#f() {
+		let e = getComputedStyle(this.el), t = a(e.transitionDuration), n = a(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;
+	}
+	#p() {
+		if (!this.el.id) {
+			let e;
+			do
+				e = `readmore-${++r}`;
+			while (document.getElementById(e));
+			this.el.id = e, this.#r = !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;
+		e.type = "button", e.className = this.options.buttonClass, e.setAttribute("aria-controls", this.el.id), e.addEventListener("click", this.#a), this.#t = e, this.#m(), this.el.insertAdjacentElement("afterend", e);
+	}
+	#m() {
+		if (!this.#t) return;
+		let { moreText: e, lessText: t, moreLabel: n, lessLabel: r } = this.options, i = this.#n ? r : n;
+		this.#t.textContent = this.#n ? t : e, this.#t.setAttribute("aria-expanded", String(this.#n)), i ? this.#t.setAttribute("aria-label", i) : this.#t.removeAttribute("aria-label");
 	}
-	#d() {
-		this.#e &&= (this.#e.removeEventListener("click", this.#a), this.#e.remove(), null);
+	#h() {
+		this.#t &&= (this.#t.removeEventListener("click", this.#a), this.#t.remove(), null);
 	}
 };
 //#endregion
-export { a as ReadMore };
+export { o as ReadMore };

package/package.json

@@ -1,64 +1,78 @@
 {
     "name": "@frontfactory/readmore",
-    "version": "1.3.0",
-    "description": "Lightweight plugin to clamp text to N lines with ellipsis and a read more action.",
+    "version": "1.4.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",
         "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",
-        "prepare": "husky && npm run build",
+        "test:coverage": "vitest run --project unit --coverage",
+        "prepare": "husky",
+        "prepack": "npm run build",
         "release": "semantic-release"
     },
     "engines": {
-        "node": ">=20.19"
+        "node": "^22.22.2 || >=24.15"
     },
     "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",
-            "import": "./dist/readmore.js"
+            "import": "./dist/readmore.js",
+            "default": "./dist/readmore.js"
         },
         "./style.css": "./dist/readmore.css",
         "./package.json": "./package.json"
     },
     "devDependencies": {
-        "@commitlint/cli": "^20.5.3",
-        "@commitlint/config-conventional": "^20.5.3",
+        "@commitlint/cli": "^21.2.2",
+        "@commitlint/config-conventional": "^21.2.2",
         "@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",
+        "@semantic-release/changelog": "^7.0.0",
+        "@semantic-release/git": "^11.0.1",
+        "@semantic-release/github": "^12.0.9",
+        "@vitest/browser-playwright": "^5.0.0",
+        "@vitest/coverage-v8": "^5.0.0",
         "conventional-changelog-conventionalcommits": "^9.3.1",
-        "eslint": "^10.3.0",
+        "eslint": "^10.10.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.0.1",
+        "lightningcss": "^1.33.0",
+        "playwright": "^1.63.0",
+        "semantic-release": "^25.0.9",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.70.0",
+        "vite": "^8.3.0",
+        "vite-plugin-dts": "^5.1.0",
+        "vite-plugin-static-copy": "^4.1.1",
+        "vitest": "^5.0.0"
     },
-    "sideEffects": false,
-    "files": [
-        "dist"
-    ],
     "keywords": [
         "readmore",
+        "read-more",
+        "show-more",
+        "truncate",
+        "text-truncate",
+        "line-clamp",
+        "clamp",
+        "ellipsis",
         "expand",
         "collapse",
-        "front-end"
+        "typescript",
+        "vanilla-js",
+        "a11y"
     ],
+    "author": "Front Factory",
     "license": "MIT",
     "homepage": "https://github.com/front-factory/readmore",
     "bugs": {
@@ -68,6 +82,12 @@
         "type": "git",
         "url": "git+https://github.com/front-factory/readmore.git"
     },
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "files": [
+        "dist"
+    ],
     "publishConfig": {
         "access": "public",
         "provenance": true