kss-modern 0.0.24 → 0.0.26

package/dist/node/lib/index.mjs

@@ -12,6 +12,8 @@ import { Worker } from 'node:worker_threads';
 import { readFileSync } from 'node:fs';
 import chokidar from 'chokidar';
 
+const sectionSanitizeId = (id2) => id2.toLowerCase().replaceAll(".", "-");
+
 function isValidHexColor(hexCode) {
   return /^#[0-9A-F]{6}$/i.test(hexCode);
 }
@@ -169,70 +171,40 @@ function generateId() {
   return value;
 }
 
-const defaultOptions = {
-  types: ["info", "warning", "success", "error", "tip", "note"]};
-function infoBlock(state, start, end, silent) {
-  const pos = state.bMarks[start] + state.tShift[start];
-  const max = state.eMarks[start];
-  if (pos + 3 > max)
-    return false;
-  if (state.src.charCodeAt(pos) !== 58)
-    return false;
-  if (state.src.charCodeAt(pos + 1) !== 58)
-    return false;
-  if (state.src.charCodeAt(pos + 2) !== 58)
-    return false;
-  const markup = state.src.slice(pos, pos + 3);
-  const params = state.src.slice(pos + 3, max).trim();
-  const spaceIndex = params.indexOf(" ");
-  const type = spaceIndex === -1 ? params : params.slice(0, spaceIndex);
-  const title = spaceIndex === -1 ? "" : params.slice(spaceIndex + 1).trim();
-  if (!type || !defaultOptions.types.includes(type)) {
-    return false;
-  }
-  let nextLine = start + 1;
-  let foundClosing = false;
-  while (nextLine < end) {
-    const linePos = state.bMarks[nextLine] + state.tShift[nextLine];
-    const lineMax = state.eMarks[nextLine];
-    const line = state.src.slice(linePos, lineMax).trim();
-    if (line === ":::") {
-      foundClosing = true;
-      break;
+const accordionRenderer = (bodyContent, props) => {
+  const type = props.type || "info";
+  const title = props.title || "Click to expand";
+  const open = props.open || false;
+  const accordionStyles = {
+    info: {
+      container: "border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/10",
+      summary: "text-blue-900 dark:text-blue-100 hover:bg-blue-100 dark:hover:bg-blue-900/20"
     }
-    nextLine++;
-  }
-  if (!foundClosing) {
-    return false;
-  }
-  if (silent) {
-    return true;
-  }
-  const openToken = state.push("info_open", "div", 1);
-  openToken.info = type;
-  openToken.markup = markup;
-  openToken.map = [start, nextLine + 1];
-  openToken.meta = { type, title };
-  const contentStart = start + 1;
-  const contentEnd = nextLine;
-  if (contentStart < contentEnd) {
-    const oldParent = state.parentType;
-    const oldLineMax = state.lineMax;
-    state.parentType = "info";
-    state.lineMax = contentEnd;
-    state.md.block.tokenize(state, contentStart, contentEnd);
-    state.parentType = oldParent;
-    state.lineMax = oldLineMax;
-  }
-  const closeToken = state.push("info_close", "div", -1);
-  closeToken.markup = markup;
-  closeToken.map = [nextLine, nextLine + 1];
-  state.line = nextLine + 1;
-  return true;
-}
-function renderInfoOpen(tokens, idx) {
-  const token = tokens[idx];
-  const { type, title } = token.meta;
+  };
+  const styles = accordionStyles[type] || accordionStyles.info;
+  const openAttr = open ? " open" : "";
+  return `
+    <details class="group rounded-lg overflow-hidden ${styles.container}"${openAttr}>
+      <summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer select-none transition-colors ${styles.summary}">
+        <span class="font-bold text-sm flex-grow-1">${title}</span>
+        <span class="shrink-0">
+          <svg class="h-4 w-4 group-open:rotate-90 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+              <path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
+          </svg>
+        </span>
+      </summary>
+      <div class="p-4">
+        ${bodyContent}
+      </div>
+    </details>
+  `;
+};
+
+const when = (condition, content) => condition ? content() : "";
+
+const alertRenderer = (bodyContent, props) => {
+  const type = props.type || "info";
+  const title = props.title;
   const alertStyles = {
     info: {
       container: "bg-blue-100 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-900/40",
@@ -263,23 +235,109 @@ function renderInfoOpen(tokens, idx) {
           ${iconHtml}
       </div>
       <div class="ml-3">
-        <p class="!text-sm !font-bold ${styles.title}">${title}</p>
-        <div class="mt-1 !text-sm ${styles.content}">
-  `;
-}
-function renderInfoClose() {
-  return `
-    </div>
-      </div>
+        ${when(title, () => `<p class="!text-sm !font-bold ${styles.title}">${title}</p>`)}
+        <div class="${title ? "mt-1" : ""} !text-sm ${styles.content}">
+          ${bodyContent}
         </div>
+      </div>
+    </div>
   `;
+};
+
+const defaultOptions = {
+  marker: ":::",
+  components: {}
+};
+function parseProps(propsStr) {
+  const props = {};
+  const regex = /(\w+)=(?:"([^"]*)"|'([^']*)'|(\w+))/g;
+  let match = regex.exec(propsStr);
+  while (match !== null) {
+    const key = match[1];
+    const value = match[2] || match[3] || match[4];
+    try {
+      props[key] = JSON.parse(value);
+    } catch {
+      props[key] = value;
+    }
+    match = regex.exec(propsStr);
+  }
+  return props;
 }
-function markdownItComponentInfo(md) {
-  md.block.ruler.before("fence", "info", infoBlock, {
+function componentBlock(options) {
+  return (state, start, end, silent) => {
+    const pos = state.bMarks[start] + state.tShift[start];
+    const max = state.eMarks[start];
+    if (pos + 3 > max)
+      return false;
+    if (state.src.charCodeAt(pos) !== 58)
+      return false;
+    if (state.src.charCodeAt(pos + 1) !== 58)
+      return false;
+    if (state.src.charCodeAt(pos + 2) !== 58)
+      return false;
+    const markup = state.src.slice(pos, pos + 3);
+    const params = state.src.slice(pos + 3, max).trim();
+    const braceIndex = params.indexOf("{");
+    const componentName = braceIndex === -1 ? params : params.slice(0, braceIndex);
+    if (!componentName || !options.components[componentName]) {
+      return false;
+    }
+    let props = {};
+    if (braceIndex !== -1) {
+      const braceEnd = params.indexOf("}", braceIndex);
+      if (braceEnd !== -1) {
+        const propsStr = params.slice(braceIndex + 1, braceEnd);
+        props = parseProps(propsStr);
+      }
+    }
+    let nextLine = start + 1;
+    let foundClosing = false;
+    while (nextLine < end) {
+      const linePos = state.bMarks[nextLine] + state.tShift[nextLine];
+      const lineMax = state.eMarks[nextLine];
+      const line = state.src.slice(linePos, lineMax).trim();
+      if (line === ":::") {
+        foundClosing = true;
+        break;
+      }
+      nextLine++;
+    }
+    if (!foundClosing) {
+      return false;
+    }
+    if (silent) {
+      return true;
+    }
+    const token = state.push("component", "div", 0);
+    token.info = componentName;
+    token.markup = markup;
+    token.map = [start, nextLine + 1];
+    token.meta = { componentName, props };
+    token.content = state.getLines(start + 1, nextLine, state.blkIndent, false);
+    state.line = nextLine + 1;
+    return true;
+  };
+}
+function createRenderer(md, options) {
+  return (tokens, idx, _options, env) => {
+    const token = tokens[idx];
+    const { componentName, props } = token.meta;
+    const contentTokens = md.parse(token.content, env);
+    const bodyContent = md.renderer.render(contentTokens, md.options, env);
+    const renderFn = options.components[componentName];
+    if (renderFn) {
+      return renderFn(bodyContent.trim(), props);
+    }
+    return "";
+  };
+}
+function markdownItComponent(md, options) {
+  const opts = { ...defaultOptions, ...options };
+  md.block.ruler.before("fence", "component", componentBlock(opts), {
     alt: ["paragraph", "reference", "blockquote", "list"]
   });
-  md.renderer.rules.info_open = renderInfoOpen;
-  md.renderer.rules.info_close = renderInfoClose;
+  md.renderer.rules.component = createRenderer(md, opts);
 }
 
 let md;
@@ -305,7 +363,12 @@ function shiftHeadingLevels(markdownContent, rootHeadingLevel) {
 async function parseMarkdown(data) {
   if (!md) {
     md = MarkdownItAsync({ linkify: true, typographer: true });
-    md.use(markdownItComponentInfo);
+    md.use(markdownItComponent, {
+      components: {
+        alert: alertRenderer,
+        accordion: accordionRenderer
+      }
+    });
     md.use(
       fromAsyncCodeToHtml(
         codeToHtml,
@@ -833,7 +896,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-CfZ3ctFE.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-B_jhNyDy.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -845,7 +908,6 @@ async function generateFullPageFile(data) {
   await logicalWriteFile(data.filePath, content);
 }
 
-const sanitizeId = (id) => id.toLowerCase().replaceAll(".", "-");
 function getHasSectionExternalFullpage(section) {
   return section.markup.length > 0 && (section.icons === void 0 || section.icons.length === 0) && (section.colors === void 0 || section.colors.length === 0);
 }
@@ -1103,11 +1165,11 @@ function getMainContentSectionWrapper(section, html) {
   };
   return `
 <section 
-  id="section-${sanitizeId(section.id)}" 
+  id="section-${sectionSanitizeId(section.id)}" 
   class="styleguide-section border-b px-4 py-10 border-b-styleguide-border scroll-mt-[50px] md:px-10"
 >
     <div class="flex items-center justify-between gap-6">
-        <a class="relative group" href="#section-${sanitizeId(section.id)}">
+        <a class="relative group" href="#section-${sectionSanitizeId(section.id)}">
             <svg class="absolute top-1/2 -left-6 -translate-y-1/2 opacity-0 transition size-[18px] group-hover:opacity-100 group-focus:opacity-100"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                 <path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/>
@@ -1182,7 +1244,7 @@ function getMainContentRegular(section, config) {
     <div class="mt-4 overflow-hidden rounded-2xl border border-styleguide-border">
         <div class="w-full border-b p-6 bg-styleguide-bg-highlight border-styleguide-border">
             <iframe
-                  id="preview-fullpage-${sanitizeId(section.id)}"
+                  id="preview-fullpage-${sectionSanitizeId(section.id)}"
                   src="/${section.fullpageFileName}"
                   class="preview-iframe"
                   data-preview="true"
@@ -1249,7 +1311,7 @@ function getMainContentRegular(section, config) {
                     <button
                         class="inline-flex items-center gap-1.5 p-4 cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
                         type="button"
-                        data-code-audit-iframe="preview-fullpage-${sanitizeId(section.id)}"
+                        data-code-audit-iframe="preview-fullpage-${sectionSanitizeId(section.id)}"
                         aria-controls="code-audit-dialog"
                         aria-expanded="false"
                     >
@@ -1275,7 +1337,7 @@ function getMainContentRegular(section, config) {
 
             <div class="border-t p-6 text-sm bg-styleguide-bg-highlight border-styleguide-border">
                 <div 
-                  id="code-fullpage-${sanitizeId(section.id)}" 
+                  id="code-fullpage-${sectionSanitizeId(section.id)}" 
                   class="overflow-x-auto w-full code-highlight"
                   data-source-code="${encodeURIComponent(section.markup)}"
                   data-source-lang="html"
@@ -1359,7 +1421,7 @@ function getMainContentRegular(section, config) {
                         class="aspect-video size-full"
                         title="${section.header} Figma Design Preview" 
                         allowfullscreen
-                        loading="lazy"
+                        loading="<replace-figma-iframe-loading-strategy>"
                       ></iframe>
                   </div>
               </div>
@@ -1374,7 +1436,7 @@ function getMainContentRegular(section, config) {
     }
     return `
       <div class="mt-4">
-        ${renderTab(tabs)}
+        ${renderTab(tabs).replaceAll("<replace-figma-iframe-loading-strategy>", tabs.length > 1 ? "lazy" : "eager")}
       </div>
     `;
   }
@@ -1511,10 +1573,10 @@ function getSearchHtml(sections) {
   return `
 <dialog
     id="search-dialog"
-    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"
+    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"
 >
     <h2 class="sr-only">Search</h2>
-    <div class="border-b px-4 py-3 border-styleguide-border">
+    <div class="h-[53px] border-b px-4 py-3 border-styleguide-border">
         <label for="search-input" class="sr-only">Search styleguide</label>
         <input
             id="search-input"
@@ -1530,7 +1592,10 @@ function getSearchHtml(sections) {
         >
     </div>
 
-    <nav id="search-list" class="grid gap-4 px-4 py-3 text-sm">
+    <nav 
+      id="search-list" 
+      class="grid gap-4 px-4 py-3 text-sm overflow-y-auto max-h-[calc(100%-2rem-53px)] md:max-h-[calc(85dvh-53px)]"
+    >
         ${sections.map((section) => `
             <div class="search-category">
                 <h3 class="mb-2">${section.title}</h3>
@@ -1538,7 +1603,7 @@ function getSearchHtml(sections) {
                     ${section.items.map((item) => `
                         <li 
                             class="search-category__item search-category__item--active" 
-                            data-search-keywords="${item.searchKeywords.map((x) => x.replaceAll('"', `'`)).join(",")}"
+                            data-search-keywords="${encodeURIComponent(JSON.stringify(item.searchKeywords))}"
                           >
                             <a 
                                 class="flex items-center gap-4 px-1.5 py-2.5 group rounded-md hover:bg-[rgb(242,242,242)] focus:bg-[rgb(242,242,242)] dark:hover:bg-[rgb(26,26,26)] dark:focus:bg-[rgb(26,26,26)] transition" 
@@ -1547,9 +1612,8 @@ function getSearchHtml(sections) {
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="transition-all size-5 group-hover:translate-x-0.5 group-focus:translate-x-0.5">
                                     <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
                                 </svg>
-                                <span class="text-styleguide-highlight">
-                                ${item.label}
-                            </span>
+                                <span class="text-styleguide-highlight">${item.label}</span>
+                                <span data-type="search-hint" class="text-styleguide-highlight"></span>
                             </a>
                         </li>
                     `).join("\n")}
@@ -1592,7 +1656,7 @@ 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-BpMIuK1b.css">
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-CML2MEgc.css">
     <script>
   async function g(t) {
   const e = (o) => {
@@ -1697,7 +1761,7 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-CzDBmeSK.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-CA6batxs.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">
@@ -1961,10 +2025,16 @@ async function buildStyleguide(config) {
       searchSectionMapping[indexFirstLevel].items.push({
         label: secondLevelSection.header,
         searchKeywords: [
-          secondLevelSection.header,
-          secondLevelSection.description,
-          ...secondLevelSection.sections.map((thirdLevelSection) => [thirdLevelSection.header, thirdLevelSection.description]).flat().filter(Boolean)
-        ].filter(Boolean).map((keyword) => keyword.replaceAll('"', "")),
+          {
+            keywords: [secondLevelSection.header, secondLevelSection.description].filter(Boolean)
+          },
+          ...secondLevelSection.sections.flatMap((thirdLevelSection) => {
+            return {
+              id: sectionSanitizeId(`section-${thirdLevelSection.id}`),
+              keywords: [thirdLevelSection.header, thirdLevelSection.description].filter(Boolean)
+            };
+          })
+        ],
         href: menuHref
       });
       menuSectionMapping[indexFirstLevel].items.push({

package/dist/node/lib/vite-pug/worker.mjs

@@ -22,7 +22,9 @@ async function getBiome() {
     instance.applyConfiguration(projectKey, {
       html: {
         formatter: {
-          lineWidth: 100
+          lineWidth: 100,
+          whitespaceSensitivity: "ignore",
+          attributePosition: "multiline"
         }
       }
     });
@@ -77,7 +79,6 @@ async function compilePug(contentDir, mode, html) {
         throw new Error(`${pugSourcePath} is not a valid .pug file`);
       }
       const pugFn = pug.compileFile(pugFilePath, {
-        pretty: true,
         // define doctype to avoid self-closing tags on wrong places
         doctype: "html"
       });

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

@@ -11,8 +11,8 @@
       "__commonjsHelpers-C6fGbg64.js"
     ]
   },
-  "_preview-Cknxd_cP.js": {
-    "file": "preview-Cknxd_cP.js",
+  "_preview-uakTJmZx.js": {
+    "file": "preview-uakTJmZx.js",
     "name": "preview",
     "dynamicImports": [
       "client/lib/html-validator.ts",
@@ -22,7 +22,7 @@
     ]
   },
   "client/fullpage.ts": {
-    "file": "fullpage-CfZ3ctFE.js",
+    "file": "fullpage-B_jhNyDy.js",
     "name": "fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true,
@@ -32,12 +32,12 @@
     ]
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-DULMn8xf.js",
+    "file": "clipboard-DBgIvDdh.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-Cknxd_cP.js"
+      "_preview-uakTJmZx.js"
     ]
   },
   "client/lib/editor-select.ts": {
@@ -47,21 +47,21 @@
     "isDynamicEntry": true
   },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-DLEAmrmB.js",
+    "file": "html-validator-Bwn2prbo.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-Cknxd_cP.js"
+      "_preview-uakTJmZx.js"
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-s_oHNZd6.js",
+    "file": "icons-BClyakEv.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-Cknxd_cP.js"
+      "_preview-uakTJmZx.js"
     ]
   },
   "client/preview-inline.ts": {
@@ -71,16 +71,16 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-CzDBmeSK.js",
+    "file": "preview-CA6batxs.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
     "imports": [
-      "_preview-Cknxd_cP.js"
+      "_preview-uakTJmZx.js"
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {
-    "file": "browser-Bjhprfz3.js",
+    "file": "browser-BqQP8cHu.js",
     "name": "browser",
     "src": "node_modules/html-validate/dist/esm/browser.js",
     "isDynamicEntry": true,
@@ -89,7 +89,7 @@
     ]
   },
   "style.css": {
-    "file": "kss-modern-BpMIuK1b.css",
+    "file": "kss-modern-CML2MEgc.css",
     "src": "style.css"
   }
 }