@blackbyte/sugar 1.0.0-beta.1

package/dist/js/dom/when/whenStylesheetsReady.js

@@ -0,0 +1,48 @@
+import whenLinkLoaded from './whenLinkLoaded.js';
+/**
+ * @name            whenStylesheetsReady
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Wait until all the HTMLLinkElement's are properly loaded
+ *
+ * @feature       Async promise based
+ * @feature       Multiple stylesheets elements listening
+ *
+ * @param 		{Array<HTMLLinkElement>} 		    [links=null] 			The HTMLLinkElement tags to process. If not passed, take the local stylesheets links
+ * @return 		{Promise<void>} 										              The promise that will be resolved when all the links are loaded
+ *
+ * @todo      tests
+ *
+ * @snippet         whenStylesheetsReady($1)
+ * whenStylesheetsReady($1).then(stylesheets => {
+ *      $2
+ * });
+ *
+ * @example 	js
+ * import { whenStylesheetsReady } from '@blackbyte/sugar/dom'
+ * whenStylesheetsReady([
+ * 		myHTMLLinkElement1,
+ * 		myHTMLLinkElement2
+ * ]).then(stylesheets => {
+ *      // do something...
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenStylesheetsReady(links) {
+    if (!links) {
+        links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+    }
+    const promises = [];
+    [].forEach.call(links, ($link) => {
+        promises.push(whenLinkLoaded($link));
+    });
+    const allPromises = Promise.all(promises);
+    return allPromises;
+}
+//# sourceMappingURL=whenStylesheetsReady.js.map

package/dist/js/dom/when/whenStylesheetsReady.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenStylesheetsReady.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenStylesheetsReady.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAC1C,KAAyB;IAEzB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAC1E,CAAC;IACD,MAAM,QAAQ,GAA+B,EAAE,CAAC;IAChD,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QAC/B,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,KAAwB,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC1C,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/dist/js/dom/when/whenTransitionEnd.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @name                whenTransitionEnd
+ * @namespace           js.dom.when
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ * @async
+ *
+ * Monitor an HTMLElement to be notified when his transition has ended
+ *
+ * @feature       Promise based API
+ *
+ * @param 		{HTMLElement} 				        elm 		The element to monitor
+ * @return 		(Promise<HTMLElement>) 								The promise that will be resolved when the element transition has ended
+ *
+ * @snippet         whenTransitionEnd($1)
+ * whenTransitionEnd($1).then(\$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenTransitionEnd } from '@blackbyte/sugar/dom'
+ * await whenTransitionEnd(myCoolHTMLElement);
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenTransitionEnd($elm: HTMLElement): Promise<HTMLElement>;

package/dist/js/dom/when/whenTransitionEnd.js

@@ -0,0 +1,39 @@
+import getTransitionProperties from '../style/getTransitionProperties.js';
+/**
+ * @name                whenTransitionEnd
+ * @namespace           js.dom.when
+ * @type                Function
+ * @platform            js
+ * @status              stable
+ * @async
+ *
+ * Monitor an HTMLElement to be notified when his transition has ended
+ *
+ * @feature       Promise based API
+ *
+ * @param 		{HTMLElement} 				        elm 		The element to monitor
+ * @return 		(Promise<HTMLElement>) 								The promise that will be resolved when the element transition has ended
+ *
+ * @snippet         whenTransitionEnd($1)
+ * whenTransitionEnd($1).then(\$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenTransitionEnd } from '@blackbyte/sugar/dom'
+ * await whenTransitionEnd(myCoolHTMLElement);
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function whenTransitionEnd($elm) {
+    return new Promise((resolve) => {
+        const transition = getTransitionProperties($elm);
+        setTimeout(() => {
+            resolve($elm);
+        }, transition.totalDuration);
+    });
+}
+//# sourceMappingURL=whenTransitionEnd.js.map

package/dist/js/dom/when/whenTransitionEnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenTransitionEnd.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenTransitionEnd.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,MAAM,qCAAqC,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,IAAiB;IAEjB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,UAAU,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;QACjD,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/when/whenVisible.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @name            whenVisible
+ * @namespace       js.dom.when
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ * @async
+ *
+ * Monitor an HTMLElement to be notified when it is visible
+ *
+ * @feature       Promise based API
+ *
+ * @param 		{HTMLElement} 				        $elm 		The element to monitor
+ * @return 		(Promise<HTMLElement>) 								The promise that will be resolved when the element is visible
+ *
+ * @snippet         whenVisible($1)
+ * whenVisible($1).then(\$elm => {
+ *      $2
+ * });
+ *
+ * @todo      tests
+ *
+ * @example 	js
+ * import { whenVisible } from '@blackbyte/sugar/dom'
+ * whenVisible(myCoolHTMLElement).then(($elm) => {
+ * 		// do something with your element that is now visible
+ * });
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TWhenVisibleSettings = {
+    whenVisible?: Function;
+    whenInvisible?: Function;
+    once: boolean;
+};
+export default function whenVisible($elm: HTMLElement, settings?: Partial<TWhenVisibleSettings>): Promise<HTMLElement>;

package/dist/js/dom/when/whenVisible.js

@@ -0,0 +1,53 @@
+import uniqid from '../../string/uniqid.js';
+const _whenVisibleStatuses = new WeakMap();
+export default function whenVisible($elm, settings) {
+    let observer;
+    const pro = new Promise((resolve, reject) => {
+        var _a;
+        const finalSettings = Object.assign({ whenVisible: undefined, whenInvisible: undefined, once: true }, (settings !== null && settings !== void 0 ? settings : {}));
+        const statuses = (_a = _whenVisibleStatuses.get($elm)) !== null && _a !== void 0 ? _a : {};
+        _whenVisibleStatuses.set($elm, statuses);
+        // generate a uniqid for this listener
+        const id = uniqid();
+        observer = new IntersectionObserver(function (entries) {
+            var _a, _b;
+            if (entries[0]['intersectionRatio'] == 0) {
+                // prevent from triggering multiple times the callback
+                // for this listener if already invisible
+                if (!statuses[id]) {
+                    return;
+                }
+                // set the listener status on the element
+                statuses[id] = false;
+                // process callbacks
+                (_a = finalSettings.whenInvisible) === null || _a === void 0 ? void 0 : _a.call(finalSettings, $elm);
+            }
+            else {
+                // "once" settings support
+                if (finalSettings.once) {
+                    observer.disconnect();
+                }
+                // prevent from triggering multiple times the callback
+                // for this listener if already visible
+                if (statuses[id]) {
+                    return;
+                }
+                // set the listener status on the element
+                statuses[id] = true;
+                // process callbacks
+                (_b = finalSettings.whenVisible) === null || _b === void 0 ? void 0 : _b.call(finalSettings, $elm);
+                // resolve the promise only if the "once"
+                // setting is true
+                if (finalSettings.once) {
+                    resolve($elm);
+                }
+            }
+        });
+        observer.observe($elm);
+    });
+    pro.finally(() => {
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+    });
+    return pro;
+}
+//# sourceMappingURL=whenVisible.js.map

package/dist/js/dom/when/whenVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenVisible.js","sourceRoot":"","sources":["../../../../src/js/dom/when/whenVisible.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAwC5C,MAAM,oBAAoB,GAAG,IAAI,OAAO,EAAE,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,IAAiB,EACjB,QAAwC;IAExC,IAAI,QAA8B,CAAC;IAEnC,MAAM,GAAG,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;;QAC1C,MAAM,aAAa,mBACjB,WAAW,EAAE,SAAS,EACtB,aAAa,EAAE,SAAS,EACxB,IAAI,EAAE,IAAI,IACP,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CACpB,CAAC;QAEF,MAAM,QAAQ,GAAG,MAAA,oBAAoB,CAAC,GAAG,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC;QACtD,oBAAoB,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEzC,sCAAsC;QACtC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;QAEpB,QAAQ,GAAG,IAAI,oBAAoB,CAAC,UAAU,OAAO;;YACnD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;gBACzC,sDAAsD;gBACtD,yCAAyC;gBACzC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;oBAClB,OAAO;gBACT,CAAC;gBAED,yCAAyC;gBACzC,QAAQ,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC;gBAErB,oBAAoB;gBACpB,MAAA,aAAa,CAAC,aAAa,8DAAG,IAAI,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,0BAA0B;gBAC1B,IAAI,aAAa,CAAC,IAAI,EAAE,CAAC;oBACvB,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACxB,CAAC;gBAED,sDAAsD;gBACtD,uCAAuC;gBACvC,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;oBACjB,OAAO;gBACT,CAAC;gBAED,yCAAyC;gBACzC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;gBAEpB,oBAAoB;gBACpB,MAAA,aAAa,CAAC,WAAW,8DAAG,IAAI,CAAC,CAAC;gBAElC,yCAAyC;gBACzC,kBAAkB;gBAClB,IAAI,aAAa,CAAC,IAAI,EAAE,CAAC;oBACvB,OAAO,CAAC,IAAI,CAAC,CAAC;gBAChB,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE;QACf,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,GAA2B,CAAC;AACrC,CAAC"}

package/dist/js/feature/_exports.d.ts

@@ -0,0 +1,4 @@
+import scrollClasses from './scrollClasses.js';
+import sectionClasses from './sectionClasses.js';
+import scrollProperties from './scrollProperties.js';
+export { scrollProperties as __scrollProperties, scrollClasses as __scrolledClasses, sectionClasses as __sectionClasses, scrollProperties, scrollClasses, sectionClasses, };

package/dist/js/feature/_exports.js

@@ -0,0 +1,5 @@
+import scrollClasses from './scrollClasses.js';
+import sectionClasses from './sectionClasses.js';
+import scrollProperties from './scrollProperties.js';
+export { scrollProperties as __scrollProperties, scrollClasses as __scrolledClasses, sectionClasses as __sectionClasses, scrollProperties, scrollClasses, sectionClasses, };
+//# sourceMappingURL=_exports.js.map

package/dist/js/feature/_exports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_exports.js","sourceRoot":"","sources":["../../../src/js/feature/_exports.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,OAAO,EACL,gBAAgB,IAAI,kBAAkB,EACtC,aAAa,IAAI,iBAAiB,EAClC,cAAc,IAAI,gBAAgB,EAClC,gBAAgB,EAChB,aAAa,EACb,cAAc,GACf,CAAC"}

package/dist/js/feature/scrollClasses.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @name            scrollClasses
+ * @namespace       js.dom.feature
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * This feature allows you to have `-scrolled`, `-scrolled-x`, `-scrolled-y`, `-scrolled-up` and `-scrolled-down` classes added and removed from
+ * the body depending on an scroll offset that can be set by:
+ * 1. `-scrolled`: Added when passed the `offset` set in the settings
+ * 2. `-scrolled-x`: Added when passed the `offsetX` set in the settings
+ * 3. `-scrolled-y`: Added when passed the `offsetY` set in the settings
+ * 4. `-scrolled-up`: Added when the user scrolls up (no offset)
+ * 5. `-scrolled-down`: Added when the user scrolls down (no offset)
+ *
+ * Note that you can specify these settings in the CSS with the following variables:
+ * - `--s-scrolled-classes-offset`: The offset you want before adding the classes
+ * - `--s-scrolled-classes-offset-x`: The offset x you want before adding the classes
+ * - `--s-scrolled-classes-offset-y`: The offset y you want before adding the classes
+ * - `--s-scrolled-classes-class`: The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @param           {TScrollClassesSettings}          [settings={}]           The settings you want to override
+ *
+ * @setting         {number}        [offset=100]                The offset you want before adding the classes
+ * @setting         {number}        [offsetX=null]              The offset x you want before adding the classes
+ * @setting         {number}        [offsetY=null]              The offset y you want before adding the classes
+ * @setting         {string}        [class=scrolled]            The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @snippet          scrollClasses($1);
+ *
+ * @example         js
+ * import { scrollClasses } from '@blackbyte/sugar/features';
+ * scrollClasses({
+ *      class: 'hello',
+ *      offset: 200
+ * });
+ *
+ * @since       1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TScrollClassesSettings = {
+    offset: number;
+    offsetX: number;
+    offsetY: number;
+    class: string;
+};
+export default function scrollClasses(settings?: TScrollClassesSettings): void;

package/dist/js/feature/scrollClasses.js

@@ -0,0 +1,104 @@
+/**
+ * @name            scrollClasses
+ * @namespace       js.dom.feature
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * This feature allows you to have `-scrolled`, `-scrolled-x`, `-scrolled-y`, `-scrolled-up` and `-scrolled-down` classes added and removed from
+ * the body depending on an scroll offset that can be set by:
+ * 1. `-scrolled`: Added when passed the `offset` set in the settings
+ * 2. `-scrolled-x`: Added when passed the `offsetX` set in the settings
+ * 3. `-scrolled-y`: Added when passed the `offsetY` set in the settings
+ * 4. `-scrolled-up`: Added when the user scrolls up (no offset)
+ * 5. `-scrolled-down`: Added when the user scrolls down (no offset)
+ *
+ * Note that you can specify these settings in the CSS with the following variables:
+ * - `--s-scrolled-classes-offset`: The offset you want before adding the classes
+ * - `--s-scrolled-classes-offset-x`: The offset x you want before adding the classes
+ * - `--s-scrolled-classes-offset-y`: The offset y you want before adding the classes
+ * - `--s-scrolled-classes-class`: The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @param           {TScrollClassesSettings}          [settings={}]           The settings you want to override
+ *
+ * @setting         {number}        [offset=100]                The offset you want before adding the classes
+ * @setting         {number}        [offsetX=null]              The offset x you want before adding the classes
+ * @setting         {number}        [offsetY=null]              The offset y you want before adding the classes
+ * @setting         {string}        [class=scrolled]            The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @snippet          scrollClasses($1);
+ *
+ * @example         js
+ * import { scrollClasses } from '@blackbyte/sugar/features';
+ * scrollClasses({
+ *      class: 'hello',
+ *      offset: 200
+ * });
+ *
+ * @since       1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function scrollClasses(settings) {
+    const style = window.getComputedStyle(document.body);
+    const finalSettings = Object.assign({ offset: parseInt(style.getPropertyValue('--s-scrolled-classes-offset') || '0') ||
+            100, offsetX: parseInt(style.getPropertyValue('--s-scrolled-classes-offset-x') || '0'), offsetY: parseInt(style.getPropertyValue('--s-scrolled-classes-offset-y') || '0'), class: style.getPropertyValue('--s-scrolled-classes-class') || 'scrolled' }, (settings !== null && settings !== void 0 ? settings : {}));
+    let currentX = window.scrollX, currentY = window.scrollY;
+    const offsetX = finalSettings.offsetX !== 0
+        ? finalSettings.offsetX
+        : finalSettings.offset, offsetY = finalSettings.offsetY !== 0
+        ? finalSettings.offsetY
+        : finalSettings.offset;
+    function handleScroll() {
+        let isScrolled = false;
+        // scrolled up/down class
+        if (window.scrollY > currentY) {
+            document.body.classList.remove(`${finalSettings.class}-up`);
+            if (!document.body.classList.contains(`${finalSettings.class}-down`)) {
+                document.body.classList.add(`${finalSettings.class}-down`);
+            }
+        }
+        else if (window.scrollY < currentY) {
+            document.body.classList.remove(`${finalSettings.class}-down`);
+            if (!document.body.classList.contains(`${finalSettings.class}-up`)) {
+                document.body.classList.add(`${finalSettings.class}-up`);
+            }
+        }
+        if (window.scrollY >= offsetY) {
+            if (!document.body.classList.contains(`${finalSettings.class}-y`)) {
+                document.body.classList.add(`${finalSettings.class}-y`);
+            }
+            isScrolled = true;
+        }
+        else {
+            if (document.body.classList.contains(`${finalSettings.class}-y`)) {
+                document.body.classList.remove(`${finalSettings.class}-y`);
+            }
+        }
+        if (window.scrollX >= offsetX) {
+            if (!document.body.classList.contains(`${finalSettings.class}-x`)) {
+                document.body.classList.add(`${finalSettings.class}-x`);
+            }
+            isScrolled = true;
+        }
+        else {
+            if (document.body.classList.contains(`${finalSettings.class}-x`)) {
+                document.body.classList.remove(`${finalSettings.class}-x`);
+            }
+        }
+        if (isScrolled) {
+            if (!document.body.classList.contains(finalSettings.class)) {
+                document.body.classList.add(finalSettings.class);
+            }
+        }
+        else {
+            if (document.body.classList.contains(finalSettings.class)) {
+                document.body.classList.remove(finalSettings.class);
+            }
+        }
+        currentX = window.scrollX;
+        currentY = window.scrollY;
+        requestAnimationFrame(handleScroll);
+    }
+    requestAnimationFrame(handleScroll);
+}
+//# sourceMappingURL=scrollClasses.js.map

package/dist/js/feature/scrollClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollClasses.js","sourceRoot":"","sources":["../../../src/js/feature/scrollClasses.ts"],"names":[],"mappings":"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"}

package/dist/js/feature/scrollProperties.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @name            scrollProperties
+ * @namespace       js.dom.feature
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * This feature allows you to automatically apply css properties on the body element depending on the scroll position.
+ * The properties that are applied are:
+ * - `--scroll-x`: The current scroll x position
+ * - `--scroll-y`: The current scroll y position
+ *
+ * @param           {TScrollPropertiesSettings}          [settings={}]           The settings you want to override
+ *
+ * @snippet          scrollProperties($1);
+ *
+ * @example         js
+ * import { scrollProperties } from '@blackbyte/sugar/features';
+ * scrollProperties();
+ *
+ * @since       1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TScrollPropertiesSettings = {};
+export default function scrollProperties(settings?: TScrollPropertiesSettings): void;

package/dist/js/feature/scrollProperties.js

@@ -0,0 +1,30 @@
+/**
+ * @name            scrollProperties
+ * @namespace       js.dom.feature
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * This feature allows you to automatically apply css properties on the body element depending on the scroll position.
+ * The properties that are applied are:
+ * - `--scroll-x`: The current scroll x position
+ * - `--scroll-y`: The current scroll y position
+ *
+ * @param           {TScrollPropertiesSettings}          [settings={}]           The settings you want to override
+ *
+ * @snippet          scrollProperties($1);
+ *
+ * @example         js
+ * import { scrollProperties } from '@blackbyte/sugar/features';
+ * scrollProperties();
+ *
+ * @since       1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function scrollProperties(settings) {
+    window.addEventListener('scroll', () => {
+        document.body.style.setProperty('--scroll-x', `${window.scrollX}px`);
+        document.body.style.setProperty('--scroll-y', `${window.scrollY}px`);
+    });
+}
+//# sourceMappingURL=scrollProperties.js.map

package/dist/js/feature/scrollProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollProperties.js","sourceRoot":"","sources":["../../../src/js/feature/scrollProperties.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,QAAoC;IAEpC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;QACrC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC;QACrE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/feature/scrolledClasses.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @name            scrolledClasses
+ * @namespace       js.dom.feature
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * This feature allows you to have `-scrolled`, `-scrolled-x`, `-scrolled-y`, `-scrolled-up` and `-scrolled-down` classes added and removed from
+ * the body depending on an scroll offset that can be set by:
+ * 1. `-scrolled`: Added when passed the `offset` set in the settings
+ * 2. `-scrolled-x`: Added when passed the `offsetX` set in the settings
+ * 3. `-scrolled-y`: Added when passed the `offsetY` set in the settings
+ * 4. `-scrolled-up`: Added when the user scrolls up (no offset)
+ * 5. `-scrolled-down`: Added when the user scrolls down (no offset)
+ *
+ * Note that you can specify these settings in the CSS with the following variables:
+ * - `--s-scrolled-classes-offset`: The offset you want before adding the classes
+ * - `--s-scrolled-classes-offset-x`: The offset x you want before adding the classes
+ * - `--s-scrolled-classes-offset-y`: The offset y you want before adding the classes
+ * - `--s-scrolled-classes-class`: The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @param           {TScrolledClassesSettings}          [settings={}]           The settings you want to override
+ *
+ * @setting         {number}        [offset=100]        The offset you want before adding the classes
+ * @setting         {number}        [offsetX=null]             The offset x you want before adding the classes
+ * @setting         {number}        [offsetY=null]             The offset y you want before adding the classes
+ * @setting         {string}        [class=scrolled]        The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @snippet          __scrolledClasses($1);
+ *
+ * @example         js
+ * import { __scrolledClasses } from '@blackbyte/sugar/features';
+ * __scrolledClasses({
+ *      class: 'hello',
+ *      offset: 200
+ * });
+ *
+ * @since       1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TScrolledClassesSettings = {
+    offset: number;
+    offsetX: number;
+    offsetY: number;
+    class: string;
+};
+export default function __scrolledClasses(settings?: TScrolledClassesSettings): void;

package/dist/js/feature/scrolledClasses.js

@@ -0,0 +1,104 @@
+/**
+ * @name            scrolledClasses
+ * @namespace       js.dom.feature
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * This feature allows you to have `-scrolled`, `-scrolled-x`, `-scrolled-y`, `-scrolled-up` and `-scrolled-down` classes added and removed from
+ * the body depending on an scroll offset that can be set by:
+ * 1. `-scrolled`: Added when passed the `offset` set in the settings
+ * 2. `-scrolled-x`: Added when passed the `offsetX` set in the settings
+ * 3. `-scrolled-y`: Added when passed the `offsetY` set in the settings
+ * 4. `-scrolled-up`: Added when the user scrolls up (no offset)
+ * 5. `-scrolled-down`: Added when the user scrolls down (no offset)
+ *
+ * Note that you can specify these settings in the CSS with the following variables:
+ * - `--s-scrolled-classes-offset`: The offset you want before adding the classes
+ * - `--s-scrolled-classes-offset-x`: The offset x you want before adding the classes
+ * - `--s-scrolled-classes-offset-y`: The offset y you want before adding the classes
+ * - `--s-scrolled-classes-class`: The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @param           {TScrolledClassesSettings}          [settings={}]           The settings you want to override
+ *
+ * @setting         {number}        [offset=100]        The offset you want before adding the classes
+ * @setting         {number}        [offsetX=null]             The offset x you want before adding the classes
+ * @setting         {number}        [offsetY=null]             The offset y you want before adding the classes
+ * @setting         {string}        [class=scrolled]        The class name you want. Will be used also in the %cls-x and %cls-y classes
+ *
+ * @snippet          __scrolledClasses($1);
+ *
+ * @example         js
+ * import { __scrolledClasses } from '@blackbyte/sugar/features';
+ * __scrolledClasses({
+ *      class: 'hello',
+ *      offset: 200
+ * });
+ *
+ * @since       1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function __scrolledClasses(settings) {
+    const style = window.getComputedStyle(document.body);
+    const finalSettings = Object.assign({ offset: parseInt(style.getPropertyValue('--s-scrolled-classes-offset') || '0') ||
+            100, offsetX: parseInt(style.getPropertyValue('--s-scrolled-classes-offset-x') || '0'), offsetY: parseInt(style.getPropertyValue('--s-scrolled-classes-offset-y') || '0'), class: style.getPropertyValue('--s-scrolled-classes-class') || 'scrolled' }, (settings !== null && settings !== void 0 ? settings : {}));
+    let currentX = window.scrollX, currentY = window.scrollY;
+    const offsetX = finalSettings.offsetX !== 0
+        ? finalSettings.offsetX
+        : finalSettings.offset, offsetY = finalSettings.offsetY !== 0
+        ? finalSettings.offsetY
+        : finalSettings.offset;
+    function handleScroll() {
+        let isScrolled = false;
+        // scrolled up/down class
+        if (window.scrollY > currentY) {
+            document.body.classList.remove(`${finalSettings.class}-up`);
+            if (!document.body.classList.contains(`${finalSettings.class}-down`)) {
+                document.body.classList.add(`${finalSettings.class}-down`);
+            }
+        }
+        else if (window.scrollY < currentY) {
+            document.body.classList.remove(`${finalSettings.class}-down`);
+            if (!document.body.classList.contains(`${finalSettings.class}-up`)) {
+                document.body.classList.add(`${finalSettings.class}-up`);
+            }
+        }
+        if (window.scrollY >= offsetY) {
+            if (!document.body.classList.contains(`${finalSettings.class}-y`)) {
+                document.body.classList.add(`${finalSettings.class}-y`);
+            }
+            isScrolled = true;
+        }
+        else {
+            if (document.body.classList.contains(`${finalSettings.class}-y`)) {
+                document.body.classList.remove(`${finalSettings.class}-y`);
+            }
+        }
+        if (window.scrollX >= offsetX) {
+            if (!document.body.classList.contains(`${finalSettings.class}-x`)) {
+                document.body.classList.add(`${finalSettings.class}-x`);
+            }
+            isScrolled = true;
+        }
+        else {
+            if (document.body.classList.contains(`${finalSettings.class}-x`)) {
+                document.body.classList.remove(`${finalSettings.class}-x`);
+            }
+        }
+        if (isScrolled) {
+            if (!document.body.classList.contains(finalSettings.class)) {
+                document.body.classList.add(finalSettings.class);
+            }
+        }
+        else {
+            if (document.body.classList.contains(finalSettings.class)) {
+                document.body.classList.remove(finalSettings.class);
+            }
+        }
+        currentX = window.scrollX;
+        currentY = window.scrollY;
+        requestAnimationFrame(handleScroll);
+    }
+    requestAnimationFrame(handleScroll);
+}
+//# sourceMappingURL=scrolledClasses.js.map

package/dist/js/feature/scrolledClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrolledClasses.js","sourceRoot":"","sources":["../../../src/js/feature/scrolledClasses.ts"],"names":[],"mappings":"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"}