@aarsteinmedia/dotlottie-player 6.5.0 → 6.5.1

package/CHANGELOG.md

@@ -5,11 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
+Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing notable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
 
-## [6.5.0] - 16-09-2026
+## [6.5.1] - 17-09-2026
 
 - Change to how Animate On Scroll is handled. From being relative to viewport size and scroll position, progress is now entirely determined by position in viewport. This is to improve useability, and gives a significant performance boost. Listener is moved from `scroll` to `IntersectionObserver`, and for browsers that support this the callback is moved to `ViewTimeline` rather than relying on viewport math.
+- Added accessibility check for `prefers-reduced-motion: reduce`. This overrides and disables `autoplay`, `animateOnScroll`, `playOnVisible`, and `mouseOver`/`mouseLeave`.
 
 ## [6.4.6] - 28-08-2026
 
@@ -41,7 +42,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 ### Changed
 
 - Fixed error causing beziers to be dropped from keyframes.
-- Minor bugrixes.
+- Minor bugfixes.
 
 ## [6.3.11] - 20-07-2026
 
@@ -82,7 +83,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 ### Changed
 
 - Added attributes:
-  - `delay` – Delay playback on playOnVisible, in miliseconds
+  - `delay` – Delay playback on playOnVisible, in milliseconds
   - `mouseout` – Action on mouseout
   - `once` – Whether, if playOnVisible is true, to play once or anytime animation is in view
   - `playOnClick` – Whether to toggle play on click
@@ -128,7 +129,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 ### Changed
 
 - Optimization to animation engine:
-  - Prevented needless function calls to check for rendering context, when only one is sufficiant.
+  - Prevented needless function calls to check for rendering context, when only one is sufficient.
   - Swapped deprecated attributes like xml:href and xml:space for modern equivalents.
 
 ## [5.2.1] - 08-06-2025
@@ -138,7 +139,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 ### Changed
 
 - Fixed several issues with Canvas renderer.
-- Removed Hybrid rendere1
+- Removed Hybrid renderer
 
 ## [5.2.0] - 07-06-2025
 
@@ -266,7 +267,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 
 - Made download optional for snapshot
 
-- Made snapshot work for programatically set instances
+- Made snapshot work for programmatically set instances
 
 - Changed CSS to respect hidden-attribute
 
@@ -405,6 +406,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 - Removed dependencies
   - `@lit`
 
+[6.5.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.5.1
 [6.3.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.3.0
 [6.0.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.0.1
 [5.3.2]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.3.2

package/README.md

@@ -61,7 +61,7 @@ Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Nex
 
 Because this is a Web Component, you're adding it to the global scope of your web app. Unlike modular components, it should only be imported once – preferably early in your app lifecycle.
 
-If you're using TypeScript and want to import the component type, do it modularly in addition to the global import:
+If you're using TypeScript and want to import the component type, do it modular in addition to the global import:
 
 ```ts
 import '@aarsteinmedia/dotlottie-player' // Do this once globally.

package/custom-elements.json

@@ -50,7 +50,7 @@
           ],
           "superclass": {
             "name": "DotLottiePlayerBase",
-            "module": "/dist/chunks/DotLottiePlayerBase-Dq0onB9o.js"
+            "module": "/dist/chunks/DotLottiePlayerBase-BfEbTiu6.js"
           },
           "tagName": "tagName",
           "customElement": true
@@ -86,7 +86,7 @@
           "name": "MouseOut",
           "declaration": {
             "name": "M",
-            "module": "./chunks/DotLottiePlayerBase-Dq0onB9o.js"
+            "module": "./chunks/DotLottiePlayerBase-BfEbTiu6.js"
           }
         },
         {
@@ -94,7 +94,7 @@
           "name": "PlayerState",
           "declaration": {
             "name": "P",
-            "module": "./chunks/DotLottiePlayerBase-Dq0onB9o.js"
+            "module": "./chunks/DotLottiePlayerBase-BfEbTiu6.js"
           }
         },
         {

package/dist/canvas.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
 import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
+import { D as DotLottiePlayerBase } from './chunks/constants.d-D4NjmiZl.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/constants.d-D4NjmiZl.js';
 
 declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
     get renderer(): RendererType;

package/dist/canvas.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/canvas';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/chunks/{DotLottiePlayerBase-Dq0onB9o.js → DotLottiePlayerBase-BfEbTiu6.js}

@@ -71,7 +71,7 @@ if (isServer) {
     }
 }
 
-var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-toolbar-height: 35px;\n  --lottie-player-toolbar-background-color: #fff;\n  --lottie-player-toolbar-icon-color: #000;\n  --lottie-player-toolbar-icon-hover-color: #000;\n  --lottie-player-toolbar-icon-active-color: #4285f4;\n  --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n  --lottie-player-seeker-thumb-color: #4285f4;\n  --lottie-player-seeker-display: block;\n\n  width: 100%;\n  height: 100%;\n\n  &:not([hidden]) {\n    display: block;\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  .animation {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    margin: 0;\n    padding: 0;\n    contain: content;\n    & svg g {\n      will-change: transform;\n    }\n  }\n\n  [data-controls='true'] .animation {\n    height: calc(100% - 35px);\n  }\n\n  .animation-container {\n    position: relative;\n  }\n\n  .popover {\n    position: absolute;\n    right: 5px;\n    bottom: 40px;\n    background-color: var(--lottie-player-toolbar-background-color);\n    border-radius: 5px;\n    padding: 10px 15px;\n    border: solid 2px var(--lottie-player-toolbar-icon-color);\n    animation: fade-in 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n      right: 10px;\n      border: 7px solid transparent;\n      margin-right: -7px;\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n      top: 100%;\n      border-top-color: var(--lottie-player-toolbar-icon-color);\n    }\n  }\n\n  .error {\n    display: flex;\n    margin: auto;\n    justify-content: center;\n    height: 100%;\n    align-items: center;\n\n    & svg {\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .toolbar {\n    display: flex;\n    place-items: center center;\n    background: var(--lottie-player-toolbar-background-color);\n    margin: 0;\n    height: 35px;\n    padding: 5px;\n    border-radius: 5px;\n    gap: 5px;\n\n    &.has-error {\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    & button {\n      cursor: pointer;\n      fill: var(--lottie-player-toolbar-icon-color);\n      color: var(--lottie-player-toolbar-icon-color);\n      background: none;\n      border: 0;\n      padding: 0;\n      outline: 0;\n      height: 100%;\n      margin: 0;\n      align-items: center;\n      gap: 5px;\n      opacity: 0.9;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n\n      &[data-active='true'] {\n        opacity: 1;\n        fill: var(--lottie-player-toolbar-icon-active-color);\n      }\n\n      &:disabled {\n        opacity: 0.5;\n      }\n\n      &:focus {\n        outline: 0;\n      }\n\n      & svg {\n        pointer-events: none;\n\n        & > * {\n          fill: inherit;\n        }\n      }\n\n      &.disabled svg {\n        display: none;\n      }\n    }\n  }\n\n  .progress-container {\n    position: relative;\n    width: 100%;\n\n    &.simple {\n      margin-right: 12px;\n    }\n  }\n\n  & progress {\n    appearance: none;\n    outline: none;\n    position: absolute;\n    width: 100%;\n    height: 5px;\n    border-radius: 3px;\n    border: 0;\n    top: 0;\n    left: 0;\n    margin: 7.5px 0;\n    background-color: var(--lottie-player-seeker-track-color);\n    pointer-events: none;\n\n    &::-webkit-progress-inner-element {\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    &::-webkit-slider-runnable-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-progress-value {\n      background-color: var(--lottie-player-seeker-thumb-color);\n    }\n  }\n\n  .seeker {\n    appearance: none;\n    outline: none;\n    width: 100%;\n    height: 20px;\n    border-radius: 3px;\n    border: 0;\n    cursor: pointer;\n    background-color: transparent;\n\n    display: var(--lottie-player-seeker-display);\n    color: var(--lottie-player-seeker-thumb-color);\n    margin: 0;\n    padding: 7.5px 0;\n    position: relative;\n    z-index: 1;\n\n    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      appearance: none;\n      outline: none;\n    }\n\n    &::-webkit-slider-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      border: 0;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -webkit-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1);\n    }\n\n    &::-moz-range-progress {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      height: 5px;\n      border-radius: 3px;\n    }\n\n    &::-moz-range-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border: 0;\n      cursor: pointer;\n      -moz-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-moz-range-thumb,\n    &:focus::-moz-range-thumb {\n      transform: scale(1);\n    }\n\n    &::-ms-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-ms-fill-upper {\n      background: var(--lottie-player-seeker-track-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-fill-lower {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-thumb {\n      border: 0;\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -ms-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-ms-thumb {\n      transform: scale(1);\n    }\n\n    &:focus {\n      &::-ms-thumb {\n        transform: scale(1);\n      }\n\n      &::-ms-fill-lower,\n      &::-ms-fill-upper {\n        background: var(--lottie-player-seeker-track-color);\n      }\n    }\n  }\n\n  & *::-moz-progress-bar {\n    background-color: var(--lottie-player-seeker-thumb-color);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    --lottie-player-toolbar-background-color: #000;\n    --lottie-player-toolbar-icon-color: #fff;\n    --lottie-player-toolbar-icon-hover-color: #fff;\n    --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n  }\n}\n";
+var css_248z = "*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#fff;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:#0003;--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;height:100%;width:100%;&:not([hidden]){display:block}.main{display:flex;flex-direction:column;height:100%;margin:0;padding:0;width:100%}.animation{contain:content;display:flex;height:100%;margin:0;padding:0;width:100%;& svg g{will-change:transform}}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{animation:fade-in .2s ease-in-out;background-color:var(--lottie-player-toolbar-background-color);border:2px solid var(--lottie-player-toolbar-icon-color);border-radius:5px;bottom:40px;padding:10px 15px;position:absolute;right:5px;&:before{border:7px solid #0000;border-top:7px solid var(--lottie-player-toolbar-icon-color);content:\"\";height:0;margin-right:-7px;pointer-events:none;position:absolute;right:10px;top:100%;width:0}}.error{align-items:center;display:flex;height:100%;justify-content:center;margin:auto;& svg{height:auto;width:100%}}.toolbar{background:var(--lottie-player-toolbar-background-color);border-radius:5px;display:flex;gap:5px;height:35px;margin:0;padding:5px;place-items:center center;&.has-error{opacity:.5;pointer-events:none}& button{fill:var(--lottie-player-toolbar-icon-color);align-items:center;background:none;border:0;color:var(--lottie-player-toolbar-icon-color);cursor:pointer;gap:5px;height:100%;margin:0;opacity:.9;outline:0;padding:0;&:not([hidden]){display:flex}&:hover{opacity:1}&[data-active=true]{fill:var(--lottie-player-toolbar-icon-active-color);opacity:1}&:disabled{opacity:.5}&:focus{outline:0}& svg{pointer-events:none;&>*{fill:inherit}}&.disabled svg{display:none}}}.progress-container{position:relative;width:100%;&.simple{margin-right:12px}}& progress{appearance:none;background-color:var(--lottie-player-seeker-track-color);border:0;border-radius:3px;height:5px;left:0;margin:7.5px 0;outline:none;pointer-events:none;position:absolute;top:0;width:100%;&::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}&::-webkit-slider-runnable-track{background-color:initial}&::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}}.seeker{appearance:none;background-color:initial;border:0;border-radius:3px;color:var(--lottie-player-seeker-thumb-color);cursor:pointer;display:var(--lottie-player-seeker-display);height:20px;margin:0;outline:none;padding:7.5px 0;position:relative;width:100%;z-index:1;&::-webkit-slider-runnable-track,&::-webkit-slider-thumb{appearance:none;outline:none}&::-webkit-slider-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-webkit-slider-thumb,&:hover::-webkit-slider-thumb{transform:scale(1)}&::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px;height:5px}&::-moz-range-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-moz-range-thumb,&:hover::-moz-range-thumb{transform:scale(1)}&::-ms-track{background:#0000;border-color:#0000;color:#0000;cursor:pointer;height:5px;width:100%}&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}&::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}&::-ms-thumb{background:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:hover::-ms-thumb{transform:scale(1)}&:focus{&::-ms-thumb{transform:scale(1)}&::-ms-fill-lower,&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}}}& ::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#fff;--lottie-player-toolbar-icon-hover-color:#fff;--lottie-player-seeker-track-color:#fff9}}";
 
 let dotlottieTools = null, loadPromise = null;
 function loadDotLottieTools() {
@@ -92,87 +92,25 @@ function loadDotLottieTools() {
     return loadPromise;
 }
 
-const boomerangIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path
-      d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"
-    />
-  </svg>
-`;
+const boomerangIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg>`;
 
-const convertIcon = /* HTML */ `
-  <svg
-    width="24"
-    height="24"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
-    />
-  </svg>
-`;
+const convertIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
 
-const downloadIcon = /* HTML */ `
-  <svg
-    width="24"
-    height="24"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"
-    />
-  </svg>
-`;
+const downloadIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg>`;
 
-const loopIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path
-      d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
-    />
-  </svg>
-`;
+const loopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
 
-const nextIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z" />
-  </svg>
-`;
+const nextIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg>`;
 
-const pauseIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path
-      d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
-    />
-  </svg>
-`;
+const pauseIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>`;
 
-const playIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
-  </svg>
-`;
+const playIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`;
 
-const prevIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z" />
-  </svg>
-`;
+const prevIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg>`;
 
-const settingsIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <circle cx="12" cy="5.4" r="2.5" />
-    <circle cx="12" cy="12" r="2.5" />
-    <circle cx="12" cy="18.6" r="2.5" />
-  </svg>
-`;
+const settingsIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg>`;
 
-const stopIcon = /* HTML */ `
-  <svg width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M6 6h12v12H6V6z" />
-  </svg>
-`;
+const stopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg>`;
 
 var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["Contain"] = "contain";
@@ -200,7 +138,6 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Stopped"] = "stopped";
     return PlayerState;
 }({});
-const tagName = 'dotlottie-player';
 
 function advancedButtons() {
     if (!this.shadow) {
@@ -324,9 +261,7 @@ var controls = /*#__PURE__*/Object.freeze({
         const lang = this.description ? document.documentElement.lang : 'en';
         langAttribute = `lang="${lang}"`;
     }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" ${langAttribute}><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
-            aria-label="${this.description}"
-          ` : ''}></figure><slot name="controls"></slot></div>`;
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" ${langAttribute}><figure class="animation" style="background:${this.background}" ${this.description ? `aria-label="${this.description}"` : ''}></figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -397,6 +332,8 @@ var controls = /*#__PURE__*/Object.freeze({
         '1'
     ].includes(val);
 
+const tagName = 'dotlottie-player', hasReducedMotion = !isServer && matchMedia('(prefers-reduced-motion: reduce)').matches, hasIOSupport = !isServer && 'IntersectionObserver' in window, hasVTSupport = !isServer && 'ViewTimeline' in window;
+
 const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     const styleSheet = new CSSStyleSheet();
     await styleSheet.replace(css_248z);
@@ -815,7 +752,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 }
             case 'autoplay':
                 {
-                    if (this.animateOnScroll || this.playOnVisible) {
+                    if (this.animateOnScroll || this.playOnVisible || hasReducedMotion) {
                         return;
                     }
                     if (value === '' || Boolean(value)) {
@@ -1416,12 +1353,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Add IntersectionObserver.
    */ _addIntersectionObserver() {
-        if (!this._container || this._intersectionObserver) {
+        if (!this._container || this._intersectionObserver || !hasIOSupport) {
             return;
         }
         this._intersectionObserver = new IntersectionObserver(([{ isIntersecting }])=>{
             this._isIntersecting = isIntersecting;
-            if (this.animateOnScroll) {
+            // Prevent animate on scroll for users with who prefers reduces motion.
+            if (this.animateOnScroll && !hasReducedMotion) {
                 if (isIntersecting) {
                     this._startScrollLoop();
                 } else {
@@ -1438,7 +1376,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             if (!this.playOnVisible && this.playerState === PlayerState.Frozen) {
                 this.play();
             }
-            if (!this.playOnVisible) {
+            if (!this.playOnVisible || hasReducedMotion) {
                 return;
             }
             if (this.playerState === PlayerState.Completed && !this.once) {
@@ -1552,7 +1490,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (currentAnimationSettings?.autoplay !== undefined) {
             hasAutoplay = Boolean(currentAnimationSettings.autoplay);
         }
-        if (this.animateOnScroll) {
+        // Disable autoplay on reduced-motion.
+        if (this.animateOnScroll || hasReducedMotion) {
             hasAutoplay = false;
         }
         // Segment
@@ -1579,7 +1518,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (!this._container) {
             return null;
         }
-        if ('ViewTimeline' in window) {
+        if (hasVTSupport) {
             this._scrollProbe ??= this._container.animate({
                 '--dotlottie-scroll': [
                     0,
@@ -1690,7 +1629,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Handle MouseEnter.
    */ _mouseEnter() {
-        if (!this.hover || !this._lottieInstance || isTouch()) {
+        if (!this.hover || !this._lottieInstance || isTouch() || hasReducedMotion) {
             return;
         }
         if (this.mouseout === MouseOut.Reverse) {
@@ -1708,7 +1647,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Handle MouseLeave.
    */ _mouseLeave() {
-        if (!this.hover || !this._lottieInstance || isTouch()) {
+        if (!this.hover || !this._lottieInstance || isTouch() || hasReducedMotion) {
             return;
         }
         switch(this.mouseout){

package/dist/chunks/{DotLottiePlayerBase.d-C-GBbp4e.d.ts → constants.d-D4NjmiZl.d.ts}

@@ -25,7 +25,6 @@ declare enum PlayerState {
     Playing = "playing",
     Stopped = "stopped"
 }
-declare const tagName = "dotlottie-player";
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
@@ -194,4 +193,6 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     private _toggleSettings;
 }
 
+declare const tagName = "dotlottie-player";
+
 export { DotLottiePlayerBase as D, MouseOut as M, PlayerState as P, tagName as t };

package/dist/full.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
 import { AddAnimationParams, ConvertParams, AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
+import { D as DotLottiePlayerBase } from './chunks/constants.d-D4NjmiZl.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/constants.d-D4NjmiZl.js';
 
 declare class DotLottiePlayer extends DotLottiePlayerBase {
     addAnimation(params: AddAnimationParams): Promise<_aarsteinmedia_lottie_web.Result>;

package/dist/full.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase, l as loadDotLottieTools, t as tagName } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
+import { D as DotLottiePlayerBase, l as loadDotLottieTools, t as tagName } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/light.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
 import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
+import { D as DotLottiePlayerBase } from './chunks/constants.d-D4NjmiZl.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/constants.d-D4NjmiZl.js';
 
 declare class DotLottiePlayerLight extends DotLottiePlayerBase {
     get renderer(): RendererType;

package/dist/light.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/light';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/svg.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
 import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-C-GBbp4e.js';
+import { D as DotLottiePlayerBase } from './chunks/constants.d-D4NjmiZl.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/constants.d-D4NjmiZl.js';
 
 declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
     get renderer(): RendererType;

package/dist/svg.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/svg';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-Dq0onB9o.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BfEbTiu6.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**