@symbo.ls/scratch 3.8.6 → 3.8.8

package/dist/cjs/set.js

@@ -101,14 +101,37 @@ const setEach = (factoryName, props) => {
 const changeGlobalTheme = (newTheme) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   CONFIG.globalTheme = newTheme;
+  if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", newTheme);
+  }
   for (const key in CONFIG.CSS_VARS) {
     if (key.startsWith("--theme-")) delete CONFIG.CSS_VARS[key];
   }
   for (const key in CONFIG.CSS_MEDIA_VARS) {
     delete CONFIG.CSS_MEDIA_VARS[key];
   }
-  if (CONFIG.theme) {
-    setEach("theme", CONFIG.theme);
+  const source = CONFIG._originalTheme || CONFIG.theme;
+  if (source) {
+    const fresh = JSON.parse(JSON.stringify(source));
+    CONFIG.theme = fresh;
+    setEach("theme", fresh);
+  }
+  if (typeof document !== "undefined" && CONFIG.CSS_VARS) {
+    const sheets = document.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        const rules = sheets[i].cssRules;
+        for (let j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText === ":root") {
+            for (const key in CONFIG.CSS_VARS) {
+              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key]);
+            }
+            return CONFIG;
+          }
+        }
+      } catch (e) {
+      }
+    }
   }
   return CONFIG;
 };
@@ -155,6 +178,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
   }
   if (CONFIG.verbose) console.log(CONFIG);
+  if (typeof document !== "undefined" && CONFIG.globalTheme && CONFIG.globalTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", CONFIG.globalTheme);
+  }
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
   const keys = Object.keys(config);
   const keySet = new Set(keys);
@@ -164,6 +190,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
       (0, import_utils.deepMerge)(config[lower], config[key]);
     }
   });
+  if (config.theme && !CONFIG._originalTheme) {
+    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme));
+  }
   keys.map((key) => {
     const lower = key.toLowerCase();
     if (lower !== key && keySet.has(lower)) return;

package/dist/cjs/system/svg.js

@@ -60,9 +60,9 @@ const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   for (const key in LIBRARY) lib[key] = CONFIG.icons[key];
   appendSVG(lib, options);
 };
-const createSVGSpriteElement = (options = { isRoot: true }) => {
-  if (!import_utils.document || !import_utils.document.createElementNS) return;
-  const svgElem = import_utils.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
+  if (!doc || !doc.createElementNS) return;
+  const svgElem = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
   if (options.isRoot) {
     svgElem.setAttribute("aria-hidden", "true");
     svgElem.setAttribute("width", "0");
@@ -83,15 +83,24 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
   }
   const exists = doc.querySelector("#svgSprite");
   const SVGsprite = (0, import_utils2.generateSprite)(lib);
+  const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
   if (exists) {
-    const tempSVG = createSVGSpriteElement({ isRoot: false });
-    tempSVG.innerHTML = SVGsprite;
-    exists.append(...tempSVG.children);
+    if (doc.body.insertAdjacentHTML) {
+      exists.insertAdjacentHTML("beforeend", SVGsprite);
+    } else {
+      const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
+      tempSVG.innerHTML = SVGsprite;
+      exists.append(...tempSVG.children);
+    }
   } else {
-    const svgSpriteDOM = createSVGSpriteElement();
-    if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-      svgSpriteDOM.innerHTML = SVGsprite;
-      doc.body.prepend(svgSpriteDOM);
+    if (doc.body.insertAdjacentHTML) {
+      doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
+    } else {
+      const svgSpriteDOM = createSVGSpriteElement(doc);
+      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+        svgSpriteDOM.innerHTML = SVGsprite;
+        doc.body.prepend(svgSpriteDOM);
+      }
     }
   }
 };

package/dist/esm/set.js

@@ -88,14 +88,37 @@ const setEach = (factoryName, props) => {
 const changeGlobalTheme = (newTheme) => {
   const CONFIG = getActiveConfig();
   CONFIG.globalTheme = newTheme;
+  if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", newTheme);
+  }
   for (const key in CONFIG.CSS_VARS) {
     if (key.startsWith("--theme-")) delete CONFIG.CSS_VARS[key];
   }
   for (const key in CONFIG.CSS_MEDIA_VARS) {
     delete CONFIG.CSS_MEDIA_VARS[key];
   }
-  if (CONFIG.theme) {
-    setEach("theme", CONFIG.theme);
+  const source = CONFIG._originalTheme || CONFIG.theme;
+  if (source) {
+    const fresh = JSON.parse(JSON.stringify(source));
+    CONFIG.theme = fresh;
+    setEach("theme", fresh);
+  }
+  if (typeof document !== "undefined" && CONFIG.CSS_VARS) {
+    const sheets = document.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        const rules = sheets[i].cssRules;
+        for (let j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText === ":root") {
+            for (const key in CONFIG.CSS_VARS) {
+              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key]);
+            }
+            return CONFIG;
+          }
+        }
+      } catch (e) {
+      }
+    }
   }
   return CONFIG;
 };
@@ -142,6 +165,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
   }
   if (CONFIG.verbose) console.log(CONFIG);
+  if (typeof document !== "undefined" && CONFIG.globalTheme && CONFIG.globalTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", CONFIG.globalTheme);
+  }
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
   const keys = Object.keys(config);
   const keySet = new Set(keys);
@@ -151,6 +177,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
       deepMerge(config[lower], config[key]);
     }
   });
+  if (config.theme && !CONFIG._originalTheme) {
+    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme));
+  }
   keys.map((key) => {
     const lower = key.toLowerCase();
     if (lower !== key && keySet.has(lower)) return;

package/dist/esm/system/svg.js

@@ -34,9 +34,9 @@ const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   for (const key in LIBRARY) lib[key] = CONFIG.icons[key];
   appendSVG(lib, options);
 };
-const createSVGSpriteElement = (options = { isRoot: true }) => {
-  if (!document || !document.createElementNS) return;
-  const svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
+  if (!doc || !doc.createElementNS) return;
+  const svgElem = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
   if (options.isRoot) {
     svgElem.setAttribute("aria-hidden", "true");
     svgElem.setAttribute("width", "0");
@@ -57,15 +57,24 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
   }
   const exists = doc.querySelector("#svgSprite");
   const SVGsprite = generateSprite(lib);
+  const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
   if (exists) {
-    const tempSVG = createSVGSpriteElement({ isRoot: false });
-    tempSVG.innerHTML = SVGsprite;
-    exists.append(...tempSVG.children);
+    if (doc.body.insertAdjacentHTML) {
+      exists.insertAdjacentHTML("beforeend", SVGsprite);
+    } else {
+      const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
+      tempSVG.innerHTML = SVGsprite;
+      exists.append(...tempSVG.children);
+    }
   } else {
-    const svgSpriteDOM = createSVGSpriteElement();
-    if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-      svgSpriteDOM.innerHTML = SVGsprite;
-      doc.body.prepend(svgSpriteDOM);
+    if (doc.body.insertAdjacentHTML) {
+      doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
+    } else {
+      const svgSpriteDOM = createSVGSpriteElement(doc);
+      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+        svgSpriteDOM.innerHTML = SVGsprite;
+        doc.body.prepend(svgSpriteDOM);
+      }
     }
   }
 };

package/dist/iife/index.js

@@ -182,6 +182,7 @@ var SmblsScratch = (() => {
       exec = (param, element, state, context) => {
         if (isFunction(param)) {
           if (!element) return;
+          if (typeof param.call !== "function") return param;
           const result = param.call(
             element,
             element,
@@ -2709,9 +2710,9 @@ var SmblsScratch = (() => {
     for (const key in LIBRARY) lib[key] = CONFIG2.icons[key];
     appendSVG(lib, options);
   };
-  var createSVGSpriteElement = (options = { isRoot: true }) => {
-    if (!document2 || !document2.createElementNS) return;
-    const svgElem = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
+  var createSVGSpriteElement = (doc, options = { isRoot: true }) => {
+    if (!doc || !doc.createElementNS) return;
+    const svgElem = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
     if (options.isRoot) {
       svgElem.setAttribute("aria-hidden", "true");
       svgElem.setAttribute("width", "0");
@@ -2732,15 +2733,24 @@ var SmblsScratch = (() => {
     }
     const exists = doc.querySelector("#svgSprite");
     const SVGsprite = generateSprite(lib);
+    const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
     if (exists) {
-      const tempSVG = createSVGSpriteElement({ isRoot: false });
-      tempSVG.innerHTML = SVGsprite;
-      exists.append(...tempSVG.children);
+      if (doc.body.insertAdjacentHTML) {
+        exists.insertAdjacentHTML("beforeend", SVGsprite);
+      } else {
+        const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
+        tempSVG.innerHTML = SVGsprite;
+        exists.append(...tempSVG.children);
+      }
     } else {
-      const svgSpriteDOM = createSVGSpriteElement();
-      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-        svgSpriteDOM.innerHTML = SVGsprite;
-        doc.body.prepend(svgSpriteDOM);
+      if (doc.body.insertAdjacentHTML) {
+        doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
+      } else {
+        const svgSpriteDOM = createSVGSpriteElement(doc);
+        if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+          svgSpriteDOM.innerHTML = SVGsprite;
+          doc.body.prepend(svgSpriteDOM);
+        }
       }
     }
   };
@@ -3067,14 +3077,37 @@ var SmblsScratch = (() => {
   var changeGlobalTheme = (newTheme) => {
     const CONFIG2 = getActiveConfig();
     CONFIG2.globalTheme = newTheme;
+    if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
+      document.documentElement.setAttribute("data-theme", newTheme);
+    }
     for (const key in CONFIG2.CSS_VARS) {
       if (key.startsWith("--theme-")) delete CONFIG2.CSS_VARS[key];
     }
     for (const key in CONFIG2.CSS_MEDIA_VARS) {
       delete CONFIG2.CSS_MEDIA_VARS[key];
     }
-    if (CONFIG2.theme) {
-      setEach("theme", CONFIG2.theme);
+    const source = CONFIG2._originalTheme || CONFIG2.theme;
+    if (source) {
+      const fresh = JSON.parse(JSON.stringify(source));
+      CONFIG2.theme = fresh;
+      setEach("theme", fresh);
+    }
+    if (typeof document !== "undefined" && CONFIG2.CSS_VARS) {
+      const sheets = document.styleSheets;
+      for (let i = 0; i < sheets.length; i++) {
+        try {
+          const rules = sheets[i].cssRules;
+          for (let j = 0; j < rules.length; j++) {
+            if (rules[j].selectorText === ":root") {
+              for (const key in CONFIG2.CSS_VARS) {
+                rules[j].style.setProperty(key, CONFIG2.CSS_VARS[key]);
+              }
+              return CONFIG2;
+            }
+          }
+        } catch (e) {
+        }
+      }
     }
     return CONFIG2;
   };
@@ -3121,6 +3154,9 @@ var SmblsScratch = (() => {
       CONFIG2.SEMANTIC_ICONS = CONFIG2.semantic_icons;
     }
     if (CONFIG2.verbose) console.log(CONFIG2);
+    if (typeof document !== "undefined" && CONFIG2.globalTheme && CONFIG2.globalTheme !== "auto") {
+      document.documentElement.setAttribute("data-theme", CONFIG2.globalTheme);
+    }
     if (!CONFIG2.__svg_cache) CONFIG2.__svg_cache = {};
     const keys = Object.keys(config);
     const keySet = new Set(keys);
@@ -3130,6 +3166,9 @@ var SmblsScratch = (() => {
         deepMerge(config[lower], config[key]);
       }
     });
+    if (config.theme && !CONFIG2._originalTheme) {
+      CONFIG2._originalTheme = JSON.parse(JSON.stringify(config.theme));
+    }
     keys.map((key) => {
       const lower = key.toLowerCase();
       if (lower !== key && keySet.has(lower)) return;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.8.6",
+  "version": "3.8.8",
   "files": [
     "dist",
     "*.js",
@@ -33,8 +33,8 @@
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.8.6",
-    "@symbo.ls/smbls-utils": "^3.8.6",
+    "@domql/utils": "^3.8.8",
+    "@symbo.ls/smbls-utils": "^3.8.8",
     "color-contrast-checker": "^1.5.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",

package/src/set.js

@@ -109,6 +109,11 @@ export const changeGlobalTheme = (newTheme) => {
   const CONFIG = getActiveConfig()
   CONFIG.globalTheme = newTheme
 
+  // Set data-theme attribute on document element for CSS selector-based theming
+  if (typeof document !== 'undefined' && newTheme && newTheme !== 'auto') {
+    document.documentElement.setAttribute('data-theme', newTheme)
+  }
+
   // Clear theme-related CSS vars
   for (const key in CONFIG.CSS_VARS) {
     if (key.startsWith('--theme-')) delete CONFIG.CSS_VARS[key]
@@ -119,9 +124,31 @@ export const changeGlobalTheme = (newTheme) => {
     delete CONFIG.CSS_MEDIA_VARS[key]
   }
 
-  // Re-process all themes with the new globalTheme
-  if (CONFIG.theme) {
-    setEach('theme', CONFIG.theme)
+  // Re-process themes from original definitions (not mutated processed ones)
+  const source = CONFIG._originalTheme || CONFIG.theme
+  if (source) {
+    // Deep clone to avoid re-mutating the originals
+    const fresh = JSON.parse(JSON.stringify(source))
+    CONFIG.theme = fresh
+    setEach('theme', fresh)
+  }
+
+  // Apply updated CSS vars to the existing :root stylesheet rule
+  if (typeof document !== 'undefined' && CONFIG.CSS_VARS) {
+    const sheets = document.styleSheets
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        const rules = sheets[i].cssRules
+        for (let j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText === ':root') {
+            for (const key in CONFIG.CSS_VARS) {
+              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key])
+            }
+            return CONFIG
+          }
+        }
+      } catch (e) { /* cross-origin stylesheet */ }
+    }
   }
 
   return CONFIG
@@ -174,6 +201,11 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   }
   if (CONFIG.verbose) console.log(CONFIG)
 
+  // Set data-theme attribute on document for CSS selector-based theming
+  if (typeof document !== 'undefined' && CONFIG.globalTheme && CONFIG.globalTheme !== 'auto') {
+    document.documentElement.setAttribute('data-theme', CONFIG.globalTheme)
+  }
+
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}
 
   const keys = Object.keys(config)
@@ -187,6 +219,11 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     }
   })
 
+  // Store original theme definitions before processing mutates them
+  if (config.theme && !CONFIG._originalTheme) {
+    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme))
+  }
+
   // Process only lowercase keys (skip UPPERCASE when lowercase equivalent exists)
   keys.map((key) => {
     const lower = key.toLowerCase()

package/src/system/svg.js

@@ -44,9 +44,9 @@ export const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   appendSVG(lib, options)
 }
 
-const createSVGSpriteElement = (options = { isRoot: true }) => {
-  if (!document || !document.createElementNS) return
-  const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
+  if (!doc || !doc.createElementNS) return
+  const svgElem = doc.createElementNS('http://www.w3.org/2000/svg', 'svg')
   if (options.isRoot) {
     svgElem.setAttribute('aria-hidden', 'true')
     svgElem.setAttribute('width', '0')
@@ -71,16 +71,25 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
   const exists = doc.querySelector('#svgSprite')
   const SVGsprite = generateSprite(lib)
 
+  const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`
+
   if (exists) {
-    const tempSVG = createSVGSpriteElement({ isRoot: false })
-    // const svgSpriteWithoutRoot = doc.createElement('template')
-    tempSVG.innerHTML = SVGsprite
-    exists.append(...tempSVG.children)
+    if (doc.body.insertAdjacentHTML) {
+      exists.insertAdjacentHTML('beforeend', SVGsprite)
+    } else {
+      const tempSVG = createSVGSpriteElement(doc, { isRoot: false })
+      tempSVG.innerHTML = SVGsprite
+      exists.append(...tempSVG.children)
+    }
   } else {
-    const svgSpriteDOM = createSVGSpriteElement()
-    if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-      svgSpriteDOM.innerHTML = SVGsprite
-      doc.body.prepend(svgSpriteDOM)
+    if (doc.body.insertAdjacentHTML) {
+      doc.body.insertAdjacentHTML('afterbegin', spriteHtml)
+    } else {
+      const svgSpriteDOM = createSVGSpriteElement(doc)
+      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+        svgSpriteDOM.innerHTML = SVGsprite
+        doc.body.prepend(svgSpriteDOM)
+      }
     }
   }
 }