@snowztech/ui-js 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -54,8 +54,8 @@ async function copyValue(value) {
   }
 }
 function onClick() {
-  const value = this.getAttribute("data-sn-copy");
-  if (value === null) return;
+  const value = this.getAttribute("data-sn-copy") || this.closest(".sn-code")?.querySelector("pre")?.textContent;
+  if (!value) return;
   void copyValue(value).then((ok) => {
     if (!ok) return;
     this.setAttribute("data-copied", "true");
@@ -79,7 +79,9 @@ function getTheme(storageKey = DEFAULT_KEY) {
     if (stored === "light" || stored === "dark") return stored;
   } catch {
   }
-  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  const attr = document.documentElement.getAttribute("data-theme");
+  if (attr === "system") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  return attr === "light" ? "light" : "dark";
 }
 function setTheme(theme, storageKey = DEFAULT_KEY) {
   if (theme === "light") document.documentElement.setAttribute("data-theme", "light");

package/dist/index.js

@@ -21,8 +21,8 @@ async function copyValue(value) {
   }
 }
 function onClick() {
-  const value = this.getAttribute("data-sn-copy");
-  if (value === null) return;
+  const value = this.getAttribute("data-sn-copy") || this.closest(".sn-code")?.querySelector("pre")?.textContent;
+  if (!value) return;
   void copyValue(value).then((ok) => {
     if (!ok) return;
     this.setAttribute("data-copied", "true");
@@ -46,7 +46,9 @@ function getTheme(storageKey = DEFAULT_KEY) {
     if (stored === "light" || stored === "dark") return stored;
   } catch {
   }
-  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  const attr = document.documentElement.getAttribute("data-theme");
+  if (attr === "system") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  return attr === "light" ? "light" : "dark";
 }
 function setTheme(theme, storageKey = DEFAULT_KEY) {
   if (theme === "light") document.documentElement.setAttribute("data-theme", "light");

package/dist/snowztech-ui.esm.js

@@ -21,8 +21,8 @@ async function copyValue(value) {
   }
 }
 function onClick() {
-  const value = this.getAttribute("data-sn-copy");
-  if (value === null) return;
+  const value = this.getAttribute("data-sn-copy") || this.closest(".sn-code")?.querySelector("pre")?.textContent;
+  if (!value) return;
   void copyValue(value).then((ok) => {
     if (!ok) return;
     this.setAttribute("data-copied", "true");
@@ -46,7 +46,9 @@ function getTheme(storageKey = DEFAULT_KEY) {
     if (stored === "light" || stored === "dark") return stored;
   } catch {
   }
-  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  const attr = document.documentElement.getAttribute("data-theme");
+  if (attr === "system") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  return attr === "light" ? "light" : "dark";
 }
 function setTheme(theme, storageKey = DEFAULT_KEY) {
   if (theme === "light") document.documentElement.setAttribute("data-theme", "light");

package/dist/snowztech-ui.iife.js

@@ -47,8 +47,8 @@ var SnowztechUI = (() => {
     }
   }
   function onClick() {
-    const value = this.getAttribute("data-sn-copy");
-    if (value === null) return;
+    const value = this.getAttribute("data-sn-copy") || this.closest(".sn-code")?.querySelector("pre")?.textContent;
+    if (!value) return;
     void copyValue(value).then((ok) => {
       if (!ok) return;
       this.setAttribute("data-copied", "true");
@@ -72,7 +72,9 @@ var SnowztechUI = (() => {
       if (stored === "light" || stored === "dark") return stored;
     } catch {
     }
-    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "system") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+    return attr === "light" ? "light" : "dark";
   }
   function setTheme(theme, storageKey = DEFAULT_KEY) {
     if (theme === "light") document.documentElement.setAttribute("data-theme", "light");

package/dist/snowztech-ui.iife.min.js

@@ -1 +1 @@
-"use strict";var SnowztechUI=(()=>{var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},p=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of l(e))!s.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var f=t=>p(r({},"__esModule",{value:!0}),t);var L={};h(L,{init:()=>d});async function g(t){try{return await navigator.clipboard.writeText(t),!0}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select();let n=!1;try{n=document.execCommand("copy")}catch{}return document.body.removeChild(e),n}}function T(){let t=this.getAttribute("data-sn-copy");t!==null&&g(t).then(e=>{e&&(this.setAttribute("data-copied","true"),window.setTimeout(()=>this.removeAttribute("data-copied"),1200))})}function y(t){t.dataset.snBound!=="copy"&&(t.dataset.snBound="copy",t.addEventListener("click",T))}function c(t=document){t.querySelectorAll("[data-sn-copy]").forEach(y)}var i="theme";function E(t=i){try{let e=localStorage.getItem(t);if(e==="light"||e==="dark")return e}catch{}return document.documentElement.getAttribute("data-theme")==="light"?"light":"dark"}function v(t,e=i){t==="light"?document.documentElement.setAttribute("data-theme","light"):document.documentElement.removeAttribute("data-theme");try{localStorage.setItem(e,t)}catch{}}function x(t=i){let e=E(t)==="dark"?"light":"dark";return v(e,t),e}function b(){let t=this.getAttribute("data-sn-storage-key")||i;x(t)}function k(t){t.dataset.snBound!=="theme"&&(t.dataset.snBound="theme",t.addEventListener("click",b))}function u(t=document){t.querySelectorAll("[data-sn-theme-toggle]").forEach(k)}function d(t=document){c(t),u(t)}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>d(),{once:!0}):d());return f(L);})();
+"use strict";var SnowztechUI=(()=>{var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},p=(t,e,n,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of s(e))!l.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(d=m(e,o))||d.enumerable});return t};var f=t=>p(r({},"__esModule",{value:!0}),t);var L={};h(L,{init:()=>c});async function g(t){try{return await navigator.clipboard.writeText(t),!0}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select();let n=!1;try{n=document.execCommand("copy")}catch{}return document.body.removeChild(e),n}}function y(){let t=this.getAttribute("data-sn-copy")||this.closest(".sn-code")?.querySelector("pre")?.textContent;t&&g(t).then(e=>{e&&(this.setAttribute("data-copied","true"),window.setTimeout(()=>this.removeAttribute("data-copied"),1200))})}function T(t){t.dataset.snBound!=="copy"&&(t.dataset.snBound="copy",t.addEventListener("click",y))}function a(t=document){t.querySelectorAll("[data-sn-copy]").forEach(T)}var i="theme";function E(t=i){try{let n=localStorage.getItem(t);if(n==="light"||n==="dark")return n}catch{}let e=document.documentElement.getAttribute("data-theme");return e==="system"?matchMedia("(prefers-color-scheme: light)").matches?"light":"dark":e==="light"?"light":"dark"}function v(t,e=i){t==="light"?document.documentElement.setAttribute("data-theme","light"):document.documentElement.removeAttribute("data-theme");try{localStorage.setItem(e,t)}catch{}}function x(t=i){let e=E(t)==="dark"?"light":"dark";return v(e,t),e}function b(){let t=this.getAttribute("data-sn-storage-key")||i;x(t)}function k(t){t.dataset.snBound!=="theme"&&(t.dataset.snBound="theme",t.addEventListener("click",b))}function u(t=document){t.querySelectorAll("[data-sn-theme-toggle]").forEach(k)}function c(t=document){a(t),u(t)}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>c(),{once:!0}):c());return f(L);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowztech/ui-js",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Optional vanilla bindings for @snowztech/ui-css. Wires data-sn-* attributes for static HTML.",
   "license": "MIT",
   "author": {

package/src/copy-button.ts

@@ -1,4 +1,5 @@
-// Wires every <button data-sn-copy="…"> on the page.
+// Wires every <button data-sn-copy="…"> on the page. Leave the value empty
+// inside a .sn-code block to copy that block's code.
 // On click: copies the attr's value, flips data-copied="true" for ~1.2s.
 // CSS handles the visual swap (.sn-copy-btn[data-copied="true"]).
 
@@ -24,8 +25,11 @@ async function copyValue(value: string): Promise<boolean> {
 }
 
 function onClick(this: HTMLElement) {
-  const value = this.getAttribute("data-sn-copy");
-  if (value === null) return;
+  // Empty attribute inside a .sn-code block copies the block's own code.
+  const value =
+    this.getAttribute("data-sn-copy") ||
+    this.closest(".sn-code")?.querySelector("pre")?.textContent;
+  if (!value) return;
   void copyValue(value).then((ok) => {
     if (!ok) return;
     this.setAttribute("data-copied", "true");

package/src/theme-toggle.ts

@@ -10,7 +10,9 @@ export function getTheme(storageKey = DEFAULT_KEY): Theme {
     const stored = localStorage.getItem(storageKey) as Theme | null;
     if (stored === "light" || stored === "dark") return stored;
   } catch { /* ignore */ }
-  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  const attr = document.documentElement.getAttribute("data-theme");
+  if (attr === "system") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  return attr === "light" ? "light" : "dark";
 }
 
 export function setTheme(theme: Theme, storageKey = DEFAULT_KEY): void {