fetta 1.1.0 → 1.1.2

package/README.md

@@ -85,7 +85,6 @@ const result = splitText(element, options);
 | `onSplit` | `function` | — | Callback after initial split |
 | `revertOnComplete` | `boolean` | `false` | Auto-revert when animation completes |
 | `propIndex` | `boolean` | `false` | Add CSS custom properties: `--char-index`, `--word-index`, `--line-index` |
-| `willChange` | `boolean` | `false` | Add `will-change: transform, opacity` for performance |
 
 #### Return Value
 
@@ -111,7 +110,7 @@ import { SplitText } from 'fetta/react';
 | `children` | `ReactElement` | — | Single element to split |
 | `onSplit` | `function` | — | Called after text is split |
 | `onResize` | `function` | — | Called on autoSplit re-split |
-| `options` | `object` | — | Split options (type, classes, mask, propIndex, willChange) |
+| `options` | `object` | — | Split options (type, classes, mask, propIndex) |
 | `autoSplit` | `boolean` | `false` | Re-split on container resize |
 | `revertOnComplete` | `boolean` | `false` | Revert after animation completes |
 | `inView` | `boolean \| InViewOptions` | `false` | Enable viewport detection |

package/dist/{chunk-7L4UQPGS.js → chunk-WGVCUEOU.js}

@@ -69,14 +69,16 @@ function injectSrOnlyStyles() {
   if (srOnlyStylesInjected || typeof document === "undefined") return;
   const style = document.createElement("style");
   style.textContent = `
-.fetta-sr-only:not(:focus):not(:active) {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
+.fetta-sr-only {
+  position: absolute;
+  width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
-  position: absolute;
+  clip-path: inset(50%);
   white-space: nowrap;
-  width: 1px;
+  border-width: 0;
 }`;
   document.head.appendChild(style);
   srOnlyStylesInjected = true;
@@ -257,8 +259,8 @@ function createSpan(className, index, display = "inline-block", options) {
   span.style.display = display;
   span.style.position = "relative";
   span.style.textDecoration = "inherit";
-  if (options == null ? void 0 : options.willChange) {
-    span.style.willChange = "transform, opacity";
+  if (options == null ? void 0 : options.ariaHidden) {
+    span.setAttribute("aria-hidden", "true");
   }
   return span;
 }
@@ -306,8 +308,8 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
     measuredWords.forEach((measuredWord, wordIndex) => {
       const wordSpan = createSpan(wordClass, wordIndex, "inline-block", {
         propIndex: options == null ? void 0 : options.propIndex,
-        willChange: options == null ? void 0 : options.willChange,
-        propName: "word"
+        propName: "word",
+        ariaHidden: options == null ? void 0 : options.ariaHidden
       });
       if (measuredWord.noSpaceBefore) {
         noSpaceBeforeSet.add(wordSpan);
@@ -318,8 +320,8 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           measuredWord.chars.forEach((measuredChar, charIndexInWord) => {
             const charSpan = createSpan(charClass, globalCharIndex, "inline-block", {
               propIndex: options == null ? void 0 : options.propIndex,
-              willChange: options == null ? void 0 : options.willChange,
-              propName: "char"
+              propName: "char",
+              ariaHidden: options == null ? void 0 : options.ariaHidden
             });
             charSpan.textContent = measuredChar.char;
             globalCharIndex++;
@@ -348,7 +350,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
               const charIndexInWord = measuredWord.chars.indexOf(measuredChar);
               const charSpan = createSpan(charClass, globalCharIndex, "inline-block", {
                 propIndex: options == null ? void 0 : options.propIndex,
-                willChange: options == null ? void 0 : options.willChange,
                 propName: "char"
               });
               charSpan.textContent = measuredChar.char;
@@ -455,7 +456,17 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       }
     }
     if (splitChars && allChars.length > 1 && !isSafari) {
-      const positions = allChars.map((c) => c.getBoundingClientRect().left);
+      const range = document.createRange();
+      const positions = allChars.map((c) => {
+        var _a;
+        const textNode = c.firstChild;
+        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+          range.setStart(textNode, 0);
+          range.setEnd(textNode, ((_a = textNode.textContent) == null ? void 0 : _a.length) || 1);
+          return range.getBoundingClientRect().left;
+        }
+        return c.getBoundingClientRect().left;
+      });
       for (let i2 = 1; i2 < allChars.length; i2++) {
         const charSpan = allChars[i2];
         const expectedGap = charSpan.dataset.expectedGap;
@@ -463,10 +474,9 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           const originalGap = parseFloat(expectedGap);
           const currentGap = positions[i2] - positions[i2 - 1];
           const delta = originalGap - currentGap;
-          if (Math.abs(delta) < 20) {
-            const roundedDelta = Math.round(delta * 100) / 100;
+          if (Math.abs(delta) > 0.1 && Math.abs(delta) < 20) {
             const targetElement = (options == null ? void 0 : options.mask) === "chars" && charSpan.parentElement ? charSpan.parentElement : charSpan;
-            targetElement.style.marginLeft = `${roundedDelta}px`;
+            targetElement.style.marginLeft = `${delta}px`;
           }
           delete charSpan.dataset.expectedGap;
         }
@@ -479,8 +489,8 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       lineGroups.forEach((words, lineIndex) => {
         const lineSpan = createSpan(lineClass, lineIndex, "block", {
           propIndex: options == null ? void 0 : options.propIndex,
-          willChange: options == null ? void 0 : options.willChange,
-          propName: "line"
+          propName: "line",
+          ariaHidden: options == null ? void 0 : options.ariaHidden
         });
         allLines.push(lineSpan);
         let wi = 0;
@@ -575,7 +585,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       lineGroups.forEach((wrappers, lineIndex) => {
         const lineSpan = createSpan(lineClass, lineIndex, "block", {
           propIndex: options == null ? void 0 : options.propIndex,
-          willChange: options == null ? void 0 : options.willChange,
           propName: "line"
         });
         allLines.push(lineSpan);
@@ -617,8 +626,7 @@ function splitText(element, {
   onResize,
   onSplit,
   revertOnComplete = false,
-  propIndex = false,
-  willChange = true
+  propIndex = false
 } = {}) {
   var _a;
   if (!(element instanceof HTMLElement)) {
@@ -673,7 +681,7 @@ function splitText(element, {
     splitChars,
     splitWords,
     splitLines,
-    { propIndex, willChange, mask }
+    { propIndex, mask, ariaHidden: !trackAncestors }
   );
   currentChars = chars;
   currentWords = words;
@@ -751,7 +759,7 @@ function splitText(element, {
             splitChars,
             splitWords,
             splitLines,
-            { propIndex, willChange, mask }
+            { propIndex, mask, ariaHidden: !trackAncestors }
           );
           currentChars = result.chars;
           currentWords = result.words;

package/dist/index.d.ts

@@ -42,8 +42,6 @@ interface SplitTextOptions {
     revertOnComplete?: boolean;
     /** Add CSS custom properties (--char-index, --word-index, --line-index) */
     propIndex?: boolean;
-    /** Add will-change: transform, opacity to split elements for better animation performance (default: true) */
-    willChange?: boolean;
 }
 /**
  * Result returned by splitText containing arrays of split elements and a revert function.
@@ -110,6 +108,6 @@ interface SplitTextResult {
  * });
  * ```
  */
-declare function splitText(element: HTMLElement, { type, charClass, wordClass, lineClass, mask, autoSplit, onResize, onSplit, revertOnComplete, propIndex, willChange, }?: SplitTextOptions): SplitTextResult;
+declare function splitText(element: HTMLElement, { type, charClass, wordClass, lineClass, mask, autoSplit, onResize, onSplit, revertOnComplete, propIndex, }?: SplitTextOptions): SplitTextResult;
 
 export { type SplitTextOptions, type SplitTextResult, splitText };

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-7L4UQPGS.js';
+export { splitText } from './chunk-WGVCUEOU.js';

package/dist/react.d.ts

@@ -10,7 +10,6 @@ interface SplitTextOptions {
     /** Apply overflow mask wrapper to elements for reveal animations */
     mask?: "lines" | "words" | "chars";
     propIndex?: boolean;
-    willChange?: boolean;
 }
 interface InViewOptions {
     /** How much of the element must be visible (0-1). Default: 0 */

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-7L4UQPGS.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-WGVCUEOU.js';
 import { forwardRef, useRef, useCallback, useState, useLayoutEffect, useEffect, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetta",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,