@pure-ds/core 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/readme.md

@@ -1,4 +1,4 @@
-# Pure Design System (PDS)
+# Pure Design System (PDS)
 
 > ⚠️ **Beta Software** - APIs are stabilizing but may still change. Pin versions in production: `"@pure-ds/core": "~0.3.0"`
 
@@ -166,7 +166,7 @@ A growing set of PDS components:
 - `<pds-icon>` — SVG sprite icons
 - `<pds-drawer>` — Slide-out panels
 - `<pds-tabstrip>` — Accessible tabs
-- `<pds-jsonform>` — Forms from JSON Schema
+- `<pds-form>` — Forms from JSON Schema
 - `<pds-upload>` — Drag & drop file upload
 - `<pds-richtext>` — Rich text / Markdown editor
 - `<pds-splitpanel>` — Resizable panes
@@ -707,9 +707,9 @@ Features:
 - Undo/redo
 - Markdown shortcuts
 
-**`<pds-jsonform>`** - Dynamic forms from JSON Schema
+**`<pds-form>`** - Dynamic forms from JSON Schema
 ```html
-<pds-jsonform schema='{"type":"object","properties":{...}}'></pds-jsonform>
+<pds-form schema='{"type":"object","properties":{...}}'></pds-form>
 ```
 
 Generates complete forms with validation from JSON Schema.

package/src/js/pds-core/pds-config.js

@@ -23,7 +23,7 @@ export const presets = {
       darkMode: {
         background: "#0c1821",
         secondary: "#94a3b8",
-        primary: "#0891b2", // Tailwind cyan-600 as base - generates darker 600 shade
+        primary: "#0891b2", // cyan-600 as base - generates darker 600 shade
       },
     },
     typography: {
@@ -55,7 +55,7 @@ export const presets = {
       darkMode: {
         background: "#18181b",
         secondary: "#71717a",
-        primary: "#3b82f6", // Tailwind blue-500 - optimized mid-tone
+        primary: "#3b82f6", // blue-500 - optimized mid-tone
       },
     },
     typography: {
@@ -88,7 +88,7 @@ export const presets = {
       darkMode: {
         background: "#0f0a1a",
         secondary: "#818cf8",
-        primary: "#8b5cf6", // Tailwind violet-500 - optimized mid-tone
+        primary: "#8b5cf6", // violet-500 - optimized mid-tone
       },
     },
     typography: {
@@ -122,7 +122,7 @@ export const presets = {
       darkMode: {
         background: "#0a0a0a",
         secondary: "#a3a3a3",
-        primary: "#737373", // Tailwind gray-500 - optimized mid-tone
+        primary: "#737373", // gray-500 - optimized mid-tone
       },
     },
     typography: {
@@ -159,7 +159,7 @@ export const presets = {
         background: "#1a0f0a",
         secondary: "#c9a482",
         // Ensure sufficient contrast for primary-filled components with white text in dark mode
-        primary: "#f97316", // Tailwind orange-500 - optimized mid-tone
+        primary: "#f97316", // orange-500 - optimized mid-tone
       },
     },
     typography: {
@@ -190,7 +190,7 @@ export const presets = {
         background: "#1a0a1f",
         secondary: "#c4b5fd",
         // Deepen primary for dark mode to meet AA contrast with white text
-        primary: "#d946ef", // Tailwind fuchsia-500 - optimized mid-tone
+        primary: "#d946ef", // fuchsia-500 - optimized mid-tone
       },
     },
     typography: {
@@ -224,7 +224,7 @@ export const presets = {
       darkMode: {
         background: "#0a1410",
         secondary: "#a8a29e",
-        primary: "#10b981", // Tailwind emerald-500 - optimized mid-tone
+        primary: "#10b981", // emerald-500 - optimized mid-tone
       },
     },
     typography: {
@@ -254,7 +254,7 @@ export const presets = {
       darkMode: {
         background: "#1b0808",
         secondary: "#d1d5db",
-        primary: "#ef4444", // Tailwind red-500 - optimized mid-tone
+        primary: "#ef4444", // red-500 - optimized mid-tone
       },
     },
     typography: {
@@ -288,7 +288,7 @@ export const presets = {
         background: "#12100e",
         secondary: "#d1d5db",
         // Deepen primary in dark to keep white text AA-compliant
-        primary: "#f59e0b", // Tailwind amber-500 - optimized mid-tone
+        primary: "#f59e0b", // amber-500 - optimized mid-tone
       },
     },
     typography: {
@@ -323,7 +323,7 @@ export const presets = {
         // has strong contrast against the very-dark surface. The generator
         // will still pick appropriate darker fill shades for buttons so
         // white-on-fill contrast is preserved.
-        primary: "#9ca3af", // Tailwind gray-400 - optimized mid-tone
+        primary: "#9ca3af", // gray-400 - optimized mid-tone
       },
     },
     typography: {
@@ -361,7 +361,7 @@ export const presets = {
       darkMode: {
         background: "#1a1016",
         secondary: "#c4b5fd",
-        primary: "#ec4899", // Tailwind pink-500 - optimized mid-tone
+        primary: "#ec4899", // pink-500 - optimized mid-tone
       },
     },
     typography: {
@@ -401,7 +401,7 @@ export const presets = {
         // - outline/link contrast on dark surface, and
         // - sufficient button fill contrast against white text.
         // Cyan signal aligns with preset accent and produces high-contrast dark fills.
-        primary: "#06b6d4", // Tailwind cyan-500 - optimized mid-tone
+        primary: "#06b6d4", // cyan-500 - optimized mid-tone
       },
     },
     typography: {
@@ -437,7 +437,7 @@ export const presets = {
       darkMode: {
         background: "#0d130a",
         secondary: "#a3a3a3",
-        primary: "#84cc16", // Tailwind lime-500 - optimized mid-tone
+        primary: "#84cc16", // lime-500 - optimized mid-tone
       },
     },
     typography: {
@@ -845,7 +845,7 @@ presets.default = {
     darkMode: {
       background: "#16171a", // Custom dark mode background (cool blue-gray)
       secondary: "#8b9199", // Optional: custom dark grays (uses light secondary if omitted)
-      primary: "#06b6d4", // Tailwind cyan-500 - optimized mid-tone
+      primary: "#06b6d4", // cyan-500 - optimized mid-tone
       // accent: null,       // Optional: override accent color for dark mode
     },
 

package/src/js/pds-core/pds-generator.js

@@ -1,4 +1,4 @@
-import { registry as pdsRegistry } from "./pds-registry.js";
+import { registry as pdsRegistry } from "./pds-registry.js";
 
 /**
  * Generator - A JS-config-first design system
@@ -1810,10 +1810,8 @@ form {
 }
 
 fieldset {
-  margin: 0;
-  padding: var(--spacing-5);
+  margin: 0;  
   width: 100%;
-  background-color: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
   
   /* Unified styling for radio groups and checkbox groups */
   &[role="radiogroup"],
@@ -3044,15 +3042,24 @@ dialog[open]::backdrop {
   }
 }
 
+/* Dialog - constrain max height to 90vh, support custom maxHeight via CSS variable */
+dialog {
+  max-height: var(--dialog-max-height, 90vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Prevent dialog itself from scrolling - let .dialog-body handle it */
+}
+
 /* Form structure - use flexbox instead of contents */
 dialog form {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex: 1;
+  min-height: 0; /* Allow flex child to shrink */
   margin: 0;
 }
 
-/* Dialog fields - to open pds-jsonform subforms */
+/* Dialog fields - to open pds-form subforms */
 .dialog-field {
     margin-top: var(--spacing-3);
 }
@@ -3107,7 +3114,8 @@ dialog {
   article,
   form > article,
   .dialog-body {
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0; /* Critical: allow flex child to shrink and scroll */
     padding: var(--spacing-3) var(--spacing-6);
     overflow-y: auto;
     overflow-x: hidden;
@@ -3133,9 +3141,17 @@ dialog.dialog-lg { max-width: min(800px, calc(100vw - var(--spacing-8))); }
 dialog.dialog-xl { max-width: min(1200px, calc(100vw - var(--spacing-8))); }
 dialog.dialog-full { max-width: calc(100vw - var(--spacing-8)); max-height: calc(100vh - var(--spacing-8)); }
 
-/* Mobile responsiveness */
+/* Mobile responsiveness - maximize on mobile */
 @media (max-width: ${breakpoints.sm - 1}px) {
-  dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; top: 50%; transform: translateY(-50%); margin: 0; }
+  dialog { 
+    max-width: 100vw; 
+    max-height: 100vh; 
+    --dialog-max-height: 100vh; /* Override custom maxHeight on mobile */
+    border-radius: 0; 
+    top: 50%; 
+    transform: translateY(-50%); 
+    margin: 0; 
+  }
   dialog header, dialog form > header, dialog article, dialog form > article, dialog footer, dialog form > footer { padding: var(--spacing-4); }
 }
 
@@ -4213,9 +4229,6 @@ nav[data-dropdown] {
 
   :where(fieldset) {
     border: none;
-    padding: var(--spacing-4);
-    margin: 0 0 var(--spacing-4) 0;
-    background-color: var(--color-surface-subtle);
   }
 
   :where(legend) {

package/src/js/pds-core/pds-ontology.js

@@ -1,4 +1,4 @@
-// Pure Design System Ontology (PDS)
+// Pure Design System Ontology (PDS)
 // This file is the single source-of-truth metadata for primitives, components, tokens, themes and enhancements.
 // Used by PDS.query() for searching and correlating concepts.
 
@@ -223,10 +223,10 @@ export const ontology = {
       category: "feedback"
     },
     { 
-      id: "pds-jsonform", 
+      id: "pds-form", 
       name: "JSON Form", 
       description: "Auto-generated form from JSON Schema",
-      selectors: ["pds-jsonform"],
+      selectors: ["pds-form"],
       tags: ["form", "schema", "auto-generate"],
       category: "form"
     },
@@ -481,7 +481,7 @@ export const ontology = {
     form: {
       description: "Form inputs and controls",
       primitives: ["button", "fieldset", "label-field", "form"],
-      components: ["pds-upload", "pds-jsonform", "pds-richtext", "pds-calendar"]
+      components: ["pds-upload", "pds-form", "pds-richtext", "pds-calendar"]
     },
     layout: {
       description: "Page structure and content arrangement",
@@ -541,7 +541,7 @@ export const ontology = {
     content: ["text", "typography", "body", "article"],
     
     // Forms & Inputs
-    form: ["input", "field", "label", "button", "fieldset", "pds-jsonform", "pds-upload", "pds-richtext", "pds-calendar", "required", "validation", "submit"],
+    form: ["input", "field", "label", "button", "fieldset", "pds-form", "pds-upload", "pds-richtext", "pds-calendar", "required", "validation", "submit"],
     input: ["form", "field", "text", "label", "required", "validation"],
     field: ["form", "input", "label", "required"],
     button: ["btn", "interactive", "action", "submit", "form", "btn-primary", "btn-secondary", "btn-working"],

package/src/js/pds.d.ts

@@ -217,7 +217,7 @@ export class PDS extends EventTarget {
 
 export { PDS as default };
 
-// ===== pds-jsonform Types =====
+// ===== pds-form Types =====
 
 export interface JsonFormOptions {
   widgets?: {
@@ -358,7 +358,7 @@ export interface JsonFormEventMap {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'pds-jsonform': SchemaForm;
+    'pds-form': SchemaForm;
   }
 }
 

package/dist/types/public/assets/pds/components/pds-jsonform.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-jsonform.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-jsonform.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAGF,yBAEC;IAaC,gBAA2B;IAC3B,cAAyB;IACzB,aAAwB;IACxB,YAAuB;IACvB,eAAoB;IACpB,qBAAwB;IACxB,oBAA2B;IAC3B,mBAAyB;IACzB,mBAAsB;IACtB,oBAAuB;IAiBzB,8CAEC;IACD,4BAEC;IAGD,oBAEC;IAkBD;;;MAIC;IAED,uBAEC;IAED,0BAMC;IAGD,+BAyBC;IA+ND,cAyCC;;CAu4CF"}