@pure-ds/storybook 0.4.17 → 0.4.19

package/public/assets/pds/custom-elements.json

@@ -1,4 +1,4 @@
-{
+{
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
@@ -671,11 +671,11 @@
     },
     {
       "kind": "javascript-module",
-      "path": "public/assets/pds/components/pds-jsonform.js",
+      "path": "public/assets/pds/components/pds-form.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "<pds-jsonform>\n\nForm Actions:\nBy default, the form includes Submit and Reset buttons inside the <form> element.\n\nUsage options:\n1. Default buttons:\n   <pds-jsonform .jsonSchema=${schema}></pds-jsonform>\n\n2. Customize labels:\n   <pds-jsonform .jsonSchema=${schema} submit-label=\"Save\" reset-label=\"Clear\"></pds-jsonform>\n\n3. Hide reset button:\n   <pds-jsonform .jsonSchema=${schema} hide-reset></pds-jsonform>\n\n4. Add extra buttons (slot):\n   <pds-jsonform .jsonSchema=${schema}>\n     <button type=\"button\" slot=\"actions\"",
+          "description": "<pds-form>\n\nForm Actions:\nBy default, the form includes Submit and Reset buttons inside the <form> element.\n\nUsage options:\n1. Default buttons:\n   <pds-form .jsonSchema=${schema}></pds-form>\n\n2. Customize labels:\n   <pds-form .jsonSchema=${schema} submit-label=\"Save\" reset-label=\"Clear\"></pds-form>\n\n3. Hide reset button:\n   <pds-form .jsonSchema=${schema} hide-reset></pds-form>\n\n4. Add extra buttons (slot):\n   <pds-form .jsonSchema=${schema}>\n     <button type=\"button\" slot=\"actions\"",
           "name": "SchemaForm",
           "members": [
             {
@@ -953,9 +953,9 @@
           ],
           "superclass": {
             "name": "LitElement",
-            "module": "/public/assets/pds/components/pds-jsonform.js"
+            "module": "/public/assets/pds/components/pds-form.js"
           },
-          "tagName": "pds-jsonform",
+          "tagName": "pds-form",
           "customElement": true
         }
       ],
@@ -965,15 +965,15 @@
           "name": "SchemaForm",
           "declaration": {
             "name": "SchemaForm",
-            "module": "public/assets/pds/components/pds-jsonform.js"
+            "module": "public/assets/pds/components/pds-form.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "pds-jsonform",
+          "name": "pds-form",
           "declaration": {
             "name": "SchemaForm",
-            "module": "public/assets/pds/components/pds-jsonform.js"
+            "module": "public/assets/pds/components/pds-form.js"
           }
         }
       ]

package/public/assets/pds/vscode-custom-data.json

@@ -65,6 +65,69 @@
         }
       ]
     },
+    {
+      "name": "pds-form",
+      "description": "<pds-form>\n\nForm Actions:\nBy default, the form includes Submit and Reset buttons inside the <form> element.\n\nUsage options:\n1. Default buttons:\n   <pds-form .jsonSchema=${schema}></pds-form>\n\n2. Customize labels:\n   <pds-form .jsonSchema=${schema} submit-label=\"Save\" reset-label=\"Clear\"></pds-form>\n\n3. Hide reset button:\n   <pds-form .jsonSchema=${schema} hide-reset></pds-form>\n\n4. Add extra buttons (slot):\n   <pds-form .jsonSchema=${schema}>\n     <button type=\"button\" slot=\"actions\"",
+      "attributes": [
+        {
+          "name": "json-schema",
+          "description": ""
+        },
+        {
+          "name": "ui-schema",
+          "description": ""
+        },
+        {
+          "name": "options",
+          "description": ""
+        },
+        {
+          "name": "values",
+          "description": ""
+        },
+        {
+          "name": "action",
+          "description": ""
+        },
+        {
+          "name": "method",
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "description": "",
+          "valueSet": "v"
+        },
+        {
+          "name": "hide-actions",
+          "description": "",
+          "valueSet": "v"
+        },
+        {
+          "name": "submit-label",
+          "description": ""
+        },
+        {
+          "name": "reset-label",
+          "description": ""
+        },
+        {
+          "name": "hide-reset",
+          "description": "",
+          "valueSet": "v"
+        },
+        {
+          "name": "hide-submit",
+          "description": "",
+          "valueSet": "v"
+        },
+        {
+          "name": "hide-legend",
+          "description": "",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "pds-icon",
       "description": "SVG Icon Web Component",
@@ -598,69 +661,6 @@
         }
       ]
     },
-    {
-      "name": "pds-jsonform",
-      "description": "<pds-jsonform>\n\nForm Actions:\nBy default, the form includes Submit and Reset buttons inside the <form> element.\n\nUsage options:\n1. Default buttons:\n   <pds-jsonform .jsonSchema=${schema}></pds-jsonform>\n\n2. Customize labels:\n   <pds-jsonform .jsonSchema=${schema} submit-label=\"Save\" reset-label=\"Clear\"></pds-jsonform>\n\n3. Hide reset button:\n   <pds-jsonform .jsonSchema=${schema} hide-reset></pds-jsonform>\n\n4. Add extra buttons (slot):\n   <pds-jsonform .jsonSchema=${schema}>\n     <button type=\"button\" slot=\"actions\"",
-      "attributes": [
-        {
-          "name": "json-schema",
-          "description": ""
-        },
-        {
-          "name": "ui-schema",
-          "description": ""
-        },
-        {
-          "name": "options",
-          "description": ""
-        },
-        {
-          "name": "values",
-          "description": ""
-        },
-        {
-          "name": "action",
-          "description": ""
-        },
-        {
-          "name": "method",
-          "description": ""
-        },
-        {
-          "name": "disabled",
-          "description": "",
-          "valueSet": "v"
-        },
-        {
-          "name": "hide-actions",
-          "description": "",
-          "valueSet": "v"
-        },
-        {
-          "name": "submit-label",
-          "description": ""
-        },
-        {
-          "name": "reset-label",
-          "description": ""
-        },
-        {
-          "name": "hide-reset",
-          "description": "",
-          "valueSet": "v"
-        },
-        {
-          "name": "hide-submit",
-          "description": "",
-          "valueSet": "v"
-        },
-        {
-          "name": "hide-legend",
-          "description": "",
-          "valueSet": "v"
-        }
-      ]
-    },
     {
       "name": "pds-richtext",
       "description": "RichText component",

package/scripts/build-pds-reference.mjs

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 // Consolidated reference data generator for Pure Design System Storybook
 // Combines metadata from custom-elements.json, the PDS ontology, and Storybook stories
@@ -49,10 +49,10 @@ const OUTPUT_PATH = path.join(OUTPUT_DIR, 'pds-reference.json');
 const TYPE_METADATA_CACHE = new Map();
 
 const SPECIAL_COMPONENT_OVERRIDES = {
-  'pds-jsonform': {
+  'pds-form': {
     title: 'PDS JSON Schema Form',
     notes: [
-      'Typed interfaces for `JsonFormOptions`, `UISchema`, and related events live in `src/js/pds.d.ts`.',
+      'Typed interfaces for `formOptions`, `UISchema`, and related events live in `src/js/pds.d.ts`.',
       'The form accepts standard JSON Schema (Draft 7) documents via the `jsonSchema` property. `uiSchema` and `options` fine-tune layout, widgets, and behaviors.'
     ],
     properties: {
@@ -65,7 +65,7 @@ const SPECIAL_COMPONENT_OVERRIDES = {
         description: 'Optional UI overrides keyed by JSON Pointer. Controls layout, widgets, surfaces, dialogs, and per-field hints.'
       },
       options: {
-        type: 'JsonFormOptions',
+        type: 'formOptions',
         description: 'Toolkit-level options that adjust widget families, layouts, and validation behavior. Supports path-specific overrides.'
       },
       values: {
@@ -76,37 +76,37 @@ const SPECIAL_COMPONENT_OVERRIDES = {
     events: [
       {
         name: 'pw:submit',
-        detail: 'JsonFormSubmitDetail',
+        detail: 'formSubmitDetail',
         description: 'Emitted after submission. `detail` includes `{ json, formData, valid, issues }` for server hand-off or additional processing.'
       },
       {
         name: 'pw:value-change',
-        detail: 'JsonFormValueChangeDetail',
+        detail: 'formValueChangeDetail',
         description: 'Live value updates whenever a field changes. `detail.name` contains the JSON Pointer-compatible path.'
       },
       {
         name: 'pw:array-add',
-        detail: 'JsonFormArrayEventDetail',
+        detail: 'formArrayEventDetail',
         description: 'Triggered when an array item is appended. Carries the path and index metadata.'
       },
       {
         name: 'pw:array-remove',
-        detail: 'JsonFormArrayEventDetail',
+        detail: 'formArrayEventDetail',
         description: 'Triggered when an array item is removed.'
       },
       {
         name: 'pw:array-reorder',
-        detail: 'JsonFormArrayEventDetail',
+        detail: 'formArrayEventDetail',
         description: 'Triggered when array items are reordered (drag & drop scenarios).' 
       },
       {
         name: 'pw:dialog-open',
-        detail: 'JsonFormDialogEventDetail',
+        detail: 'formDialogEventDetail',
         description: 'Fires before a dialog-driven field opens (e.g. complex editors).' 
       },
       {
         name: 'pw:dialog-submit',
-        detail: 'JsonFormDialogEventDetail',
+        detail: 'formDialogEventDetail',
         description: 'Fires when a dialog-driven field is saved.'
       }
     ]
@@ -224,6 +224,62 @@ async function walkStories(dir) {
   return files;
 }
 
+/**
+ * Extract story metadata statically from file content when dynamic import fails
+ * This is a fallback for files with non-JS dependencies (e.g., markdown imports)
+ * @param {string} content - File content
+ * @param {string} relPath - Relative path for logging
+ * @returns {Object|null} - Extracted metadata or null
+ */
+function extractStaticMetadata(content, relPath) {
+  // Look for: export default { title: '...', parameters: { pds: { tags: [...] } } }
+  // This is a simple regex-based extraction, not a full parser
+  
+  // Extract title
+  const titleMatch = content.match(/title:\s*['"`]([^'"`]+)['"`]/);
+  if (!titleMatch) return null;
+  
+  const title = titleMatch[1];
+  
+  // Extract pds.tags array
+  // Look for: pds: { tags: ['tag1', 'tag2', ...] }
+  const pdsTagsMatch = content.match(/pds:\s*\{[^}]*tags:\s*\[([\s\S]*?)\]/);
+  let pdsTags = [];
+  if (pdsTagsMatch) {
+    // Extract individual tags from the array
+    const tagsContent = pdsTagsMatch[1];
+    const tagMatches = tagsContent.matchAll(/['"`]([^'"`]+)['"`]/g);
+    for (const match of tagMatches) {
+      pdsTags.push(match[1]);
+    }
+  }
+  
+  // Extract standard tags array
+  // Look for: tags: ['tag1', 'tag2', ...] (not inside pds: {})
+  const standardTagsMatch = content.match(/(?<!pds:\s*\{[^}]*)tags:\s*\[([\s\S]*?)\]/);
+  let standardTags = [];
+  if (standardTagsMatch && !standardTagsMatch[0].includes('pds:')) {
+    const tagsContent = standardTagsMatch[1];
+    const tagMatches = tagsContent.matchAll(/['"`]([^'"`]+)['"`]/g);
+    for (const match of tagMatches) {
+      standardTags.push(match[1]);
+    }
+  }
+  
+  // Extract description
+  const descMatch = content.match(/description:\s*\{[^}]*component:\s*['"`]([^'"`]+)['"`]/);
+  const description = descMatch ? descMatch[1] : null;
+  
+  return {
+    title,
+    tags: standardTags,
+    parameters: {
+      pds: pdsTags.length > 0 ? { tags: pdsTags } : undefined,
+      docs: description ? { description: { component: description } } : undefined
+    }
+  };
+}
+
 async function collectStoryMetadata() {
   const storyFiles = await walkStories(STORIES_ROOT);
   const index = new Map();
@@ -232,20 +288,35 @@ async function collectStoryMetadata() {
     if (file.includes(`${path.sep}reference${path.sep}`)) continue;
 
     const fileUrl = pathToFileURL(file).href;
+    const relPath = path.relative(ROOT_DIR, file);
     let mod;
+    let meta = null;
+    
     try {
       mod = await import(fileUrl);
+      meta = mod.default;
     } catch (error) {
-      const rel = path.relative(ROOT_DIR, file);
-      if (error.code === 'ERR_UNKNOWN_FILE_EXTENSION') {
-        console.warn(`[pds-reference] Skipped ${rel} (non-JS dependency: ${error.message.split(' for ').pop() || error.message})`);
-      } else {
-        console.warn(`[pds-reference] Skipped ${rel}: ${error.message}`);
+      // Import failed - try to extract metadata statically from the file
+      try {
+        const content = await fs.promises.readFile(file, 'utf-8');
+        meta = extractStaticMetadata(content, relPath);
+        if (meta) {
+          console.log(`[pds-reference] Extracted static metadata from ${relPath}`);
+        }
+      } catch (parseError) {
+        // Ignore parse errors
+      }
+      
+      if (!meta) {
+        if (error.code === 'ERR_UNKNOWN_FILE_EXTENSION') {
+          console.warn(`[pds-reference] Skipped ${relPath} (non-JS dependency: ${error.message.split(' for ').pop() || error.message})`);
+        } else {
+          console.warn(`[pds-reference] Skipped ${relPath}: ${error.message}`);
+        }
+        continue;
       }
-      continue;
     }
 
-    const meta = mod.default;
     if (!meta || !meta.title) {
       continue;
     }
@@ -256,7 +327,6 @@ async function collectStoryMetadata() {
     if (!slug) continue;
 
     const idBase = slugifyTitle(meta.title);
-    const relPath = path.relative(ROOT_DIR, file);
 
     const entry = index.get(slug) || {
       slug,
@@ -287,24 +357,27 @@ async function collectStoryMetadata() {
       entry.description = meta.parameters.docs.description.component;
     }
 
-    for (const [exportName, story] of Object.entries(mod)) {
-      if (exportName === 'default' || exportName === '__namedExportsOrder') continue;
-
-      const storyItem = typeof story === 'object' ? story : null;
-      if (!storyItem) continue;
-
-      const storyTags = [];
-      if (Array.isArray(storyItem.tags)) storyTags.push(...storyItem.tags);
-      if (Array.isArray(storyItem.parameters?.pds?.tags)) storyTags.push(...storyItem.parameters.pds.tags);
-
-      entry.stories.push({
-        exportName,
-        name: storyItem.storyName || storyItem.name || exportName,
-        id: `${idBase}--${slugifySegment(exportName)}`,
-        tags: dedupe(storyTags),
-        description: trimOrNull(storyItem.parameters?.docs?.description?.story || storyItem.parameters?.docs?.description?.component),
-        source: relPath
-      });
+    // Only iterate over exports if we have the actual module
+    if (mod) {
+      for (const [exportName, story] of Object.entries(mod)) {
+        if (exportName === 'default' || exportName === '__namedExportsOrder') continue;
+
+        const storyItem = typeof story === 'object' ? story : null;
+        if (!storyItem) continue;
+
+        const storyTags = [];
+        if (Array.isArray(storyItem.tags)) storyTags.push(...storyItem.tags);
+        if (Array.isArray(storyItem.parameters?.pds?.tags)) storyTags.push(...storyItem.parameters.pds.tags);
+
+        entry.stories.push({
+          exportName,
+          name: storyItem.storyName || storyItem.name || exportName,
+          id: `${idBase}--${slugifySegment(exportName)}`,
+          tags: dedupe(storyTags),
+          description: trimOrNull(storyItem.parameters?.docs?.description?.story || storyItem.parameters?.docs?.description?.component),
+          source: relPath
+        });
+      }
     }
 
     index.set(slug, entry);
@@ -847,7 +920,8 @@ async function main() {
       primitives,
       enhancements,
       tokens,
-      ontologyData
+      ontologyData,
+      storyIndex  // Include story metadata with pds.tags for search
     };
 
     await fs.promises.mkdir(OUTPUT_DIR, { recursive: true });

package/scripts/generate-stories.js

@@ -1,4 +1,4 @@
-/**
+/**
  * Story Generator for Pure Design System Storybook
  * 
  * Reads pds-ontology.js and pds-demo.js to auto-generate stories
@@ -51,7 +51,7 @@ const STORY_GROUPS = {
       'pds-upload',
       'pds-toaster',
       'pds-richtext',
-      'pds-jsonform',
+      'pds-form',
       'pds-splitpanel',
       'pds-scrollrow'
     ]

package/src/js/common/ask.js

@@ -50,6 +50,11 @@ export async function ask(message, options = {}) {
         dialog.classList.add(options.class);
       }
     }
+    
+    // Set maxHeight via CSS custom property (constrained to 90vh by default)
+    if (options.maxHeight) {
+      dialog.style.setProperty('--dialog-max-height', options.maxHeight);
+    }
 
     // Build button elements
     const buttons = Object.entries(options.buttons).map(([code, obj]) => {
@@ -61,33 +66,55 @@ export async function ask(message, options = {}) {
     // Create PDS-compliant dialog structure
     // When useForm is true, don't wrap in a form - let the content provide the form
     if (options.useForm) {
-      dialog.innerHTML = /*html*/ `
-        <header>
-          <h2>${options.title}</h2>
-        </header>
-        
-        <article id="msg-container"></article>
-      `;
-      
-      // Render message content first
-      const article = dialog.querySelector("#msg-container");
+      // Create a temporary container to render the message content
+      const tempContainer = document.createElement("div");
       if (typeof message === "object" && message._$litType$) {
-        render(message, article);
+        render(message, tempContainer);
       } else if (typeof message === "string") {
-        article.textContent = message;
+        tempContainer.textContent = message;
       } else {
-        render(message, article);
+        render(message, tempContainer);
       }
       
-      // Wait for content to render, then find the form and add buttons to it
-      requestAnimationFrame(() => {
-        const form = dialog.querySelector("form");
-        if (form) {
-          const footer = document.createElement("footer");
-          footer.innerHTML = buttons.join("");
-          form.appendChild(footer);
+      // Find the form in the rendered content
+      const form = tempContainer.querySelector("form");
+      if (form) {
+        // Build dialog structure with form as direct child for proper flex layout
+        dialog.innerHTML = /*html*/ `
+          <header>
+            <h2>${options.title}</h2>
+          </header>
+        `;
+        
+        // Create article wrapper and move form children into it (preserves DOM nodes & bindings)
+        const article = document.createElement("article");
+        article.className = "dialog-body";
+        while (form.firstChild) {
+          article.appendChild(form.firstChild);
         }
-      });
+        form.appendChild(article);
+        
+        // Add footer with buttons
+        const footer = document.createElement("footer");
+        footer.innerHTML = buttons.join("");
+        form.appendChild(footer);
+        
+        // Append the restructured form to dialog
+        dialog.appendChild(form);
+      } else {
+        // No form found, use standard article structure
+        dialog.innerHTML = /*html*/ `
+          <header>
+            <h2>${options.title}</h2>
+          </header>
+          <article id="msg-container"></article>
+          <footer>
+            ${buttons.join("")}
+          </footer>
+        `;
+        const article = dialog.querySelector("#msg-container");
+        article.appendChild(tempContainer);
+      }
     } else {
       dialog.innerHTML = /*html*/ `
         <form method="dialog">

package/src/js/pds-configurator/pds-config-form.js

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from "../../../src/js/lit.js";
+import { LitElement, html, nothing } from "../../../src/js/lit.js";
 //import { config } from "../config";
 import { Generator } from "../../../src/js/pds-core/pds-generator.js";
 import { presets } from "../../../src/js/pds-core/pds-config.js";
@@ -429,7 +429,7 @@ customElements.define(
       );
     }
 
-    // Flatten nested config to dot-notation for pds-jsonform
+    // Flatten nested config to dot-notation for pds-form
     flattenConfig(obj, prefix = "") {
       const flattened = {};
       for (const [key, value] of Object.entries(obj)) {
@@ -444,7 +444,7 @@ customElements.define(
       return flattened;
     }
 
-    // Get schema property paths in JSON Pointer format for pds-jsonform
+    // Get schema property paths in JSON Pointer format for pds-form
     getSchemaProperties(schema, prefix = "") {
       const paths = new Set();
       if (!schema || !schema.properties) return paths;
@@ -486,7 +486,7 @@ customElements.define(
     }
 
     handleFormChange = (event) => {
-      // Get values from the pds-jsonform's serialize method or from event detail
+      // Get values from the pds-form's serialize method or from event detail
       let values;
       let changedField = null;
 
@@ -501,9 +501,9 @@ customElements.define(
       } else {
         // pw:value-change event - get values directly from the form element
         const form =
-          event.currentTarget?.tagName?.toUpperCase() === "PDS-JSONFORM"
+          event.currentTarget?.tagName?.toUpperCase() === "pds-form"
             ? event.currentTarget
-            : this.querySelector("pds-jsonform");
+            : this.querySelector("pds-form");
 
         if (form) {
           // Use getValuesFlat() to get JSON Pointer formatted keys
@@ -873,7 +873,7 @@ export const pdsConfig = ${JSON.stringify(this.config, null, 2)};
           </div>
 
           <div class="designer-form-container">
-            <pds-jsonform
+            <pds-form
               .jsonSchema=${this.schema}
               .uiSchema=${this._designerUiSchema()}
               .values=${this.formValues || {}}
@@ -882,7 +882,7 @@ export const pdsConfig = ${JSON.stringify(this.config, null, 2)};
               @pw:value-change=${this.handleFormChange}
               @pw:serialize=${this.handleFormChange}
             >
-            </pds-jsonform>
+            </pds-form>
           </div>
 
           <div class="designer-actions">
@@ -1009,7 +1009,7 @@ export const pdsConfig = ${JSON.stringify(this.config, null, 2)};
         "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
       ];
 
-      // UI schema (paths use the pds-jsonform path notation, e.g. /typography/fontFamilyHeadings)
+      // UI schema (paths use the pds-form path notation, e.g. /typography/fontFamilyHeadings)
       const ui = {};
 
       // Font family fields: use datalist via ui.datalist

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

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing, render, unsafeHTML } from "../../../src/js/lit.js";
+import { LitElement, html, nothing, render, unsafeHTML } from "../../../src/js/lit.js";
 import { PDS } from "../../../src/js/pds.js";
 
 import { AutoComplete } from "pure-web/ac";
@@ -1056,7 +1056,7 @@ customElements.define(
     scrollToRelevantSection(fieldPath) {
       console.log("🎯 Scrolling to section for field:", fieldPath);
 
-      // Remove leading slash if present (pds-jsonform sends "/behavior.transitionSpeed")
+      // Remove leading slash if present (pds-form sends "/behavior.transitionSpeed")
       const normalizedPath = fieldPath.startsWith("/")
         ? fieldPath.slice(1)
         : fieldPath;