tiny-essentials 1.23.0 → 1.23.2

package/dist/v1/css/TinyLoadingScreen.min.css

@@ -1 +1 @@
-.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:9999}.loading-overlay .loading-content{text-align:center;color:#fff;font-family:Arial,sans-serif}.loading-overlay .loading-spinner{border:4px solid hsla(0,0%,100%,.3);border-top:4px solid #fff;border-radius:50%;width:50px;height:50px;margin:0 auto 15px;animation:spin 1s linear infinite}.loading-overlay .loading-message{font-size:1.2em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:absolute;justify-content:center;align-items:center;z-index:9999}.loading-overlay .loading-container{height:100%;width:100%;display:flex;align-items:center}.loading-overlay .loading-content{text-align:center;color:#fff;font-family:Arial,sans-serif;margin:auto}.loading-overlay .loading-spinner{position:relative;border:4px solid hsla(0,0%,100%,.3);border-top:4px solid #fff;border-radius:50%;width:50px;height:50px;margin:0 auto 15px;animation:loading-spin 1s linear infinite}.loading-overlay .loading-spinner::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%, -50%);border-radius:50%;background:rgba(0,0,0,0);pointer-events:none}.loading-overlay .loading-message{font-size:1.2em;user-select:none !important}@keyframes loading-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

package/dist/v1/libs/TinyHtml.cjs

@@ -5281,6 +5281,26 @@ class TinyHtml {
 
   // TITLE: Class Stuff
 
+  /** @type {boolean} */
+  static #classCanWhitespace = false;
+
+  /**
+   * Gets the value of classCanWhitespace.
+   * @returns {boolean}
+   */
+  static get classCanWhitespace() {
+    return this.#classCanWhitespace;
+  }
+
+  /**
+   * Sets the value of classCanWhitespace.
+   * @param {boolean} value
+   */
+  static set classCanWhitespace(value) {
+    if (typeof value !== 'boolean') throw new TypeError('classCanWhitespace must be a boolean');
+    this.#classCanWhitespace = value;
+  }
+
   /**
    * Adds one or more CSS class names to the element.
    * @template {TinyElement|TinyElement[]} T
@@ -5289,7 +5309,17 @@ class TinyHtml {
    * @returns {T}
    */
   static addClass(el, ...args) {
-    TinyHtml._preElems(el, 'addClass').forEach((elem) => elem.classList.add(...args));
+    /** @type {string[]} */
+    const classes = [];
+    for (const name of args) {
+      if (!TinyHtml.#classCanWhitespace) classes.push(name);
+      else {
+        const classesList = name.split(' ');
+        for (const name2 of classesList) classes.push(name2);
+      }
+    }
+
+    TinyHtml._preElems(el, 'addClass').forEach((elem) => elem.classList.add(...classes));
     return el;
   }
 
@@ -5310,7 +5340,17 @@ class TinyHtml {
    * @returns {T}
    */
   static removeClass(el, ...args) {
-    TinyHtml._preElems(el, 'removeClass').forEach((elem) => elem.classList.remove(...args));
+    /** @type {string[]} */
+    const classes = [];
+    for (const name of args) {
+      if (!TinyHtml.#classCanWhitespace) classes.push(name);
+      else {
+        const classesList = name.split(' ');
+        for (const name2 of classesList) classes.push(name2);
+      }
+    }
+
+    TinyHtml._preElems(el, 'removeClass').forEach((elem) => elem.classList.remove(...classes));
     return el;
   }
 

package/dist/v1/libs/TinyHtml.d.mts

@@ -1958,6 +1958,18 @@ declare class TinyHtml<TinyHtmlT extends TinyHtmlConstructor> {
      * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
      */
     static padding(el: TinyElement): HtmlElBoxSides;
+    /** @type {boolean} */
+    static "__#8@#classCanWhitespace": boolean;
+    /**
+     * Sets the value of classCanWhitespace.
+     * @param {boolean} value
+     */
+    static set classCanWhitespace(value: boolean);
+    /**
+     * Gets the value of classCanWhitespace.
+     * @returns {boolean}
+     */
+    static get classCanWhitespace(): boolean;
     /**
      * Adds one or more CSS class names to the element.
      * @template {TinyElement|TinyElement[]} T

package/dist/v1/libs/TinyHtml.mjs

@@ -4714,6 +4714,24 @@ class TinyHtml {
     }
     /////////////////////////////////////////////
     // TITLE: Class Stuff
+    /** @type {boolean} */
+    static #classCanWhitespace = false;
+    /**
+     * Gets the value of classCanWhitespace.
+     * @returns {boolean}
+     */
+    static get classCanWhitespace() {
+        return this.#classCanWhitespace;
+    }
+    /**
+     * Sets the value of classCanWhitespace.
+     * @param {boolean} value
+     */
+    static set classCanWhitespace(value) {
+        if (typeof value !== 'boolean')
+            throw new TypeError('classCanWhitespace must be a boolean');
+        this.#classCanWhitespace = value;
+    }
     /**
      * Adds one or more CSS class names to the element.
      * @template {TinyElement|TinyElement[]} T
@@ -4722,7 +4740,18 @@ class TinyHtml {
      * @returns {T}
      */
     static addClass(el, ...args) {
-        TinyHtml._preElems(el, 'addClass').forEach((elem) => elem.classList.add(...args));
+        /** @type {string[]} */
+        const classes = [];
+        for (const name of args) {
+            if (!TinyHtml.#classCanWhitespace)
+                classes.push(name);
+            else {
+                const classesList = name.split(' ');
+                for (const name2 of classesList)
+                    classes.push(name2);
+            }
+        }
+        TinyHtml._preElems(el, 'addClass').forEach((elem) => elem.classList.add(...classes));
         return el;
     }
     /**
@@ -4741,7 +4770,18 @@ class TinyHtml {
      * @returns {T}
      */
     static removeClass(el, ...args) {
-        TinyHtml._preElems(el, 'removeClass').forEach((elem) => elem.classList.remove(...args));
+        /** @type {string[]} */
+        const classes = [];
+        for (const name of args) {
+            if (!TinyHtml.#classCanWhitespace)
+                classes.push(name);
+            else {
+                const classesList = name.split(' ');
+                for (const name2 of classesList)
+                    classes.push(name2);
+            }
+        }
+        TinyHtml._preElems(el, 'removeClass').forEach((elem) => elem.classList.remove(...classes));
         return el;
     }
     /**

package/dist/v1/libs/TinyLoadingScreen.cjs

@@ -267,6 +267,9 @@ class TinyLoadingScreen {
       this.#overlay.classList.add('loading-overlay');
       this.#overlay.style.zIndex = String(this.#options.zIndex);
 
+      const contentBase = document.createElement('div');
+      contentBase.classList.add('loading-container');
+
       const content = document.createElement('div');
       content.classList.add('loading-content');
 
@@ -278,7 +281,8 @@ class TinyLoadingScreen {
 
       content.appendChild(spinner);
       content.appendChild(this.#messageElement);
-      this.#overlay.appendChild(content);
+      contentBase.appendChild(content);
+      this.#overlay.appendChild(contentBase);
       this.#container.appendChild(this.#overlay);
 
       // trigger fade in

package/dist/v1/libs/TinyLoadingScreen.mjs

@@ -227,6 +227,8 @@ class TinyLoadingScreen {
             this.#overlay = document.createElement('div');
             this.#overlay.classList.add('loading-overlay');
             this.#overlay.style.zIndex = String(this.#options.zIndex);
+            const contentBase = document.createElement('div');
+            contentBase.classList.add('loading-container');
             const content = document.createElement('div');
             content.classList.add('loading-content');
             const spinner = document.createElement('div');
@@ -235,7 +237,8 @@ class TinyLoadingScreen {
             this.#messageElement.classList.add('loading-message');
             content.appendChild(spinner);
             content.appendChild(this.#messageElement);
-            this.#overlay.appendChild(content);
+            contentBase.appendChild(content);
+            this.#overlay.appendChild(contentBase);
             this.#container.appendChild(this.#overlay);
             // trigger fade in
             this._removeOldClasses();

package/docs/v1/libs/TinyHtmlTips.md

@@ -69,6 +69,30 @@ const newDiv = $$$('<div class="box">Hello!</div>');
 
 ---
 
+## ⚙️ Controlling Whitespace in Class Names
+
+TinyHtml includes a static flag called `classCanWhitespace`.
+This allows you to decide whether **class names with whitespace** should be considered valid or not.
+
+```js
+// Enable or disable whitespace in class names
+TinyHtml.classCanWhitespace = true;   // ✅ allows whitespace
+console.log(TinyHtml.classCanWhitespace); // true
+
+TinyHtml.classCanWhitespace = false;  // 🚫 disallows whitespace
+console.log(TinyHtml.classCanWhitespace); // false
+```
+
+⚠️ If you try to assign a non-boolean value, TinyHtml will throw an error:
+
+```js
+// ❌ Throws TypeError
+TinyHtml.classCanWhitespace = "yes"; 
+// -> Uncaught TypeError: classCanWhitespace must be a boolean
+```
+
+---
+
 ## 🚀 Why Aliases?
 
 Aliases are especially handy when:
@@ -96,6 +120,9 @@ This makes your setup **cleaner, reusable, and consistent** across the whole pro
 // Enable debugging mode
 TinyHtml.elemDebug = true;
 
+// Allow whitespace in class names
+TinyHtml.classCanWhitespace = true;
+
 // jQuery-style single element selector
 export const $ = (queryString) => new TinyHtml(queryString);
 
@@ -133,6 +160,10 @@ newBox.mainDisplay = 'block';
 // Create an element
 const newBox2 = $$$('<div class="box">Hello!</div>');
 $('body').append(newBox);
+
+// Control class whitespace support
+console.log(TinyHtml.classCanWhitespace); // true
+TinyHtml.classCanWhitespace = false;      // disable whitespace
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-essentials",
-  "version": "1.23.0",
+  "version": "1.23.2",
   "description": "Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.",
   "scripts": {
     "test": "npm run test:mjs && npm run test:cjs && npm run test:js",