kss-modern 0.0.35 → 0.0.37

package/dist/node/lib/index.mjs

@@ -14,8 +14,9 @@ import chokidar from 'chokidar';
 
 const sectionSanitizeId = (id2) => id2.toLowerCase().replaceAll(".", "-");
 
+const HEX_COLOR_RE = /^#[0-9A-F]{6}$/i;
 function isValidHexColor(hexCode) {
-  return /^#[0-9A-F]{6}$/i.test(hexCode);
+  return HEX_COLOR_RE.test(hexCode);
 }
 function shadeColor(hexColor, percent) {
   let color = hexColor;
@@ -918,7 +919,7 @@ async function generateFullPageFile(data) {
         <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/fullpage-light.svg">
       `}
     ${data.ogImageUrl ? `<meta property="og:image" content="${data.ogImageUrl}">` : ""}
-    <script type="module" src="/styleguide-assets/fullpage-Dq-R_v0z.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-MsRLbo3b.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -1621,10 +1622,10 @@ function getSearchHtml(sections) {
   return `
 <dialog
     id="search-dialog"
-    class="fixed inset-0 top-8 z-30 backdrop:hidden -mb-px size-full max-sm:max-h-none md:h-auto overflow-y-hidden max-w-none rounded-t-2xl border bg-styleguide-bg border-styleguide-border text-styleguide md:max-w-[720px] md:top-12 md:bottom-auto md:left-1/2 md:-translate-x-1/2 md:rounded-2xl mx-0 lg:top-24"
+    class="fixed inset-0 top-8 z-30 backdrop:hidden -mb-px size-full max-sm:max-h-none open:md:flex open:md:flex-col md:h-auto overflow-y-hidden max-w-none rounded-t-2xl border bg-styleguide-bg border-styleguide-border text-styleguide md:max-w-[720px] md:top-12 md:max-h-[calc(100%-5rem)] md:bottom-auto md:left-1/2 md:-translate-x-1/2 md:rounded-2xl mx-0 lg:top-24 lg:max-h-[calc(100%-8rem)]"
 >
     <h2 class="sr-only">Search</h2>
-    <div class="flex items-center h-[53px] border-b px-4 py-3 border-styleguide-border">
+    <div class="flex items-center h-[53px] border-b px-4 py-3 border-styleguide-border shrink-0">
         <label for="search-input" class="sr-only">Search styleguide</label>
         <input
             id="search-input"
@@ -1646,7 +1647,7 @@ function getSearchHtml(sections) {
         </button>
     </div>
 
-    <div role="tablist" aria-label="Filter by category" class="relative flex gap-1 px-4 py-2 border-b border-styleguide-border overflow-x-auto">
+    <div role="tablist" aria-label="Filter by category" class="relative flex gap-1 px-4 py-2 border-b border-styleguide-border overflow-x-auto shrink-0">
         <div class="search-tab-background absolute inset-y-2 left-0 bg-[rgb(242,242,242)] dark:bg-[rgb(26,26,26)] rounded-md"></div>
         <button role="tab" data-search-tab="all" aria-selected="true" class="search-tab relative text-sm px-3 py-1.5 rounded-md whitespace-nowrap cursor-pointer font-medium text-styleguide-highlight">All</button>
         ${sections.map((section, i) => `
@@ -1657,7 +1658,7 @@ function getSearchHtml(sections) {
     <div
       id="search-list"
       role="listbox"
-      class="grid gap-4 px-4 py-3 text-sm overflow-y-auto max-h-[calc(100%-2rem-53px-45px)] md:max-h-[calc(85dvh-53px-45px)]"
+      class="grid gap-4 px-4 py-3 text-sm overflow-y-auto max-h-[calc(100%-2rem-53px-45px)] md:min-h-0 md:max-h-none"
     >
         ${sections.map((section, categoryIdx) => `
             <div class="search-category" id="search-category-${categoryIdx}" data-category-index="${categoryIdx}">
@@ -1723,156 +1724,160 @@ async function generatePreviewFile(data) {
         <meta name="theme-color" content="${data.theme}">
         <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/preview-light.svg">
       `}
-    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-BFLcfq8_.css">
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-9q-g7bDI.css">
     <script>
-  const w = [
-  { width: 320, label: "320px \u2013 Mobile" },
-  { width: 768, label: "768px \u2013 Tablet" },
-  { width: 1024, label: "1024px \u2013 Desktop" },
-  { width: 1200, label: "1200px \u2013 Desktop L" }
-], v = 14;
-function m(t) {
-  for (const e of w)
-    if (Math.abs(t - e.width) <= v)
-      return { width: e.width, label: e.label };
-  return { width: t, label: null };
+  //#region client/lib/iframe-resize.ts
+var e = [
+	{
+		width: 320,
+		label: "320px \u2013 Mobile"
+	},
+	{
+		width: 768,
+		label: "768px \u2013 Tablet"
+	},
+	{
+		width: 1024,
+		label: "1024px \u2013 Desktop"
+	},
+	{
+		width: 1200,
+		label: "1200px \u2013 Desktop L"
+	}
+], t = 14;
+function n(n) {
+	for (let r of e) if (Math.abs(n - r.width) <= t) return {
+		width: r.width,
+		label: r.label
+	};
+	return {
+		width: n,
+		label: null
+	};
 }
-function g(t) {
-  const e = document.createElement("div");
-  return e.className = "absolute -bottom-3 -right-0.5 text-[11px] leading-none font-mono opacity-0 pointer-events-none whitespace-nowrap transition-opacity duration-150", t.appendChild(e), e;
+function r(e) {
+	let t = document.createElement("div");
+	return t.className = "absolute -bottom-3 -right-0.5 text-[11px] leading-none font-mono opacity-0 pointer-events-none whitespace-nowrap transition-opacity duration-150", e.appendChild(t), t;
 }
-function f(t, e, n) {
-  t.textContent = n ?? \`\${Math.round(e)}px\`, t.style.opacity = n ? "0.6" : "0.4";
+function i(e, t, n) {
+	e.textContent = n ?? \`\${Math.round(t)}px\`, e.style.opacity = n ? "0.6" : "0.4";
 }
-function b() {
-  document.querySelectorAll(".preview-resize-container").forEach((e) => {
-    const n = e.querySelector(".preview-resize-handle");
-    if (!n)
-      return;
-    let s = 0, a = 0, o = null;
-    n.addEventListener("pointerdown", (i) => {
-      i.preventDefault(), s = i.clientX, a = e.offsetWidth, n.setPointerCapture(i.pointerId), e.classList.add("is-resizing"), o || (o = g(e)), f(o, a, null);
-    }), n.addEventListener("pointermove", (i) => {
-      if (!n.hasPointerCapture(i.pointerId))
-        return;
-      const c = i.clientX - s, r = e.parentElement?.clientWidth ?? e.offsetWidth, l = Math.max(200, Math.min(a + c, r));
-      if (l >= r)
-        e.style.width = "";
-      else {
-        const d = m(l);
-        e.style.width = \`\${d.width}px\`;
-      }
-      if (o) {
-        const d = e.offsetWidth, y = m(d);
-        f(o, d, y.label);
-      }
-    }), n.addEventListener("lostpointercapture", () => {
-      e.classList.remove("is-resizing");
-      const i = e.parentElement?.clientWidth ?? 0;
-      e.offsetWidth >= i ? (e.style.width = "", e.classList.remove("is-resized"), o && (o.style.opacity = "")) : (e.classList.add("is-resized"), o && (o.style.opacity = "0.4"));
-    }), n.addEventListener("dblclick", () => {
-      e.style.width = "", e.classList.remove("is-resized"), o && (o.style.opacity = "");
-    });
-  });
+function a() {
+	document.querySelectorAll(".preview-resize-container").forEach((e) => {
+		let t = e.querySelector(".preview-resize-handle");
+		if (!t) return;
+		let a = 0, o = 0, s = null;
+		t.addEventListener("pointerdown", (n) => {
+			n.preventDefault(), a = n.clientX, o = e.offsetWidth, t.setPointerCapture(n.pointerId), e.classList.add("is-resizing"), s ||= r(e), i(s, o, null);
+		}), t.addEventListener("pointermove", (r) => {
+			if (!t.hasPointerCapture(r.pointerId)) return;
+			let c = r.clientX - a, l = e.parentElement?.clientWidth ?? e.offsetWidth, u = Math.max(200, Math.min(o + c, l));
+			if (u >= l) e.style.width = "";
+			else {
+				let t = n(u);
+				e.style.width = \`\${t.width}px\`;
+			}
+			if (s) {
+				let t = e.offsetWidth, r = n(t);
+				i(s, t, r.label);
+			}
+		}), t.addEventListener("lostpointercapture", () => {
+			e.classList.remove("is-resizing");
+			let t = e.parentElement?.clientWidth ?? 0;
+			e.offsetWidth >= t ? (e.style.width = "", e.classList.remove("is-resized"), s && (s.style.opacity = "")) : (e.classList.add("is-resized"), s && (s.style.opacity = "0.4"));
+		}), t.addEventListener("dblclick", () => {
+			e.style.width = "", e.classList.remove("is-resized"), s && (s.style.opacity = "");
+		});
+	});
 }
-const E = 5e3;
-async function L(t) {
-  const e = (n) => {
-    const s = n.contentWindow?.document;
-    if (!s)
-      return !1;
-    const a = s.body && s.body.children.length > 0, o = s.readyState === "complete";
-    return a && o && s.body.children.length > 0;
-  };
-  await Promise.allSettled(
-    t.map((n) => new Promise((s) => {
-      const a = setInterval(() => {
-        if (e(n))
-          return clearInterval(a), s();
-      }, 100);
-      setTimeout(() => (clearInterval(a), s()), E);
-    }))
-  );
+//#endregion
+//#region client/lib/iframe.ts
+var o = 5e3;
+async function s(e) {
+	let t = (e) => {
+		let t = e.contentWindow?.document;
+		if (!t) return !1;
+		let n = t.body && t.body.children.length > 0, r = t.readyState === "complete";
+		return n && r && t.body.children.length > 0;
+	};
+	await Promise.allSettled(e.map((e) => new Promise((n) => {
+		let r = setInterval(() => {
+			if (t(e)) return clearInterval(r), n();
+		}, 100);
+		setTimeout(() => (clearInterval(r), n()), o);
+	})));
 }
-function u(t) {
-  const e = t.contentWindow?.document;
-  if (!e)
-    throw new Error("iFrame was not fully loaded yet");
-  t.style.height = "0px", t.offsetHeight;
-  const n = Math.max(
-    e.documentElement.scrollHeight,
-    e.body.scrollHeight,
-    e.documentElement.offsetHeight,
-    e.body.offsetHeight,
-    e.documentElement.clientHeight,
-    e.body.clientHeight
-  );
-  t.style.height = \`\${n}px\`;
+function c(e) {
+	let t = e.contentWindow?.document;
+	if (!t) throw Error("iFrame was not fully loaded yet");
+	e.style.height = "0px", e.offsetHeight;
+	let n = Math.max(t.documentElement.scrollHeight, t.body.scrollHeight, t.documentElement.offsetHeight, t.body.offsetHeight, t.documentElement.clientHeight, t.body.clientHeight);
+	e.style.height = \`\${n}px\`;
 }
-function p() {
-  document.body.classList.add("js-loaded");
+function l() {
+	document.body.classList.add("js-loaded");
 }
-const I = async (t) => {
-  if (await L(t), t.forEach((e) => {
-    u(e);
-    const n = e.contentWindow;
-    if (!n)
-      return;
-    new ResizeObserver(() => u(e)).observe(n.document.body);
-  }), window.addEventListener("resize", () => {
-    t.forEach((e) => u(e));
-  }), window.location.hash) {
-    const e = document.querySelector(window.location.hash);
-    e && (await new Promise((n) => setTimeout(n, 200)), e.scrollIntoView());
-  }
-  p();
-}, h = {
-  normal: "theme-normal",
-  light: "theme-light",
-  dark: "theme-dark"
+var u = async (e) => {
+	if (await s(e), e.forEach((e) => {
+		c(e);
+		let t = e.contentWindow;
+		t && (new ResizeObserver(() => c(e)).observe(t.document.body), t.document.body.querySelectorAll("details").forEach((t) => {
+			t.addEventListener("toggle", () => c(e));
+		}));
+	}), window.addEventListener("resize", () => {
+		e.forEach((e) => c(e));
+	}), window.location.hash) {
+		let e = document.querySelector(window.location.hash);
+		e && (await new Promise((e) => setTimeout(e, 200)), e.scrollIntoView());
+	}
+	l();
+}, d = {
+	normal: "theme-normal",
+	light: "theme-light",
+	dark: "theme-dark"
 };
-function S(t) {
-  const e = window.matchMedia("(prefers-color-scheme: dark)");
-  function n() {
-    const o = localStorage.getItem("in2theme");
-    return o || (localStorage.setItem("in2theme", "normal"), "normal");
-  }
-  function s() {
-    const o = n();
-    let i = h[o] ?? h.normal;
-    o === "normal" && e.matches && (i = h.dark);
-    const c = (r) => {
-      Object.values(h).forEach((l) => r.classList.remove(l));
-    };
-    c(t), t.classList.add(i), c(document.body), document.body.classList.add(i), document.querySelectorAll("iframe").forEach((r) => {
-      c(r), r.classList.add(i);
-    }), Array.from(document.querySelectorAll("iframe")).filter((r) => r.src.includes("embed.figma.com")).forEach((r) => {
-      const l = new URL(r.src);
-      l.searchParams.set("theme", o === "normal" ? "system" : o), r.src = l.href;
-    }), setTimeout(() => {
-      document.body.classList.add("allow-transitions");
-    }, 500);
-  }
-  s();
-  const a = t.querySelector(\`input[value="\${n()}"]\`);
-  a && (a.checked = !0), t.addEventListener("change", () => {
-    const o = t.querySelector('input[name="theme"]:checked');
-    if (!o)
-      throw new Error("No selected theme found");
-    localStorage.setItem("in2theme", o.value), s();
-  }), e.addEventListener("change", () => {
-    n() === "normal" && s();
-  });
+function f(e) {
+	let t = window.matchMedia("(prefers-color-scheme: dark)");
+	function n() {
+		return localStorage.getItem("in2theme") || (localStorage.setItem("in2theme", "normal"), "normal");
+	}
+	function r() {
+		let r = n(), i = d[r] ?? d.normal;
+		r === "normal" && t.matches && (i = d.dark);
+		let a = (e) => {
+			Object.values(d).forEach((t) => e.classList.remove(t));
+		};
+		a(e), e.classList.add(i), a(document.body), document.body.classList.add(i), document.querySelectorAll("iframe").forEach((e) => {
+			a(e), e.classList.add(i);
+		}), Array.from(document.querySelectorAll("iframe")).filter((e) => e.src.includes("embed.figma.com")).forEach((e) => {
+			let t = new URL(e.src);
+			t.searchParams.set("theme", r === "normal" ? "system" : r), e.src = t.href;
+		}), setTimeout(() => {
+			document.body.classList.add("allow-transitions");
+		}, 500);
+	}
+	r();
+	let i = e.querySelector(\`input[value="\${n()}"]\`);
+	i && (i.checked = !0), e.addEventListener("change", () => {
+		let t = e.querySelector("input[name=\\"theme\\"]:checked");
+		if (!t) throw Error("No selected theme found");
+		localStorage.setItem("in2theme", t.value), r();
+	}), t.addEventListener("change", () => {
+		n() === "normal" && r();
+	});
 }
+//#endregion
+//#region client/preview-inline.ts
 document.addEventListener("DOMContentLoaded", () => {
-  const t = document.querySelector(".theme-select");
-  t && S(t);
-  const e = Array.from(document.querySelectorAll(".preview-iframe"));
-  e.length > 0 ? I(e).catch(console.error) : p(), b();
+	let e = document.querySelector(".theme-select");
+	e && f(e);
+	let t = Array.from(document.querySelectorAll(".preview-iframe"));
+	t.length > 0 ? u(t).catch(console.error) : l(), a();
 });
+//#endregion
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-CchyT0S6.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-HMOIDq0F.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/node/lib/vite-pug/worker.mjs

@@ -3,6 +3,8 @@ import { parentPort } from 'node:worker_threads';
 import { Biome, Distribution } from '@biomejs/js-api';
 import pug from 'pug';
 
+const PUG_SRC_RE = /src="(.+?)"/;
+const PUG_MODIFIER_CLASS_RE = /modifierClass="(.+?)"/;
 let biomeInstance;
 let biomePromise;
 let projectKey;
@@ -61,11 +63,11 @@ async function compilePug(contentDir, mode, html) {
   }
   let markupOutput = html;
   await Promise.all(vitePugTags.map(async (vitePugTag) => {
-    const pugSourcePath = vitePugTag.match(/src="(.+?)"/)?.[1];
+    const pugSourcePath = vitePugTag.match(PUG_SRC_RE)?.[1];
     if (!pugSourcePath) {
       return void 0;
     }
-    const pugModifierClass = vitePugTag.match(/modifierClass="(.+?)"/);
+    const pugModifierClass = vitePugTag.match(PUG_MODIFIER_CLASS_RE);
     let pugLocals = {};
     if (pugModifierClass && pugModifierClass[1]) {
       pugLocals = {

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

@@ -1,95 +1,119 @@
 {
-  "__commonjsHelpers-C6fGbg64.js": {
-    "file": "_commonjsHelpers-C6fGbg64.js",
-    "name": "_commonjsHelpers"
+  "_animate-jPjnfPYl.js": {
+    "file": "animate-jPjnfPYl.js",
+    "name": "animate"
   },
-  "_axe-Ciyt_55N.js": {
-    "file": "axe-Ciyt_55N.js",
-    "name": "axe",
-    "isDynamicEntry": true,
-    "imports": [
-      "__commonjsHelpers-C6fGbg64.js"
-    ]
+  "_chunk-CablSFQG.js": {
+    "file": "chunk-CablSFQG.js",
+    "name": "chunk"
   },
-  "_preview-CSRIz9iH.js": {
-    "file": "preview-CSRIz9iH.js",
-    "name": "preview",
-    "dynamicImports": [
-      "client/lib/html-validator.ts",
-      "client/lib/icons.ts",
-      "client/lib/clipboard.ts",
-      "client/lib/editor-select.ts"
-    ]
+  "_code-highlight-BsR20taU.js": {
+    "file": "code-highlight-BsR20taU.js",
+    "name": "code-highlight"
+  },
+  "_signal-DXXjEZcs.js": {
+    "file": "signal-DXXjEZcs.js",
+    "name": "signal"
+  },
+  "_utils-CS7AERrD.js": {
+    "file": "utils-CS7AERrD.js",
+    "name": "utils"
   },
   "client/fullpage.ts": {
-    "file": "fullpage-Dq-R_v0z.js",
+    "file": "fullpage-MsRLbo3b.js",
     "name": "fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true,
+    "imports": [
+      "_chunk-CablSFQG.js"
+    ],
     "dynamicImports": [
-      "_axe-Ciyt_55N.js",
+      "node_modules/axe-core/axe.js",
       "node_modules/html-validate/dist/esm/browser.js"
     ]
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-CqnSM003.js",
+    "file": "clipboard-Dt0DzzBB.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-CSRIz9iH.js"
+      "_signal-DXXjEZcs.js",
+      "_utils-CS7AERrD.js",
+      "_animate-jPjnfPYl.js"
     ]
   },
   "client/lib/editor-select.ts": {
-    "file": "editor-select-CYqpYdVR.js",
+    "file": "editor-select-BYHykuDY.js",
     "name": "editor-select",
     "src": "client/lib/editor-select.ts",
     "isDynamicEntry": true
   },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-BX35WeTe.js",
+    "file": "html-validator-CKF-Y7pG.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-CSRIz9iH.js"
+      "_chunk-CablSFQG.js",
+      "_code-highlight-BsR20taU.js",
+      "_utils-CS7AERrD.js"
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-TyOa-vP5.js",
+    "file": "icons-8y4X7eKH.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-CSRIz9iH.js"
+      "_utils-CS7AERrD.js",
+      "_animate-jPjnfPYl.js"
     ]
   },
   "client/preview-inline.ts": {
-    "file": "preview-inline-Ck0PRwv3.js",
+    "file": "preview-inline-CT3A9iR7.js",
     "name": "preview-inline",
     "src": "client/preview-inline.ts",
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-CchyT0S6.js",
+    "file": "preview-HMOIDq0F.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
     "imports": [
-      "_preview-CSRIz9iH.js"
+      "_code-highlight-BsR20taU.js",
+      "_signal-DXXjEZcs.js",
+      "_utils-CS7AERrD.js",
+      "_animate-jPjnfPYl.js"
+    ],
+    "dynamicImports": [
+      "client/lib/html-validator.ts",
+      "client/lib/icons.ts",
+      "client/lib/clipboard.ts",
+      "client/lib/editor-select.ts"
+    ]
+  },
+  "node_modules/axe-core/axe.js": {
+    "file": "axe-CyL8bHge.js",
+    "name": "axe",
+    "src": "node_modules/axe-core/axe.js",
+    "isDynamicEntry": true,
+    "imports": [
+      "_chunk-CablSFQG.js"
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {
-    "file": "browser-NN7v9uwW.js",
+    "file": "browser-BjsUm14H.js",
     "name": "browser",
     "src": "node_modules/html-validate/dist/esm/browser.js",
     "isDynamicEntry": true,
     "imports": [
-      "__commonjsHelpers-C6fGbg64.js"
+      "_chunk-CablSFQG.js"
     ]
   },
   "style.css": {
-    "file": "kss-modern-BFLcfq8_.css",
+    "file": "kss-modern-9q-g7bDI.css",
     "src": "style.css"
   }
 }