kss-modern 0.0.22 → 0.0.23

package/dist/node/lib/index.mjs

@@ -145,7 +145,7 @@ async function logicalWriteFile(filepath, content) {
 }
 function fixAccessibilityIssues(html) {
   let parsedMarkup = html;
-  const omitValue = ["required", "disabled", "checked", "selected", "multiple", "readonly"];
+  const omitValue = ["required", "disabled", "checked", "selected", "multiple", "readonly", "open"];
   omitValue.forEach((value) => {
     parsedMarkup = parsedMarkup.replaceAll(`${value}="${value}"`, value).replaceAll(`${value}=""`, value);
   });
@@ -1697,7 +1697,7 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-BqaqMVtQ.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-CzDBmeSK.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,8 +11,8 @@
       "__commonjsHelpers-C6fGbg64.js"
     ]
   },
-  "_preview-DxsvGJsw.js": {
-    "file": "preview-DxsvGJsw.js",
+  "_preview-Cknxd_cP.js": {
+    "file": "preview-Cknxd_cP.js",
     "name": "preview",
     "dynamicImports": [
       "client/lib/html-validator.ts",
@@ -32,12 +32,12 @@
     ]
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-CQ7U7_P0.js",
+    "file": "clipboard-DULMn8xf.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-DxsvGJsw.js"
+      "_preview-Cknxd_cP.js"
     ]
   },
   "client/lib/editor-select.ts": {
@@ -47,21 +47,21 @@
     "isDynamicEntry": true
   },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-M0X8x6ag.js",
+    "file": "html-validator-DLEAmrmB.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-DxsvGJsw.js"
+      "_preview-Cknxd_cP.js"
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-IQYIngUi.js",
+    "file": "icons-s_oHNZd6.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
-      "_preview-DxsvGJsw.js"
+      "_preview-Cknxd_cP.js"
     ]
   },
   "client/preview-inline.ts": {
@@ -71,12 +71,12 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-BqaqMVtQ.js",
+    "file": "preview-CzDBmeSK.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
     "imports": [
-      "_preview-DxsvGJsw.js"
+      "_preview-Cknxd_cP.js"
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {

package/dist/styleguide-assets/{clipboard-CQ7U7_P0.js → clipboard-DULMn8xf.js}

@@ -1,4 +1,4 @@
-import { b as $, a as p } from "./preview-DxsvGJsw.js";
+import { b as $, a as p } from "./preview-Cknxd_cP.js";
 function C(n, i, e) {
   var t = e || {}, a = t.noTrailing, s = a === void 0 ? !1 : a, r = t.noLeading, u = r === void 0 ? !1 : r, c = t.debounceMode, m = c === void 0 ? void 0 : c, d, b = !1, w = 0;
   function E() {

package/dist/styleguide-assets/{html-validator-M0X8x6ag.js → html-validator-DLEAmrmB.js}

@@ -1,4 +1,4 @@
-import { h as L } from "./preview-DxsvGJsw.js";
+import { h as L } from "./preview-Cknxd_cP.js";
 const f = (l, a) => l ? a() : "";
 function $(l, a) {
   return l.map((m, h) => a(m, h)).join("");
@@ -27,7 +27,7 @@ const A = T(), E = {
     "font-style: italic"
   ].join(";")
 };
-function H(l, a) {
+function V(l, a) {
   console.group("%cValidation Error", E.header), console.info(
     "%c%o",
     E.elementStyle,
@@ -42,13 +42,13 @@ async function R(l, a, m) {
   const h = l.getAttribute("data-code-audit-iframe");
   if (!h)
     throw new Error("No code audit template selector provided");
-  const c = document.querySelector(`#${h}`);
-  if (!c)
+  const d = document.querySelector(`#${h}`);
+  if (!d)
     throw new Error("Code audit template not found");
-  if (!c.contentWindow)
+  if (!d.contentWindow)
     throw new Error("Code audit iframe has no content window");
-  const g = a.querySelector(".audit-results");
-  if (!g)
+  const w = a.querySelector(".audit-results");
+  if (!w)
     throw new Error("No audit results list found");
   window.validator = {
     referenceMap: /* @__PURE__ */ new Map(),
@@ -60,22 +60,22 @@ async function R(l, a, m) {
     }
   };
   const u = await new Promise((e, o) => {
-    const s = setTimeout(() => {
+    const i = setTimeout(() => {
       o(new Error("Accessibility audit timed out"));
     }, 3e4), n = (v) => {
       const y = v;
-      clearTimeout(s), c.removeEventListener("accessibility-result", n), e(y.detail);
+      clearTimeout(i), d.removeEventListener("accessibility-result", n), e(y.detail);
     };
-    c.addEventListener("accessibility-result", n);
-    const r = c.contentWindow;
-    r.runAccessibilityTest ? r.runAccessibilityTest() : (clearTimeout(s), c.removeEventListener("accessibility-result", n), o(new Error("runAxe function not found in iframe")));
-  }), d = {
+    d.addEventListener("accessibility-result", n);
+    const r = d.contentWindow;
+    r.runAccessibilityTest ? r.runAccessibilityTest() : (clearTimeout(i), d.removeEventListener("accessibility-result", n), o(new Error("runAxe function not found in iframe")));
+  }), c = {
     violations: [],
     incomplete: [],
     passes: [],
     inapplicable: []
-  }, w = (e, o) => {
-    const s = o.map((n) => ({
+  }, g = (e, o) => {
+    const i = o.map((n) => ({
       id: n.id,
       description: n.description,
       helpUrl: n.helpUrl,
@@ -86,9 +86,9 @@ async function R(l, a, m) {
         target: r.target
       }))
     }));
-    d[e].push(...s);
+    c[e].push(...i);
   };
-  w("violations", u.axe.result.violations), w("incomplete", u.axe.result.incomplete), w("passes", u.axe.result.passes), w("inapplicable", u.axe.result.inapplicable);
+  g("violations", u.axe.result.violations), g("incomplete", u.axe.result.incomplete), g("passes", u.axe.result.passes), g("inapplicable", u.axe.result.inapplicable);
   function S(e, o) {
     switch (o) {
       case "off":
@@ -105,7 +105,15 @@ async function R(l, a, m) {
     }
   }
   u.htmlValidate.forEach((e) => {
-    d.violations.push({
+    const o = c.violations.find((i) => i.id === e.ruleId);
+    if (o) {
+      o.nodes.push({
+        type: "htmlvalidate",
+        selector: e.selector
+      });
+      return;
+    }
+    c.violations.push({
       id: e.ruleId,
       description: e.ruleDescription || e.message,
       helpUrl: e.ruleUrl || "",
@@ -116,16 +124,16 @@ async function R(l, a, m) {
       }]
     });
   });
-  const I = u.axe.targetMap, x = (e, o, s) => {
-    const n = e.charAt(0).toUpperCase() + e.slice(1), r = ["critical", "serious", "moderate", "minor"], v = s.toSorted((t, i) => {
-      const p = r.indexOf(t.impact || "minor"), b = r.indexOf(i.impact || "minor");
+  const I = u.axe.targetMap, x = (e, o, i) => {
+    const n = e.charAt(0).toUpperCase() + e.slice(1), r = ["critical", "serious", "moderate", "minor"], v = i.toSorted((t, s) => {
+      const p = r.indexOf(t.impact || "minor"), b = r.indexOf(s.impact || "minor");
       return p - b;
     }), y = (t) => {
-      const i = t.target.map((p) => I.get(p)).filter(Boolean);
-      if (i.length === 0)
+      const s = t.target.map((p) => I.get(p)).filter(Boolean);
+      if (s.length === 0)
         throw new Error(`No elements found for axe-core target: ${t.target}`);
       return `
-        ${$(i, (p) => {
+        ${$(s, (p) => {
         const b = A.next().value;
         return window.validator.referenceMap.set(b, p), `
             <button 
@@ -138,11 +146,11 @@ async function R(l, a, m) {
       })}
       `;
     }, M = (t) => {
-      const i = c.contentWindow?.document.querySelector(t.selector);
-      if (!i)
+      const s = d.contentWindow?.document.querySelector(t.selector);
+      if (!s)
         throw new Error(`Element not found for selector: ${t.selector}`);
       const p = A.next().value;
-      return window.validator.referenceMap.set(p, i), `
+      return window.validator.referenceMap.set(p, s), `
         <button 
             class="block font-mono py-1.5 text-[13px] text-blue-600 text-sm cursor-pointer text-left"
             onclick="console.log(window.validator.referenceMap.get('${p}')); window.validator.logReferenceAlert(this)"
@@ -159,7 +167,7 @@ async function R(l, a, m) {
               <h3 class="px-6 py-4 text-sm font-semibold leading-[1]">
                 <span class="mr-2" aria-hidden="true">${o}</span>
                 <span class="text-styleguide-highlight">${n}:</span>
-                <span class="ml-2">(${s.length})</span>        
+                <span class="ml-2">(${i.length})</span>        
               </h3>
             </summary>
             
@@ -181,7 +189,7 @@ async function R(l, a, m) {
                       
                       <div class="pt-2 pb-6 text-sm code-audit-container">
                         <p class="mb-3">
-                            ${t.description.replace(/`([^`]*)`/g, "<code>$1</code>")}
+                            ${t.description}
                         </p>
                         
                         <p class="mb-3 pb-3 border-b border-styleguide-border">
@@ -202,10 +210,10 @@ async function R(l, a, m) {
                           <h3 class="font-semibold mb-2">Affected nodes (${t.nodes.length}):</h3>
     
                           <ol class="!pl-0 !list-none">
-                            ${$(t.nodes, (i) => `
+                            ${$(t.nodes, (s) => `
                               <li>
-                                ${f(i.type === "axe", () => `${y(i)}`)}
-                                ${f(i.type === "htmlvalidate", () => `${M(i)}`)}
+                                ${f(s.type === "axe", () => `${y(s)}`)}
+                                ${f(s.type === "htmlvalidate", () => `${M(s)}`)}
                               </li>
                             `)}  
                           </ol>
@@ -220,26 +228,26 @@ async function R(l, a, m) {
       </li>
       `)}
   `;
-  }, k = d.violations.length > 0 ? "🔴" : "🟢", C = d.incomplete.length > 0 ? "🟠" : "🟢";
-  g.innerHTML = `
-    ${x("violations", k, d.violations)}
-    ${x("incomplete", C, d.incomplete)}
-    ${x("passes", "🟢", d.passes)}
-    ${x("inapplicable", "⚪", d.inapplicable)}
-  `, g.querySelectorAll("[data-source-code]").forEach((e) => L(e)), g.querySelectorAll("[data-iframe-selector]").forEach((e) => {
+  }, k = c.violations.length > 0 ? "🔴" : "🟢", C = c.incomplete.length > 0 ? "🟠" : "🟢";
+  w.innerHTML = `
+    ${x("violations", k, c.violations)}
+    ${x("incomplete", C, c.incomplete)}
+    ${x("passes", "🟢", c.passes)}
+    ${x("inapplicable", "⚪", c.inapplicable)}
+  `, w.querySelectorAll("[data-source-code]").forEach((e) => L(e)), w.querySelectorAll("[data-iframe-selector]").forEach((e) => {
     const o = e.getAttribute("data-iframe-selector");
     if (!o)
       throw new Error("No message found");
     e.addEventListener("click", async () => {
       await m();
-      const s = e.textContent;
-      if (!s)
+      const i = e.textContent;
+      if (!i)
         throw new Error("No selector found");
-      const n = c.contentDocument?.querySelectorAll(s);
+      const n = d.contentDocument?.querySelectorAll(i);
       if (!n)
         throw new Error("No elements found");
       n.forEach((r) => {
-        H(o, r), r.style.outline = "2px solid red", r.scrollIntoView({ behavior: "smooth", block: "center" }), setTimeout(() => r.style.outline = "", 5e3);
+        V(o, r), r.style.outline = "2px solid red", r.scrollIntoView({ behavior: "smooth", block: "center" }), setTimeout(() => r.style.outline = "", 5e3);
       });
     });
   });

package/dist/styleguide-assets/{icons-IQYIngUi.js → icons-s_oHNZd6.js}

@@ -1,4 +1,4 @@
-import { a as i, s as l } from "./preview-DxsvGJsw.js";
+import { a as i, s as l } from "./preview-Cknxd_cP.js";
 const p = (o, s, a) => {
   o.addEventListener("input", () => {
     const t = o.value.toLowerCase();

package/dist/styleguide-assets/{preview-DxsvGJsw.js → preview-Cknxd_cP.js}

@@ -3310,7 +3310,7 @@ rn.length > 0 && rn.forEach((e) => {
 });
 const Se = document.querySelectorAll("[data-code-audit-iframe]"), Re = document.querySelector("#code-audit-dialog"), on = document.querySelector(".dialog-backdrop");
 Se.length > 0 && Re && on && (async () => {
-  const { auditCode: e } = await import("./html-validator-M0X8x6ag.js"), { show: t, close: n } = ys(Re, on);
+  const { auditCode: e } = await import("./html-validator-DLEAmrmB.js"), { show: t, close: n } = ys(Re, on);
   Se.forEach((s) => s.addEventListener("click", async () => {
     Se.forEach((r) => r.setAttribute("aria-expanded", "false")), s.setAttribute("disabled", ""), await e(s, Re, n), s.removeAttribute("disabled"), s.setAttribute("aria-expanded", "true"), await t(
       void 0,
@@ -3323,9 +3323,9 @@ Se.length > 0 && Re && on && (async () => {
   }));
 })();
 const an = document.querySelector("#icon-search-input"), ln = document.querySelector("#icon-search-input-reset"), un = document.querySelector("#icon-search-list");
-an && un && ln && import("./icons-IQYIngUi.js").then(({ default: e }) => e(an, un, ln)).catch(console.error);
+an && un && ln && import("./icons-s_oHNZd6.js").then(({ default: e }) => e(an, un, ln)).catch(console.error);
 const Vs = "data-clipboard-value", cn = document.querySelectorAll(`button[${Vs}]`);
-cn.length > 0 && import("./clipboard-CQ7U7_P0.js").then(({ default: e }) => e(cn, Vs)).catch(console.error);
+cn.length > 0 && import("./clipboard-DULMn8xf.js").then(({ default: e }) => e(cn, Vs)).catch(console.error);
 const fn = document.querySelectorAll(".markdown-container-folded");
 fn.length > 0 && fn.forEach((e) => {
   const t = e.querySelector(".markdown-container");

package/dist/styleguide-assets/preview-CzDBmeSK.js

@@ -0,0 +1 @@
+import "./preview-Cknxd_cP.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kss-modern",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Modern KSS compatible styleguide generator",
   "main": "./dist/node/lib/index.mjs",
   "types": "./dist/node/lib/index.d.ts",

package/dist/styleguide-assets/preview-BqaqMVtQ.js

@@ -1 +0,0 @@
-import "./preview-DxsvGJsw.js";