keyframekit 1.0.8 → 1.0.9

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Ben Hatsor
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Ben Hatsor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,126 +1,129 @@
-# <img src="/docs/docs/public/icon.png" width="30px" height="40px"> [KeyframeKit](https://keyframekit.berryscript.com)
-
-Intuitive, powerful and performant tools for working with CSS animations in JavaScript.  
-
-## About
-
-While working with the [Web Animations API][1], I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So I wrote a typed, spec-compliant library to convert from one to the other, letting you play your CSS-defined animations right in JS. Along the way, I also added some other useful utilities for working with the API. [Read more.](https://benhatsor.medium.com/99573ef4738b)
-
-## Installation
-
-### NPM
-```sh
-npm install keyframekit
-```
-
-## Usage
-
-### Playing CSS-defined animations with JS
-
-In your CSS:
-```css
-@keyframes rotate-small { ... }
-```
-
-Then, in JS:
-```js
-import KeyframeKit from 'keyframekit';
-
-const documentStyleSheets = await KeyframeKit.getDocumentStyleSheetsOnLoad();
-
-// get animation keyframes from the document's stylesheets
-const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
-  of: 'rotate-small',
-  in: documentStyleSheets
-});
-
-// then, define your animation
-const rotateSmallAnim = rotateSmallAnimKeyframes.toKeyframeEffect({
-  duration: 700,
-  easing: 'ease'
-});
-
-// finally, attach it to an element:
-const attachedAnim = rotateSmallAnim.toAnimation({
-  target: document.querySelector('.el')
-});
-
-attachedAnim.play();
-```
-
-The primary reason to play your animation with JS is because you get way more control over its playback:
-```js
-attachedAnim.pause();
-attachedAnim.playbackRate = -1;
-const progress = attachedAnim.overallProgress; // 0 to 1 (Baseline newly available)
-await attachedAnim.finished;
-```
-[...and more.][2]
-
-### Importing animations directly from a CSS file
-
-Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
-
-```js
-import KeyframeKit from 'keyframekit';
-
-const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
-
-// get animation keyframes from stylesheet
-const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
-  of: 'rotate-small',
-  in: styleSheet
-});
-```
-
-> Note: This won't resolve any `@import` rules in the stylesheet. [See here.][3]
-
-### Defining animations in JS
-
-The `KeyframeEffectParameters` class provides a more convenient way to define your animations in JS than is offered natively.  
-It's useful for when you want to have all your animation code in one place.
-
-```js
-import { KeyframeEffectParameters } from 'keyframekit';
-
-// define your animation
-const linkTextHoverAnim = new KeyframeEffectParameters({
-
-  keyframes: {
-    // 0 to 1. equivalent to CSS keyframe percentage values:
-    offset: [0, 0.499, 0.5, 1],
-    // respective CSS property keyframes:
-    clipPath: ['inset(0 0 0 0)', 'inset(100% 0 0 0)', 'inset(0 0 100% 0)', 'inset(0 0 0 0)'],
-    top: ['0', '-20px', '20px', '0']
-  },
-
-  options: {
-    duration: 700,
-    easing: 'ease'
-  }
-  
-});
-
-// then, attach it to an element:
-const attachedAnim = linkTextHoverAnim.toAnimation({
-  target: document.querySelector('.link')
-});
-
-attachedAnim.play();
-```
-
-### Full reference
-[See here.](/reference)
-
-## Typing
-
-This library is fully compatable with native JS, but it also has full spec-compliant type support, including declaration files and source maps.
-
-## License
-
-[MIT](LICENSE)
-
-
-[1]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
-[2]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
-[3]: https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418
+# <img src="/docs/docs/public/icon.png" width="30px" height="40px"> [KeyframeKit][1]
+
+Intuitive, powerful and lightweight tools for working with CSS animations in JavaScript.  
+
+## About
+
+While working with the [Web Animations API][2], I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So I wrote a typed, spec-compliant library to convert from one to the other, letting you play your CSS-defined animations right in JS. Along the way, I also added some other useful utilities for working with the API. [Read more.][3]
+
+## Installation
+
+### NPM
+```sh
+npm install keyframekit
+```
+
+## Usage
+
+### Playing CSS-defined animations with JS
+
+In your CSS:
+```css
+@keyframes rotate-small { ... }
+```
+
+Then, in JS:
+```js
+import KeyframeKit from 'keyframekit';
+
+const documentStyleSheets = await KeyframeKit.getDocumentStyleSheetsOnLoad();
+
+// get animation keyframes from the document's stylesheets
+const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate-small',
+  in: documentStyleSheets
+});
+
+// then, define your animation
+const rotateSmallAnim = rotateSmallAnimKeyframes.toKeyframeEffect({
+  duration: 700,
+  easing: 'ease'
+});
+
+// finally, attach it to an element:
+const attachedAnim = rotateSmallAnim.toAnimation({
+  target: document.querySelector('.el')
+});
+
+attachedAnim.play();
+```
+
+The primary reason to play your animation with JS is because you get way more control over its playback:
+```js
+attachedAnim.pause();
+attachedAnim.playbackRate = -1;
+const progress = attachedAnim.overallProgress; // 0 to 1 (Baseline newly available)
+await attachedAnim.finished;
+```
+[...and more.][4]
+
+### Importing animations directly from a CSS file
+
+Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
+
+```js
+import KeyframeKit from 'keyframekit';
+
+const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
+
+// get animation keyframes from stylesheet
+const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate-small',
+  in: styleSheet
+});
+```
+
+> Note: This won't resolve any `@import` rules in the stylesheet. [See more.][5]
+
+### Defining animations in JS
+
+The `KeyframeEffectParameters` class provides a more convenient way to define your animations in JS than is offered natively.  
+It's useful for when you want to have all your animation code in one place.
+
+```js
+import { KeyframeEffectParameters } from 'keyframekit';
+
+// define your animation
+const linkTextHoverAnim = new KeyframeEffectParameters({
+
+  keyframes: {
+    // 0 to 1. equivalent to CSS keyframe percentage values:
+    offset: [0, 0.499, 0.5, 1],
+    // respective CSS property keyframes:
+    clipPath: ['inset(0 0 0 0)', 'inset(100% 0 0 0)', 'inset(0 0 100% 0)', 'inset(0 0 0 0)'],
+    top: ['0', '-20px', '20px', '0']
+  },
+
+  options: {
+    duration: 700,
+    easing: 'ease'
+  }
+  
+});
+
+// then, attach it to an element:
+const attachedAnim = linkTextHoverAnim.toAnimation({
+  target: document.querySelector('.link')
+});
+
+attachedAnim.play();
+```
+
+### Full reference
+[See here.][6]
+
+## Typing
+
+This library is fully compatable with native JS, but it also has full spec-compliant type support, including declaration files and source maps.
+
+## License
+
+[MIT](LICENSE)
+
+
+[1]: https://keyframekit.berryscript.com
+[2]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
+[3]: https://benhatsor.medium.com/99573ef4738b
+[4]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
+[5]: https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418
+[6]: https://keyframekit.berryscript.com/reference

package/dist/KeyframeKit.d.ts

@@ -1,139 +1,139 @@
-export type KeyframesFactorySource = StyleSheetList | CSSStyleSheet;
-declare class KeyframesFactory {
-    #private;
-    readonly Error: {
-        readonly KeyframesRuleNameTypeError: {
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            isError(error: unknown): error is Error;
-        };
-        readonly SourceTypeError: {
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            isError(error: unknown): error is Error;
-        };
-        readonly StyleSheetImportError: {
-            new (message?: string): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            new (message?: string, options?: ErrorOptions): {
-                message: string;
-                name: string;
-                stack?: string;
-                cause?: unknown;
-            };
-            isError(error: unknown): error is Error;
-        };
-    };
-    getDocumentStyleSheetsOnLoad({ document }?: {
-        document?: Document;
-    }): Promise<StyleSheetList>;
-    /** @remarks
-     *  Note: `@import` rules won't be resolved in imported stylesheets.
-     *  See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418. */
-    importStyleSheet(url: string): Promise<CSSStyleSheet>;
-    /** @param obj.of The name of the `@keyframes` rule to get keyframes from. */
-    getStyleSheetKeyframes({ of: ruleName, in: source }: {
-        of: string;
-        in: KeyframesFactorySource;
-    }): ParsedKeyframes | undefined;
-    getAllStyleSheetKeyframesRules({ in: source }: {
-        in: KeyframesFactorySource;
-    }): ParsedKeyframesRules;
-    parseKeyframesRule({ rule: keyframes }: {
-        rule: CSSKeyframesRule;
-    }): ParsedKeyframes;
-}
-declare const _default: KeyframesFactory;
-export default _default;
-export type { KeyframesFactory };
-/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
-export type KeyframeArgument = Keyframe[] | PropertyIndexedKeyframes;
-/** https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface */
-export declare class KeyframeEffectParameters {
-    #private;
-    keyframes: KeyframeArgument;
-    options: KeyframeEffectOptions;
-    /**
-     * @param obj.keyframes [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats)
-     * @param obj.options [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
-     */
-    constructor({ keyframes, options }: {
-        keyframes: KeyframeArgument;
-        options?: number | KeyframeEffectOptions;
-    });
-    /**
-     * @param obj.target An element to attach the animation to.
-     * @param obj.options Additional keyframe effect options. Can override existing keys.
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
-     *
-     * @see Specifications:
-     * - https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface
-     * - https://drafts.csswg.org/web-animations-1/#the-animation-interface
-     */
-    toAnimation({ target, options: additionalOptions, timeline }: {
-        target: Element | null;
-        options?: number | KeyframeEffectOptions;
-        timeline?: AnimationTimeline;
-    }): Animation;
-}
-export declare class ParsedKeyframes {
-    keyframes: Keyframe[];
-    constructor(keyframes: Keyframe[]);
-    /**
-     * @param options
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
-     */
-    toKeyframeEffect(options: number | KeyframeEffectOptions | null): KeyframeEffectParameters;
-}
-export type ParsedKeyframesRules = {
-    [ruleName: string]: ParsedKeyframes;
-};
+export type KeyframesFactorySource = StyleSheetList | CSSStyleSheet;
+declare class KeyframesFactory {
+    #private;
+    readonly Error: {
+        readonly KeyframesRuleNameTypeError: {
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            isError(error: unknown): error is Error;
+        };
+        readonly SourceTypeError: {
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            isError(error: unknown): error is Error;
+        };
+        readonly StyleSheetImportError: {
+            new (message?: string): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            new (message?: string, options?: ErrorOptions): {
+                message: string;
+                name: string;
+                stack?: string;
+                cause?: unknown;
+            };
+            isError(error: unknown): error is Error;
+        };
+    };
+    getDocumentStyleSheetsOnLoad({ document }?: {
+        document?: Document;
+    }): Promise<StyleSheetList>;
+    /** @remarks
+     *  Note: `@import` rules won't be resolved in imported stylesheets.
+     *  See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418. */
+    importStyleSheet(url: string): Promise<CSSStyleSheet>;
+    /** @param obj.of The name of the `@keyframes` rule to get keyframes from. */
+    getStyleSheetKeyframes({ of: ruleName, in: source }: {
+        of: string;
+        in: KeyframesFactorySource;
+    }): ParsedKeyframes | undefined;
+    getAllStyleSheetKeyframesRules({ in: source }: {
+        in: KeyframesFactorySource;
+    }): ParsedKeyframesRules;
+    parseKeyframesRule({ rule: keyframes }: {
+        rule: CSSKeyframesRule;
+    }): ParsedKeyframes;
+}
+declare const _default: KeyframesFactory;
+export default _default;
+export type { KeyframesFactory };
+/** https://drafts.csswg.org/web-animations-1/#processing-a-keyframes-argument */
+export type KeyframeArgument = Keyframe[] | PropertyIndexedKeyframes;
+/** https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface */
+export declare class KeyframeEffectParameters {
+    #private;
+    keyframes: KeyframeArgument;
+    options: KeyframeEffectOptions;
+    /**
+     * @param obj.keyframes [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats)
+     * @param obj.options [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
+     */
+    constructor({ keyframes, options }: {
+        keyframes: KeyframeArgument;
+        options?: number | KeyframeEffectOptions;
+    });
+    /**
+     * @param obj.target An element to attach the animation to.
+     * @param obj.options Additional keyframe effect options. Can override existing keys.
+     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
+     *
+     * @see Specifications:
+     * - https://drafts.csswg.org/web-animations-1/#the-keyframeeffect-interface
+     * - https://drafts.csswg.org/web-animations-1/#the-animation-interface
+     */
+    toAnimation({ target, options: additionalOptions, timeline }: {
+        target: Element | null;
+        options?: number | KeyframeEffectOptions;
+        timeline?: AnimationTimeline;
+    }): Animation;
+}
+export declare class ParsedKeyframes {
+    keyframes: Keyframe[];
+    constructor(keyframes: Keyframe[]);
+    /**
+     * @param options
+     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options)
+     */
+    toKeyframeEffect(options: number | KeyframeEffectOptions | null): KeyframeEffectParameters;
+}
+export type ParsedKeyframesRules = {
+    [ruleName: string]: ParsedKeyframes;
+};
 //# sourceMappingURL=KeyframeKit.d.ts.map