kss-modern 0.0.20 → 0.0.22

package/dist/node/lib/index.mjs

@@ -833,7 +833,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/client-fullpage-DjIkCnMm.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-BEOBUDsG.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -998,7 +998,7 @@ function getCodeAuditDialog() {
   return `
     <dialog 
         id="code-audit-dialog"
-        class="fixed -inset-x-0 top-auto bottom-0 z-30 pt-6 -mb-px w-full max-w-none overflow-y-auto rounded-t-2xl border search bg-styleguide-bg border-styleguide-border text-styleguide md:max-w-[640px] md:top-1/2 md:bottom-auto md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-2xl mx-0"
+        class="fixed inset-0 top-8 z-30 py-6 backdrop:hidden -mb-px size-full md:h-auto md:max-h-[85dvh] max-w-none overflow-y-auto 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"
       >
           <h2 class="flex items-center gap-2 mb-4 px-6">
             <svg class="-mt-0.5 h-4 transition duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88" aria-hidden="true"><title>accessibility</title><path fill="currentcolor" d="M61.44,0A61.46,61.46,0,1,1,18,18,61.21,61.21,0,0,1,61.44,0Zm-.39,74.18L52.1,98.91a4.94,4.94,0,0,1-2.58,2.83A5,5,0,0,1,42.7,95.5l6.24-17.28a26.3,26.3,0,0,0,1.17-4,40.64,40.64,0,0,0,.54-4.18c.24-2.53.41-5.27.54-7.9s.22-5.18.29-7.29c.09-2.63-.62-2.8-2.73-3.3l-.44-.1-18-3.39A5,5,0,0,1,27.08,46a5,5,0,0,1,5.05-7.74l19.34,3.63c.77.07,1.52.16,2.31.25a57.64,57.64,0,0,0,7.18.53A81.13,81.13,0,0,0,69.9,42c.9-.1,1.75-.21,2.6-.29l18.25-3.42A5,5,0,0,1,94.5,39a5,5,0,0,1,1.3,7,5,5,0,0,1-3.21,2.09L75.15,51.37c-.58.13-1.1.22-1.56.29-1.82.31-2.72.47-2.61,3.06.08,1.89.31,4.15.61,6.51.35,2.77.81,5.71,1.29,8.4.31,1.77.6,3.19,1,4.55s.79,2.75,1.39,4.42l6.11,16.9a5,5,0,0,1-6.82,6.24,4.94,4.94,0,0,1-2.58-2.83L63,74.23,62,72.4l-1,1.78Zm.39-53.52a8.83,8.83,0,1,1-6.24,2.59,8.79,8.79,0,0,1,6.24-2.59Zm36.35,4.43a51.42,51.42,0,1,0,15,36.35,51.27,51.27,0,0,0-15-36.35Z"/></svg>
@@ -1007,7 +1007,7 @@ function getCodeAuditDialog() {
             </span>
           </h2>
           
-          <ul class="audit-results"></ul>
+          <ol class="audit-results"></ol>
     </dialog>
   `;
 }
@@ -1140,9 +1140,10 @@ function getMainContentRegular(section, config) {
   if (config.mode === "development" && config.launchInEditor) {
     const computedRootPath = config.launchInEditor && typeof config.launchInEditor === "object" && "rootDir" in config.launchInEditor ? config.launchInEditor.rootDir : process.cwd();
     const cssFilePath = ensureStartingSlash(path.join(computedRootPath, section.source.css.file));
+    const cssLineNumber = section.source.css.line + 1;
     openInEditorPaths.css = {
-      vscode: `vscode://file//${cssFilePath}:${section.source.css.line}`,
-      phpstorm: `phpstorm://open?file=${cssFilePath}&line=${section.source.css.line}`
+      vscode: `vscode://file//${cssFilePath}:${cssLineNumber}`,
+      phpstorm: `phpstorm://open?file=${cssFilePath}&line=${cssLineNumber}`
     };
     if (section.source.markup && section.source.markup.file) {
       const htmlFilePath = ensureStartingSlash(path.join(computedRootPath, section.source.markup.file));
@@ -1277,6 +1278,7 @@ function getMainContentRegular(section, config) {
                   id="code-fullpage-${sanitizeId(section.id)}" 
                   class="overflow-x-auto w-full code-highlight"
                   data-source-code="${encodeURIComponent(section.markup)}"
+                  data-source-lang="html"
                 ></div>
             </div>
         </details>
@@ -1509,7 +1511,7 @@ function getSearchHtml(sections) {
   return `
 <dialog
     id="search-dialog"
-    class="fixed -inset-x-px top-auto bottom-0 z-30 -mb-px w-full opacity-0 max-w-none overflow-y-auto rounded-t-2xl border search bg-styleguide-bg border-styleguide-border text-styleguide md:max-w-[640px] md:top-1/2 md:bottom-auto md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-2xl mx-0"
+    class="fixed inset-0 top-8 z-30 backdrop:hidden -mb-px size-full md:h-auto md:max-h-[85dvh] max-w-none overflow-y-auto 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"
 >
     <h2 class="sr-only">Search</h2>
     <div class="border-b px-4 py-3 border-styleguide-border">
@@ -1590,8 +1592,112 @@ 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-BIqlRJ0X.css">
-    <script type="module" src="/styleguide-assets/client-DqS0770n.js"><\/script>
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-BpMIuK1b.css">
+    <script>
+  async function g(t) {
+  const e = (o) => {
+    const n = o.contentWindow?.document;
+    if (!n)
+      return !1;
+    const s = n.body && n.body.children.length > 0, a = n.readyState === "complete";
+    return s && a && n.body.children.length > 0;
+  };
+  await Promise.allSettled(
+    t.map((o) => new Promise((n) => {
+      const s = setInterval(() => {
+        if (e(o))
+          return clearInterval(s), n();
+      }, 100);
+      setTimeout(() => (clearInterval(s), n()), 5e3);
+    }))
+  );
+}
+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 o = Math.max(
+    e.documentElement.scrollHeight,
+    e.body.scrollHeight,
+    e.documentElement.offsetHeight,
+    e.body.offsetHeight,
+    e.documentElement.clientHeight,
+    e.body.clientHeight
+  );
+  t.style.height = \`\${o}px\`;
+}
+function y() {
+  document.body.classList.add("js-loaded");
+}
+const E = async (t) => {
+  if (await g(t), t.forEach((e) => {
+    u(e);
+    const o = e.contentWindow;
+    if (!o)
+      return;
+    new ResizeObserver(() => u(e)).observe(o.document.body);
+  }), window.addEventListener("resize", () => {
+    t.forEach((e) => u(e));
+  }), window.location.hash) {
+    const e = document.querySelector(window.location.hash);
+    e && (await new Promise((o) => setTimeout(o, 200)), e.scrollIntoView());
+  }
+  y();
+}, f = "in2theme", l = {
+  normal: "theme-normal",
+  light: "theme-light",
+  dark: "theme-dark"
+};
+function v(t) {
+  const e = window.matchMedia("(prefers-color-scheme: dark)");
+  function o() {
+    const c = localStorage.getItem(f);
+    return c || localStorage.setItem(f, "normal"), c;
+  }
+  function n() {
+    const c = o();
+    let d = l[c];
+    c === "normal" && e.matches && (d = l.dark);
+    const m = (r) => {
+      Object.values(l).forEach((i) => r.classList.remove(i)), r.classList.remove("dark");
+    }, h = (r) => {
+      r.classList.add(d), d === l.dark && r.classList.add("dark");
+    };
+    m(t), h(t);
+    const w = document.querySelectorAll("iframe");
+    w && w.forEach((r) => {
+      m(r), h(r);
+    }), m(document.body), h(document.body), Array.from(document.querySelectorAll("iframe")).filter((r) => r.src.includes("embed.figma.com")).forEach((r) => {
+      const i = new URL(r.src);
+      c === "normal" ? i.searchParams.set("theme", "system") : i.searchParams.set("theme", c), r.src = i.href;
+    }), setTimeout(() => {
+      document.body.classList.add("allow-transitions");
+    }, 500);
+  }
+  e.addEventListener("change", () => {
+    o() === "normal" && n();
+  }), n(), t.addEventListener("change", () => {
+    const c = t.querySelector('input[name="theme"]:checked');
+    if (!c)
+      throw new Error("No selected theme found");
+    const d = c.value;
+    localStorage.setItem(f, d), n();
+  });
+  const s = o(), a = t.querySelector(\`input[value="\${s}"]\`);
+  if (!a)
+    throw new Error("No current theme input found");
+  a.checked = !0;
+}
+document.addEventListener("DOMContentLoaded", () => {
+  const t = document.querySelector(".theme-select");
+  t && v(t);
+  const e = Array.from(document.querySelectorAll(".preview-iframe"));
+  e.length > 0 ? E(e).catch(console.error) : y();
+});
+;
+<\/script>
+    <script type="module" src="/styleguide-assets/preview-BqaqMVtQ.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

@@ -1,7 +1,19 @@
 {
-  "_main-DysniEvV.js": {
-    "file": "main-DysniEvV.js",
-    "name": "main",
+  "__commonjsHelpers-C6fGbg64.js": {
+    "file": "_commonjsHelpers-C6fGbg64.js",
+    "name": "_commonjsHelpers"
+  },
+  "_axe-A2Ows1Aj.js": {
+    "file": "axe-A2Ows1Aj.js",
+    "name": "axe",
+    "isDynamicEntry": true,
+    "imports": [
+      "__commonjsHelpers-C6fGbg64.js"
+    ]
+  },
+  "_preview-DxsvGJsw.js": {
+    "file": "preview-DxsvGJsw.js",
+    "name": "preview",
     "dynamicImports": [
       "client/lib/html-validator.ts",
       "client/lib/icons.ts",
@@ -10,18 +22,22 @@
     ]
   },
   "client/fullpage.ts": {
-    "file": "client-fullpage-DjIkCnMm.js",
-    "name": "client-fullpage",
+    "file": "fullpage-BEOBUDsG.js",
+    "name": "fullpage",
     "src": "client/fullpage.ts",
-    "isEntry": true
+    "isEntry": true,
+    "dynamicImports": [
+      "_axe-A2Ows1Aj.js",
+      "node_modules/html-validate/dist/esm/browser.js"
+    ]
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-Tvfm0Nqe.js",
+    "file": "clipboard-CQ7U7_P0.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_main-DysniEvV.js"
+      "_preview-DxsvGJsw.js"
     ]
   },
   "client/lib/editor-select.ts": {
@@ -31,40 +47,49 @@
     "isDynamicEntry": true
   },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-bX8Fj2mZ.js",
+    "file": "html-validator-M0X8x6ag.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
-    "dynamicImports": [
-      "node_modules/html-validate/dist/esm/browser.js"
+    "imports": [
+      "_preview-DxsvGJsw.js"
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-BMUnz9Fy.js",
+    "file": "icons-IQYIngUi.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_main-DysniEvV.js"
+      "_preview-DxsvGJsw.js"
     ]
   },
-  "client/main.ts": {
-    "file": "client-DqS0770n.js",
-    "name": "client",
-    "src": "client/main.ts",
+  "client/preview-inline.ts": {
+    "file": "preview-inline-D_Sx3c3_.js",
+    "name": "preview-inline",
+    "src": "client/preview-inline.ts",
+    "isEntry": true
+  },
+  "client/preview.ts": {
+    "file": "preview-BqaqMVtQ.js",
+    "name": "preview",
+    "src": "client/preview.ts",
     "isEntry": true,
     "imports": [
-      "_main-DysniEvV.js"
+      "_preview-DxsvGJsw.js"
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {
-    "file": "browser-KlOfx-vG.js",
+    "file": "browser-Bjhprfz3.js",
     "name": "browser",
     "src": "node_modules/html-validate/dist/esm/browser.js",
-    "isDynamicEntry": true
+    "isDynamicEntry": true,
+    "imports": [
+      "__commonjsHelpers-C6fGbg64.js"
+    ]
   },
   "style.css": {
-    "file": "kss-modern-BIqlRJ0X.css",
+    "file": "kss-modern-BpMIuK1b.css",
     "src": "style.css"
   }
 }

package/dist/styleguide-assets/_commonjsHelpers-C6fGbg64.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as g
+};