@pure-ds/storybook 0.4.15 → 0.4.16

package/.storybook/addons/html-preview/Panel.jsx

@@ -16,9 +16,9 @@ const CodeBlock = styled.pre`
   margin: 0;
   padding: 16px;
   padding-bottom: ${props => (props.$compact ? '24px' : '60px')}; /* Space for fixed button */
-  font-family: ${props => props.theme.typography.fonts.mono};
-  font-size: 13px;
-  line-height: 1.6;
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+  font-size: 13.6px;
+  line-height: 24px;
   color: ${props => props.theme.color.defaultText};
   background: transparent;
   tab-size: 2;
@@ -32,6 +32,7 @@ const CodeBlock = styled.pre`
 
   .shiki code {
     background: transparent;
+    font-family: inherit !important;
   }
 `;
 

package/.storybook/addons/html-preview/preview.js

@@ -59,6 +59,29 @@ function extractHTML(element) {
   return clone.innerHTML || '';
 }
 
+/**
+ * Strip Lit template comments from rendered HTML
+ * Removes markers like <!--?lit$641514976$-->, <!---->, etc.
+ */
+function stripLitComments(html) {
+  if (!html) return '';
+  
+  // Remove Lit binding markers: <!--?lit$...$-->
+  html = html.replace(/<!--\?lit\$[^$]+\$-->/g, '');
+  
+  // Remove empty Lit comments: <!---->
+  html = html.replace(/<!---->/g, '');
+  
+  // Remove Lit template marker comments: <!--lit-part...-->
+  html = html.replace(/<!--lit-part[^>]*-->/g, '');
+  html = html.replace(/<!--\/lit-part-->/g, '');
+  
+  // Clean up any resulting multiple whitespace/newlines
+  html = html.replace(/\n\s*\n\s*\n/g, '\n\n');
+  
+  return html;
+}
+
 /**
  * Transform Lit template result to HTML string
  */
@@ -72,7 +95,10 @@ async function litToHTML(templateResult) {
   
   await new Promise(resolve => setTimeout(resolve, 50));
   
-  return formatHTML(temp.innerHTML);
+  // Strip Lit comments before formatting
+  const cleanedHTML = stripLitComments(temp.innerHTML);
+  
+  return formatHTML(cleanedHTML);
 }
 
 function serializeForDisplay(value) {

package/.storybook/docs.css

@@ -1,5 +1,12 @@
 /* Custom Docs page styling - hide all examples, show only description */
 
+/* Override Storybook's default mono font for code panels */
+pre, code, .docblock-source pre, .docblock-source code {
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+  font-size: 13.6px;
+  line-height: 24px;
+}
+
 /* Hide ALL story previews and interactive elements in Docs */
 .docs-story,
 .sbdocs-preview,

package/.storybook/htmlPreview.css

@@ -39,13 +39,13 @@
   padding: var(--spacing-4, 1rem);
   border-radius: var(--radius-md, 4px);
   overflow-x: auto;
-  font-size: 0.875rem;
-  line-height: 1.6;
+  font-size: 13.6px;
+  line-height: 24px;
   tab-size: 2;
 }
 
 .html-source-content pre code {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
 /* Fallback pre styling (before Shiki loads) */
@@ -54,9 +54,9 @@
   padding: var(--spacing-4, 1rem);
   border-radius: var(--radius-md, 4px);
   overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
+  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13.6px;
+  line-height: 24px;
   tab-size: 2;
   background: var(--color-surface-raised, #282c34);
   color: var(--color-text-primary, #abb2bf);

package/.storybook/htmlPreview.js

@@ -67,6 +67,29 @@ export function extractHTML(element) {
   return clone.innerHTML || '';
 }
 
+/**
+ * Strip Lit template comments from rendered HTML
+ * Removes markers like <!--?lit$641514976$-->, <!---->, etc.
+ */
+export function stripLitComments(html) {
+  if (!html) return '';
+  
+  // Remove Lit binding markers: <!--?lit$...$-->
+  html = html.replace(/<!--\?lit\$[^$]+\$-->/g, '');
+  
+  // Remove empty Lit comments: <!---->
+  html = html.replace(/<!---->/g, '');
+  
+  // Remove Lit template marker comments: <!--lit-part...-->
+  html = html.replace(/<!--lit-part[^>]*-->/g, '');
+  html = html.replace(/<!--\/lit-part-->/g, '');
+  
+  // Clean up any resulting multiple whitespace/newlines
+  html = html.replace(/\n\s*\n\s*\n/g, '\n\n');
+  
+  return html;
+}
+
 /**
  * Transform Lit template result to HTML string
  */
@@ -81,7 +104,10 @@ export async function litToHTML(templateResult) {
   // Wait for any custom elements to upgrade
   await new Promise(resolve => setTimeout(resolve, 50));
   
-  return formatHTML(temp.innerHTML);
+  // Strip Lit comments before formatting
+  const cleanedHTML = stripLitComments(temp.innerHTML);
+  
+  return formatHTML(cleanedHTML);
 }
 
 /**

package/.storybook/manager-head.html

@@ -0,0 +1,13 @@
+<!-- Source Code Pro font for code panel readability (like React.dev) -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
+
+<!-- Override Storybook's default monospace font in the manager frame -->
+<style>
+  pre, code, .docblock-source pre, .docblock-source code {
+    font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+    font-size: 13.6px;
+    line-height: 24px;
+  }
+</style>

package/.storybook/preview-head.html

@@ -1,5 +1,10 @@
 <!-- PDS runs in LIVE mode - styles are generated dynamically by Generator.applyStyles() -->
 
+<!-- Source Code Pro font for code readability (like React.dev) -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
+
 <!-- Import map for pds-jsonform and other components that use #pds/lit -->
 <script type="importmap">
 {

package/.storybook/preview.js

@@ -1304,7 +1304,7 @@ const preview = {
       ]
     },
     docs: {
-      page: DocsPage
+      page: DocsPage,
     },
     options: {
       storySort: {

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-09T09:26:50.541Z",
+  "generatedAt": "2026-01-09T11:28:21.937Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pure-ds/storybook",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
@@ -37,7 +37,7 @@
     "pds:build-icons": "pds-build-icons"
   },
   "peerDependencies": {
-    "@pure-ds/core": "^0.4.15"
+    "@pure-ds/core": "^0.4.16"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",

package/src/js/pds-configurator/pds-demo.js

@@ -661,7 +661,17 @@ customElements.define(
       }
 
       if (node.nodeType === Node.COMMENT_NODE) {
-        return indent(level) + `<!-- ${escapeText(node.textContent)} -->\n`;
+        // Skip Lit template comments (empty comments or ?lit$...$)
+        const commentText = node.textContent || "";
+        if (
+          commentText === "" ||
+          commentText.startsWith("?lit$") ||
+          commentText.startsWith("lit-part") ||
+          commentText === "/lit-part"
+        ) {
+          return "";
+        }
+        return indent(level) + `<!-- ${escapeText(commentText)} -->\n`;
       }
 
       if (node.nodeType === Node.ELEMENT_NODE) {