remarqueeble 0.3.0 → 0.4.0

package/README.md

@@ -21,6 +21,7 @@ By Rémino Rem
 - [Usage](#usage)
 - [Attributes](#attributes)
 - [API](#api)
+- [Remarquee Lite](#remarquee-lite)
 - [Development](#development)
 - [Contributing](#contributing)
 - [Licence](#licence)
@@ -36,22 +37,28 @@ By Rémino Rem
 Register the custom elements automatically from a CDN:
 
 ```html
-<script
-    type="module"
-    src="https://unpkg.com/remarqueeble/dist/remarqueeble-auto.min.js"></script>
+<script src="https://unpkg.com/remarqueeble"></script>
 ```
 
 Mirrors:
 
-- https://unpkg.com/remarqueeble/dist/remarqueeble-auto.min.js
-- https://cdn.jsdelivr.net/npm/remarqueeble/dist/remarqueeble-auto.min.js
+- https://unpkg.com/remarqueeble
+- https://cdn.jsdelivr.net/npm/remarqueeble
 
 Use a pinned version in production:
 
 ```html
-<script
-    type="module"
-    src="https://unpkg.com/remarqueeble@0.2.0/dist/remarqueeble-auto.min.js"></script>
+<script src="https://unpkg.com/remarqueeble@0.3.0"></script>
+```
+
+If you want the API instead of auto-registration, import the ES module directly:
+
+```html
+<script type="module">
+    import { defineRemarqueebleElements } from 'https://unpkg.com/remarqueeble@0.3.0/dist/remarqueeble.mjs'
+
+    defineRemarqueebleElements()
+</script>
 ```
 
 ### npm
@@ -78,6 +85,9 @@ defineRemarqueebleElements()
 
 TypeScript declarations are included with the package.
 
+Bundlers normally minify production builds for you, so npm users should prefer
+the package exports above instead of importing files from `dist/` directly.
+
 ### Direct download
 
 Download the package tarball or individual files from npm/CDN:
@@ -88,6 +98,14 @@ Download the package tarball or individual files from npm/CDN:
 
 The browser-ready auto-registration file is `dist/remarqueeble-auto.min.js`.
 
+Distribution files:
+
+- `dist/remarqueeble.mjs`: ES module library API.
+- `dist/remarqueeble.cjs`: CommonJS library API.
+- `dist/remarqueeble-auto.mjs`: ES module auto-registration entry.
+- `dist/remarqueeble-auto.cjs`: CommonJS auto-registration entry.
+- `dist/remarqueeble-auto.min.js`: minified classic browser auto-registration.
+
 [Back to top](#)
 
 ---
@@ -138,6 +156,34 @@ marquee.start()
 
 ---
 
+## Remarquee Lite
+
+For a CSS-only marquee, import `remarqueeble/lite.css` or load
+`dist/lite.css` directly:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/remarqueeble/dist/lite.css" />
+
+<div class="re-marquee" style="--re-marquee-duration: 12s;">
+    <div class="re-marquee__track">CSS-only marquee</div>
+</div>
+```
+
+The lite CSS follows the simpler pure-CSS pattern and does not require
+duplicated content. It does not emulate legacy `<marquee>` measurement,
+`behavior`, `scrollamount`, `scrolldelay`, or finite `loop` handling.
+
+Optional classes:
+
+- `re-marquee--reverse`: scroll in the opposite direction.
+- `re-marquee--vertical`: scroll vertically.
+- `re-marquee--paused`: pause the animation.
+- `re-marquee--pause-on-hover`: pause while hovered.
+
+[Back to top](#)
+
+---
+
 ## Development
 
 ```sh

package/dist/lite.css

@@ -0,0 +1,73 @@
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+.re-marquee {
+	--re-marquee-duration: 20s;
+	--re-marquee-play-state: running;
+	--re-marquee-timing-function: linear;
+
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.re-marquee__track {
+	animation: re-marquee-scroll var(--re-marquee-duration)
+		var(--re-marquee-timing-function) infinite;
+	animation-play-state: var(--re-marquee-play-state);
+	display: inline-block;
+	min-inline-size: max-content;
+	will-change: transform;
+}
+
+.re-marquee--reverse > .re-marquee__track {
+	animation-direction: reverse;
+}
+
+.re-marquee--paused {
+	--re-marquee-play-state: paused;
+}
+
+.re-marquee--pause-on-hover:hover {
+	--re-marquee-play-state: paused;
+}
+
+.re-marquee--vertical {
+	block-size: 12rem;
+	white-space: normal;
+}
+
+.re-marquee--vertical > .re-marquee__track {
+	animation-name: re-marquee-scroll-y;
+	display: inline-flex;
+	flex-direction: column;
+	min-inline-size: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.re-marquee {
+		overflow: auto;
+	}
+
+	.re-marquee__track {
+		animation: none;
+	}
+}
+
+@keyframes re-marquee-scroll {
+	from {
+		transform: translateX(clamp(100%, 40rem, 100vw));
+	}
+
+	to {
+		transform: translateX(var(--re-marquee-end-pos, -100%));
+	}
+}
+
+@keyframes re-marquee-scroll-y {
+	from {
+		transform: translateY(clamp(100%, 40rem, 100vh));
+	}
+
+	to {
+		transform: translateY(var(--re-marquee-end-pos, -100%));
+	}
+}

package/dist/remarqueeble-auto.cjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
 var DEFAULT_BEHAVIOR = "scroll";
@@ -295,10 +295,12 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
+var ReMarqueeElement = class extends RemarqueebleElement {};
+var ReMarqueeBleElement = class extends RemarqueebleElement {};
 var defineRemarqueebleElements = () => {
 	if (typeof customElements === "undefined") return;
-	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
-	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", ReMarqueeElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", ReMarqueeBleElement);
 };
 //#endregion
 //#region src/lib/auto.ts

package/dist/remarqueeble-auto.min.js

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 (function(){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=[{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:e=>{if(e===null)return null;let t=e.trim();return t===``?null:globalThis.CSS?.supports(`background-color`,t)?t:null}}],O=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 {
@@ -49,4 +49,4 @@
 			</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 D)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}};typeof customElements>`u`||(customElements.get(`re-marquee`)||customElements.define(`re-marquee`,O),customElements.get(`re-marquee-ble`)||customElements.define(`re-marquee-ble`,O))})();
+		`;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 D)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}},k=class extends O{},A=class extends O{};typeof customElements>`u`||(customElements.get(`re-marquee`)||customElements.define(`re-marquee`,k),customElements.get(`re-marquee-ble`)||customElements.define(`re-marquee-ble`,A))})();

package/dist/remarqueeble-auto.mjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
 var DEFAULT_BEHAVIOR = "scroll";
@@ -295,10 +295,12 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
+var ReMarqueeElement = class extends RemarqueebleElement {};
+var ReMarqueeBleElement = class extends RemarqueebleElement {};
 var defineRemarqueebleElements = () => {
 	if (typeof customElements === "undefined") return;
-	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
-	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", ReMarqueeElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", ReMarqueeBleElement);
 };
 //#endregion
 //#region src/lib/auto.ts

package/dist/remarqueeble.cjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.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";
@@ -296,10 +296,12 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
+var ReMarqueeElement = class extends RemarqueebleElement {};
+var ReMarqueeBleElement = class extends RemarqueebleElement {};
 var defineRemarqueebleElements = () => {
 	if (typeof customElements === "undefined") return;
-	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
-	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", ReMarqueeElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", ReMarqueeBleElement);
 };
 //#endregion
 exports.RemarqueebleElement = RemarqueebleElement;

package/dist/remarqueeble.mjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
 var DEFAULT_BEHAVIOR = "scroll";
@@ -295,10 +295,12 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
+var ReMarqueeElement = class extends RemarqueebleElement {};
+var ReMarqueeBleElement = class extends RemarqueebleElement {};
 var defineRemarqueebleElements = () => {
 	if (typeof customElements === "undefined") return;
-	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
-	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", ReMarqueeElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", ReMarqueeBleElement);
 };
 //#endregion
 export { RemarqueebleElement, defineRemarqueebleElements, parseLegacyColor, parsePresentationalDimension };

package/package.json

@@ -3,7 +3,7 @@
 		"name": "Rémino Rem",
 		"url": "https://remino.net/"
 	},
-	"browser": "dist/remarqueeble.cjs",
+	"browser": "./dist/remarqueeble-auto.min.js",
 	"description": "Custom element tribute to the cursed glory of marquee.",
 	"devDependencies": {
 		"@astrojs/check": "^0.9.4",
@@ -16,6 +16,7 @@
 		"astro-compressor": "^1.3.0",
 		"astro-eslint-parser": "^1.4.0",
 		"astro-minify-html": "^0.1.1",
+		"dompurify": "^3.4.11",
 		"eslint": "^10.6.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-astro": "^1.7.0",
@@ -23,6 +24,7 @@
 		"jasmine": "^6.3.0",
 		"prettier": "^3.7.4",
 		"prettier-plugin-astro": "^0.14.1",
+		"shiki": "^4.3.0",
 		"tsx": "^4.22.4",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.62.0",
@@ -31,6 +33,7 @@
 	"exports": {
 		".": {
 			"types": "./dist/remarqueeble.d.ts",
+			"unpkg": "./dist/remarqueeble-auto.min.js",
 			"import": "./dist/remarqueeble.mjs",
 			"require": "./dist/remarqueeble.cjs"
 		},
@@ -38,7 +41,8 @@
 			"types": "./dist/auto.d.ts",
 			"import": "./dist/remarqueeble-auto.mjs",
 			"require": "./dist/remarqueeble-auto.cjs"
-		}
+		},
+		"./lite.css": "./dist/lite.css"
 	},
 	"files": [
 		"dist/*"
@@ -53,8 +57,12 @@
 	"main": "dist/remarqueeble.cjs",
 	"module": "dist/remarqueeble.mjs",
 	"name": "remarqueeble",
+	"unpkg": "./dist/remarqueeble-auto.min.js",
+	"jsdelivr": "./dist/remarqueeble-auto.min.js",
 	"sideEffects": [
 		"./dist/remarqueeble-auto.*",
+		"./dist/lite.css",
+		"./src/assets/js/demo.js",
 		"./src/lib/auto.ts"
 	],
 	"scripts": {
@@ -80,5 +88,5 @@
 	},
 	"type": "module",
 	"types": "dist/remarqueeble.d.ts",
-	"version": "0.3.0"
+	"version": "0.4.0"
 }

package/dist/remarqueeble.min.js

@@ -1,52 +0,0 @@
-/*! 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

@@ -1,215 +0,0 @@
-/*! 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 };