kss-modern 1.3.0 → 1.4.0

package/README.md

@@ -6,7 +6,7 @@ A modern, KSS-compatible styleguide generator. Parses KSS comment blocks from CS
 
 - KSS-compatible comment parsing from CSS/SCSS files
 - Live component previews with modifier variants
-- Per-section theme dropdown (`Themes:`) to switch previews between the default and themed views
+- Theme dropdowns — a global one in the header (`themes` option) and per-section ones (`Themes:`) — switch previews between the default and themed views
 - Pug template support via worker thread pool
 - Color palette and icon gallery documentation
 - Figma embed integration with light/dark theme sync

package/dist/node/lib/index.d.mts

@@ -105,6 +105,16 @@ interface StyleguideConfiguration {
     contentDir: `${string}/`;
     projectTitle: string;
     deactivateDarkMode?: boolean;
+    /**
+     * Themes offered by the header's global **Theme** dropdown. Each entry is a theme class (or class
+     * list — `'theme-midnight'`, `'.theme-midnight.compact'`) that is added to the `<html>` of every
+     * preview iframe while selected, plus the label shown in the dropdown. A section's own `Themes:`
+     * dropdown overrides the global theme for that section.
+     */
+    themes?: {
+        value: string;
+        label: string;
+    }[];
     launchInEditor?: boolean | {
         rootDir: string;
     };

package/dist/node/lib/index.d.ts

@@ -105,6 +105,16 @@ interface StyleguideConfiguration {
     contentDir: `${string}/`;
     projectTitle: string;
     deactivateDarkMode?: boolean;
+    /**
+     * Themes offered by the header's global **Theme** dropdown. Each entry is a theme class (or class
+     * list — `'theme-midnight'`, `'.theme-midnight.compact'`) that is added to the `<html>` of every
+     * preview iframe while selected, plus the label shown in the dropdown. A section's own `Themes:`
+     * dropdown overrides the global theme for that section.
+     */
+    themes?: {
+        value: string;
+        label: string;
+    }[];
     launchInEditor?: boolean | {
         rootDir: string;
     };

package/dist/node/lib/index.mjs

@@ -1435,6 +1435,7 @@ function getHeaderHtml(config) {
         </button>
 
         <div class="flex gap-4">
+          ${config.themes?.length ? renderGlobalThemeSelect(config.themes) : ""}
           ${config.mode === "development" && config.launchInEditor ? `
               <form class="hidden editor-select md:block">
                 <fieldset class="flex items-center rounded-3xl border border-styleguide-border">
@@ -1612,19 +1613,19 @@ function renderTab(data, aside = "") {
     </div>
   `;
 }
-function renderThemeSelect(section, themes) {
-  const selectId = `theme-select-${sectionSanitizeId(section.id)}`;
+function renderThemeSelectControl(id, themes, scope) {
+  const wrapperClass = scope === "global" ? "hidden md:inline-flex" : "inline-flex";
   return `
-    <div class="inline-flex items-center gap-2 text-sm">
-        <label for="${selectId}" class="select-none">Theme</label>
+    <div class="${wrapperClass} items-center gap-2 text-sm">
+        <label for="${id}" class="select-none">Theme</label>
         <span class="relative inline-flex">
             <select
-                id="${selectId}"
-                class="section-theme-select appearance-none cursor-pointer rounded-md border py-1.5 pl-3 pr-8 text-sm transition duration-200 border-styleguide-border bg-styleguide-bg-highlight hover:text-styleguide-highlight focus:text-styleguide-highlight focus-visible:outline focus-visible:outline-blue-600"
-                data-section-theme-select
+                id="${id}"
+                class="appearance-none cursor-pointer rounded-md border py-1.5 pl-3 pr-8 text-sm transition duration-200 border-styleguide-border bg-styleguide-bg-highlight hover:text-styleguide-highlight focus:text-styleguide-highlight focus-visible:outline focus-visible:outline-blue-600"
+                data-${scope}-theme-select
             >
                 <option value="">Default</option>
-                ${themes.map((theme) => `<option value="${sanitizeSpecialCharacters(themeClassList(theme.value))}">${sanitizeSpecialCharacters(theme.description)}</option>`).join("\n")}
+                ${themes.map((theme) => `<option value="${sanitizeSpecialCharacters(themeClassList(theme.value))}">${sanitizeSpecialCharacters(theme.label)}</option>`).join("\n")}
             </select>
             <svg class="pointer-events-none absolute top-1/2 right-2.5 size-3.5 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                 <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
@@ -1633,6 +1634,16 @@ function renderThemeSelect(section, themes) {
     </div>
   `;
 }
+function renderGlobalThemeSelect(themes) {
+  return renderThemeSelectControl("global-theme-select", themes, "global");
+}
+function renderThemeSelect(section, themes) {
+  return renderThemeSelectControl(
+    `theme-select-${sectionSanitizeId(section.id)}`,
+    themes.map((theme) => ({ value: theme.value, label: theme.description })),
+    "section"
+  );
+}
 function getMainContentHtml(secondLevelSection, config) {
   let output = "";
   function renderSection(section) {
@@ -2384,7 +2395,7 @@ document.addEventListener("DOMContentLoaded", () => {
 //#endregion
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-CWqxR9nN.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-tkLDBWOv.js"><\/script>
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">

package/dist/styleguide-assets/.vite/manifest.json

@@ -11,12 +11,19 @@
     "file": "code-highlight-Fm7cxf-E.js",
     "name": "code-highlight"
   },
+  "_preview-theme-DS4xqXIm.js": {
+    "file": "preview-theme-DS4xqXIm.js",
+    "name": "preview-theme",
+    "imports": [
+      "_section-previews-CnlrC8Gz.js"
+    ]
+  },
   "_rolldown-runtime-B1bRi_D7.js": {
     "file": "rolldown-runtime-B1bRi_D7.js",
     "name": "rolldown-runtime"
   },
-  "_section-previews-V4M5aSu6.js": {
-    "file": "section-previews-V4M5aSu6.js",
+  "_section-previews-CnlrC8Gz.js": {
+    "file": "section-previews-CnlrC8Gz.js",
     "name": "section-previews"
   },
   "_shared-hGcWlnRM.js": {
@@ -46,14 +53,14 @@
     ]
   },
   "client/lib/a11y-report.ts": {
-    "file": "a11y-report-DJQyYaLp.js",
+    "file": "a11y-report-BFnWMaWr.js",
     "name": "a11y-report",
     "src": "client/lib/a11y-report.ts",
     "isDynamicEntry": true,
     "imports": [
       "_utils-DtB-AzJa.js",
       "_audit-runner-Ch009v98.js",
-      "_section-previews-V4M5aSu6.js"
+      "_section-previews-CnlrC8Gz.js"
     ]
   },
   "client/lib/clipboard.ts": {
@@ -73,8 +80,17 @@
     "src": "client/lib/editor-select.ts",
     "isDynamicEntry": true
   },
+  "client/lib/global-theme-select.ts": {
+    "file": "global-theme-select-DM7GN8Dn.js",
+    "name": "global-theme-select",
+    "src": "client/lib/global-theme-select.ts",
+    "isDynamicEntry": true,
+    "imports": [
+      "_preview-theme-DS4xqXIm.js"
+    ]
+  },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-Cp2OkhS9.js",
+    "file": "html-validator-sgeZtEeH.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
@@ -83,7 +99,7 @@
       "_utils-DtB-AzJa.js",
       "_shared-hGcWlnRM.js",
       "_audit-runner-Ch009v98.js",
-      "_section-previews-V4M5aSu6.js"
+      "_section-previews-CnlrC8Gz.js"
     ]
   },
   "client/lib/icons.ts": {
@@ -97,12 +113,13 @@
     ]
   },
   "client/lib/section-theme-select.ts": {
-    "file": "section-theme-select-ygaSXIuK.js",
+    "file": "section-theme-select-BHhiP4pl.js",
     "name": "section-theme-select",
     "src": "client/lib/section-theme-select.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_section-previews-V4M5aSu6.js"
+      "_section-previews-CnlrC8Gz.js",
+      "_preview-theme-DS4xqXIm.js"
     ]
   },
   "client/preview-inline.ts": {
@@ -112,7 +129,7 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-CWqxR9nN.js",
+    "file": "preview-tkLDBWOv.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
@@ -128,6 +145,7 @@
       "client/lib/html-validator.ts",
       "client/lib/icons.ts",
       "client/lib/clipboard.ts",
+      "client/lib/global-theme-select.ts",
       "client/lib/section-theme-select.ts",
       "client/lib/editor-select.ts"
     ]

package/dist/styleguide-assets/{a11y-report-DJQyYaLp.js → a11y-report-BFnWMaWr.js}

@@ -1,6 +1,6 @@
 import { r as e } from "./utils-DtB-AzJa.js";
 import { a as t, i as n, n as r, o as i, r as a } from "./audit-runner-Ch009v98.js";
-import { n as o, t as s } from "./section-previews-V4M5aSu6.js";
+import { n as o, r as s } from "./section-previews-CnlrC8Gz.js";
 //#region client/lib/a11y-report.ts
 var c = {
 	violations: ["violations", "incomplete"],
@@ -10,8 +10,8 @@ function l(t) {
 	return e(t.trim()).replace(/^section-/, "");
 }
 function u() {
-	return Array.from(document.querySelectorAll(s)).flatMap((e) => {
-		let { base: t, modifiers: n } = o(e);
+	return Array.from(document.querySelectorAll(o)).flatMap((e) => {
+		let { base: t, modifiers: n } = s(e);
 		if (!t) return [];
 		let r = Number.parseInt(e.dataset.sourceLine ?? "", 10);
 		return [{

package/dist/styleguide-assets/global-theme-select-DM7GN8Dn.js

@@ -0,0 +1,7 @@
+import { i as e, r as t, t as n } from "./preview-theme-DS4xqXIm.js";
+//#region client/lib/global-theme-select.ts
+function r(r) {
+	e(r, n, document), t();
+}
+//#endregion
+export { r as default };

package/dist/styleguide-assets/{html-validator-Cp2OkhS9.js → html-validator-sgeZtEeH.js}

@@ -2,7 +2,7 @@ import { t as e } from "./code-highlight-Fm7cxf-E.js";
 import { n as t, t as n } from "./utils-DtB-AzJa.js";
 import { n as r } from "./shared-hGcWlnRM.js";
 import { a as i, i as a, n as o, o as s, r as c } from "./audit-runner-Ch009v98.js";
-import { n as l, t as u } from "./section-previews-V4M5aSu6.js";
+import { n as l, r as u } from "./section-previews-CnlrC8Gz.js";
 //#region lib/template-utils.ts
 var d = (e, t) => e ? t() : "";
 function f(e, t) {
@@ -66,7 +66,7 @@ async function g(g, _, v) {
 			}, 2e3);
 		}
 	};
-	let S = await i(b), { modifiers: C } = l(b.closest(u)), w = (await Promise.all(C.map(async (e) => {
+	let S = await i(b), { modifiers: C } = u(b.closest(l)), w = (await Promise.all(C.map(async (e) => {
 		try {
 			return {
 				iframe: e,

package/dist/styleguide-assets/preview-theme-DS4xqXIm.js

@@ -0,0 +1,50 @@
+import { n as e, t } from "./section-previews-CnlrC8Gz.js";
+//#region client/lib/preview-theme.ts
+var n = "data-theme-class", r = "theme", i = "in2global-theme", a = "in2section-theme:", o = "[data-global-theme-select]", s = "[data-section-theme-select]", c = "a[href^=\"/fullpage-\"]";
+function l(e) {
+	return e.split(/\s+/).filter(Boolean);
+}
+function u(e, t) {
+	let r = e.getAttribute(n) ?? "";
+	if (r === t) return;
+	t ? e.setAttribute(n, t) : e.removeAttribute(n);
+	let i = e.contentDocument?.documentElement;
+	i && (i.classList.remove(...l(r)), i.classList.add(...l(t)));
+}
+function d(e, t) {
+	let n = new URL(e.getAttribute("href"), window.location.href);
+	t ? n.searchParams.set(r, t) : n.searchParams.delete(r);
+	let i = `${n.pathname}${n.search}${n.hash}`;
+	i !== e.getAttribute("href") && e.setAttribute("href", i);
+}
+function f(e) {
+	let t = e?.querySelector(s), n = document.querySelector(o);
+	return t?.value || n?.value || "";
+}
+function p(n = document) {
+	n.querySelectorAll(t).forEach((t) => {
+		u(t, f(t.closest(e)));
+	}), n.querySelectorAll(c).forEach((t) => {
+		d(t, f(t.closest(e)));
+	});
+}
+function m(e) {
+	try {
+		return localStorage.getItem(e);
+	} catch {
+		return null;
+	}
+}
+function h(e, t) {
+	try {
+		t ? localStorage.setItem(e, t) : localStorage.removeItem(e);
+	} catch {}
+}
+function g(e, t, n) {
+	let r = m(t);
+	r && Array.from(e.options).some((e) => e.value === r) && (e.value = r), e.addEventListener("change", () => {
+		h(t, e.value), p(n);
+	});
+}
+//#endregion
+export { g as i, a as n, p as r, i as t };

package/dist/styleguide-assets/{preview-CWqxR9nN.js → preview-tkLDBWOv.js}

@@ -1081,7 +1081,7 @@ q.addEventListener("keydown", Je), Y.forEach((e) => e.addEventListener("keydown"
 	let t = e.target, n = new URL(window.location.href), r = new URL(t.href);
 	n.pathname === r.pathname && n.search === r.search && await We();
 }), window.kssAudit = async (e) => {
-	let { runStyleguideAudit: t } = await import("./a11y-report-DJQyYaLp.js");
+	let { runStyleguideAudit: t } = await import("./a11y-report-BFnWMaWr.js");
 	return t(e);
 }, document.querySelectorAll(".styleguide-section").forEach((e) => {
 	new ResizeObserver(() => {
@@ -1097,7 +1097,7 @@ Xe.length > 0 && Xe.forEach((e) => {
 });
 var $ = document.querySelectorAll("[data-code-audit-iframe]"), Ze = document.querySelector("#code-audit-dialog"), Qe = document.querySelector(".dialog-backdrop");
 $.length > 0 && Ze && Qe && (async () => {
-	let { auditCode: e } = await import("./html-validator-Cp2OkhS9.js"), { show: t, close: n } = s(Ze, Qe);
+	let { auditCode: e } = await import("./html-validator-sgeZtEeH.js"), { show: t, close: n } = s(Ze, Qe);
 	$.forEach((r) => r.addEventListener("click", async () => {
 		$.forEach((e) => e.setAttribute("aria-expanded", "false")), r.setAttribute("disabled", ""), await e(r, Ze, n), r.removeAttribute("disabled"), r.setAttribute("aria-expanded", "true"), await t(void 0, () => {
 			$.forEach((e) => {
@@ -1134,8 +1134,10 @@ window.addEventListener("scroll", () => {
 		document.body.classList.remove("is-scrolling");
 	}, 250);
 });
-var ot = document.querySelectorAll("[data-section-theme-select]");
-ot.length > 0 && import("./section-theme-select-ygaSXIuK.js").then(({ default: e }) => e(ot)).catch(console.error);
-var st = document.querySelector(".editor-select");
-st && import("./editor-select-DIZFtqe7.js").then(({ default: e }) => e(st)).catch(console.error);
+var ot = document.querySelector("[data-global-theme-select]");
+ot && import("./global-theme-select-DM7GN8Dn.js").then(({ default: e }) => e(ot)).catch(console.error);
+var st = document.querySelectorAll("[data-section-theme-select]");
+st.length > 0 && import("./section-theme-select-BHhiP4pl.js").then(({ default: e }) => e(st)).catch(console.error);
+var ct = document.querySelector(".editor-select");
+ct && import("./editor-select-DIZFtqe7.js").then(({ default: e }) => e(ct)).catch(console.error);
 //#endregion

package/dist/styleguide-assets/{section-previews-V4M5aSu6.js → section-previews-CnlrC8Gz.js}

@@ -1,10 +1,10 @@
 //#region client/lib/section-previews.ts
-var e = ".styleguide-section";
-function t(e) {
+var e = ".styleguide-section", t = "iframe.preview-iframe";
+function n(e) {
 	return {
 		base: e?.querySelector("iframe.preview-iframe:not([data-modifier])") ?? null,
 		modifiers: Array.from(e?.querySelectorAll("iframe.preview-iframe[data-modifier]") ?? [])
 	};
 }
 //#endregion
-export { t as n, e as t };
+export { e as n, n as r, t };

package/dist/styleguide-assets/section-theme-select-BHhiP4pl.js

@@ -0,0 +1,12 @@
+import { n as e } from "./section-previews-CnlrC8Gz.js";
+import { i as t, n, r } from "./preview-theme-DS4xqXIm.js";
+//#region client/lib/section-theme-select.ts
+function i(i) {
+	for (let r of i) {
+		let i = r.closest(e);
+		i && t(r, `${n}${i.getAttribute("data-section-reference") ?? i.id}`, i);
+	}
+	r();
+}
+//#endregion
+export { i as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kss-modern",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Modern KSS compatible styleguide generator",
   "keywords": [
     "kss",

package/dist/styleguide-assets/section-theme-select-ygaSXIuK.js

@@ -1,48 +0,0 @@
-import { n as e, t } from "./section-previews-V4M5aSu6.js";
-//#region client/lib/section-theme-select.ts
-var n = "data-theme-class", r = "theme", i = "in2section-theme:";
-function a(e) {
-	return (e ?? "").split(/\s+/).filter(Boolean);
-}
-function o(e, t) {
-	let r = e.getAttribute(n);
-	t ? e.setAttribute(n, t) : e.removeAttribute(n);
-	let i = e.contentDocument?.documentElement;
-	i && (i.classList.remove(...a(r)), i.classList.add(...a(t)));
-}
-function s(e, t) {
-	e.querySelectorAll("a[href^=\"/fullpage-\"]").forEach((e) => {
-		let n = new URL(e.getAttribute("href"), window.location.href);
-		t ? n.searchParams.set(r, t) : n.searchParams.delete(r), e.setAttribute("href", `${n.pathname}${n.search}${n.hash}`);
-	});
-}
-function c(e) {
-	try {
-		return localStorage.getItem(e);
-	} catch {
-		return null;
-	}
-}
-function l(e, t) {
-	try {
-		t ? localStorage.setItem(e, t) : localStorage.removeItem(e);
-	} catch {}
-}
-function u(e, t) {
-	return Array.from(e.options).some((e) => e.value === t);
-}
-function d(n) {
-	for (let r of n) {
-		let n = r.closest(t);
-		if (!n) continue;
-		let a = `${i}${n.getAttribute("data-section-reference") ?? n.id}`, d = (t) => {
-			let { base: r, modifiers: i } = e(n);
-			(r ? [r, ...i] : i).forEach((e) => o(e, t)), s(n, t);
-		}, f = c(a);
-		f && u(r, f) && (r.value = f), r.value && d(r.value), r.addEventListener("change", () => {
-			l(a, r.value), d(r.value);
-		});
-	}
-}
-//#endregion
-export { d as default };