remarqueeble 0.2.0 → 0.3.0

package/dist/remarqueeble.cjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.2.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
@@ -24,6 +24,15 @@ var CSS_VAR_HEIGHT = "--attr-height";
 var CSS_VAR_HSPACE = "--attr-hspace";
 var CSS_VAR_VSPACE = "--attr-vspace";
 var CSS_VAR_BG_COLOR = "--attr-bgcolor";
+var CSS_VAR_ANIMATION_DURATION = "--animation-duration";
+var CSS_VAR_ANIMATION_DIRECTION = "--animation-direction";
+var CSS_VAR_ANIMATION_ITERATION_COUNT = "--animation-iteration-count";
+var CSS_VAR_ANIMATION_PLAY_STATE = "--animation-play-state";
+var CSS_VAR_ANIMATION_TIMING_FUNCTION = "--animation-timing-function";
+var CSS_VAR_TRANSLATE_X_END = "--translate-x-end";
+var CSS_VAR_TRANSLATE_X_START = "--translate-x-start";
+var CSS_VAR_TRANSLATE_Y_END = "--translate-y-end";
+var CSS_VAR_TRANSLATE_Y_START = "--translate-y-start";
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var parsePresentationalDimension = (value) => {
 	if (value === null) return null;
@@ -84,11 +93,6 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	];
 	track;
 	running = false;
-	position = 0;
-	lastTime = null;
-	loopsDone = 0;
-	forward = true;
-	rafId = null;
 	constructor() {
 		super();
 		const shadowRoot = this.attachShadow({ mode: "open" });
@@ -113,9 +117,32 @@ var RemarqueebleElement = class extends HTMLElementBase {
 				}
 
 				.track {
+					animation: remarqueeble-motion
+						var(${CSS_VAR_ANIMATION_DURATION}, 10s)
+						var(${CSS_VAR_ANIMATION_TIMING_FUNCTION}, linear)
+						var(${CSS_VAR_ANIMATION_ITERATION_COUNT}, infinite)
+						var(${CSS_VAR_ANIMATION_DIRECTION}, normal)
+						both;
+					animation-play-state: var(${CSS_VAR_ANIMATION_PLAY_STATE}, running);
 					display: inline-block;
 					will-change: transform;
 				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_START}, 100%),
+							var(${CSS_VAR_TRANSLATE_Y_START}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_END}, -100%),
+							var(${CSS_VAR_TRANSLATE_Y_END}, 0px)
+						);
+					}
+				}
 			</style>
 
 			<span class="track"><slot></slot></span>
@@ -123,6 +150,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		const track = shadowRoot.querySelector(".track");
 		if (!track) throw new Error("Remarqueeble track element was not created.");
 		this.track = track;
+		this.track.addEventListener("animationend", () => this.handleAnimationEnd());
 	}
 	connectedCallback() {
 		this.running = true;
@@ -130,16 +158,10 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		requestAnimationFrame(() => {
 			if (!this.isConnected || !this.running) return;
 			this.reset();
-			this.tick();
 		});
 	}
 	disconnectedCallback() {
 		this.running = false;
-		this.lastTime = null;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
 	}
 	attributeChangedCallback(_name, oldValue, newValue) {
 		if (oldValue === newValue) return;
@@ -177,18 +199,16 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	start() {
 		if (this.running) return;
 		this.running = true;
-		this.lastTime = null;
-		this.tick();
+		this.reset();
+		this.syncAnimationPlayState();
 	}
 	stop() {
 		this.running = false;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
+		this.syncAnimationPlayState();
 	}
 	syncPresentationalHints() {
 		for (const hint of ATTRIBUTE_HINTS) this.syncVar(hint);
+		this.syncAnimationPlayState();
 	}
 	syncVar(hint) {
 		const raw = this.getAttribute(hint.attribute);
@@ -204,10 +224,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	reset() {
 		const hostSize = this.getHostSize();
 		const trackSize = this.getTrackSize();
-		this.loopsDone = 0;
-		this.forward = true;
-		this.position = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
-		this.render();
+		this.syncAnimation(hostSize, trackSize);
 	}
 	getHostSize() {
 		return this.isVerticalDirection ? this.clientHeight : this.clientWidth;
@@ -230,69 +247,53 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	getAlternateStartPosition(hostSize, trackSize) {
 		return this.directionSign < 0 ? hostSize - trackSize : 0;
 	}
-	tick(time = performance.now()) {
-		if (!this.running) return;
-		if (this.lastTime === null) this.lastTime = time;
-		if (time - this.lastTime >= this.scrollDelay) {
-			this.step();
-			this.lastTime = time;
-		}
-		if (!this.running) return;
-		this.rafId = requestAnimationFrame((nextTime) => this.tick(nextTime));
+	syncAnimationPlayState() {
+		this.style.setProperty(CSS_VAR_ANIMATION_PLAY_STATE, this.running ? "running" : "paused");
 	}
-	step() {
-		const hostSize = this.getHostSize();
-		const trackSize = this.getTrackSize();
-		const startPosition = this.getStartPosition(hostSize, trackSize);
-		const flushEndPosition = this.getFlushEndPosition(hostSize, trackSize);
-		const offEndPosition = this.getOffEndPosition(hostSize, trackSize);
-		const slideEndPosition = this.getSlideEndPosition(hostSize, trackSize);
-		const alternateStartPosition = this.getAlternateStartPosition(hostSize, trackSize);
-		const amount = this.scrollAmount;
-		const delta = this.directionSign * amount;
-		if (this.behavior === "alternate") {
-			this.position += this.forward ? delta : -delta;
-			if (this.forward) {
-				if (this.directionSign < 0 && this.position <= flushEndPosition || this.directionSign > 0 && this.position >= flushEndPosition) {
-					this.position = flushEndPosition;
-					this.forward = false;
-					this.incrementLoopCount();
-					if (this.shouldStopAfterLoop()) this.stop();
-				}
-			} else if (this.directionSign < 0 && this.position >= alternateStartPosition || this.directionSign > 0 && this.position <= alternateStartPosition) {
-				this.position = alternateStartPosition;
-				this.forward = true;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
-		} else if (this.behavior === "slide") {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= slideEndPosition || this.directionSign > 0 && this.position >= slideEndPosition) {
-				this.position = slideEndPosition;
-				this.incrementLoopCount();
-				if (!this.hasAttribute(ATTR_LOOP) || this.loop <= 0) this.stop();
-				else if (this.shouldStopAfterLoop()) this.stop();
-				else this.position = startPosition;
-			}
+	syncAnimation(hostSize, trackSize) {
+		const startPosition = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
+		const endPosition = this.behavior === "slide" ? this.getSlideEndPosition(hostSize, trackSize) : this.behavior === "alternate" ? this.getFlushEndPosition(hostSize, trackSize) : this.getOffEndPosition(hostSize, trackSize);
+		const distance = Math.abs(endPosition - startPosition);
+		const steps = Math.max(1, Math.ceil(distance / Math.max(1, this.scrollAmount)));
+		const duration = Math.max(1, steps * this.scrollDelay);
+		const iterationCount = this.getCssIterationCount();
+		this.track.style.removeProperty("transform");
+		this.style.setProperty(CSS_VAR_ANIMATION_DURATION, `${duration}ms`);
+		this.style.setProperty(CSS_VAR_ANIMATION_DIRECTION, this.behavior === "alternate" ? "alternate" : "normal");
+		this.style.setProperty(CSS_VAR_ANIMATION_ITERATION_COUNT, iterationCount);
+		this.style.setProperty(CSS_VAR_ANIMATION_TIMING_FUNCTION, `steps(${steps}, end)`);
+		if (this.isVerticalDirection) {
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, `${endPosition}px`);
 		} else {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= offEndPosition || this.directionSign > 0 && this.position >= offEndPosition) {
-				this.position = startPosition;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, `${endPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, "0px");
 		}
-		this.render();
+		this.restartAnimation();
 	}
-	incrementLoopCount() {
-		this.loopsDone++;
+	getCssIterationCount() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return "1";
+		if (!this.hasAttribute(ATTR_LOOP)) return "infinite";
+		if (Number.isFinite(this.loop) && this.loop > 0) return String(this.loop);
+		return "infinite";
+	}
+	handleAnimationEnd() {
+		if (!this.hasFiniteAnimation()) return;
+		this.running = false;
+		this.syncAnimationPlayState();
 	}
-	shouldStopAfterLoop() {
-		return this.hasAttribute(ATTR_LOOP) && this.loop > 0 && this.loopsDone >= this.loop;
+	restartAnimation() {
+		this.track.style.animationName = "none";
+		this.track.offsetWidth;
+		this.track.style.removeProperty("animation-name");
 	}
-	render() {
-		if (this.isVerticalDirection) this.track.style.transform = `translateY(${this.position}px)`;
-		else this.track.style.transform = `translateX(${this.position}px)`;
+	hasFiniteAnimation() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return true;
+		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
 var defineRemarqueebleElements = () => {

package/dist/remarqueeble.d.ts

@@ -8,11 +8,6 @@ export declare class RemarqueebleElement extends HTMLElementBase {
     static observedAttributes: string[];
     private readonly track;
     private running;
-    private position;
-    private lastTime;
-    private loopsDone;
-    private forward;
-    private rafId;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -36,11 +31,12 @@ export declare class RemarqueebleElement extends HTMLElementBase {
     private getOffEndPosition;
     private getSlideEndPosition;
     private getAlternateStartPosition;
-    private tick;
-    private step;
-    private incrementLoopCount;
-    private shouldStopAfterLoop;
-    private render;
+    private syncAnimationPlayState;
+    private syncAnimation;
+    private getCssIterationCount;
+    private handleAnimationEnd;
+    private restartAnimation;
+    private hasFiniteAnimation;
 }
 export declare const defineRemarqueebleElements: () => void;
 declare global {

package/dist/remarqueeble.min.js

@@ -0,0 +1,52 @@
+/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+var remarqueeble=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`left`,n=`scroll`,r=6,i=85,a=60,o=`200px`,s=`calc(100% - (var(--attr-hspace, 0px) * 2))`,c=`direction`,l=`behavior`,u=`scrollamount`,d=`scrolldelay`,f=`truespeed`,p=`loop`,m=`bgcolor`,h=`width`,g=`height`,_=`hspace`,v=`vspace`,y=`--attr-width`,b=`--attr-height`,x=`--attr-hspace`,S=`--attr-vspace`,C=`--attr-bgcolor`,w=`--animation-duration`,T=`--animation-direction`,E=`--animation-iteration-count`,D=`--animation-play-state`,O=`--animation-timing-function`,k=`--translate-x-end`,A=`--translate-x-start`,j=`--translate-y-end`,M=`--translate-y-start`,N=globalThis.HTMLElement??class{},P=e=>{if(e===null)return null;let t=e.trim();return t===``?null:/^[+-]?(?:\d+|\d*\.\d+)$/.test(t)?`${t}px`:globalThis.CSS?.supports(`width`,t)?t:null},F=e=>{if(e===null)return null;let t=e.trim();return t===``?null:globalThis.CSS?.supports(`background-color`,t)?t:null},I=[{attribute:h,cssVar:y,parser:P},{attribute:g,cssVar:b,parser:P,fallback(e){return e.isVerticalDirection&&!e.hasAttribute(g)?o:null}},{attribute:_,cssVar:x,parser:P},{attribute:v,cssVar:S,parser:P},{attribute:m,cssVar:C,parser:F}],L=class extends N{static observedAttributes=[c,l,u,d,f,p,m,h,g,_,v];track;running=!1;constructor(){super();let e=this.attachShadow({mode:`open`});e.innerHTML=`
+			<style>
+				:host {
+					display: inline-block;
+					text-align: initial;
+					overflow: hidden !important;
+					white-space: nowrap;
+					width: var(${y}, ${s});
+					height: var(${b}, auto);
+					margin-inline: var(${x}, 0px);
+					margin-block: var(${S}, 0px);
+					background-color: var(${C}, transparent);
+					box-sizing: border-box;
+				}
+
+				:host([direction="up"]),
+				:host([direction="down"]) {
+					white-space: normal;
+				}
+
+				.track {
+					animation: remarqueeble-motion
+						var(${w}, 10s)
+						var(${O}, linear)
+						var(${E}, infinite)
+						var(${T}, normal)
+						both;
+					animation-play-state: var(${D}, running);
+					display: inline-block;
+					will-change: transform;
+				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${A}, 100%),
+							var(${M}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${k}, -100%),
+							var(${j}, 0px)
+						);
+					}
+				}
+			</style>
+
+			<span class="track"><slot></slot></span>
+		`;let t=e.querySelector(`.track`);if(!t)throw Error(`Remarqueeble track element was not created.`);this.track=t,this.track.addEventListener(`animationend`,()=>this.handleAnimationEnd())}connectedCallback(){this.running=!0,this.syncPresentationalHints(),requestAnimationFrame(()=>{!this.isConnected||!this.running||this.reset()})}disconnectedCallback(){this.running=!1}attributeChangedCallback(e,t,n){t!==n&&(this.syncPresentationalHints(),this.isConnected&&this.reset())}get direction(){return this.getAttribute(c)||t}get behavior(){return this.getAttribute(l)||n}get scrollAmount(){let e=this.getAttribute(u),t=e===null||e.trim()===``?NaN:Number(e);return Number.isFinite(t)&&t>=0?t:r}get scrollDelay(){let e=this.getAttribute(d),t=e===null||e.trim()===``?NaN:Number(e),n=Number.isFinite(t)&&t>=0?t:i;return this.hasAttribute(f)?n:Math.max(n,a)}get loop(){let e=this.getAttribute(p);return e===null?-1:Number(e)}get directionSign(){return this.direction===`right`||this.direction===`down`?1:-1}get isVerticalDirection(){return this.direction===`up`||this.direction===`down`}start(){this.running||(this.running=!0,this.reset(),this.syncAnimationPlayState())}stop(){this.running=!1,this.syncAnimationPlayState()}syncPresentationalHints(){for(let e of I)this.syncVar(e);this.syncAnimationPlayState()}syncVar(e){let t=this.getAttribute(e.attribute),n=e.parser(t),r=e.fallback?e.fallback(this):null;if(n==null){r==null?this.style.removeProperty(e.cssVar):this.style.setProperty(e.cssVar,r);return}this.style.setProperty(e.cssVar,n)}reset(){let e=this.getHostSize(),t=this.getTrackSize();this.syncAnimation(e,t)}getHostSize(){return this.isVerticalDirection?this.clientHeight:this.clientWidth}getTrackSize(){return this.isVerticalDirection?this.track.offsetHeight:this.track.offsetWidth}getStartPosition(e,t){return this.directionSign<0?e:-t}getFlushEndPosition(e,t){return this.directionSign<0?0:e-t}getOffEndPosition(e,t){return this.directionSign<0?-t:e}getSlideEndPosition(e,t){return this.directionSign<0?0:e-t}getAlternateStartPosition(e,t){return this.directionSign<0?e-t:0}syncAnimationPlayState(){this.style.setProperty(D,this.running?`running`:`paused`)}syncAnimation(e,t){let n=this.behavior===`alternate`?this.getAlternateStartPosition(e,t):this.getStartPosition(e,t),r=this.behavior===`slide`?this.getSlideEndPosition(e,t):this.behavior===`alternate`?this.getFlushEndPosition(e,t):this.getOffEndPosition(e,t),i=Math.abs(r-n),a=Math.max(1,Math.ceil(i/Math.max(1,this.scrollAmount))),o=Math.max(1,a*this.scrollDelay),s=this.getCssIterationCount();this.track.style.removeProperty(`transform`),this.style.setProperty(w,`${o}ms`),this.style.setProperty(T,this.behavior===`alternate`?`alternate`:`normal`),this.style.setProperty(E,s),this.style.setProperty(O,`steps(${a}, end)`),this.isVerticalDirection?(this.style.setProperty(A,`0px`),this.style.setProperty(k,`0px`),this.style.setProperty(M,`${n}px`),this.style.setProperty(j,`${r}px`)):(this.style.setProperty(A,`${n}px`),this.style.setProperty(k,`${r}px`),this.style.setProperty(M,`0px`),this.style.setProperty(j,`0px`)),this.restartAnimation()}getCssIterationCount(){return this.behavior===`slide`&&!this.hasAttribute(p)?`1`:this.hasAttribute(p)&&Number.isFinite(this.loop)&&this.loop>0?String(this.loop):`infinite`}handleAnimationEnd(){this.hasFiniteAnimation()&&(this.running=!1,this.syncAnimationPlayState())}restartAnimation(){this.track.style.animationName=`none`,this.track.offsetWidth,this.track.style.removeProperty(`animation-name`)}hasFiniteAnimation(){return this.behavior===`slide`&&!this.hasAttribute(p)?!0:this.hasAttribute(p)&&Number.isFinite(this.loop)&&this.loop>0}};return e.RemarqueebleElement=L,e.defineRemarqueebleElements=()=>{typeof customElements>`u`||(customElements.get(`re-marquee`)||customElements.define(`re-marquee`,L),customElements.get(`re-marquee-ble`)||customElements.define(`re-marquee-ble`,L))},e.parseLegacyColor=F,e.parsePresentationalDimension=P,e})({});

package/dist/remarqueeble.min.mjs

@@ -0,0 +1,215 @@
+/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+//#region src/lib/remarqueeble.ts
+var e = "direction", t = "behavior", n = "scrollamount", r = "scrolldelay", i = "truespeed", a = "loop", o = "bgcolor", s = "width", c = "height", l = "hspace", u = "vspace", d = "--attr-width", f = "--attr-height", p = "--attr-hspace", m = "--attr-vspace", h = "--attr-bgcolor", g = "--animation-duration", _ = "--animation-direction", v = "--animation-iteration-count", y = "--animation-play-state", b = "--animation-timing-function", x = "--translate-x-end", S = "--translate-x-start", C = "--translate-y-end", w = "--translate-y-start", T = globalThis.HTMLElement ?? class {}, E = (e) => {
+	if (e === null) return null;
+	let t = e.trim();
+	return t === "" ? null : /^[+-]?(?:\d+|\d*\.\d+)$/.test(t) ? `${t}px` : globalThis.CSS?.supports("width", t) ? t : null;
+}, D = (e) => {
+	if (e === null) return null;
+	let t = e.trim();
+	return t === "" ? null : globalThis.CSS?.supports("background-color", t) ? t : null;
+}, O = [
+	{
+		attribute: s,
+		cssVar: d,
+		parser: E
+	},
+	{
+		attribute: c,
+		cssVar: f,
+		parser: E,
+		fallback(e) {
+			return e.isVerticalDirection && !e.hasAttribute(c) ? "200px" : null;
+		}
+	},
+	{
+		attribute: l,
+		cssVar: p,
+		parser: E
+	},
+	{
+		attribute: u,
+		cssVar: m,
+		parser: E
+	},
+	{
+		attribute: o,
+		cssVar: h,
+		parser: D
+	}
+], k = class extends T {
+	static observedAttributes = [
+		e,
+		t,
+		n,
+		r,
+		i,
+		a,
+		o,
+		s,
+		c,
+		l,
+		u
+	];
+	track;
+	running = !1;
+	constructor() {
+		super();
+		let e = this.attachShadow({ mode: "open" });
+		e.innerHTML = `
+			<style>
+				:host {
+					display: inline-block;
+					text-align: initial;
+					overflow: hidden !important;
+					white-space: nowrap;
+					width: var(${d}, calc(100% - (var(--attr-hspace, 0px) * 2)));
+					height: var(${f}, auto);
+					margin-inline: var(${p}, 0px);
+					margin-block: var(${m}, 0px);
+					background-color: var(${h}, transparent);
+					box-sizing: border-box;
+				}
+
+				:host([direction="up"]),
+				:host([direction="down"]) {
+					white-space: normal;
+				}
+
+				.track {
+					animation: remarqueeble-motion
+						var(${g}, 10s)
+						var(${b}, linear)
+						var(${v}, infinite)
+						var(${_}, normal)
+						both;
+					animation-play-state: var(${y}, running);
+					display: inline-block;
+					will-change: transform;
+				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${S}, 100%),
+							var(${w}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${x}, -100%),
+							var(${C}, 0px)
+						);
+					}
+				}
+			</style>
+
+			<span class="track"><slot></slot></span>
+		`;
+		let t = e.querySelector(".track");
+		if (!t) throw Error("Remarqueeble track element was not created.");
+		this.track = t, this.track.addEventListener("animationend", () => this.handleAnimationEnd());
+	}
+	connectedCallback() {
+		this.running = !0, this.syncPresentationalHints(), requestAnimationFrame(() => {
+			!this.isConnected || !this.running || this.reset();
+		});
+	}
+	disconnectedCallback() {
+		this.running = !1;
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && (this.syncPresentationalHints(), this.isConnected && this.reset());
+	}
+	get direction() {
+		return this.getAttribute(e) || "left";
+	}
+	get behavior() {
+		return this.getAttribute(t) || "scroll";
+	}
+	get scrollAmount() {
+		let e = this.getAttribute(n), t = e === null || e.trim() === "" ? NaN : Number(e);
+		return Number.isFinite(t) && t >= 0 ? t : 6;
+	}
+	get scrollDelay() {
+		let e = this.getAttribute(r), t = e === null || e.trim() === "" ? NaN : Number(e), n = Number.isFinite(t) && t >= 0 ? t : 85;
+		return this.hasAttribute(i) ? n : Math.max(n, 60);
+	}
+	get loop() {
+		let e = this.getAttribute(a);
+		return e === null ? -1 : Number(e);
+	}
+	get directionSign() {
+		return this.direction === "right" || this.direction === "down" ? 1 : -1;
+	}
+	get isVerticalDirection() {
+		return this.direction === "up" || this.direction === "down";
+	}
+	start() {
+		this.running || (this.running = !0, this.reset(), this.syncAnimationPlayState());
+	}
+	stop() {
+		this.running = !1, this.syncAnimationPlayState();
+	}
+	syncPresentationalHints() {
+		for (let e of O) this.syncVar(e);
+		this.syncAnimationPlayState();
+	}
+	syncVar(e) {
+		let t = this.getAttribute(e.attribute), n = e.parser(t), r = e.fallback ? e.fallback(this) : null;
+		if (n == null) {
+			r == null ? this.style.removeProperty(e.cssVar) : this.style.setProperty(e.cssVar, r);
+			return;
+		}
+		this.style.setProperty(e.cssVar, n);
+	}
+	reset() {
+		let e = this.getHostSize(), t = this.getTrackSize();
+		this.syncAnimation(e, t);
+	}
+	getHostSize() {
+		return this.isVerticalDirection ? this.clientHeight : this.clientWidth;
+	}
+	getTrackSize() {
+		return this.isVerticalDirection ? this.track.offsetHeight : this.track.offsetWidth;
+	}
+	getStartPosition(e, t) {
+		return this.directionSign < 0 ? e : -t;
+	}
+	getFlushEndPosition(e, t) {
+		return this.directionSign < 0 ? 0 : e - t;
+	}
+	getOffEndPosition(e, t) {
+		return this.directionSign < 0 ? -t : e;
+	}
+	getSlideEndPosition(e, t) {
+		return this.directionSign < 0 ? 0 : e - t;
+	}
+	getAlternateStartPosition(e, t) {
+		return this.directionSign < 0 ? e - t : 0;
+	}
+	syncAnimationPlayState() {
+		this.style.setProperty(y, this.running ? "running" : "paused");
+	}
+	syncAnimation(e, t) {
+		let n = this.behavior === "alternate" ? this.getAlternateStartPosition(e, t) : this.getStartPosition(e, t), r = this.behavior === "slide" ? this.getSlideEndPosition(e, t) : this.behavior === "alternate" ? this.getFlushEndPosition(e, t) : this.getOffEndPosition(e, t), i = Math.abs(r - n), a = Math.max(1, Math.ceil(i / Math.max(1, this.scrollAmount))), o = Math.max(1, a * this.scrollDelay), s = this.getCssIterationCount();
+		this.track.style.removeProperty("transform"), this.style.setProperty(g, `${o}ms`), this.style.setProperty(_, this.behavior === "alternate" ? "alternate" : "normal"), this.style.setProperty(v, s), this.style.setProperty(b, `steps(${a}, end)`), this.isVerticalDirection ? (this.style.setProperty(S, "0px"), this.style.setProperty(x, "0px"), this.style.setProperty(w, `${n}px`), this.style.setProperty(C, `${r}px`)) : (this.style.setProperty(S, `${n}px`), this.style.setProperty(x, `${r}px`), this.style.setProperty(w, "0px"), this.style.setProperty(C, "0px")), this.restartAnimation();
+	}
+	getCssIterationCount() {
+		return this.behavior === "slide" && !this.hasAttribute(a) ? "1" : this.hasAttribute(a) && Number.isFinite(this.loop) && this.loop > 0 ? String(this.loop) : "infinite";
+	}
+	handleAnimationEnd() {
+		this.hasFiniteAnimation() && (this.running = !1, this.syncAnimationPlayState());
+	}
+	restartAnimation() {
+		this.track.style.animationName = "none", this.track.offsetWidth, this.track.style.removeProperty("animation-name");
+	}
+	hasFiniteAnimation() {
+		return this.behavior === "slide" && !this.hasAttribute(a) ? !0 : this.hasAttribute(a) && Number.isFinite(this.loop) && this.loop > 0;
+	}
+}, A = () => {
+	typeof customElements > "u" || (customElements.get("re-marquee") || customElements.define("re-marquee", k), customElements.get("re-marquee-ble") || customElements.define("re-marquee-ble", k));
+};
+//#endregion
+export { k as RemarqueebleElement, A as defineRemarqueebleElements, D as parseLegacyColor, E as parsePresentationalDimension };