kss-modern 1.3.0-beta.1 → 1.3.0

package/README.md

@@ -6,10 +6,11 @@ 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
+- Per-section theme dropdown (`Themes:`) to 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
-- Accessibility auditing (axe-core) and HTML validation
+- Accessibility auditing (axe-core) and HTML validation, per component or page-wide via `window.kssAudit()` for CI and AI agents
 - Markdown descriptions with custom components (alerts, accordions)
 - Dark mode with three-way toggle (System/Light/Dark)
 - Global search, keyboard navigation, and "Open in Editor" links
@@ -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;
@@ -202,7 +212,7 @@ type StyleguideChange = {
     type: 'structural';
 } | {
     type: 'markup';
-    file: string;
+    files: string[];
     sections: 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;
@@ -202,7 +212,7 @@ type StyleguideChange = {
     type: 'structural';
 } | {
     type: 'markup';
-    file: string;
+    files: string[];
     sections: string[];
 };
 /**