@pure-ds/storybook 0.4.5 → 0.4.7

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

@@ -1,8 +1,9 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useChannel } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 import { EVENTS } from './constants.js';
 import { styled } from '@storybook/theming';
+import { loadShiki, escapeHtml } from '../../shiki.js';
 
 const Container = styled.div`
   position: relative;
@@ -21,22 +22,16 @@ const CodeBlock = styled.pre`
   color: ${props => props.theme.color.defaultText};
   background: transparent;
   tab-size: 2;
-  
-  .html-token-tag {
-    color: #e06c75;
-  }
-  
-  .html-token-attr {
-    color: #d19a66;
-  }
-  
-  .html-token-value {
-    color: #98c379;
+
+  /* Shiki generates its own pre/code, style the inner content */
+  .shiki {
+    background: transparent !important;
+    margin: 0;
+    padding: 0;
   }
-  
-  .html-token-comment {
-    color: #5c6370;
-    font-style: italic;
+
+  .shiki code {
+    background: transparent;
   }
 `;
 
@@ -115,6 +110,50 @@ const CheckIcon = () => (
 export const Panel = ({ active }) => {
   const [source, setSource] = useState({ markup: '', jsonForms: [] });
   const [copied, setCopied] = useState(false);
+  const [highlightedMarkup, setHighlightedMarkup] = useState('');
+  const shikiRef = useRef(null);
+
+  // Load Shiki once on mount
+  useEffect(() => {
+    loadShiki().then(highlighter => {
+      shikiRef.current = highlighter;
+    });
+  }, []);
+
+  // Highlight markup when source changes
+  useEffect(() => {
+    if (!source.markup) {
+      setHighlightedMarkup('');
+      return;
+    }
+
+    const highlighter = shikiRef.current;
+    if (highlighter) {
+      try {
+        const html = highlighter.codeToHtml(source.markup, {
+          lang: 'html',
+          theme: 'github-dark'
+        });
+        setHighlightedMarkup(html);
+      } catch (err) {
+        setHighlightedMarkup(`<pre><code>${escapeHtml(source.markup)}</code></pre>`);
+      }
+    } else {
+      // Fallback while Shiki loads
+      setHighlightedMarkup(`<pre><code>${escapeHtml(source.markup)}</code></pre>`);
+      // Retry when Shiki becomes available
+      loadShiki().then(hl => {
+        if (hl && source.markup) {
+          try {
+            const html = hl.codeToHtml(source.markup, { lang: 'html', theme: 'github-dark' });
+            setHighlightedMarkup(html);
+          } catch (err) {
+            // Keep fallback
+          }
+        }
+      });
+    }
+  }, [source.markup]);
 
   useChannel({
     [EVENTS.UPDATE_HTML]: (payload) => {
@@ -162,94 +201,6 @@ export const Panel = ({ active }) => {
     }
   }, [source.markup]);
 
-  const highlightHTML = useCallback((code) => {
-    if (!code) return '';
-    
-    let result = '';
-    let i = 0;
-    
-    const escapeHtml = (text) => {
-      return text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-    };
-    
-    while (i < code.length) {
-      // Handle HTML comments
-      if (code.substr(i, 4) === '<!--') {
-        const end = code.indexOf('-->', i);
-        if (end !== -1) {
-          const comment = code.substring(i, end + 3);
-          result += `<span class="html-token-comment">${escapeHtml(comment)}</span>`;
-          i = end + 3;
-          continue;
-        }
-      }
-      
-      // Handle tags
-      if (code[i] === '<') {
-        const tagEnd = code.indexOf('>', i);
-        if (tagEnd !== -1) {
-          const tagContent = code.substring(i + 1, tagEnd);
-          result += '&lt;';
-          
-          // Check if it's a closing tag
-          if (tagContent[0] === '/') {
-            result += '/';
-            const tagName = tagContent.substring(1).split(/[\s>]/)[0];
-            result += `<span class="html-token-tag">${escapeHtml(tagName)}</span>`;
-          } else {
-            // Parse tag name and attributes
-            const parts = tagContent.match(/^([\w-]+)([\s\S]*?)(\/?)?$/);
-            if (parts) {
-              const [, tagName, attrsStr, slash] = parts;
-              result += `<span class="html-token-tag">${escapeHtml(tagName)}</span>`;
-              
-              // Parse attributes
-              if (attrsStr.trim()) {
-                const attrRegex = /([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]*)))?/g;
-                let match;
-                let lastIndex = 0;
-                
-                while ((match = attrRegex.exec(attrsStr)) !== null) {
-                  result += escapeHtml(attrsStr.substring(lastIndex, match.index));
-                  
-                  const [fullMatch, attrName, doubleQuoted, singleQuoted, unquoted] = match;
-                  result += `<span class="html-token-attr">${escapeHtml(attrName)}</span>`;
-                  
-                  if (doubleQuoted !== undefined) {
-                    result += `=<span class="html-token-value">"${escapeHtml(doubleQuoted)}"</span>`;
-                  } else if (singleQuoted !== undefined) {
-                    result += `=<span class="html-token-value">'${escapeHtml(singleQuoted)}'</span>`;
-                  } else if (unquoted !== undefined) {
-                    result += `=<span class="html-token-value">${escapeHtml(unquoted)}</span>`;
-                  }
-                  
-                  lastIndex = match.index + fullMatch.length;
-                }
-                
-                result += escapeHtml(attrsStr.substring(lastIndex));
-              }
-              
-              if (slash) result += '/';
-            }
-          }
-          
-          result += '&gt;';
-          i = tagEnd + 1;
-          continue;
-        }
-      }
-      
-      // Regular text
-      result += escapeHtml(code[i]);
-      i++;
-    }
-    
-    return result;
-  }, []);
-
   const hasMarkup = Boolean(source.markup);
   const hasJsonForms = source.jsonForms.length > 0;
 
@@ -269,9 +220,7 @@ export const Panel = ({ active }) => {
       {hasMarkup && (
         <SectionWrapper>
           <SectionHeading>Markup</SectionHeading>
-          <CodeBlock>
-            <code dangerouslySetInnerHTML={{ __html: highlightHTML(source.markup) }} />
-          </CodeBlock>
+          <CodeBlock dangerouslySetInnerHTML={{ __html: highlightedMarkup }} />
         </SectionWrapper>
       )}
 

package/.storybook/addons/pds-configurator/SearchTool.js

@@ -0,0 +1,44 @@
+import React, { useState, useCallback } from 'react';
+import { useChannel } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { EVENTS } from './constants.js';
+
+export const SearchTool = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const channel = useChannel({
+    [EVENTS.QUERY_EXECUTED + '_RESPONSE']: (data) => {
+      console.log('Query response received:', data);
+    }
+  });
+
+  const toggleSearch = useCallback(() => {
+    const newState = !isOpen;
+    console.log('Toggle search - current isOpen:', isOpen, 'newState:', newState);
+    
+    if (newState) {
+      // Emit event to open search in preview
+      const searchQuery = prompt('Enter search query (e.g., "primary color", "spacing", "button"):');
+      if (searchQuery) {
+        console.log('Executing search query:', searchQuery);
+        channel.emit(EVENTS.QUERY_EXECUTED, { query: searchQuery });
+      }
+    }
+    
+    setIsOpen(newState);
+  }, [isOpen, channel]);
+
+  return (
+    <IconButton
+      key="search-tool"
+      active={isOpen}
+      title="Quick Search PDS"
+      onClick={toggleSearch}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.35-4.35" />
+      </svg>
+    </IconButton>
+  );
+};

package/.storybook/htmlPreview.css

@@ -33,59 +33,33 @@
   padding: var(--spacing-4, 1rem);
 }
 
-.html-source-pre {
+/* Shiki-generated code blocks */
+.html-source-content pre {
   margin: 0;
   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;
   tab-size: 2;
 }
 
-/* Syntax highlighting colors - work in both light and dark modes */
-:root {
-  --code-bg: #282c34;
-  --code-text: #abb2bf;
-  --code-tag: #e06c75;
-  --code-attr: #d19a66;
-  --code-value: #98c379;
-  --code-comment: #5c6370;
-}
-
-[data-theme="dark"] {
-  --code-bg: #1e1e1e;
-  --code-text: #d4d4d4;
-  --code-tag: #569cd6;
-  --code-attr: #9cdcfe;
-  --code-value: #ce9178;
-  --code-comment: #6a9955;
+.html-source-content pre code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
 }
 
+/* Fallback pre styling (before Shiki loads) */
 .html-source-pre {
-  background: var(--code-bg);
-}
-
-.html-source-code {
-  color: var(--code-text);
-}
-
-.html-token-tag {
-  color: var(--code-tag);
-}
-
-.html-token-attr {
-  color: var(--code-attr);
-}
-
-.html-token-value {
-  color: var(--code-value);
-}
-
-.html-token-comment {
-  color: var(--code-comment);
-  font-style: italic;
+  margin: 0;
+  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;
+  tab-size: 2;
+  background: var(--color-surface-raised, #282c34);
+  color: var(--color-text-primary, #abb2bf);
 }
 
 pds-config-form {

package/.storybook/htmlPreview.js

@@ -1,10 +1,14 @@
 /**
  * HTML Preview and Copy Utility for Storybook
  * Provides HTML source viewing and copy functionality for all stories
- * Uses Storybook's built-in source code display in Docs mode
+ * Uses Shiki for syntax highlighting
  */
 
 import { render as litRender } from 'lit';
+import { highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
+
+// Pre-load Shiki in the background
+preloadShiki();
 
 /**
  * Format HTML string with proper indentation
@@ -145,96 +149,14 @@ export const withHTMLSource = (storyFn, context) => {
       }
       
       const codeEl = sourceSection.querySelector('.html-source-code');
-      if (codeEl && html) {
-        // Simple syntax highlighter that properly tokenizes HTML
-        const highlightHTML = (code) => {
-          let result = '';
-          let i = 0;
-          
-          while (i < code.length) {
-            // Handle HTML comments
-            if (code.substr(i, 4) === '<!--') {
-              const end = code.indexOf('-->', i);
-              if (end !== -1) {
-                const comment = code.substring(i, end + 3);
-                result += `<span class="html-token-comment">${escapeHtml(comment)}</span>`;
-                i = end + 3;
-                continue;
-              }
-            }
-            
-            // Handle tags
-            if (code[i] === '<') {
-              const tagEnd = code.indexOf('>', i);
-              if (tagEnd !== -1) {
-                const tagContent = code.substring(i + 1, tagEnd);
-                result += '&lt;';
-                
-                // Check if it's a closing tag
-                if (tagContent[0] === '/') {
-                  result += '/';
-                  const tagName = tagContent.substring(1).split(/[\s>]/)[0];
-                  result += `<span class="html-token-tag">${escapeHtml(tagName)}</span>`;
-                } else {
-                  // Parse tag name and attributes
-                  const parts = tagContent.match(/^([\w-]+)([\s\S]*?)(\/?)?$/);
-                  if (parts) {
-                    const [, tagName, attrsStr, slash] = parts;
-                    result += `<span class="html-token-tag">${escapeHtml(tagName)}</span>`;
-                    
-                    // Parse attributes
-                    if (attrsStr.trim()) {
-                      const attrRegex = /([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]*)))?/g;
-                      let match;
-                      let lastIndex = 0;
-                      
-                      while ((match = attrRegex.exec(attrsStr)) !== null) {
-                        // Add whitespace before attribute
-                        result += escapeHtml(attrsStr.substring(lastIndex, match.index));
-                        
-                        const [fullMatch, attrName, doubleQuoted, singleQuoted, unquoted] = match;
-                        result += `<span class="html-token-attr">${escapeHtml(attrName)}</span>`;
-                        
-                        if (doubleQuoted !== undefined) {
-                          result += `=<span class="html-token-value">"${escapeHtml(doubleQuoted)}"</span>`;
-                        } else if (singleQuoted !== undefined) {
-                          result += `=<span class="html-token-value">'${escapeHtml(singleQuoted)}'</span>`;
-                        } else if (unquoted !== undefined) {
-                          result += `=<span class="html-token-value">${escapeHtml(unquoted)}</span>`;
-                        }
-                        
-                        lastIndex = match.index + fullMatch.length;
-                      }
-                      
-                      result += escapeHtml(attrsStr.substring(lastIndex));
-                    }
-                    
-                    if (slash) result += '/';
-                  }
-                }
-                
-                result += '&gt;';
-                i = tagEnd + 1;
-                continue;
-              }
-            }
-            
-            // Regular text
-            result += escapeHtml(code[i]);
-            i++;
-          }
-          
-          return result;
-        };
-        
-        const escapeHtml = (text) => {
-          return text
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;');
-        };
+      const preEl = sourceSection.querySelector('.html-source-pre');
+      if (preEl && html) {
+        // Use Shiki for syntax highlighting
+        const theme = getCurrentTheme();
+        const highlighted = await highlight(html, 'html', theme);
         
-        codeEl.innerHTML = highlightHTML(html);
+        // Shiki returns complete <pre><code>...</code></pre>, replace the whole pre element
+        preEl.outerHTML = highlighted;
       }
       
       // Setup copy button

package/.storybook/manager.js

@@ -32,7 +32,8 @@ async function loadOntology() {
   if (referenceData) return referenceData;
   
   try {
-    const response = await fetch('/pds-data/pds-reference.json');
+    // Use relative path so it works both in dev and when deployed to a subdirectory
+    const response = await fetch('./pds-data/pds-reference.json');
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     referenceData = await response.json();
     buildIndices();

package/.storybook/preview.js

@@ -287,7 +287,7 @@ const withGlobalsHandler = (story, context) => {
 const DEFAULT_STORY_TAGS = new Set(['dev', 'test', 'story', 'stories', 'autodocs', 'example', 'examples']);
 
 const TAG_SYNONYMS = new Map([
-  ['padding', 'spacing'],
+  ['padding', 'spacing', 'space'],
   ['gap', 'spacing'],
   ['grid', 'layout'],
   ['flex', 'layout'],

package/.storybook/shiki.js

@@ -0,0 +1,14 @@
+/**
+ * Shared Shiki syntax highlighter for PDS Storybook
+ * Provides consistent code highlighting across all stories and previews
+ * 
+ * Re-exports from stories/utils/shiki.js to maintain a single source of truth
+ */
+
+export { 
+  loadShiki, 
+  highlight, 
+  getCurrentTheme, 
+  escapeHtml, 
+  preloadShiki 
+} from '../stories/utils/shiki.js';

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2025-12-24T10:33:42.738Z",
+  "generatedAt": "2025-12-30T11:12:24.605Z",
   "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.5",
+  "version": "0.4.7",
   "description": "Storybook showcase for Pure Design System with live configuration",
   "type": "module",
   "private": false,
@@ -35,7 +35,7 @@
     "storybook:build": "npm run build-storybook"
   },
   "peerDependencies": {
-    "@pure-ds/core": "^0.4.5"
+    "@pure-ds/core": "^0.4.7"
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",

package/public/assets/js/app.js

@@ -3684,7 +3684,7 @@ export const pdsConfig = ${JSON.stringify(this.config,null,2)};
             `,setTimeout(()=>{p.innerHTML=`
                 <pds-icon icon="clipboard" size="sm"></pds-icon>
                 Copy HTML
-              `},2e3)})})},100)}async loadShiki(){if(this.#a)return this.#a;if(this.#e){for(;this.#e;)await new Promise(r=>setTimeout(r,100));return this.#a}this.#e=!0;try{let r=await import("https://esm.sh/shiki@1.0.0");return this.#a=await r.getHighlighter({themes:["dark-plus"],langs:["html"]}),this.#a}catch(r){return console.error("Failed to load Shiki:",r),null}finally{this.#e=!1}}async highlightWithShiki(r){let e=await this.loadShiki();if(!e)return this.escapeHTML(r);try{let a=e.codeToHtml(r,{lang:"html",theme:"dark-plus"}).match(/<code[^>]*>([\s\S]*)<\/code>/);return a?a[1]:this.escapeHTML(r)}catch(t){return console.error("Shiki highlighting failed:",t),this.escapeHTML(r)}}escapeHTML(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}async getShowdownConverter(){if(this._showdown)return this._showdown;let r=await this.loadShowdownFromCDN();return!r||!r.Converter?null:(this._showdown=new r.Converter({ghCompatibleHeaderId:!0,tables:!0,strikethrough:!0,tasklists:!0}),this._showdown)}async loadShowdownFromCDN(){if(typeof window<"u"&&window.showdown)return window.showdown;if(this._showdownLoading){for(;this._showdownLoading;)await new Promise(e=>setTimeout(e,50));return window.showdown||null}this._showdownLoading=!0;let r=["https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js","https://unpkg.com/showdown@2.1.0/dist/showdown.min.js"];for(let e of r)try{if(await this._injectScript(e,"showdown"),window.showdown)return this._showdownLoading=!1,window.showdown}catch{}return this._showdownLoading=!1,null}_injectScript(r,e){return new Promise((t,a)=>{if(document.querySelector(`script[data-lib="${e}"][src="${r}"]`)){setTimeout(t,0);return}let o=document.createElement("script");o.src=r,o.async=!0,o.defer=!0,o.dataset.lib=e||"lib",o.onload=()=>t(),o.onerror=()=>{o.remove(),a(new Error(`Failed to load script: ${r}`))},document.head.appendChild(o)})}scrollToRelevantSection(r){console.log("\u{1F3AF} Scrolling to section for field:",r);let e=r.startsWith("/")?r.slice(1):r;console.log("  Normalized path:",e);let t={"colors/primary":"color-system","colors/secondary":"color-system","colors/accent":"color-system","colors/background":"color-system","colors/success":"color-system","colors/warning":"color-system","colors/danger":"color-system","colors/info":"color-system","typography/":"typography","spatialRhythm/":"spacing","layers/":"surfaces-shadows","shape/":"buttons","behavior/transitionSpeed":"interactive-states","behavior/":"interactive-states","components/forms":"forms","components/alerts":"alerts","components/badges":"badges","components/tables":"tables","components/toasts":"toasts","components/modals":"modals","components/tabStrip":"tabs","icons/":"icons"},a=null;for(let[o,i]of Object.entries(t))if(e.startsWith(o)){a=i,console.log(`  \u2713 Matched pattern "${o}" \u2192 section "${i}"`);break}if(a){let o=this.querySelector(`[data-section="${a}"]`);console.log(`  Searching for section: [data-section="${a}"]`,o?"\u2713 Found":"\u2717 Not found"),o?(o.scrollIntoView({behavior:"smooth",block:"start"}),o.style.transition="background-color 0.3s ease",o.style.backgroundColor="var(--color-primary-50)",setTimeout(()=>{o.style.backgroundColor=""},1500),console.log("  \u2713 Scrolled and highlighted section")):console.warn(`  \u2717 Section [data-section="${a}"] not found in DOM`)}else console.warn(`  \u2717 No section mapping found for field: ${r}`)}renderDisabledSection(r,e){return S`
+              `},2e3)})})},100)}async loadShiki(){if(this.#a)return this.#a;if(this.#e){for(;this.#e;)await new Promise(r=>setTimeout(r,50));return this.#a}this.#e=!0;try{let r=await import("https://esm.sh/shiki@1.0.0");return this.#a=await r.getHighlighter({themes:["github-dark","github-light"],langs:["html","css","javascript","json"]}),this.#a}catch(r){return console.error("Failed to load Shiki:",r),null}finally{this.#e=!1}}async highlightWithShiki(r,e="html"){let t=await this.loadShiki();if(!t)return this.escapeHTML(r);try{let o=document.documentElement.getAttribute("data-theme")==="dark"?"github-dark":"github-light",s=t.codeToHtml(r,{lang:e,theme:o}).match(/<code[^>]*>([\s\S]*)<\/code>/);return s?s[1]:this.escapeHTML(r)}catch(a){return console.error("Shiki highlighting failed:",a),this.escapeHTML(r)}}escapeHTML(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}async getShowdownConverter(){if(this._showdown)return this._showdown;let r=await this.loadShowdownFromCDN();return!r||!r.Converter?null:(this._showdown=new r.Converter({ghCompatibleHeaderId:!0,tables:!0,strikethrough:!0,tasklists:!0}),this._showdown)}async loadShowdownFromCDN(){if(typeof window<"u"&&window.showdown)return window.showdown;if(this._showdownLoading){for(;this._showdownLoading;)await new Promise(e=>setTimeout(e,50));return window.showdown||null}this._showdownLoading=!0;let r=["https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js","https://unpkg.com/showdown@2.1.0/dist/showdown.min.js"];for(let e of r)try{if(await this._injectScript(e,"showdown"),window.showdown)return this._showdownLoading=!1,window.showdown}catch{}return this._showdownLoading=!1,null}_injectScript(r,e){return new Promise((t,a)=>{if(document.querySelector(`script[data-lib="${e}"][src="${r}"]`)){setTimeout(t,0);return}let o=document.createElement("script");o.src=r,o.async=!0,o.defer=!0,o.dataset.lib=e||"lib",o.onload=()=>t(),o.onerror=()=>{o.remove(),a(new Error(`Failed to load script: ${r}`))},document.head.appendChild(o)})}scrollToRelevantSection(r){console.log("\u{1F3AF} Scrolling to section for field:",r);let e=r.startsWith("/")?r.slice(1):r;console.log("  Normalized path:",e);let t={"colors/primary":"color-system","colors/secondary":"color-system","colors/accent":"color-system","colors/background":"color-system","colors/success":"color-system","colors/warning":"color-system","colors/danger":"color-system","colors/info":"color-system","typography/":"typography","spatialRhythm/":"spacing","layers/":"surfaces-shadows","shape/":"buttons","behavior/transitionSpeed":"interactive-states","behavior/":"interactive-states","components/forms":"forms","components/alerts":"alerts","components/badges":"badges","components/tables":"tables","components/toasts":"toasts","components/modals":"modals","components/tabStrip":"tabs","icons/":"icons"},a=null;for(let[o,i]of Object.entries(t))if(e.startsWith(o)){a=i,console.log(`  \u2713 Matched pattern "${o}" \u2192 section "${i}"`);break}if(a){let o=this.querySelector(`[data-section="${a}"]`);console.log(`  Searching for section: [data-section="${a}"]`,o?"\u2713 Found":"\u2717 Not found"),o?(o.scrollIntoView({behavior:"smooth",block:"start"}),o.style.transition="background-color 0.3s ease",o.style.backgroundColor="var(--color-primary-50)",setTimeout(()=>{o.style.backgroundColor=""},1500),console.log("  \u2713 Scrolled and highlighted section")):console.warn(`  \u2717 Section [data-section="${a}"] not found in DOM`)}else console.warn(`  \u2717 No section mapping found for field: ${r}`)}renderDisabledSection(r,e){return S`
         <section class="showcase-section disabled">
           <h2>${r}</h2>
           <p class="disabled-message">${e}</p>

package/public/assets/pds/components/pds-jsonform.js

@@ -53,7 +53,7 @@ const DEFAULT_OPTIONS = {
  *
  * 5. Completely custom actions (hides default buttons):
  *    <pds-jsonform .jsonSchema=${schema} hide-actions>
- *      <div slot="actions" style="display: flex; gap: 1rem;">
+ *      <div slot="actions" class="flex gap-md">
  *        <button type="submit" class="btn btn-primary">Custom Submit</button>
  *        <button type="button" class="btn">Custom Action</button>
  *      </div>
@@ -416,10 +416,7 @@ export class SchemaForm extends LitElement {
   render() {
     const tree = this.#compiled;
     if (!tree)
-      return html`<div
-        class="pds-jsonform-error"
-        style="color: red; padding: 1rem; border: 1px solid red; background: #fee;"
-      >
+      return html`<div class="alert alert-error">
         <p>Failed to generate form schema.</p>
         <pre>${JSON.stringify(this.#data, null, 2)}</pre>
       </div>`;
@@ -431,6 +428,7 @@ export class SchemaForm extends LitElement {
         : "post";
     return html`
       <form
+        ?data-required=${this.hasAttribute("data-required")}
         method=${m}
         action=${this.action ?? nothing}
         @submit=${this.#onSubmit}
@@ -501,9 +499,8 @@ export class SchemaForm extends LitElement {
     // Check for surface wrapping
     const surface = ui?.["ui:surface"] || pathOptions.surface;
 
-    // Build layout classes and inline styles
+    // Build layout classes using PDS utilities
     const layoutClasses = [];
-    let layoutStyle = "";
     const layoutOptions = ui?.["ui:layoutOptions"] || {};
 
     if (layout === "flex") {
@@ -511,16 +508,8 @@ export class SchemaForm extends LitElement {
       if (layoutOptions.wrap) layoutClasses.push("flex-wrap");
       if (layoutOptions.direction === "column") layoutClasses.push("flex-col");
       if (layoutOptions.gap) {
-        // Check if gap is a CSS class name (e.g., 'md', 'lg') or a CSS value
-        if (
-          layoutOptions.gap.startsWith("var(") ||
-          layoutOptions.gap.includes("px") ||
-          layoutOptions.gap.includes("rem")
-        ) {
-          layoutStyle += `gap: ${layoutOptions.gap};`;
-        } else {
-          layoutClasses.push(`gap-${layoutOptions.gap}`);
-        }
+        // Use PDS gap utility classes (xs, sm, md, lg, xl, 0)
+        layoutClasses.push(`gap-${layoutOptions.gap}`);
       }
     } else if (layout === "grid") {
       layoutClasses.push("grid");
@@ -532,16 +521,8 @@ export class SchemaForm extends LitElement {
         layoutClasses.push(`grid-cols-${cols}`);
       }
       if (layoutOptions.gap) {
-        // Check if gap is a CSS class name (e.g., 'md', 'lg') or a CSS value
-        if (
-          layoutOptions.gap.startsWith("var(") ||
-          layoutOptions.gap.includes("px") ||
-          layoutOptions.gap.includes("rem")
-        ) {
-          layoutStyle += `gap: ${layoutOptions.gap};`;
-        } else {
-          layoutClasses.push(`gap-${layoutOptions.gap}`);
-        }
+        // Use PDS gap utility classes (xs, sm, md, lg, xl, 0)
+        layoutClasses.push(`gap-${layoutOptions.gap}`);
       }
     }
 
@@ -553,7 +534,6 @@ export class SchemaForm extends LitElement {
       <fieldset
         data-path=${node.path}
         class=${ifDefined(fieldsetClass)}
-        style=${ifDefined(layoutStyle || undefined)}
       >
         ${!this.hideLegend && !context.hideLegend
           ? html`<legend>${legend}</legend>`
@@ -1612,7 +1592,7 @@ export class SchemaForm extends LitElement {
             richtextOpts.placeholder || attrs.placeholder
           )}
           .value=${value ?? ""}
-          toolbar=${ifDefined(richtextOpts.toolbar)}
+          ?toolbar=${richtextOpts.toolbar}
           ?required=${!!attrs.required}
           ?submit-on-enter=${richtextOpts.submitOnEnter ?? false}
           spellcheck=${richtextOpts.spellcheck ?? true ? "true" : "false"}

package/public/assets/pds/styles/pds-styles.css

@@ -733,12 +733,7 @@ html[data-theme="dark"] {
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
   }
-
-  :where(body.drawer-open) {
-    /* overflow: hidden; */
-    /* scrollbar-gutter: stable; */
-  }
-
+  
   /* Button primitives */
   :where(button) {
     all: unset;
@@ -1459,6 +1454,7 @@ input[type="range"]:active::-moz-range-thumb {
 }
 
 input[type="color"] {
+  appearance: none;
   -webkit-appearance: none;
   padding: 0;
   width: 3rem;