text-slicer 2.0.0 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 # text-slicer
 
-Split text inside an HTML element into words and/or characters, wrapping each fragment in its own span.
+Create word and grapheme-level DOM hooks from plain text for animation and styling.
 
 [![npm](https://img.shields.io/npm/v/text-slicer.svg?colorB=brightgreen)](https://www.npmjs.com/package/text-slicer)
 [![NPM Downloads](https://img.shields.io/npm/dm/text-slicer.svg?style=flat)](https://www.npmjs.com/package/text-slicer)
@@ -9,12 +9,14 @@ Split text inside an HTML element into words and/or characters, wrapping each fr
 
 ---
 
-- Split by words, characters, or both (`splitMode`).
-- Optional CSS variables (`--word-index`, `--char-index`, `--word-total`, `--char-total`, `--container-height`).
-- Optional `data-word` / `data-char` attributes for styling or scripting.
-- Lifecycle helpers: `init`, `reinit`, `clear`, `split`, `destroy`, `updateOptions`, `lockHeight`, `unlockHeight`.
-- `onAfterRender` callback with word/char totals and timestamp.
-- ~1.5kB gzipped.
+## Features
+
+- Split short plain text into words, graphemes, or both.
+- Use locale-aware word and grapheme segmentation with `Intl.Segmenter`.
+- Add CSS hooks through `--word-index`, `--char-index`, `--word-total`, and `--char-total`.
+- Add optional `data-word` and `data-char` attributes when scripting needs the raw text.
+- Clean up with lifecycle methods such as `destroy()`, `reinit()`, `lockHeight()`, and `unlockHeight()`.
+- Read render metrics with `onAfterRender`.
 
 ---
 
@@ -24,6 +26,8 @@ Split text inside an HTML element into words and/or characters, wrapping each fr
 npm install text-slicer
 ```
 
+---
+
 ## Quick Start
 
 HTML:
@@ -66,68 +70,198 @@ Apply to every matching element on the page:
 
 ```ts
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.text-slicer').forEach((element) => {
-    const textSlicer = new TextSlicer({ container: element });
+  const textSlicers = Array.from(
+    document.querySelectorAll<HTMLElement>('.text-slicer'),
+    (container) => {
+      const textSlicer = new TextSlicer({ container });
 
-    textSlicer.init();
-  });
+      textSlicer.init();
+
+      return textSlicer;
+    },
+  );
+
+  // Later, before removing the elements, replacing this section,
+  // or cleaning up during SPA route changes:
+  const destroyTextSlicers = () => {
+    textSlicers.forEach((textSlicer) => textSlicer.destroy());
+  };
 });
 ```
 
-## API
+---
 
-Named exports:
+## API
 
 ```ts
 import { TextSlicer, CLASSNAMES } from 'text-slicer';
 ```
 
-- `TextSlicer` — main class.
-- `CLASSNAMES` — BEM-style class map (`word`, `char`, `whitespace`).
+- `TextSlicer` — the main class.
+- `CLASSNAMES` — class map for `word`, `char`, and `whitespace`.
 - Types: `SplitMode`, `TextSlicerOptions`, `TextSlicerMetrics`, `TextSlicerCallbacks`.
 
-Constructor: `new TextSlicer(options?, callbacks?)`.
+Constructor:
+
+```ts
+new TextSlicer(options?, callbacks?);
+```
+
+---
 
 ## Options
 
-| Option                | Type                    | Default     | Description                                                                 |
-|:----------------------|:------------------------|:-----------:|:----------------------------------------------------------------------------|
-| `container`           | `HTMLElement \| string` | `undefined` | Target element or selector for text splitting.                              |
-| `splitMode`           | `'words' \| 'chars' \| 'both'` | `both` | Split by words, characters, or both.                                        |
-| `cssVariables`        | `boolean`               | `false`     | Sets `--word-index`, `--char-index`, `--word-total`, `--char-total` on spans. |
-| `dataAttributes`      | `boolean`               | `false`     | Adds `data-word` and `data-char` attributes.                                |
-| `keepWhitespaceNodes` | `boolean`               | `true`      | When `false`, whitespace nodes are ignored in character mode.               |
-| `containerHeightVar`  | `boolean`               | `false`     | Sets dynamic `--container-height` via `ResizeObserver`.                     |
+| Option | Type | Default | Description |
+|:--|:--|:--:|:--|
+| `container` | `HTMLElement \| string` | `undefined` | Target element or selector. One `TextSlicer` instance manages one element. |
+| `splitMode` | `'words' \| 'chars' \| 'both'` | `both` | Split into words, graphemes, or both. |
+| `cssVariables` | `boolean` | `false` | Sets `--word-index` / `--char-index` on generated spans and `--word-total` / `--char-total` on the container. |
+| `dataAttributes` | `boolean` | `false` | Adds `data-word` and `data-char` attributes. |
+| `keepWhitespaceNodes` | `boolean` | `true` | When `false`, whitespace stays visible as text nodes instead of `.ts-whitespace` spans in character-based modes. |
+| `containerHeightVar` | `boolean` | `false` | Sets `--container-height` from `ResizeObserver` measurements when available. |
+| `locale` | `string \| string[]` | `undefined` | Locale passed to `Intl.Segmenter`; omitted means the runtime default locale. |
+
+---
 
 ## Callbacks
 
-| Callback        | Arguments           | Description                                                              |
-|-----------------|---------------------|--------------------------------------------------------------------------|
-| `onAfterRender` | `TextSlicerMetrics` | Called after render; provides `wordTotal`, `charTotal`, `renderedAt`.      |
+| Callback | Arguments | Description |
+|:--|:--|:--|
+| `onAfterRender` | `TextSlicerMetrics` | Runs after render with `wordTotal`, `charTotal`, and `renderedAt`. |
+
+`charTotal` counts non-whitespace grapheme clusters, not UTF-16 code units. In `chars` and `both` modes it matches rendered `.ts-char` spans. In `words` mode, metrics still describe the original plain text even though character spans are not rendered.
+
+---
 
 ## Methods
 
-| Method                         | Description                                              |
-|--------------------------------|----------------------------------------------------------|
-| `init()`                       | Initializes and renders text splitting.                  |
-| `reinit(newText?, options?)`   | Re-initializes with optional new text and updated options. |
-| `clear()`                      | Clears all content inside the container.                 |
-| `split()`                      | Manually triggers splitting and rendering.               |
-| `destroy()`                    | Cleans up instance, observers, and styles.               |
-| `updateOptions(options)`       | Updates options at runtime; re-renders if mounted.       |
-| `lockHeight()`                 | Locks container height to its measured value.            |
-| `unlockHeight()`               | Unlocks container height.                                |
-| `metrics` (getter)             | Returns `wordTotal`, `charTotal`, and `renderedAt`.      |
+| Method | Description |
+|:--|:--|
+| `init()` | Render the current text and mark the instance mounted. |
+| `reinit(newText?, options?)` | Render again, optionally with new plain text and updated options. |
+| `clear()` | Remove rendered children and restore library-owned accessibility attributes. Use `destroy()` for full cleanup. |
+| `split()` | Render the current text again. |
+| `destroy()` | Disconnect observers, restore library-owned styles and attributes, remove generated spans, and put the original plain text back. |
+| `updateOptions(options)` | Update options and re-render if the instance is mounted. |
+| `lockHeight()` | Lock the container height to its measured value. |
+| `unlockHeight()` | Restore the previous inline `height`. |
+| `metrics` | Return metrics computed from the original plain text. |
+
+---
+
+## Splitting Semantics
+
+- `words`: word-like segments become `.ts-word`; punctuation stays visible but is not counted as a word.
+- `chars`: non-whitespace grapheme clusters become `.ts-char`.
+- `both`: word-like segments become `.ts-word`, and every non-whitespace grapheme, including punctuation, becomes `.ts-char`.
+
+Word-like segments come from `Intl.Segmenter` with `granularity: 'word'`. Whitespace stays visible as `.ts-whitespace` spans, or as plain text nodes when `keepWhitespaceNodes: false` is used in character-based modes.
+
+---
+
+## Limitations
+
+- Plain text only: nested markup is not preserved. `destroy()` restores `textContent`, not the original child nodes.
+- Best for short headings, labels, and animation copy. Long text can create a lot of DOM nodes.
+- `split()` and `updateOptions()` rebuild the generated content.
+- `Intl.Segmenter` is used when available. The fallback is simpler and may miss locale-specific word boundaries or complex emoji clusters.
+- Client-only: call `init()` after mount in SSR frameworks.
+
+---
+
+## Accessibility
+
+Generated visual spans are marked `aria-hidden="true"`.
+
+If the container has no `aria-label` or `aria-labelledby`, TextSlicer adds a managed `aria-label` with the original plain text and restores it on cleanup.
+
+If you provide your own `aria-label` or `aria-labelledby`, TextSlicer leaves it alone. Keep your custom accessible label in sync when calling `reinit()` with new text.
+
+---
+
+## Framework Integration
+
+Call `init()` only after the element exists in the browser. Call `destroy()` before unmounting or replacing the element.
+
+React / Next.js:
+
+```tsx
+useEffect(() => {
+  const slicer = new TextSlicer({
+    container: ref.current,
+    splitMode: 'chars',
+    cssVariables: true,
+  });
+
+  slicer.init();
+
+  return () => slicer.destroy();
+}, []);
+```
+
+Vue:
+
+```ts
+onMounted(() => {
+  slicer = new TextSlicer({ container: el.value });
+  slicer.init();
+});
+
+onBeforeUnmount(() => slicer?.destroy());
+```
+
+Svelte:
+
+```ts
+onMount(() => {
+  const slicer = new TextSlicer({ container: node });
+  slicer.init();
+
+  return () => slicer.destroy();
+});
+```
+
+---
 
 ## Styling
 
 Exported `CLASSNAMES`:
 
-- `ts-word` — word wrapper (when splitting includes words).
+- `ts-word` — word wrapper.
 - `ts-char` — character span.
 - `ts-whitespace` — whitespace span.
 
-When `cssVariables: true`, spans receive `--word-index`, `--char-index`; the container may receive `--word-total`, `--char-total`, and (with `containerHeightVar`) `--container-height`.
+When `cssVariables: true`, `--word-total` and `--char-total` are set on the container. `--word-index` is set on `.ts-word` spans, and `--char-index` is set on non-whitespace `.ts-char` spans.
+
+`--container-height` is based on `ResizeObserver` measurements when `containerHeightVar: true` and the platform API is available.
+
+Staggered character reveal:
+
+```css
+.ts-char {
+  opacity: 0;
+  transform: translateY(0.5em);
+  animation: char-in 0.4s ease forwards;
+  animation-delay: calc(var(--char-index) * 40ms);
+}
+
+@keyframes char-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+```
+
+---
+
+## Browser Support
+
+`Intl.Segmenter` is required for correct word and grapheme splitting. Without it, TextSlicer uses a simplified fallback; emoji and complex grapheme clusters may be incorrect.
+
+`containerHeightVar` is a no-op when `ResizeObserver` is unavailable.
+
+---
 
 ## License
 

package/dist/index.cjs

@@ -6,14 +6,14 @@ const DEFAULT_OPTIONS = {
 	cssVariables: false,
 	dataAttributes: false,
 	keepWhitespaceNodes: true,
-	containerHeightVar: false
+	containerHeightVar: false,
+	locale: void 0
 };
 const CLASSNAMES = Object.freeze({
 	word: "ts-word",
 	char: "ts-char",
 	whitespace: "ts-whitespace"
 });
-const SPACE = " ";
 const CSS_VAR_WORD_TOTAL = "--word-total";
 const CSS_VAR_CHAR_TOTAL = "--char-total";
 const CSS_VAR_WORD_INDEX = "--word-index";
@@ -26,15 +26,58 @@ const resolveContainer = (container) => {
 	if (!container) return null;
 	return typeof container === "string" ? document.querySelector(container) : container;
 };
-const splitIntoGraphemes = (text) => {
+const localeKey = (locale) => locale === void 0 ? "" : Array.isArray(locale) ? locale.join("\0") : locale;
+const segmenterCache = /* @__PURE__ */ new Map();
+const getSegmenter = (locale, granularity) => {
+	if (typeof Intl === "undefined") return null;
 	const Seg = Intl.Segmenter;
-	if (typeof Seg === "function") {
-		const segmenter = new Seg("en", { granularity: "grapheme" });
-		return Array.from(segmenter.segment(text), (s) => s.segment);
+	if (typeof Seg !== "function") return null;
+	const key = `${granularity}:${localeKey(locale)}`;
+	let segmenter = segmenterCache.get(key);
+	if (!segmenter) {
+		segmenter = new Seg(locale, { granularity });
+		segmenterCache.set(key, segmenter);
 	}
+	return segmenter;
+};
+const splitIntoGraphemes = (text, locale) => {
+	const segmenter = getSegmenter(locale, "grapheme");
+	if (segmenter) return Array.from(segmenter.segment(text), (s) => s.segment);
 	return Array.from(text);
 };
-const splitIntoWords = (text) => text.split(SPACE);
+const isWhitespaceGrapheme = (ch) => /^\s+$/u.test(ch);
+const countCharGraphemes = (text, locale) => splitIntoGraphemes(text, locale).filter((ch) => !isWhitespaceGrapheme(ch)).length;
+const segmentWords = (text, locale) => {
+	const segmenter = getSegmenter(locale, "word");
+	if (segmenter) return Array.from(segmenter.segment(text));
+	const words = text.split(/\s+/u).filter(Boolean);
+	const segments = [];
+	let cursor = 0;
+	for (const word of words) {
+		const start = text.indexOf(word, cursor);
+		if (start > cursor) segments.push({
+			segment: text.slice(cursor, start),
+			index: cursor,
+			input: text,
+			isWordLike: false
+		});
+		segments.push({
+			segment: word,
+			index: start,
+			input: text,
+			isWordLike: true
+		});
+		cursor = start + word.length;
+	}
+	if (cursor < text.length) segments.push({
+		segment: text.slice(cursor),
+		index: cursor,
+		input: text,
+		isWordLike: false
+	});
+	return segments;
+};
+const countWords = (text, locale) => segmentWords(text, locale).filter((s) => s.isWordLike).length;
 const emptyElement = (el) => {
 	el.replaceChildren();
 };
@@ -47,6 +90,13 @@ const omitUndefined = (obj) => {
 	});
 	return out;
 };
+const mergeRuntimeOptions = (base, patch) => {
+	const { container: _container, ...runtimeOptions } = patch;
+	return {
+		...base,
+		...omitUndefined(runtimeOptions)
+	};
+};
 var TextSlicer = class {
 	el;
 	original;
@@ -55,23 +105,24 @@ var TextSlicer = class {
 	charIndex;
 	mounted;
 	resizeObserver;
+	managedStyles = /* @__PURE__ */ new Map();
+	managedAttributes = /* @__PURE__ */ new Map();
 	constructor(options = {}, callbacks) {
-		const el = resolveContainer(options.container);
+		const { container, ...runtimeOptions } = options;
+		const el = resolveContainer(container);
 		this.el = el;
 		this.original = isHTMLElement(el) ? el.textContent?.toString() ?? "" : "";
-		this.opts = {
-			...DEFAULT_OPTIONS,
-			...omitUndefined(options)
-		};
+		this.opts = mergeRuntimeOptions(DEFAULT_OPTIONS, runtimeOptions);
 		this.callbacks = callbacks;
 		this.charIndex = 0;
 		this.mounted = false;
 	}
 	get metrics() {
 		const text = this.original;
+		const { locale } = this.opts;
 		return {
-			wordTotal: text.length ? splitIntoWords(text).length : 0,
-			charTotal: text.length,
+			wordTotal: text.length ? countWords(text, locale) : 0,
+			charTotal: text.length ? countCharGraphemes(text, locale) : 0,
 			renderedAt: Date.now()
 		};
 	}
@@ -79,130 +130,197 @@ var TextSlicer = class {
 		if (!this.el) return;
 		this.mounted = true;
 		this.split();
-		if (this.opts.containerHeightVar) this.initHeightObserver();
+		this.syncHeightObserver();
 	}
 	reinit(newText, next) {
 		if (!this.el) return;
 		if (typeof newText === "string") this.original = newText;
-		if (next) this.opts = {
-			...this.opts,
-			...omitUndefined(next)
-		};
+		if (next) this.opts = mergeRuntimeOptions(this.opts, next);
+		this.mounted = true;
 		this.split();
+		this.syncHeightObserver();
 	}
 	clear() {
 		if (!this.el) return;
 		emptyElement(this.el);
+		this.restoreManagedAttribute("aria-label");
 	}
 	split() {
 		if (!this.el) return;
-		this.clear();
+		emptyElement(this.el);
 		this.charIndex = 0;
 		const text = this.original;
 		const fragment = document.createDocumentFragment();
-		const words = splitIntoWords(text);
 		if (this.opts.splitMode === "chars") this.appendChars(fragment, text);
-		else this.appendWords(fragment, words);
+		else this.appendWords(fragment, text);
 		this.el.appendChild(fragment);
+		this.syncAccessibleLabel(text);
+		const metrics = this.metrics;
 		if (this.opts.cssVariables) {
-			this.el.style.setProperty(CSS_VAR_WORD_TOTAL, String(words.length));
-			this.el.style.setProperty(CSS_VAR_CHAR_TOTAL, String(text.length));
+			this.setManagedStyle(CSS_VAR_WORD_TOTAL, String(metrics.wordTotal));
+			this.setManagedStyle(CSS_VAR_CHAR_TOTAL, String(metrics.charTotal));
+		} else {
+			this.restoreManagedStyle(CSS_VAR_WORD_TOTAL);
+			this.restoreManagedStyle(CSS_VAR_CHAR_TOTAL);
 		}
-		this.callbacks?.onAfterRender?.(this.metrics);
+		this.callbacks?.onAfterRender?.(metrics);
 	}
 	destroy() {
 		if (!this.el) return;
-		this.clear();
-		this.unlockHeight();
-		if (this.resizeObserver) {
-			this.resizeObserver.disconnect();
-			this.resizeObserver = void 0;
-		}
-		if (this.opts.containerHeightVar) this.el.style.removeProperty(CSS_VAR_CONTAINER_HEIGHT);
+		this.syncHeightObserver(false);
+		this.restoreManagedStyles();
+		this.restoreManagedAttribute("aria-label");
+		this.el.textContent = this.original;
 		this.mounted = false;
 	}
 	updateOptions(next) {
-		this.opts = {
-			...this.opts,
-			...omitUndefined(next)
-		};
-		if (this.mounted) this.split();
+		this.opts = mergeRuntimeOptions(this.opts, next);
+		if (this.mounted) {
+			this.split();
+			this.syncHeightObserver();
+		}
 	}
 	lockHeight() {
 		if (!this.el) return;
 		const h = this.measureHeight();
-		if (h > 0) this.el.style.height = `${h}px`;
+		if (h > 0) this.setManagedStyle("height", `${h}px`);
 	}
 	unlockHeight() {
-		if (!this.el) return;
-		this.el.style.removeProperty("height");
-	}
-	appendWords(fragment, words) {
-		words.forEach((word, wordIndex) => {
-			if (this.opts.splitMode === "both") {
-				const wordSpan = this.createWordSpan(wordIndex, word);
-				for (const ch of splitIntoGraphemes(word)) {
-					const charSpan = this.createCharSpan(ch);
-					wordSpan.append(charSpan);
-				}
-				fragment.append(wordSpan);
-			} else {
-				const wordSpan = this.createWordSpan(wordIndex);
-				wordSpan.append(document.createTextNode(word));
-				fragment.append(wordSpan);
-			}
-			if (wordIndex < words.length - 1) fragment.append(this.createSpaceSpan());
-		});
+		this.restoreManagedStyle("height");
+	}
+	appendWords(fragment, text) {
+		const segments = segmentWords(text, this.opts.locale);
+		let wordIndex = 0;
+		for (const { segment, isWordLike } of segments) if (isWordLike) {
+			const wordSpan = this.createWordSpan(wordIndex, segment);
+			if (this.opts.splitMode === "both") this.appendGraphemes(wordSpan, segment);
+			else wordSpan.append(document.createTextNode(segment));
+			fragment.append(wordSpan);
+			wordIndex += 1;
+		} else if (isWhitespaceGrapheme(segment)) if (this.opts.splitMode === "both") this.appendGraphemes(fragment, segment);
+		else fragment.append(this.createWhitespaceSpan(segment));
+		else if (segment.length > 0) if (this.opts.splitMode === "both") this.appendGraphemes(fragment, segment);
+		else fragment.append(this.createHiddenTextSpan(segment));
 	}
 	appendChars(fragment, text) {
-		for (const ch of splitIntoGraphemes(text)) {
-			const span = this.createCharSpan(ch);
-			fragment.append(span);
+		for (const ch of splitIntoGraphemes(text, this.opts.locale)) this.appendGrapheme(fragment, ch);
+	}
+	appendGraphemes(parent, text) {
+		for (const ch of splitIntoGraphemes(text, this.opts.locale)) this.appendGrapheme(parent, ch);
+	}
+	appendGrapheme(parent, ch) {
+		if (isWhitespaceGrapheme(ch)) {
+			if (this.opts.keepWhitespaceNodes) parent.append(this.createWhitespaceSpan(ch));
+			else parent.append(document.createTextNode(ch));
+			return;
 		}
+		parent.append(this.createCharSpan(ch));
 	}
-	createWordSpan(index, word = "") {
+	createWordSpan(index, word) {
 		const span = document.createElement("span");
 		span.classList.add(CLASSNAMES.word);
-		if (this.opts.dataAttributes && word) span.setAttribute("data-word", word);
+		span.setAttribute("aria-hidden", "true");
+		if (this.opts.dataAttributes) span.setAttribute("data-word", word);
 		if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_WORD_INDEX, String(index));
 		return span;
 	}
 	createCharSpan(ch) {
 		const span = document.createElement("span");
 		span.textContent = ch;
+		span.setAttribute("aria-hidden", "true");
+		span.classList.add(CLASSNAMES.char);
 		if (this.opts.dataAttributes) span.setAttribute("data-char", ch);
-		if (ch === SPACE) {
-			span.classList.add(CLASSNAMES.whitespace);
-			if (!this.opts.keepWhitespaceNodes) span.textContent = SPACE;
-		} else {
-			span.classList.add(CLASSNAMES.char);
-			if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_CHAR_INDEX, String(this.charIndex));
-			this.charIndex += 1;
-		}
+		if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_CHAR_INDEX, String(this.charIndex));
+		this.charIndex += 1;
 		return span;
 	}
-	createSpaceSpan() {
+	createWhitespaceSpan(text) {
 		const span = document.createElement("span");
 		span.classList.add(CLASSNAMES.whitespace);
-		span.textContent = SPACE;
+		span.textContent = text;
+		span.setAttribute("aria-hidden", "true");
+		return span;
+	}
+	createHiddenTextSpan(text) {
+		const span = document.createElement("span");
+		span.textContent = text;
+		span.setAttribute("aria-hidden", "true");
 		return span;
 	}
+	syncAccessibleLabel(text) {
+		if (!this.el) return;
+		if (this.managedAttributes.has("aria-label")) {
+			this.setManagedAttribute("aria-label", text);
+			return;
+		}
+		if (this.el.hasAttribute("aria-label") || this.el.hasAttribute("aria-labelledby")) return;
+		this.setManagedAttribute("aria-label", text);
+	}
 	measureHeight() {
 		if (!this.el) return 0;
 		this.el.classList.add(MEASURING_CLASS);
-		this.el.offsetHeight;
-		let h = this.el.offsetHeight || this.el.clientHeight || 0;
-		if (!h) h = Math.round(this.el.getBoundingClientRect().height);
-		this.el.classList.remove(MEASURING_CLASS);
-		return Math.max(0, Math.ceil(h));
+		try {
+			this.el.offsetHeight;
+			let h = this.el.offsetHeight || this.el.clientHeight || 0;
+			if (!h) h = Math.round(this.el.getBoundingClientRect().height);
+			return Math.max(0, Math.ceil(h));
+		} finally {
+			this.el.classList.remove(MEASURING_CLASS);
+		}
+	}
+	syncHeightObserver(enable = this.opts.containerHeightVar) {
+		if (!this.el) return;
+		if (enable) {
+			if (typeof ResizeObserver !== "function") {
+				this.restoreManagedStyle(CSS_VAR_CONTAINER_HEIGHT);
+				return;
+			}
+			if (!this.resizeObserver) {
+				this.resizeObserver = new ResizeObserver((entries) => {
+					const entry = entries[0];
+					if (!entry || !this.el) return;
+					const boxSize = entry.borderBoxSize?.[0]?.blockSize;
+					const h = Math.max(0, Math.ceil(boxSize ?? entry.contentRect.height));
+					if (h > 0) this.setManagedStyle(CSS_VAR_CONTAINER_HEIGHT, `${h}px`);
+				});
+				this.resizeObserver.observe(this.el);
+			}
+		} else if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = void 0;
+			this.restoreManagedStyle(CSS_VAR_CONTAINER_HEIGHT);
+		}
 	}
-	initHeightObserver() {
+	setManagedStyle(property, value) {
 		if (!this.el) return;
-		this.resizeObserver = new ResizeObserver(() => {
-			const h = this.measureHeight();
-			if (h > 0) this.el?.style.setProperty(CSS_VAR_CONTAINER_HEIGHT, `${h}px`);
+		if (!this.managedStyles.has(property)) this.managedStyles.set(property, {
+			value: this.el.style.getPropertyValue(property),
+			priority: this.el.style.getPropertyPriority(property)
 		});
-		this.resizeObserver.observe(this.el);
+		this.el.style.setProperty(property, value);
+	}
+	restoreManagedStyle(property) {
+		if (!this.el) return;
+		const previous = this.managedStyles.get(property);
+		if (previous === void 0) return;
+		if (previous.value) this.el.style.setProperty(property, previous.value, previous.priority);
+		else this.el.style.removeProperty(property);
+		this.managedStyles.delete(property);
+	}
+	restoreManagedStyles() {
+		for (const property of [...this.managedStyles.keys()]) this.restoreManagedStyle(property);
+	}
+	setManagedAttribute(name, value) {
+		if (!this.el) return;
+		if (!this.managedAttributes.has(name)) this.managedAttributes.set(name, this.el.getAttribute(name));
+		this.el.setAttribute(name, value);
+	}
+	restoreManagedAttribute(name) {
+		if (!this.el || !this.managedAttributes.has(name)) return;
+		const previous = this.managedAttributes.get(name);
+		if (previous === null) this.el.removeAttribute(name);
+		else if (previous !== void 0) this.el.setAttribute(name, previous);
+		this.managedAttributes.delete(name);
 	}
 };