kss-modern 1.3.0-beta.2 → 1.4.0

package/README.md

@@ -6,6 +6,7 @@ A modern, KSS-compatible styleguide generator. Parses KSS comment blocks from CS
 
 - KSS-compatible comment parsing from CSS/SCSS files
 - Live component previews with modifier variants
+- Theme dropdowns — a global one in the header (`themes` option) and per-section ones (`Themes:`) — switch previews between the default and themed views
 - Pug template support via worker thread pool
 - Color palette and icon gallery documentation
 - Figma embed integration with light/dark theme sync
@@ -47,7 +48,7 @@ This scans all `.css` and `.scss` files in `contentDir` for KSS comment blocks a
 ## Documentation
 
 - **[Setup Guide](docs/setup.md)** — Installation, configuration reference, watch mode, project structure, and API reference
-- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, wrapper, html/body classes, etc.), and styleguide UI features
+- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, wrapper, html/body classes, themes, etc.), and styleguide UI features
 - **[Changelog](CHANGELOG.md)** — Version history and release notes
 
 ## Basic KSS Example

package/dist/node/lib/index.d.mts

@@ -4,6 +4,14 @@ interface SectionMeta {
     }[];
 }
 
+/**
+ * One entry of a section's `Themes:` block — a theme class (or class list, e.g. `.theme-a.compact`)
+ * written as in the KSS comment, plus the label shown in the theme dropdown.
+ */
+interface ThemeOption {
+    value: string;
+    description: string;
+}
 interface ColorObject {
     name?: string;
     color: string;
@@ -31,6 +39,8 @@ interface in2Section {
     wrapper?: string;
     htmlclass?: string;
     bodyclass?: string;
+    /** Theme contexts offered by the section's theme dropdown; classes are applied to the preview's <html>. */
+    themes?: ThemeOption[];
     source: {
         css: {
             file: string;
@@ -95,6 +105,16 @@ interface StyleguideConfiguration {
     contentDir: `${string}/`;
     projectTitle: string;
     deactivateDarkMode?: boolean;
+    /**
+     * Themes offered by the header's global **Theme** dropdown. Each entry is a theme class (or class
+     * list — `'theme-midnight'`, `'.theme-midnight.compact'`) that is added to the `<html>` of every
+     * preview iframe while selected, plus the label shown in the dropdown. A section's own `Themes:`
+     * dropdown overrides the global theme for that section.
+     */
+    themes?: {
+        value: string;
+        label: string;
+    }[];
     launchInEditor?: boolean | {
         rootDir: string;
     };

package/dist/node/lib/index.d.ts

@@ -4,6 +4,14 @@ interface SectionMeta {
     }[];
 }
 
+/**
+ * One entry of a section's `Themes:` block — a theme class (or class list, e.g. `.theme-a.compact`)
+ * written as in the KSS comment, plus the label shown in the theme dropdown.
+ */
+interface ThemeOption {
+    value: string;
+    description: string;
+}
 interface ColorObject {
     name?: string;
     color: string;
@@ -31,6 +39,8 @@ interface in2Section {
     wrapper?: string;
     htmlclass?: string;
     bodyclass?: string;
+    /** Theme contexts offered by the section's theme dropdown; classes are applied to the preview's <html>. */
+    themes?: ThemeOption[];
     source: {
         css: {
             file: string;
@@ -95,6 +105,16 @@ interface StyleguideConfiguration {
     contentDir: `${string}/`;
     projectTitle: string;
     deactivateDarkMode?: boolean;
+    /**
+     * Themes offered by the header's global **Theme** dropdown. Each entry is a theme class (or class
+     * list — `'theme-midnight'`, `'.theme-midnight.compact'`) that is added to the `<html>` of every
+     * preview iframe while selected, plus the label shown in the dropdown. A section's own `Themes:`
+     * dropdown overrides the global theme for that section.
+     */
+    themes?: {
+        value: string;
+        label: string;
+    }[];
     launchInEditor?: boolean | {
         rootDir: string;
     };

package/dist/node/lib/index.mjs

@@ -3,8 +3,8 @@ import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import fs from 'fs-extra';
 import { glob } from 'tinyglobby';
-import { l as logger, s as sanitizeSpecialCharacters, I as INSERT_VITE_PUG_TAG_RE, P as PUG_SRC_RE, a as PUG_ERROR_OVERLAY_TAG, c as compileMarkup, p as pugErrorFile, b as slugify, d as sectionSanitizeId, e as stripPugErrorOverlay, f as ensureStartingSlash, g as generateId, r as replaceWrapperContent, h as htmlToSearchText } from '../shared/kss-modern.BQiL0d8K.mjs';
-export { i as createLogger } from '../shared/kss-modern.BQiL0d8K.mjs';
+import { l as logger, s as sanitizeSpecialCharacters, I as INSERT_VITE_PUG_TAG_RE, P as PUG_SRC_RE, t as themeClassList, a as PUG_ERROR_OVERLAY_TAG, c as compileMarkup, p as pugErrorFile, b as slugify, d as sectionSanitizeId, e as stripPugErrorOverlay, f as ensureStartingSlash, g as generateId, r as replaceWrapperContent, h as htmlToSearchText } from '../shared/kss-modern.DQ_V-57G.mjs';
+export { i as createLogger } from '../shared/kss-modern.DQ_V-57G.mjs';
 import htmlLang from '@shikijs/langs/html';
 import markdownLang from '@shikijs/langs/markdown';
 import scssLang from '@shikijs/langs/scss';
@@ -506,6 +506,16 @@ function parseIcons(text) {
   });
   return icons;
 }
+function parseThemes(text) {
+  return text.split("\n").map((line) => line.trim()).filter((line) => line.length > 0).map((line) => {
+    const [value, ...labelParts] = line.split(/\s+-\s+/);
+    const description = labelParts.join(" - ").trim();
+    return {
+      value: value.trim(),
+      description: description.length > 0 ? description : themeClassList(value)
+    };
+  });
+}
 function toFloat(value) {
   return Number.isNaN(Number(value)) ? 0 : Number.parseFloat(value);
 }
@@ -563,6 +573,7 @@ function kssParser(input, options = {}) {
       processProperty(sectionRecord, paragraphs, "Wrapper", (x) => x.trim());
       processProperty(sectionRecord, paragraphs, "htmlclass", (x) => x.trim());
       processProperty(sectionRecord, paragraphs, "bodyclass", (x) => x.trim());
+      processProperty(sectionRecord, paragraphs, "Themes", parseThemes);
       processProperty(sectionRecord, paragraphs, "Icons", parseIcons);
       processProperty(sectionRecord, paragraphs, "Figma", (x) => x.trim());
       processProperty(sectionRecord, paragraphs, "Status", (x) => x.trim().toLowerCase());
@@ -867,6 +878,7 @@ async function parse(input, contentDir) {
         wrapper: section.wrapper,
         htmlclass: section.htmlclass,
         bodyclass: section.bodyclass,
+        themes: section.themes,
         source: computeSource(section),
         previewFileName: `preview-${section.reference}.html`,
         fullpageFileName: `fullpage-${section.reference}.html`
@@ -905,6 +917,7 @@ async function parse(input, contentDir) {
           wrapper: section.wrapper,
           htmlclass: section.htmlclass,
           bodyclass: section.bodyclass,
+          themes: section.themes,
           source: computeSource(section),
           previewFileName: `preview-${section.reference}.html`,
           fullpageFileName: `fullpage-${section.reference}.html`
@@ -934,6 +947,7 @@ async function parse(input, contentDir) {
           wrapper: section.wrapper,
           htmlclass: section.htmlclass,
           bodyclass: section.bodyclass,
+          themes: section.themes,
           sections: [],
           source: computeSource(section),
           previewFileName: `preview-${section.reference}.html`,
@@ -1354,7 +1368,7 @@ async function generateFullPageFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
       ` : `<meta name="theme-color" content="${data.theme}">`}
-    <script type="module" src="/styleguide-assets/fullpage-D-fU_bAa.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-B7IV3eSt.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -1421,6 +1435,7 @@ function getHeaderHtml(config) {
         </button>
 
         <div class="flex gap-4">
+          ${config.themes?.length ? renderGlobalThemeSelect(config.themes) : ""}
           ${config.mode === "development" && config.launchInEditor ? `
               <form class="hidden editor-select md:block">
                 <fieldset class="flex items-center rounded-3xl border border-styleguide-border">
@@ -1554,30 +1569,34 @@ function getCodeAuditDialog() {
     </dialog>
   `;
 }
-function renderTab(data) {
+function renderTab(data, aside = "") {
   const tabId = generateId();
   return `
     <div class="tabs">
-        <div
-            class="inline-flex relative justify-start flex-wrap rounded-md p-0.5 bg-styleguide-bg-highlight" 
-            role="tablist"
-        >
+        <div class="flex flex-wrap items-center justify-between gap-3">
             <div
-                class="tab-trigger-background absolute inset-y-0.5 left-0 bg-[rgb(242,242,242)] dark:bg-[rgb(26,26,26)] rounded"
-            ></div>
-        
-            ${data.map((tab, index) => `
-                <button 
-                    id="tab-trigger-${tabId}-${index}"
-                    role="tab"
-                    aria-selected="${(index === 0).toString()}"
-                    aria-controls="tab-panel-${tabId}-${index}" 
-                    class="inline-flex gap-1 items-center relative px-4 py-2 text-sm cursor-pointer aria-selected:text-styleguide-highlight transition duration-400"
-                >
-                    ${tab.icon ?? ""}
-                    ${tab.title}
-                </button>
-            `).join("\n")}
+                class="inline-flex relative justify-start flex-wrap rounded-md p-0.5 bg-styleguide-bg-highlight" 
+                role="tablist"
+            >
+                <div
+                    class="tab-trigger-background absolute inset-y-0.5 left-0 bg-[rgb(242,242,242)] dark:bg-[rgb(26,26,26)] rounded"
+                ></div>
+            
+                ${data.map((tab, index) => `
+                    <button 
+                        id="tab-trigger-${tabId}-${index}"
+                        role="tab"
+                        aria-selected="${(index === 0).toString()}"
+                        aria-controls="tab-panel-${tabId}-${index}" 
+                        class="inline-flex gap-1 items-center relative px-4 py-2 text-sm cursor-pointer aria-selected:text-styleguide-highlight transition duration-400"
+                    >
+                        ${tab.icon ?? ""}
+                        ${tab.title}
+                    </button>
+                `).join("\n")}
+            </div>
+
+            ${aside}
         </div>
         
         ${data.map((tab, index) => `
@@ -1594,6 +1613,37 @@ function renderTab(data) {
     </div>
   `;
 }
+function renderThemeSelectControl(id, themes, scope) {
+  const wrapperClass = scope === "global" ? "hidden md:inline-flex" : "inline-flex";
+  return `
+    <div class="${wrapperClass} items-center gap-2 text-sm">
+        <label for="${id}" class="select-none">Theme</label>
+        <span class="relative inline-flex">
+            <select
+                id="${id}"
+                class="appearance-none cursor-pointer rounded-md border py-1.5 pl-3 pr-8 text-sm transition duration-200 border-styleguide-border bg-styleguide-bg-highlight hover:text-styleguide-highlight focus:text-styleguide-highlight focus-visible:outline focus-visible:outline-blue-600"
+                data-${scope}-theme-select
+            >
+                <option value="">Default</option>
+                ${themes.map((theme) => `<option value="${sanitizeSpecialCharacters(themeClassList(theme.value))}">${sanitizeSpecialCharacters(theme.label)}</option>`).join("\n")}
+            </select>
+            <svg class="pointer-events-none absolute top-1/2 right-2.5 size-3.5 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
+            </svg>
+        </span>
+    </div>
+  `;
+}
+function renderGlobalThemeSelect(themes) {
+  return renderThemeSelectControl("global-theme-select", themes, "global");
+}
+function renderThemeSelect(section, themes) {
+  return renderThemeSelectControl(
+    `theme-select-${sectionSanitizeId(section.id)}`,
+    themes.map((theme) => ({ value: theme.value, label: theme.description })),
+    "section"
+  );
+}
 function getMainContentHtml(secondLevelSection, config) {
   let output = "";
   function renderSection(section) {
@@ -1728,6 +1778,7 @@ function getMainContentRegular(section, config) {
         >
     </a>
   `;
+  const themeSelectMarkup = section.markup && section.themes && section.themes.length > 0 ? renderThemeSelect(section, section.themes) : "";
   const codePreviewMarkup = `
     <!-- Preview Box -->
     <div class="mt-4 overflow-hidden rounded-2xl border border-styleguide-border">
@@ -1933,8 +1984,16 @@ function getMainContentRegular(section, config) {
     }
     return `
       <div class="mt-4">
-        ${renderTab(tabs).replaceAll("<replace-figma-iframe-loading-strategy>", tabs.length > 1 ? "lazy" : "eager")}
+        ${renderTab(tabs, themeSelectMarkup).replaceAll("<replace-figma-iframe-loading-strategy>", tabs.length > 1 ? "lazy" : "eager")}
+      </div>
+    `;
+  }
+  if (themeSelectMarkup) {
+    return `
+      <div class="mt-4 flex flex-wrap items-center justify-end gap-3">
+        ${themeSelectMarkup}
       </div>
+      ${codePreviewMarkup}
     `;
   }
   return codePreviewMarkup;
@@ -2173,7 +2232,7 @@ async function generatePreviewFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
       ` : `<meta name="theme-color" content="${data.theme}">`}
-    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-BJ971T05.css">
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-Cg1aeKi1.css">
     <script>
   //#region client/lib/iframe-resize.ts
 var e = [
@@ -2336,7 +2395,7 @@ document.addEventListener("DOMContentLoaded", () => {
 //#endregion
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-DEipbLLB.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-tkLDBWOv.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">
@@ -2747,7 +2806,7 @@ async function buildContext(config) {
 }
 const ASSETS_MARKER_FILE = ".kss-modern-assets";
 function getAssetsBuildId(theme) {
-  return `kss-modern-BJ971T05.css
+  return `kss-modern-Cg1aeKi1.css
 ${JSON.stringify(theme)}
 `;
 }

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

@@ -1,5 +1,5 @@
 import { parentPort } from 'node:worker_threads';
-import { c as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.BQiL0d8K.mjs';
+import { c as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.DQ_V-57G.mjs';
 import 'node:fs';
 import 'node:fs/promises';
 import 'node:path';

package/dist/node/shared/{kss-modern.BQiL0d8K.mjs → kss-modern.DQ_V-57G.mjs}

@@ -80,6 +80,9 @@ const WRAPPER_CONTENT_RE = /<wrapper-content\s*\/>|\{\{\s*wrapper-content\s*\}\}
 function replaceWrapperContent(wrapper, content) {
   return wrapper.replace(WRAPPER_CONTENT_RE, () => content);
 }
+function themeClassList(value) {
+  return value.split(/[.\s]+/).filter(Boolean).join(" ");
+}
 function* idGenerator() {
   let id = 0;
   while (true) {
@@ -251,4 +254,4 @@ async function compileMarkup(contentDir, mode, html, sectionId) {
   return { html: result, dependencies: [...new Set(dependencies)] };
 }
 
-export { INSERT_VITE_PUG_TAG_RE as I, PUG_SRC_RE as P, PUG_ERROR_OVERLAY_TAG as a, slugify as b, compileMarkup as c, sectionSanitizeId as d, stripPugErrorOverlay as e, ensureStartingSlash as f, generateId as g, htmlToSearchText as h, createLogger as i, logger as l, pugErrorFile as p, replaceWrapperContent as r, sanitizeSpecialCharacters as s };
+export { INSERT_VITE_PUG_TAG_RE as I, PUG_SRC_RE as P, PUG_ERROR_OVERLAY_TAG as a, slugify as b, compileMarkup as c, sectionSanitizeId as d, stripPugErrorOverlay as e, ensureStartingSlash as f, generateId as g, htmlToSearchText as h, createLogger as i, logger as l, pugErrorFile as p, replaceWrapperContent as r, sanitizeSpecialCharacters as s, themeClassList as t };

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

@@ -3,16 +3,27 @@
     "file": "animate-x_9xNIEv.js",
     "name": "animate"
   },
+  "_audit-runner-Ch009v98.js": {
+    "file": "audit-runner-Ch009v98.js",
+    "name": "audit-runner"
+  },
   "_code-highlight-Fm7cxf-E.js": {
     "file": "code-highlight-Fm7cxf-E.js",
     "name": "code-highlight"
   },
+  "_preview-theme-DS4xqXIm.js": {
+    "file": "preview-theme-DS4xqXIm.js",
+    "name": "preview-theme",
+    "imports": [
+      "_section-previews-CnlrC8Gz.js"
+    ]
+  },
   "_rolldown-runtime-B1bRi_D7.js": {
     "file": "rolldown-runtime-B1bRi_D7.js",
     "name": "rolldown-runtime"
   },
-  "_section-previews-D-Mr2eVX.js": {
-    "file": "section-previews-D-Mr2eVX.js",
+  "_section-previews-CnlrC8Gz.js": {
+    "file": "section-previews-CnlrC8Gz.js",
     "name": "section-previews"
   },
   "_shared-hGcWlnRM.js": {
@@ -28,7 +39,7 @@
     "name": "utils"
   },
   "client/fullpage.ts": {
-    "file": "fullpage-D-fU_bAa.js",
+    "file": "fullpage-B7IV3eSt.js",
     "name": "fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true,
@@ -42,13 +53,14 @@
     ]
   },
   "client/lib/a11y-report.ts": {
-    "file": "a11y-report-BgeWSrYe.js",
+    "file": "a11y-report-BFnWMaWr.js",
     "name": "a11y-report",
     "src": "client/lib/a11y-report.ts",
     "isDynamicEntry": true,
     "imports": [
       "_utils-DtB-AzJa.js",
-      "_section-previews-D-Mr2eVX.js"
+      "_audit-runner-Ch009v98.js",
+      "_section-previews-CnlrC8Gz.js"
     ]
   },
   "client/lib/clipboard.ts": {
@@ -68,8 +80,17 @@
     "src": "client/lib/editor-select.ts",
     "isDynamicEntry": true
   },
+  "client/lib/global-theme-select.ts": {
+    "file": "global-theme-select-DM7GN8Dn.js",
+    "name": "global-theme-select",
+    "src": "client/lib/global-theme-select.ts",
+    "isDynamicEntry": true,
+    "imports": [
+      "_preview-theme-DS4xqXIm.js"
+    ]
+  },
   "client/lib/html-validator.ts": {
-    "file": "html-validator-DJGwslsw.js",
+    "file": "html-validator-sgeZtEeH.js",
     "name": "html-validator",
     "src": "client/lib/html-validator.ts",
     "isDynamicEntry": true,
@@ -77,7 +98,8 @@
       "_code-highlight-Fm7cxf-E.js",
       "_utils-DtB-AzJa.js",
       "_shared-hGcWlnRM.js",
-      "_section-previews-D-Mr2eVX.js"
+      "_audit-runner-Ch009v98.js",
+      "_section-previews-CnlrC8Gz.js"
     ]
   },
   "client/lib/icons.ts": {
@@ -90,6 +112,16 @@
       "_utils-DtB-AzJa.js"
     ]
   },
+  "client/lib/section-theme-select.ts": {
+    "file": "section-theme-select-BHhiP4pl.js",
+    "name": "section-theme-select",
+    "src": "client/lib/section-theme-select.ts",
+    "isDynamicEntry": true,
+    "imports": [
+      "_section-previews-CnlrC8Gz.js",
+      "_preview-theme-DS4xqXIm.js"
+    ]
+  },
   "client/preview-inline.ts": {
     "file": "preview-inline-ByTkw_pt.js",
     "name": "preview-inline",
@@ -97,7 +129,7 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-DEipbLLB.js",
+    "file": "preview-tkLDBWOv.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
@@ -113,6 +145,8 @@
       "client/lib/html-validator.ts",
       "client/lib/icons.ts",
       "client/lib/clipboard.ts",
+      "client/lib/global-theme-select.ts",
+      "client/lib/section-theme-select.ts",
       "client/lib/editor-select.ts"
     ]
   },
@@ -135,7 +169,7 @@
     ]
   },
   "style.css": {
-    "file": "kss-modern-BJ971T05.css",
+    "file": "kss-modern-Cg1aeKi1.css",
     "src": "style.css"
   }
 }

package/dist/styleguide-assets/{a11y-report-BgeWSrYe.js → a11y-report-BFnWMaWr.js}

@@ -1,5 +1,6 @@
 import { r as e } from "./utils-DtB-AzJa.js";
-import { a as t, c as n, i as r, n as i, o as a, s as o, t as s } from "./section-previews-D-Mr2eVX.js";
+import { a as t, i as n, n as r, o as i, r as a } from "./audit-runner-Ch009v98.js";
+import { n as o, r as s } from "./section-previews-CnlrC8Gz.js";
 //#region client/lib/a11y-report.ts
 var c = {
 	violations: ["violations", "incomplete"],
@@ -9,8 +10,8 @@ function l(t) {
 	return e(t.trim()).replace(/^section-/, "");
 }
 function u() {
-	return Array.from(document.querySelectorAll(s)).flatMap((e) => {
-		let { base: t, modifiers: n } = i(e);
+	return Array.from(document.querySelectorAll(o)).flatMap((e) => {
+		let { base: t, modifiers: n } = s(e);
 		if (!t) return [];
 		let r = Number.parseInt(e.dataset.sourceLine ?? "", 10);
 		return [{
@@ -37,7 +38,7 @@ function d(e, t) {
 }
 function f(e) {
 	return {
-		target: t(e.target),
+		target: a(e.target),
 		html: e.html || void 0,
 		failureSummary: e.failureSummary || void 0,
 		measured: e.measured,
@@ -60,24 +61,24 @@ function p(e, t, n = {}) {
 function m(e) {
 	let t = /* @__PURE__ */ new Map();
 	return e.forEach((e) => {
-		let n = {
+		let r = {
 			target: e.selector ?? void 0,
 			failureSummary: e.message,
 			line: e.line,
 			column: e.column
-		}, r = t.get(e.ruleId);
-		if (r) {
-			r.nodes.push(n);
+		}, i = t.get(e.ruleId);
+		if (i) {
+			i.nodes.push(r);
 			return;
 		}
 		t.set(e.ruleId, {
 			source: "html-validate",
 			group: "violations",
 			id: e.ruleId,
-			impact: a(e.severity.toString()),
+			impact: n(e.severity.toString()),
 			description: e.ruleDescription || e.message,
 			helpUrl: e.ruleUrl || "",
-			nodes: [n]
+			nodes: [r]
 		});
 	}), Array.from(t.values());
 }
@@ -128,8 +129,8 @@ async function b(e) {
 	for (; !e.every(t) && Date.now() < n;) await new Promise((e) => setTimeout(e, 100));
 }
 var x = {
-	runAccessibilityAudit: o,
-	runModifierContrastAudit: n,
+	runAccessibilityAudit: t,
+	runModifierContrastAudit: i,
 	waitForIframes: b
 };
 async function S(e = {}, t = x) {

package/dist/styleguide-assets/{section-previews-D-Mr2eVX.js → audit-runner-Ch009v98.js}

@@ -37,13 +37,4 @@ function s(e, t) {
 	return a(e, "runColorContrastAudit", t);
 }
 //#endregion
-//#region client/lib/section-previews.ts
-var c = ".styleguide-section";
-function l(e) {
-	return {
-		base: e?.querySelector("iframe.preview-iframe:not([data-modifier])") ?? null,
-		modifiers: Array.from(e?.querySelectorAll("iframe.preview-iframe[data-modifier]") ?? [])
-	};
-}
-//#endregion
-export { n as a, s as c, t as i, l as n, r as o, e as r, o as s, c as t };
+export { o as a, r as i, t as n, s as o, n as r, e as t };