kss-modern 0.0.19 → 0.0.21

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/client-fullpage-CUwCohIj.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -877,37 +877,77 @@ function getHeaderHtml() {
             </kbd>
         </button>
 
-        ${!(globalThis.styleguideConfiguration.deactivateDarkMode ?? false) ? `
-            <form class="hidden theme-select md:block">
-              <fieldset class="flex items-center rounded-3xl border border-styleguide-border">
-                  <legend class="sr-only">Select a display theme:</legend>
-  
-                  <input id="normal" class="sr-only" type="radio" value="normal" name="theme">
-                  <label for="normal" class="cursor-pointer p-2">
-                      <span class="sr-only">System</span>
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
-                      </svg>
-                  </label>
-  
-                  <input id="light" class="sr-only" type="radio" value="light" name="theme">
-                  <label for="light" class="cursor-pointer p-2">
-                      <span class="sr-only">Light</span>
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-                      </svg>
-                  </label>
-  
-                  <input id="dark" class="sr-only" type="radio" value="dark" name="theme">
-                  <label for="dark" class="cursor-pointer p-2">
-                      <span class="sr-only">Dark</span>
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-                      </svg>
-                  </label>
-              </fieldset>
-            </form>
-        ` : ``}
+        <div class="flex gap-4">
+          ${globalThis.styleguideConfiguration.launchInEditor ? `
+              <form class="hidden editor-select md:block">
+                <fieldset class="flex items-center rounded-3xl border border-styleguide-border">
+                  <legend class="sr-only">Select a preferred editor</legend>
+                  
+                  <div>
+                    <input id="phpstorm" class="sr-only peer" type="radio" value="phpstorm" name="editor">
+                    <label for="phpstorm" class="cursor-pointer p-2 block peer-checked:saturate-100 saturate-0 transition">
+                        <span class="sr-only">PHPStorm</span>
+                        <img 
+                            src="styleguide-assets/icons/phpstorm.svg"
+                            width="70" 
+                            height="70" 
+                            class="size-4" 
+                            alt="PHPStorm Logo" 
+                            aria-hidden="true" 
+                        >
+                    </label>
+                  </div>
+                  
+                  <div>
+                    <input id="vscode" class="sr-only peer" type="radio" value="vscode" name="editor">
+                    <label for="vscode" class="cursor-pointer p-2 block peer-checked:saturate-100 saturate-0 transition">
+                        <span class="sr-only">VSCode</span>
+                        <img 
+                            src="styleguide-assets/icons/vscode.svg"
+                            width="70" 
+                            height="70" 
+                            class="size-4" 
+                            alt="VSCode Logo" 
+                            aria-hidden="true" 
+                        >
+                    </label>
+                  </div>
+                </fieldset>
+              </form>
+            ` : ``}
+        
+          ${!(globalThis.styleguideConfiguration.deactivateDarkMode ?? false) ? `
+              <form class="hidden theme-select md:block">
+                <fieldset class="flex items-center rounded-3xl border border-styleguide-border">
+                    <legend class="sr-only">Select a display theme</legend>
+    
+                    <input id="normal" class="sr-only" type="radio" value="normal" name="theme">
+                    <label for="normal" class="cursor-pointer p-2">
+                        <span class="sr-only">System</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
+                        </svg>
+                    </label>
+    
+                    <input id="light" class="sr-only" type="radio" value="light" name="theme">
+                    <label for="light" class="cursor-pointer p-2">
+                        <span class="sr-only">Light</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                        </svg>
+                    </label>
+    
+                    <input id="dark" class="sr-only" type="radio" value="dark" name="theme">
+                    <label for="dark" class="cursor-pointer p-2">
+                        <span class="sr-only">Dark</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+                        </svg>
+                    </label>
+                </fieldset>
+              </form>
+          ` : ``}
+        </div>
     </div>
 </header>
 `.trim();
@@ -958,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>
@@ -967,7 +1007,7 @@ function getCodeAuditDialog() {
             </span>
           </h2>
           
-          <ul class="audit-results"></ul>
+          <ol class="audit-results"></ol>
     </dialog>
   `;
 }
@@ -1096,19 +1136,20 @@ ${html ?? ""}
   `;
 }
 function getMainContentRegular(section, config) {
-  const openInEditorPaths = {
-    css: {},
-    html: {}
-  };
+  const openInEditorPaths = {};
   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));
-    openInEditorPaths.css.vscode = `vscode://file//${cssFilePath}:${section.source.css.line}`;
-    openInEditorPaths.css.phpstorm = `phpstorm://open?file=${cssFilePath}&line=${section.source.css.line}`;
+    openInEditorPaths.css = {
+      vscode: `vscode://file//${cssFilePath}:${section.source.css.line}`,
+      phpstorm: `phpstorm://open?file=${cssFilePath}&line=${section.source.css.line}`
+    };
     if (section.source.markup && section.source.markup.file) {
       const htmlFilePath = ensureStartingSlash(path.join(computedRootPath, section.source.markup.file));
-      openInEditorPaths.html.vscode = `vscode://file//${htmlFilePath}`;
-      openInEditorPaths.html.phpstorm = `phpstorm://open?file=${htmlFilePath}`;
+      openInEditorPaths.html = {
+        vscode: `vscode://file//${htmlFilePath}`,
+        phpstorm: `phpstorm://open?file=${htmlFilePath}`
+      };
     }
   }
   const computeFigmaExternalLink = (url) => {
@@ -1118,14 +1159,23 @@ function getMainContentRegular(section, config) {
     urlObj.hostname = "www.figma.com";
     return urlObj.toString();
   };
-  const phpstormOpenLinks = [
-    openInEditorPaths.css.phpstorm,
-    openInEditorPaths.html.phpstorm
-  ].filter(Boolean).join(",");
-  const vscodeOpenLinks = [
-    openInEditorPaths.css.vscode,
-    openInEditorPaths.html.vscode
-  ].filter(Boolean).join(",");
+  const renderOpenInEditorLink = (editorType, contentType, link) => `
+    <a
+        class="hidden editor-${editorType}-only @md:inline-flex items-center group/${editorType} gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
+        href="${link}"
+    >
+        <span class="hidden @2xl:inline-block">Open ${contentType}</span>
+        <span class="sr-only">in ${editorType}</span>
+        <img 
+            src="styleguide-assets/icons/${contentType.toLowerCase()}.svg"
+            width="512" 
+            height="512" 
+            class="size-4 saturate-0 group-hover/${editorType}:saturate-100 transition" 
+            alt="${editorType} Logo" 
+            aria-hidden="true"
+        >
+    </a>
+  `;
   const codePreviewMarkup = `
     <!-- Preview Box -->
     <div class="mt-4 overflow-hidden rounded-2xl border border-styleguide-border">
@@ -1170,41 +1220,15 @@ function getMainContentRegular(section, config) {
                             >
                         </a>` : ""}
                 
-                      ${phpstormOpenLinks.length > 0 ? `<a
-                                  class="hidden @md:inline-flex items-center group/phpstorm gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
-                                  href="#"
-                                  data-link-multiple="${phpstormOpenLinks}"
-                              >
-                                  <span class="hidden @2xl:inline-block">Open in</span>
-                                  <span class="sr-only">PHPStorm</span>
-                                  <img 
-                                      src="styleguide-assets/icons/phpstorm.svg"
-                                      width="70" 
-                                      height="70" 
-                                      class="size-4 saturate-0 group-hover/phpstorm:saturate-100 transition" 
-                                      alt="PHPStorm Logo" 
-                                      aria-hidden="true" 
-                                  >
-                              </a>
-                            ` : ""}
+                      ${openInEditorPaths.html ? `
+                            ${renderOpenInEditorLink("phpstorm", openInEditorPaths.html.phpstorm.includes(".pug") ? "Pug" : "HTML", openInEditorPaths.html.phpstorm)}
+                            ${renderOpenInEditorLink("vscode", openInEditorPaths.html.phpstorm.includes(".pug") ? "Pug" : "HTML", openInEditorPaths.html.vscode)}
+                          ` : ""}
                           
-                          ${vscodeOpenLinks.length > 0 ? `<a
-                                  class="hidden @md:inline-flex items-center group/vscode gap-1.5 p-4 desktop-device-only cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
-                                  href="#"
-                                  data-link-multiple="${vscodeOpenLinks}"
-                              >
-                                  <span class="hidden @2xl:inline-block">Open in</span>
-                                  <span class="sr-only">VsCode</span>
-                                  <img 
-                                      src="styleguide-assets/icons/vscode.svg"
-                                      width="100" 
-                                      height="100" 
-                                      class="size-4 saturate-0 group-hover/vscode:saturate-100 transition" 
-                                      alt="VsCode Logo" 
-                                      aria-hidden="true" 
-                                  >
-                              </a>
-                            ` : ""}
+                      ${openInEditorPaths.css ? `
+                            ${renderOpenInEditorLink("phpstorm", "CSS", openInEditorPaths.css.phpstorm)}
+                            ${renderOpenInEditorLink("vscode", "CSS", openInEditorPaths.css.vscode)}
+                          ` : ""}
 
                     <button
                         class="inline-flex items-center gap-1.5 p-4 cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
@@ -1253,6 +1277,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>
@@ -1485,7 +1510,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">
@@ -1566,8 +1591,8 @@ 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-DDees9Y5.css">
-    <script type="module" src="/styleguide-assets/client-CHYLSUpU.js"><\/script>
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-CSsz22uP.css">
+    <script type="module" src="/styleguide-assets/client-Dr95NpXp.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,63 +1,89 @@
 {
-  "_main-CTV8iVap.js": {
-    "file": "main-CTV8iVap.js",
+  "__commonjsHelpers-C6fGbg64.js": {
+    "file": "_commonjsHelpers-C6fGbg64.js",
+    "name": "_commonjsHelpers"
+  },
+  "_axe-B2M3jwef.js": {
+    "file": "axe-B2M3jwef.js",
+    "name": "axe",
+    "isDynamicEntry": true,
+    "imports": [
+      "__commonjsHelpers-C6fGbg64.js"
+    ]
+  },
+  "_main-DJu5Mg_E.js": {
+    "file": "main-DJu5Mg_E.js",
     "name": "main",
     "dynamicImports": [
       "client/lib/html-validator.ts",
       "client/lib/icons.ts",
-      "client/lib/clipboard.ts"
+      "client/lib/clipboard.ts",
+      "client/lib/editor-select.ts"
     ]
   },
   "client/fullpage.ts": {
-    "file": "client-fullpage-DjIkCnMm.js",
+    "file": "client-fullpage-CUwCohIj.js",
     "name": "client-fullpage",
     "src": "client/fullpage.ts",
-    "isEntry": true
+    "isEntry": true,
+    "dynamicImports": [
+      "_axe-B2M3jwef.js",
+      "node_modules/html-validate/dist/esm/browser.js"
+    ]
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-BX-6wcwn.js",
+    "file": "clipboard-CmSioy8N.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_main-CTV8iVap.js"
+      "_main-DJu5Mg_E.js"
     ]
   },
+  "client/lib/editor-select.ts": {
+    "file": "editor-select-Bzw7rF0M.js",
+    "name": "editor-select",
+    "src": "client/lib/editor-select.ts",
+    "isDynamicEntry": true
+  },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-bX8Fj2mZ.js",
+    "file": "html-validator-BlXeWTXJ.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
-    "dynamicImports": [
-      "node_modules/html-validate/dist/esm/browser.js"
+    "imports": [
+      "_main-DJu5Mg_E.js"
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-Bsi5dZux.js",
+    "file": "icons-DfSfd5nI.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_main-CTV8iVap.js"
+      "_main-DJu5Mg_E.js"
     ]
   },
   "client/main.ts": {
-    "file": "client-CHYLSUpU.js",
+    "file": "client-Dr95NpXp.js",
     "name": "client",
     "src": "client/main.ts",
     "isEntry": true,
     "imports": [
-      "_main-CTV8iVap.js"
+      "_main-DJu5Mg_E.js"
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {
-    "file": "browser-KlOfx-vG.js",
+    "file": "browser-ImNvK64W.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-DDees9Y5.css",
+    "file": "kss-modern-CSsz22uP.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
+};