@pure-ds/storybook 0.4.16 → 0.4.19

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-09T11:28:21.937Z",
+  "generatedAt": "2026-01-13T12:40:57.809Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",
@@ -449,251 +449,29 @@
       ],
       "notes": []
     },
-    "pds-icon": {
-      "tag": "pds-icon",
-      "className": "SvgIcon",
-      "displayName": "Icon",
-      "storyTitle": null,
-      "category": null,
-      "description": "SVG Icon Web Component\n\nSVG Icon Web Component",
-      "docsDescription": null,
-      "pdsTags": [],
-      "ontology": {
-        "id": "pds-icon",
-        "name": "Icon",
-        "description": "SVG icon web component",
-        "selectors": [
-          "pds-icon"
-        ],
-        "tags": [
-          "icon",
-          "graphic",
-          "svg"
-        ],
-        "category": "media"
-      },
-      "stories": [],
-      "sourceModule": "public/assets/pds/components/pds-icon.js",
-      "superclass": "HTMLElement",
-      "attributes": [
-        {
-          "name": "icon",
-          "description": "Icon name from the sprite sheet",
-          "type": "string",
-          "default": null,
-          "fieldName": null
-        },
-        {
-          "name": "size",
-          "description": "Icon size in pixels or named size (xs, sm, md, lg, xl, 2xl)",
-          "type": "string|number",
-          "default": null,
-          "fieldName": null
-        },
-        {
-          "name": "color",
-          "description": "Icon color (CSS color value, default: currentColor)",
-          "type": "string",
-          "default": null,
-          "fieldName": null
-        },
-        {
-          "name": "label",
-          "description": "Accessible label for the icon (adds role=\"img\")",
-          "type": "string",
-          "default": null,
-          "fieldName": null
-        },
-        {
-          "name": "rotate",
-          "description": "Rotation angle in degrees",
-          "type": "number",
-          "default": null,
-          "fieldName": null
-        },
-        {
-          "name": "sprite",
-          "description": "Override sprite sheet path",
-          "type": "string",
-          "default": null,
-          "fieldName": null
-        },
-        {
-          "name": "no-sprite",
-          "description": "Force fallback icon rendering",
-          "type": "boolean",
-          "default": null,
-          "fieldName": null
-        }
-      ],
-      "properties": [
-        {
-          "name": "externalIconCache",
-          "attribute": null,
-          "description": null,
-          "type": "Map<any, any>",
-          "default": "new Map()",
-          "reflects": false,
-          "privacy": "public"
-        },
-        {
-          "name": "externalIconPromises",
-          "attribute": null,
-          "description": null,
-          "type": "Map<any, any>",
-          "default": "new Map()",
-          "reflects": false,
-          "privacy": "public"
-        },
-        {
-          "name": "getExternalIconPath",
-          "attribute": null,
-          "description": "Get the external icons path from PDS config or use default",
-          "type": null,
-          "default": null,
-          "reflects": false,
-          "privacy": "public"
-        },
-        {
-          "name": "inlineSprites",
-          "attribute": null,
-          "description": null,
-          "type": "Map<any, any>",
-          "default": "new Map()",
-          "reflects": false,
-          "privacy": "public"
-        },
-        {
-          "name": "instances",
-          "attribute": null,
-          "description": null,
-          "type": "Set<any>",
-          "default": "new Set()",
-          "reflects": false,
-          "privacy": "public"
-        },
-        {
-          "name": "observedAttributes",
-          "attribute": null,
-          "description": null,
-          "type": "string[]",
-          "default": null,
-          "reflects": false,
-          "privacy": "public"
-        },
-        {
-          "name": "spritePromises",
-          "attribute": null,
-          "description": null,
-          "type": "Map<any, any>",
-          "default": "new Map()",
-          "reflects": false,
-          "privacy": "public"
-        }
-      ],
-      "methods": [
-        {
-          "name": "attributeChangedCallback",
-          "description": null,
-          "parameters": [
-            {
-              "name": "name",
-              "type": "any",
-              "description": null,
-              "optional": false
-            },
-            {
-              "name": "oldValue",
-              "type": "any",
-              "description": null,
-              "optional": false
-            },
-            {
-              "name": "newValue",
-              "type": "any",
-              "description": null,
-              "optional": false
-            }
-          ],
-          "return": "void"
-        },
-        {
-          "name": "connectedCallback",
-          "description": null,
-          "parameters": [],
-          "return": "void"
-        },
-        {
-          "name": "disconnectedCallback",
-          "description": null,
-          "parameters": [],
-          "return": "void"
-        },
-        {
-          "name": "ensureInlineSprite",
-          "description": null,
-          "parameters": [
-            {
-              "name": "spriteURL",
-              "type": "any",
-              "description": null,
-              "optional": false
-            }
-          ],
-          "return": "Promise<any>"
-        },
-        {
-          "name": "fetchExternalIcon",
-          "description": "Fetch an external SVG icon and cache it\n\nFetch an external SVG icon and cache it",
-          "parameters": [
-            {
-              "name": "iconName",
-              "type": "string",
-              "description": "The icon name (without .svg extension)",
-              "optional": false
-            }
-          ],
-          "return": "Promise<boolean>"
-        },
-        {
-          "name": "notifyInstances",
-          "description": null,
-          "parameters": [],
-          "return": "void"
-        },
-        {
-          "name": "render",
-          "description": null,
-          "parameters": [],
-          "return": "void"
-        },
-        {
-          "name": "spriteAvailable",
-          "description": "Check if sprite sheet is available\n\nCheck if sprite sheet is available",
-          "parameters": [],
-          "return": "boolean"
-        }
-      ],
-      "events": [],
-      "slots": [],
-      "cssParts": [],
-      "notes": []
-    },
-    "pds-jsonform": {
-      "tag": "pds-jsonform",
+    "pds-form": {
+      "tag": "pds-form",
       "className": "SchemaForm",
       "displayName": "PDS JSON Schema Form",
-      "storyTitle": null,
-      "category": null,
-      "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\"\n\n<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\"",
-      "docsDescription": null,
-      "pdsTags": [],
+      "storyTitle": "Components/pds-form",
+      "category": "Components",
+      "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\"\n\n<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\"",
+      "docsDescription": "**⭐ Recommended for modern applications** - Automatically generate complete forms from [JSON Schema](https://json-schema.org/) definitions.\n\n### Key Features\n- 🎯 **Zero boilerplate** - Define form structure in JSON, get a working form with validation\n- ✅ **Built-in validation** - Automatic validation based on schema rules (required, min/max, patterns, etc.)\n- 🔄 **Data binding** - Two-way data binding with form state management\n- 🎨 **PDS styled** - Uses all PDS design tokens automatically\n- 📱 **Responsive** - Mobile-friendly layouts out of the box\n- 🧩 **Conditional logic** - Show/hide/disable fields, computed values\n- 🌐 **Nested objects** - Support for complex nested data structures\n- 🔧 **Extensible** - Custom field types and validators\n\n### Why Generate Forms from JSON Schema?\nInstead of manually writing HTML for every form field, validation rule, and error message, you define your data schema once and get:\n- Form UI generation\n- Client-side validation\n- Server-side validation (same schema)\n- API documentation\n- Type definitions\n- Database schemas\n\nSee the examples below to get started, or check the [primitive forms](/story/primitives-form-elements--default) for manual form building.",
+      "pdsTags": [
+        "autodocs",
+        "forms",
+        "input",
+        "interaction",
+        "json-schema",
+        "pds-form",
+        "validation"
+      ],
       "ontology": {
-        "id": "pds-jsonform",
+        "id": "pds-form",
         "name": "JSON Form",
         "description": "Auto-generated form from JSON Schema",
         "selectors": [
-          "pds-jsonform"
+          "pds-form"
         ],
         "tags": [
           "form",
@@ -703,7 +481,7 @@
         "category": "form"
       },
       "stories": [],
-      "sourceModule": "public/assets/pds/components/pds-jsonform.js",
+      "sourceModule": "public/assets/pds/components/pds-form.js",
       "superclass": "LitElement",
       "attributes": [
         {
@@ -875,7 +653,7 @@
           "name": "options",
           "attribute": "options",
           "description": "Toolkit-level options that adjust widget families, layouts, and validation behavior. Supports path-specific overrides.",
-          "type": "JsonFormOptions",
+          "type": "formOptions",
           "default": "undefined",
           "reflects": false,
           "privacy": "public"
@@ -970,6 +748,12 @@
           "parameters": [],
           "return": "any"
         },
+        {
+          "name": "reset",
+          "description": null,
+          "parameters": [],
+          "return": "void"
+        },
         {
           "name": "serialize",
           "description": null,
@@ -1012,55 +796,295 @@
       "events": [
         {
           "name": "pw:array-add",
-          "type": "CustomEvent<JsonFormArrayEventDetail>",
+          "type": "CustomEvent<formArrayEventDetail>",
           "description": "Triggered when an array item is appended. Carries the path and index metadata."
         },
         {
           "name": "pw:array-remove",
-          "type": "CustomEvent<JsonFormArrayEventDetail>",
+          "type": "CustomEvent<formArrayEventDetail>",
           "description": "Triggered when an array item is removed."
         },
         {
           "name": "pw:array-reorder",
-          "type": "CustomEvent<JsonFormArrayEventDetail>",
+          "type": "CustomEvent<formArrayEventDetail>",
           "description": "Triggered when array items are reordered (drag & drop scenarios)."
         },
         {
           "name": "pw:dialog-open",
-          "type": "CustomEvent<JsonFormDialogEventDetail>",
+          "type": "CustomEvent<formDialogEventDetail>",
           "description": "Fires before a dialog-driven field opens (e.g. complex editors)."
         },
         {
           "name": "pw:dialog-submit",
-          "type": "CustomEvent<JsonFormDialogEventDetail>",
+          "type": "CustomEvent<formDialogEventDetail>",
           "description": "Fires when a dialog-driven field is saved."
         },
         {
           "name": "pw:submit",
-          "type": "CustomEvent<JsonFormSubmitDetail>",
+          "type": "CustomEvent<formSubmitDetail>",
           "description": "Emitted after submission. `detail` includes `{ json, formData, valid, issues }` for server hand-off or additional processing."
         },
         {
           "name": "pw:value-change",
-          "type": "CustomEvent<JsonFormValueChangeDetail>",
+          "type": "CustomEvent<formValueChangeDetail>",
           "description": "Live value updates whenever a field changes. `detail.name` contains the JSON Pointer-compatible path."
         }
       ],
       "slots": [],
       "cssParts": [],
       "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."
       ]
     },
-    "pds-richtext": {
-      "tag": "pds-richtext",
-      "className": "RichText",
-      "displayName": "Pds Richtext",
-      "storyTitle": "Components/Pds Richtext",
+    "pds-icon": {
+      "tag": "pds-icon",
+      "className": "SvgIcon",
+      "displayName": "Pds Icon",
+      "storyTitle": "Components/Pds Icon",
       "category": "Components",
-      "description": null,
-      "docsDescription": "Rich text editor with markdown support and formatting toolbar. Provide a #showdown import-map entry for best performance; set format=\"markdown\" to keep submitted values as Markdown.",
+      "description": "SVG Icon Web Component\n\nSVG Icon Web Component",
+      "docsDescription": null,
+      "pdsTags": [
+        "autodocs",
+        "graphic",
+        "icon",
+        "icons",
+        "pds-icon",
+        "phosphor",
+        "sprite",
+        "svg",
+        "symbol"
+      ],
+      "ontology": {
+        "id": "pds-icon",
+        "name": "Icon",
+        "description": "SVG icon web component",
+        "selectors": [
+          "pds-icon"
+        ],
+        "tags": [
+          "icon",
+          "graphic",
+          "svg"
+        ],
+        "category": "media"
+      },
+      "stories": [],
+      "sourceModule": "public/assets/pds/components/pds-icon.js",
+      "superclass": "HTMLElement",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Icon name from the sprite sheet",
+          "type": "string",
+          "default": null,
+          "fieldName": null
+        },
+        {
+          "name": "size",
+          "description": "Icon size in pixels or named size (xs, sm, md, lg, xl, 2xl)",
+          "type": "string|number",
+          "default": null,
+          "fieldName": null
+        },
+        {
+          "name": "color",
+          "description": "Icon color (CSS color value, default: currentColor)",
+          "type": "string",
+          "default": null,
+          "fieldName": null
+        },
+        {
+          "name": "label",
+          "description": "Accessible label for the icon (adds role=\"img\")",
+          "type": "string",
+          "default": null,
+          "fieldName": null
+        },
+        {
+          "name": "rotate",
+          "description": "Rotation angle in degrees",
+          "type": "number",
+          "default": null,
+          "fieldName": null
+        },
+        {
+          "name": "sprite",
+          "description": "Override sprite sheet path",
+          "type": "string",
+          "default": null,
+          "fieldName": null
+        },
+        {
+          "name": "no-sprite",
+          "description": "Force fallback icon rendering",
+          "type": "boolean",
+          "default": null,
+          "fieldName": null
+        }
+      ],
+      "properties": [
+        {
+          "name": "externalIconCache",
+          "attribute": null,
+          "description": null,
+          "type": "Map<any, any>",
+          "default": "new Map()",
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "externalIconPromises",
+          "attribute": null,
+          "description": null,
+          "type": "Map<any, any>",
+          "default": "new Map()",
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "getExternalIconPath",
+          "attribute": null,
+          "description": "Get the external icons path from PDS config or use default",
+          "type": null,
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "inlineSprites",
+          "attribute": null,
+          "description": null,
+          "type": "Map<any, any>",
+          "default": "new Map()",
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "instances",
+          "attribute": null,
+          "description": null,
+          "type": "Set<any>",
+          "default": "new Set()",
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "observedAttributes",
+          "attribute": null,
+          "description": null,
+          "type": "string[]",
+          "default": null,
+          "reflects": false,
+          "privacy": "public"
+        },
+        {
+          "name": "spritePromises",
+          "attribute": null,
+          "description": null,
+          "type": "Map<any, any>",
+          "default": "new Map()",
+          "reflects": false,
+          "privacy": "public"
+        }
+      ],
+      "methods": [
+        {
+          "name": "attributeChangedCallback",
+          "description": null,
+          "parameters": [
+            {
+              "name": "name",
+              "type": "any",
+              "description": null,
+              "optional": false
+            },
+            {
+              "name": "oldValue",
+              "type": "any",
+              "description": null,
+              "optional": false
+            },
+            {
+              "name": "newValue",
+              "type": "any",
+              "description": null,
+              "optional": false
+            }
+          ],
+          "return": "void"
+        },
+        {
+          "name": "connectedCallback",
+          "description": null,
+          "parameters": [],
+          "return": "void"
+        },
+        {
+          "name": "disconnectedCallback",
+          "description": null,
+          "parameters": [],
+          "return": "void"
+        },
+        {
+          "name": "ensureInlineSprite",
+          "description": null,
+          "parameters": [
+            {
+              "name": "spriteURL",
+              "type": "any",
+              "description": null,
+              "optional": false
+            }
+          ],
+          "return": "Promise<any>"
+        },
+        {
+          "name": "fetchExternalIcon",
+          "description": "Fetch an external SVG icon and cache it\n\nFetch an external SVG icon and cache it",
+          "parameters": [
+            {
+              "name": "iconName",
+              "type": "string",
+              "description": "The icon name (without .svg extension)",
+              "optional": false
+            }
+          ],
+          "return": "Promise<boolean>"
+        },
+        {
+          "name": "notifyInstances",
+          "description": null,
+          "parameters": [],
+          "return": "void"
+        },
+        {
+          "name": "render",
+          "description": null,
+          "parameters": [],
+          "return": "void"
+        },
+        {
+          "name": "spriteAvailable",
+          "description": "Check if sprite sheet is available\n\nCheck if sprite sheet is available",
+          "parameters": [],
+          "return": "boolean"
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "cssParts": [],
+      "notes": []
+    },
+    "pds-richtext": {
+      "tag": "pds-richtext",
+      "className": "RichText",
+      "displayName": "Pds Richtext",
+      "storyTitle": "Components/Pds Richtext",
+      "category": "Components",
+      "description": null,
+      "docsDescription": "Rich text editor with markdown support and formatting toolbar. Provide a #showdown import-map entry for best performance; set format=\"markdown\" to keep submitted values as Markdown.",
       "pdsTags": [
         "autodocs",
         "content",
@@ -3255,7 +3279,7 @@
         ]
       },
       {
-        "id": "pds-jsonform",
+        "id": "pds-form",
         "name": "JSON Form",
         "tags": [
           "form",
@@ -3264,7 +3288,7 @@
         ],
         "category": "form",
         "selectors": [
-          "pds-jsonform"
+          "pds-form"
         ]
       },
       {
@@ -3603,12 +3627,7 @@
           ".text-right"
         ],
         "color": [
-          ".text-muted",
-          ".text-primary",
-          ".text-success",
-          ".text-warning",
-          ".text-danger",
-          ".text-info"
+          ".text-muted"
         ],
         "overflow": [
           ".truncate"
@@ -3707,7 +3726,7 @@
         ],
         "components": [
           "pds-upload",
-          "pds-jsonform",
+          "pds-form",
           "pds-richtext",
           "pds-calendar"
         ]
@@ -3854,7 +3873,7 @@
         "label",
         "button",
         "fieldset",
-        "pds-jsonform",
+        "pds-form",
         "pds-upload",
         "pds-richtext",
         "pds-calendar",
@@ -4605,5 +4624,1635 @@
         "mobile-stack"
       ]
     }
+  },
+  "storyIndex": {
+    "pds-calendar": {
+      "slug": "pds-calendar",
+      "storyTitle": "Components/Pds Calendar",
+      "category": "Components",
+      "name": "Pds Calendar",
+      "description": "A fully featured calendar component with month navigation, event display, and expandable day views",
+      "tags": [
+        "autodocs",
+        "calendar",
+        "date",
+        "datepicker",
+        "event",
+        "pds-calendar",
+        "schedule"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "calendar",
+          "date",
+          "datepicker",
+          "event",
+          "schedule",
+          "pds-calendar"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "components-pds-calendar--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsCalendar.stories.js"
+        },
+        {
+          "exportName": "DynamicEvents",
+          "name": "DynamicEvents",
+          "id": "components-pds-calendar--dynamic-events",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsCalendar.stories.js"
+        },
+        {
+          "exportName": "EventTypes",
+          "name": "EventTypes",
+          "id": "components-pds-calendar--event-types",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsCalendar.stories.js"
+        },
+        {
+          "exportName": "WithManyEvents",
+          "name": "WithManyEvents",
+          "id": "components-pds-calendar--with-many-events",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsCalendar.stories.js"
+        },
+        {
+          "exportName": "WithSpecificDate",
+          "name": "WithSpecificDate",
+          "id": "components-pds-calendar--with-specific-date",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsCalendar.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsCalendar.stories.js"
+      ]
+    },
+    "pds-drawer": {
+      "slug": "pds-drawer",
+      "storyTitle": "Components/Pds Drawer",
+      "category": "Components",
+      "name": "Pds Drawer",
+      "description": "Slide-out panels from any edge",
+      "tags": [
+        "autodocs",
+        "drawer",
+        "grouping",
+        "interaction",
+        "layout",
+        "modal",
+        "navigation",
+        "overlay",
+        "panel",
+        "pds-drawer",
+        "sidebar"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "drawer",
+          "panel",
+          "sidebar",
+          "overlay",
+          "navigation",
+          "modal",
+          "pds-drawer",
+          "layout",
+          "grouping",
+          "interaction"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "components-pds-drawer--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsDrawer.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsDrawer.stories.js"
+      ]
+    },
+    "pds-form": {
+      "slug": "pds-form",
+      "storyTitle": "Components/pds-form",
+      "category": "Components",
+      "name": "pds-form",
+      "description": "**⭐ Recommended for modern applications** - Automatically generate complete forms from [JSON Schema](https://json-schema.org/) definitions.\n\n### Key Features\n- 🎯 **Zero boilerplate** - Define form structure in JSON, get a working form with validation\n- ✅ **Built-in validation** - Automatic validation based on schema rules (required, min/max, patterns, etc.)\n- 🔄 **Data binding** - Two-way data binding with form state management\n- 🎨 **PDS styled** - Uses all PDS design tokens automatically\n- 📱 **Responsive** - Mobile-friendly layouts out of the box\n- 🧩 **Conditional logic** - Show/hide/disable fields, computed values\n- 🌐 **Nested objects** - Support for complex nested data structures\n- 🔧 **Extensible** - Custom field types and validators\n\n### Why Generate Forms from JSON Schema?\nInstead of manually writing HTML for every form field, validation rule, and error message, you define your data schema once and get:\n- Form UI generation\n- Client-side validation\n- Server-side validation (same schema)\n- API documentation\n- Type definitions\n- Database schemas\n\nSee the examples below to get started, or check the [primitive forms](/story/primitives-form-elements--default) for manual form building.",
+      "tags": [
+        "autodocs",
+        "forms",
+        "input",
+        "interaction",
+        "json-schema",
+        "pds-form",
+        "validation"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "forms",
+          "json-schema",
+          "validation",
+          "input",
+          "pds-form",
+          "interaction"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsForm.stories.js"
+      ]
+    },
+    "pds-icon": {
+      "slug": "pds-icon",
+      "storyTitle": "Components/Pds Icon",
+      "category": "Components",
+      "name": "Pds Icon",
+      "description": null,
+      "tags": [
+        "autodocs",
+        "graphic",
+        "icon",
+        "icons",
+        "pds-icon",
+        "phosphor",
+        "sprite",
+        "svg",
+        "symbol"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "icon",
+          "icons",
+          "svg",
+          "sprite",
+          "phosphor",
+          "graphic",
+          "symbol",
+          "pds-icon"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsIcon.stories.js"
+      ]
+    },
+    "pds-richtext": {
+      "slug": "pds-richtext",
+      "storyTitle": "Components/Pds Richtext",
+      "category": "Components",
+      "name": "Pds Richtext",
+      "description": "Rich text editor with markdown support and formatting toolbar. Provide a #showdown import-map entry for best performance; set format=\"markdown\" to keep submitted values as Markdown.",
+      "tags": [
+        "autodocs",
+        "content",
+        "editor",
+        "forms",
+        "pds-richtext",
+        "richtext",
+        "text",
+        "wysiwyg"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "richtext",
+          "editor",
+          "wysiwyg",
+          "text",
+          "content",
+          "pds-richtext",
+          "forms"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "components-pds-richtext--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsRichtext.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsRichtext.stories.js"
+      ]
+    },
+    "pds-scrollrow": {
+      "slug": "pds-scrollrow",
+      "storyTitle": "Components/Pds Scrollrow",
+      "category": "Components",
+      "name": "Pds Scrollrow",
+      "description": "Horizontal scrolling container with navigation buttons",
+      "tags": [
+        "autodocs",
+        "carousel",
+        "horizontal",
+        "layout",
+        "overflow",
+        "pds-scrollrow",
+        "scroll",
+        "scrollrow"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "scrollrow",
+          "scroll",
+          "carousel",
+          "horizontal",
+          "overflow",
+          "pds-scrollrow",
+          "layout"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsScrollrow.stories.js"
+      ]
+    },
+    "pds-splitpanel": {
+      "slug": "pds-splitpanel",
+      "storyTitle": "Components/Pds Splitpanel",
+      "category": "Components",
+      "name": "Pds Splitpanel",
+      "description": "Split panels divide content areas with a draggable divider for resizable layouts.",
+      "tags": [
+        "autodocs",
+        "interaction",
+        "layout",
+        "panel",
+        "pds-splitpanel",
+        "resizable",
+        "sizing",
+        "split",
+        "splitpanel"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "splitpanel",
+          "split",
+          "resizable",
+          "panel",
+          "layout",
+          "sizing",
+          "interaction",
+          "pds-splitpanel"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsSplitpanel.stories.js"
+      ]
+    },
+    "pds-tabstrip": {
+      "slug": "pds-tabstrip",
+      "storyTitle": "Components/Pds Tabstrip",
+      "category": "Components",
+      "name": "Pds Tabstrip",
+      "description": "Accessible tab interface with keyboard navigation",
+      "tags": [
+        "autodocs",
+        "grouping",
+        "layout",
+        "navigation",
+        "panels",
+        "pds-tabstrip",
+        "tab",
+        "tabs",
+        "tabstrip"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "tab",
+          "tabs",
+          "tabstrip",
+          "navigation",
+          "panels",
+          "grouping",
+          "layout",
+          "pds-tabstrip"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsTabstrip.stories.js"
+      ]
+    },
+    "pds-toaster": {
+      "slug": "pds-toaster",
+      "storyTitle": "Components/Pds Toaster",
+      "category": "Components",
+      "name": "Pds Toaster",
+      "description": "Toast notification system with auto-dismiss and stacking. Toast notifications appear in the top-right corner and auto-dismiss after a few seconds based on message length.",
+      "tags": [
+        "alert",
+        "autodocs",
+        "feedback",
+        "interaction",
+        "message",
+        "notification",
+        "pds-toaster",
+        "toast",
+        "toaster"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "toast",
+          "toaster",
+          "notification",
+          "alert",
+          "message",
+          "feedback",
+          "pds-toaster",
+          "interaction"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsToaster.stories.js"
+      ]
+    },
+    "pds-upload": {
+      "slug": "pds-upload",
+      "storyTitle": "Components/Pds Upload",
+      "category": "Components",
+      "name": "Pds Upload",
+      "description": "File upload with preview and validation",
+      "tags": [
+        "autodocs",
+        "dropzone",
+        "file",
+        "forms",
+        "input",
+        "pds-upload",
+        "upload"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "upload",
+          "file",
+          "dropzone",
+          "input",
+          "pds-upload",
+          "forms"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "components-pds-upload--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\components\\PdsUpload.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\components\\PdsUpload.stories.js"
+      ]
+    },
+    "accordion": {
+      "slug": "accordion",
+      "storyTitle": "Enhancements/Accordion",
+      "category": "Enhancements",
+      "name": "Accordion",
+      "description": null,
+      "tags": [
+        "accordion",
+        "enhancement",
+        "grouping",
+        "navigation"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "grouping",
+          "navigation",
+          "enhancement",
+          "accordion"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\Accordion.stories.js"
+      ]
+    },
+    "button-working": {
+      "slug": "button-working",
+      "storyTitle": "Enhancements/Button Working",
+      "category": "Enhancements",
+      "name": "Button Working",
+      "description": null,
+      "tags": [
+        "button",
+        "enhancement",
+        "feedback",
+        "interaction",
+        "loading",
+        "spinner",
+        "working"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "button",
+          "loading",
+          "working",
+          "spinner",
+          "interaction",
+          "feedback",
+          "enhancement"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\ButtonWorking.stories.js"
+      ]
+    },
+    "dropdowns": {
+      "slug": "dropdowns",
+      "storyTitle": "Enhancements/Dropdowns",
+      "category": "Enhancements",
+      "name": "Dropdowns",
+      "description": null,
+      "tags": [
+        "data-dropdown",
+        "dropdown",
+        "forms",
+        "interaction",
+        "menu",
+        "navigation",
+        "overlay",
+        "popover"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "dropdown",
+          "menu",
+          "navigation",
+          "popover",
+          "overlay",
+          "forms",
+          "interaction",
+          "data-dropdown"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\Dropdowns.stories.js"
+      ]
+    },
+    "open-groups": {
+      "slug": "open-groups",
+      "storyTitle": "Enhancements/Open Groups",
+      "category": "Enhancements",
+      "name": "Open Groups",
+      "description": null,
+      "tags": [
+        "checkbox",
+        "custom-option",
+        "data-open",
+        "dynamic",
+        "enhancement",
+        "fieldset",
+        "forms",
+        "interaction",
+        "radio"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "fieldset",
+          "radio",
+          "checkbox",
+          "dynamic",
+          "custom-option",
+          "data-open",
+          "forms",
+          "interaction",
+          "enhancement"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\OpenGroups.stories.js"
+      ]
+    },
+    "range-sliders": {
+      "slug": "range-sliders",
+      "storyTitle": "Enhancements/Range Sliders",
+      "category": "Enhancements",
+      "name": "Range Sliders",
+      "description": null,
+      "tags": [
+        "enhancement",
+        "forms",
+        "input",
+        "interaction",
+        "range",
+        "slider"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "range",
+          "slider",
+          "input",
+          "forms",
+          "interaction",
+          "enhancement"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\RangeSliders.stories.js"
+      ]
+    },
+    "required-fields": {
+      "slug": "required-fields",
+      "storyTitle": "Enhancements/Required Fields",
+      "category": "Enhancements",
+      "name": "Required Fields",
+      "description": null,
+      "tags": [
+        "asterisk",
+        "enhancement",
+        "form",
+        "forms",
+        "input",
+        "interaction",
+        "required",
+        "validation"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "required",
+          "validation",
+          "form",
+          "input",
+          "asterisk",
+          "forms",
+          "interaction",
+          "enhancement"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\RequiredFields.stories.js"
+      ]
+    },
+    "toggles": {
+      "slug": "toggles",
+      "storyTitle": "Enhancements/Toggles",
+      "category": "Enhancements",
+      "name": "Toggles",
+      "description": null,
+      "tags": [
+        "checkbox",
+        "data-toggle",
+        "enhancement",
+        "forms",
+        "interaction",
+        "switch",
+        "toggle"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "toggle",
+          "switch",
+          "checkbox",
+          "forms",
+          "interaction",
+          "data-toggle",
+          "enhancement"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\enhancements\\Toggles.stories.js"
+      ]
+    },
+    "colors": {
+      "slug": "colors",
+      "storyTitle": "Foundations/Colors",
+      "category": "Foundations",
+      "name": "Colors",
+      "description": "Design tokens - colors, typography, spacing, icons",
+      "tags": [
+        "accent",
+        "color",
+        "colors",
+        "danger",
+        "gray",
+        "info",
+        "neutral",
+        "palette",
+        "primary",
+        "secondary",
+        "semantic",
+        "success",
+        "theming",
+        "tokens",
+        "warning"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "color",
+          "colors",
+          "primary",
+          "secondary",
+          "accent",
+          "success",
+          "warning",
+          "danger",
+          "info",
+          "neutral",
+          "gray",
+          "semantic",
+          "palette",
+          "tokens",
+          "theming"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "foundations-colors--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Colors.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\Colors.stories.js"
+      ]
+    },
+    "html-defaults": {
+      "slug": "html-defaults",
+      "storyTitle": "Foundations/HTML Defaults",
+      "category": "Foundations",
+      "name": "HTML Defaults",
+      "description": "PDS provides opinionated default styles for semantic HTML elements, creating a modern look & feel without requiring classes.",
+      "tags": [],
+      "pdsParameters": {},
+      "stories": [
+        {
+          "exportName": "DetailsAndSummary",
+          "name": "Details & Summary",
+          "id": "foundations-html-defaults--details-and-summary",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\HTMLDefaults.stories.js"
+        },
+        {
+          "exportName": "Overview",
+          "name": "Overview",
+          "id": "foundations-html-defaults--overview",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\HTMLDefaults.stories.js"
+        },
+        {
+          "exportName": "StructuralElements",
+          "name": "Structural Elements",
+          "id": "foundations-html-defaults--structural-elements",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\HTMLDefaults.stories.js"
+        },
+        {
+          "exportName": "TextElements",
+          "name": "Text Elements",
+          "id": "foundations-html-defaults--text-elements",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\HTMLDefaults.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\HTMLDefaults.stories.js"
+      ]
+    },
+    "icons": {
+      "slug": "icons",
+      "storyTitle": "Foundations/Icons",
+      "category": "Foundations",
+      "name": "Icons",
+      "description": "Icon system using Phosphor icons with configurable sets per category",
+      "tags": [
+        "graphic",
+        "icon",
+        "icons",
+        "pds-icon",
+        "phosphor",
+        "sprite",
+        "svg",
+        "symbol"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "icon",
+          "icons",
+          "svg",
+          "phosphor",
+          "graphic",
+          "symbol",
+          "pds-icon",
+          "sprite"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\Icons.stories.js"
+      ]
+    },
+    "mesh-gradients": {
+      "slug": "mesh-gradients",
+      "storyTitle": "Foundations/Mesh Gradients",
+      "category": "Foundations",
+      "name": "Mesh Gradients",
+      "description": "Beautiful mesh gradient backgrounds generated from your color palette. Automatically adapts to light and dark modes with 5 different variations.",
+      "tags": [
+        "background",
+        "colors",
+        "decoration",
+        "effect",
+        "gradient",
+        "mesh",
+        "theming"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "mesh",
+          "gradient",
+          "background",
+          "effect",
+          "decoration",
+          "colors",
+          "theming"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\MeshGradients.stories.js"
+      ]
+    },
+    "smart-surfaces": {
+      "slug": "smart-surfaces",
+      "storyTitle": "Foundations/Smart Surfaces",
+      "category": "Foundations",
+      "name": "Smart Surfaces",
+      "description": "Smart surface system that automatically adapts text, icons, shadows, and borders based on backgrounds. Maintains WCAG AA contrast ratios automatically.",
+      "tags": [
+        "background",
+        "colors",
+        "contrast",
+        "elevated",
+        "inverse",
+        "layout",
+        "overlay",
+        "subtle",
+        "sunken",
+        "surface",
+        "theming"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "surface",
+          "background",
+          "theming",
+          "contrast",
+          "elevated",
+          "subtle",
+          "sunken",
+          "overlay",
+          "inverse",
+          "colors",
+          "layout"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\SmartSurfaces.stories.js"
+      ]
+    },
+    "spacing": {
+      "slug": "spacing",
+      "storyTitle": "Foundations/Spacing",
+      "category": "Foundations",
+      "name": "Spacing",
+      "description": "Spacing tokens ensure consistent rhythm, balance, and hierarchy across layouts.",
+      "tags": [
+        "gap",
+        "layout",
+        "margin",
+        "padding",
+        "rhythm",
+        "scale",
+        "spacing",
+        "tokens"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "spacing",
+          "gap",
+          "padding",
+          "margin",
+          "rhythm",
+          "tokens",
+          "layout",
+          "scale"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "SpacingScale",
+          "name": "Spacing Scale",
+          "id": "foundations-spacing--spacing-scale",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Spacing.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\Spacing.stories.js"
+      ]
+    },
+    "typography": {
+      "slug": "typography",
+      "storyTitle": "Foundations/Typography",
+      "category": "Foundations",
+      "name": "Typography",
+      "description": "Typography system with scales, weights, line heights, and semantic text styles for building clear content hierarchy and readable interfaces.",
+      "tags": [
+        "body",
+        "family",
+        "font",
+        "heading",
+        "scale",
+        "size",
+        "text",
+        "tokens",
+        "typography",
+        "weight"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "typography",
+          "font",
+          "text",
+          "heading",
+          "body",
+          "size",
+          "weight",
+          "family",
+          "tokens",
+          "scale"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "ArticleLayout",
+          "name": "Article Layout",
+          "id": "foundations-typography--article-layout",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        },
+        {
+          "exportName": "DataDisplay",
+          "name": "Data Display & Lists",
+          "id": "foundations-typography--data-display",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        },
+        {
+          "exportName": "HeadingScale",
+          "name": "Heading Scale",
+          "id": "foundations-typography--heading-scale",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        },
+        {
+          "exportName": "LineHeights",
+          "name": "Line Heights & Readability",
+          "id": "foundations-typography--line-heights",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        },
+        {
+          "exportName": "TextSelection",
+          "name": "Text Selection & Interaction",
+          "id": "foundations-typography--text-selection",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        },
+        {
+          "exportName": "TextStyles",
+          "name": "Text Styles & Weights",
+          "id": "foundations-typography--text-styles",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        },
+        {
+          "exportName": "UIComponents",
+          "name": "UI Component Text",
+          "id": "foundations-typography--uicomponents",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\Typography.stories.js"
+      ]
+    },
+    "z-index": {
+      "slug": "z-index",
+      "storyTitle": "Foundations/Z-Index",
+      "category": "Foundations",
+      "name": "Z-Index",
+      "description": "Z-Index tokens define the stacking order of UI elements along the z-axis. These tokens ensure consistent layering across the application, preventing z-index conflicts and establishing clear visual hierarchy for overlays, modals, dropdowns, and other elevated UI components.",
+      "tags": [
+        "dropdown",
+        "layer",
+        "modal",
+        "overlay",
+        "stacking",
+        "tokens",
+        "z-index",
+        "zindex"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "z-index",
+          "zindex",
+          "stacking",
+          "layer",
+          "overlay",
+          "modal",
+          "dropdown",
+          "tokens"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "UsageExamples",
+          "name": "Usage Examples",
+          "id": "foundations-z-index--usage-examples",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\ZIndex.stories.js"
+        },
+        {
+          "exportName": "VisualDemo",
+          "name": "Visual Stacking Demo",
+          "id": "foundations-z-index--visual-demo",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\ZIndex.stories.js"
+        },
+        {
+          "exportName": "ZIndexScale",
+          "name": "Z-Index Scale",
+          "id": "foundations-z-index--zindex-scale",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\foundations\\ZIndex.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\foundations\\ZIndex.stories.js"
+      ]
+    },
+    "getting-started": {
+      "slug": "getting-started",
+      "storyTitle": "About PDS/Getting Started",
+      "category": "About PDS",
+      "name": "Getting Started",
+      "description": "Complete beginner guide: installation, philosophy, configuration, enhancements, components, and console API",
+      "tags": [
+        "cdn",
+        "cli",
+        "dark mode",
+        "getting started",
+        "guide",
+        "introduction",
+        "light mode",
+        "npm",
+        "overview",
+        "themes"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "getting started",
+          "introduction",
+          "cli",
+          "npm",
+          "cdn",
+          "overview",
+          "guide",
+          "themes",
+          "dark mode",
+          "light mode"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\GettingStarted.stories.js"
+      ]
+    },
+    "layout": {
+      "slug": "layout",
+      "storyTitle": "Foundations/Layout",
+      "category": "Foundations",
+      "name": "Layout",
+      "description": "Complete layout system: Container, Grid, Flex, Stack, and Gap utilities.",
+      "tags": [
+        "alignment",
+        "container",
+        "flex",
+        "gap",
+        "grid",
+        "layout",
+        "spacing",
+        "text",
+        "truncate",
+        "utilities"
+      ],
+      "pdsParameters": {},
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\layout\\LayoutOverview.stories.js",
+        "packages\\pds-storybook\\stories\\layout\\LayoutSystem.stories.js"
+      ]
+    },
+    "border-effects": {
+      "slug": "border-effects",
+      "storyTitle": "Patterns/Border Effects",
+      "category": "Patterns",
+      "name": "Border Effects",
+      "description": "Special border effects including gradients and glows",
+      "tags": [
+        "border",
+        "border-glow",
+        "border-gradient",
+        "decoration",
+        "effect",
+        "glow",
+        "gradient"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "border",
+          "gradient",
+          "glow",
+          "effect",
+          "decoration",
+          "border-gradient",
+          "border-glow"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\patterns\\BorderEffects.stories.js"
+      ]
+    },
+    "interactive-states": {
+      "slug": "interactive-states",
+      "storyTitle": "Patterns/Interactive States",
+      "category": "Patterns",
+      "name": "Interactive States",
+      "description": "Interactive states including focus rings, hover effects, active states, disabled states, and working/loading states. All animations respect user preferences and accessibility settings.",
+      "tags": [
+        "accessibility",
+        "active",
+        "disabled",
+        "feedback",
+        "focus",
+        "hover",
+        "interaction",
+        "loading",
+        "state",
+        "working"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "hover",
+          "focus",
+          "active",
+          "disabled",
+          "loading",
+          "working",
+          "interaction",
+          "accessibility",
+          "feedback",
+          "state"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\patterns\\InteractiveStates.stories.js"
+      ]
+    },
+    "utilities": {
+      "slug": "utilities",
+      "storyTitle": "Patterns/Utilities",
+      "category": "Patterns",
+      "name": "Utilities",
+      "description": "Utility classes for spacing, sizing, and common patterns",
+      "tags": [
+        "gap",
+        "layout",
+        "spacing",
+        "utilities"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "utilities",
+          "layout",
+          "spacing",
+          "gap"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\patterns\\Utilities.stories.js"
+      ]
+    },
+    "alerts": {
+      "slug": "alerts",
+      "storyTitle": "Primitives/Alerts",
+      "category": "Primitives",
+      "name": "Alerts",
+      "description": "Alert components for feedback messages, notifications, and status indicators. Supports icons, titles, dismissible variants, and semantic messages.",
+      "tags": [
+        "alerts",
+        "colors",
+        "danger",
+        "error",
+        "feedback",
+        "info",
+        "message",
+        "notification",
+        "notifications",
+        "status",
+        "success",
+        "warning"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "alerts",
+          "colors",
+          "feedback",
+          "notification",
+          "message",
+          "status"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\Alerts.stories.js"
+      ]
+    },
+    "badges-pills": {
+      "slug": "badges-pills",
+      "storyTitle": "Primitives/Badges & Pills",
+      "category": "Primitives",
+      "name": "Badges & Pills",
+      "description": "Badges and pills for labels, tags, status indicators, and categorization",
+      "tags": [
+        "badge",
+        "chip",
+        "indicator",
+        "inline",
+        "label",
+        "pill",
+        "status",
+        "tag"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "badge",
+          "pill",
+          "tag",
+          "chip",
+          "status",
+          "label",
+          "indicator",
+          "inline"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "AllVariations",
+          "name": "AllVariations",
+          "id": "primitives-badges-pills--all-variations",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\Badges.stories.js"
+        },
+        {
+          "exportName": "BadgeSizes",
+          "name": "BadgeSizes",
+          "id": "primitives-badges-pills--badge-sizes",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\Badges.stories.js"
+        },
+        {
+          "exportName": "DefaultBadges",
+          "name": "DefaultBadges",
+          "id": "primitives-badges-pills--default-badges",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\Badges.stories.js"
+        },
+        {
+          "exportName": "OutlinedBadges",
+          "name": "OutlinedBadges",
+          "id": "primitives-badges-pills--outlined-badges",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\Badges.stories.js"
+        },
+        {
+          "exportName": "Pills",
+          "name": "Pills",
+          "id": "primitives-badges-pills--pills",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\Badges.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\Badges.stories.js"
+      ]
+    },
+    "buttons": {
+      "slug": "buttons",
+      "storyTitle": "Primitives/Buttons",
+      "category": "Primitives",
+      "name": "Buttons",
+      "description": "Button primitives with variants, sizes, and icon support. All buttons automatically adapt to your theme with proper focus states and accessibility.",
+      "tags": [
+        "buttons",
+        "interaction"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "buttons",
+          "interaction"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\Buttons.stories.js"
+      ]
+    },
+    "cards": {
+      "slug": "cards",
+      "storyTitle": "Primitives/Cards",
+      "category": "Primitives",
+      "name": "Cards",
+      "description": "Versatile content containers with multiple surface variants. Cards automatically adapt to your theme and support nesting for complex layouts.",
+      "tags": [
+        "cards",
+        "colors",
+        "layout",
+        "spacing",
+        "surface"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "cards",
+          "layout",
+          "spacing",
+          "surface",
+          "colors"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\Cards.stories.js"
+      ]
+    },
+    "form-elements": {
+      "slug": "form-elements",
+      "storyTitle": "Primitives/Form Elements",
+      "category": "Primitives",
+      "name": "Form Elements",
+      "description": "Standard HTML form controls styled by PDS. \n\n**💡 For modern apps, consider using [pds-form](/story/components-pds-form--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.\n\nThese primitive form controls provide the foundation for manual form building when you need full control over the markup.",
+      "tags": [
+        "buttons",
+        "forms"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "buttons",
+          "forms"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "primitives-form-elements--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\FormElements.stories.js"
+        },
+        {
+          "exportName": "InputsWithIcons",
+          "name": "InputsWithIcons",
+          "id": "primitives-form-elements--inputs-with-icons",
+          "tags": [],
+          "description": "Input fields can be enhanced with icons to provide visual context. Use the `input-icon` class wrapper and position icons at the start (default) or end (`input-icon-end`) of the input.",
+          "source": "packages\\pds-storybook\\stories\\primitives\\FormElements.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\FormElements.stories.js"
+      ]
+    },
+    "html-form-elements": {
+      "slug": "html-form-elements",
+      "storyTitle": "Primitives/HTML Form Elements",
+      "category": "Primitives",
+      "name": "HTML Form Elements",
+      "description": "Standard HTML form controls styled by PDS. \n\n**💡 For modern apps, consider using [pds-form](/story/components-pds-form--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.\n\nThese primitive form controls provide the foundation for manual form building when you need full control over the markup.",
+      "tags": [
+        "buttons",
+        "forms"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "buttons",
+          "forms"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "Default",
+          "name": "Default",
+          "id": "primitives-html-form-elements--default",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\HtmlFormElements.stories.js"
+        },
+        {
+          "exportName": "InputsWithIcons",
+          "name": "InputsWithIcons",
+          "id": "primitives-html-form-elements--inputs-with-icons",
+          "tags": [],
+          "description": "Input fields can be enhanced with icons to provide visual context. Use the `input-icon` class wrapper and position icons at the start (default) or end (`input-icon-end`) of the input.",
+          "source": "packages\\pds-storybook\\stories\\primitives\\HtmlFormElements.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\HtmlFormElements.stories.js"
+      ]
+    },
+    "html-form-groups": {
+      "slug": "html-form-groups",
+      "storyTitle": "Primitives/HTML Form Groups",
+      "category": "Primitives",
+      "name": "HTML Form Groups",
+      "description": "Accessible radio groups and checkbox groups with proper ARIA attributes and semantic HTML.\n\n## Unified Styling\n\nRadio groups (`role=\"radiogroup\"`) and checkbox groups (`role=\"group\"`) share the same consolidated styling rules:\n\n### Default Style\nBoth display with visible native controls in a vertical column layout:\n- Column layout with reduced spacing (`gap: var(--spacing-2)`)\n- Visible native radio buttons or checkboxes with primary accent color\n- Clean hover states that highlight text\n- Proper focus outlines for accessibility\n- Users can override layout with standard flex utilities\n\n### Button Style\nAdd the `.buttons` class to either type for outlined button-style controls:\n- Horizontal flex wrap layout\n- Outlined style with transparent background\n- Selected state: subtle primary tint (8%) with thicker border (2px)\n- Compact/dense sizing (75% of regular button height)\n- Never looks like filled primary buttons - always outlined\n- Works identically for both radio and checkbox groups",
+      "tags": [
+        "checkbox",
+        "forms",
+        "grouping",
+        "radio"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "forms",
+          "radio",
+          "checkbox",
+          "grouping"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "AccessibleFormGroups",
+          "name": "Accessible Form Groups",
+          "id": "primitives-html-form-groups--accessible-form-groups",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\primitives\\HtmlFormGroups.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\HtmlFormGroups.stories.js"
+      ]
+    },
+    "media-elements": {
+      "slug": "media-elements",
+      "storyTitle": "Primitives/Media Elements",
+      "category": "Primitives",
+      "name": "Media Elements",
+      "description": "Responsive images, figures with captions, image galleries, and video elements with proper semantic HTML.",
+      "tags": [
+        "caption",
+        "figure",
+        "gallery",
+        "image",
+        "img",
+        "media",
+        "responsive",
+        "video"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "media",
+          "image",
+          "figure",
+          "gallery",
+          "video",
+          "responsive",
+          "caption",
+          "img"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\Media.stories.js"
+      ]
+    },
+    "tables": {
+      "slug": "tables",
+      "storyTitle": "Primitives/Tables",
+      "category": "Primitives",
+      "name": "Tables",
+      "description": "Responsive tables with various styling options including striped, bordered, and compact variants.",
+      "tags": [
+        "bordered",
+        "compact",
+        "data",
+        "grid",
+        "responsive",
+        "striped",
+        "table",
+        "tabular"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "table",
+          "data",
+          "grid",
+          "tabular",
+          "responsive",
+          "striped",
+          "bordered",
+          "compact"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\primitives\\Tables.stories.js"
+      ]
+    },
+    "backdrop": {
+      "slug": "backdrop",
+      "storyTitle": "Utilities/Backdrop",
+      "category": "Utilities",
+      "name": "Backdrop",
+      "description": "Backdrop utilities for modal overlays, drawers, and lightboxes. Provides consistent blur and dimming effects with light/dark variants.",
+      "tags": [
+        "backdrop",
+        "layout",
+        "modal",
+        "overlay",
+        "utilities"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "backdrop",
+          "modal",
+          "overlay",
+          "utilities"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\utilities\\Backdrop.stories.js"
+      ]
+    },
+    "pds-ask": {
+      "slug": "pds-ask",
+      "storyTitle": "Utilities/PDS ask",
+      "category": "Utilities",
+      "name": "PDS ask",
+      "description": "The `PDS.ask()` helper wraps the native `<dialog>` element with PDS styling and a promise-based API.\nUse it to collect quick confirmations or to stage entire forms before committing data back to the host application.",
+      "tags": [
+        "alert",
+        "confirm",
+        "dialog",
+        "dialogs",
+        "forms",
+        "interaction",
+        "modal",
+        "overlay",
+        "pds-ask",
+        "popup",
+        "prompt"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "interaction",
+          "dialogs",
+          "forms",
+          "pds-ask",
+          "modal",
+          "alert",
+          "confirm",
+          "prompt"
+        ]
+      },
+      "stories": [
+        {
+          "exportName": "BareConfirm",
+          "name": "Are you sure?",
+          "id": "utilities-pds-ask--bare-confirm",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\utils\\PdsAsk.stories.js"
+        },
+        {
+          "exportName": "QuickConfirm",
+          "name": "Boolean confirm flow",
+          "id": "utilities-pds-ask--quick-confirm",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\utils\\PdsAsk.stories.js"
+        },
+        {
+          "exportName": "formSubdialog",
+          "name": "Embed a pds-form subform",
+          "id": "utilities-pds-ask--form-subdialog",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\utils\\PdsAsk.stories.js"
+        },
+        {
+          "exportName": "MiniForm",
+          "name": "Mini form submission",
+          "id": "utilities-pds-ask--mini-form",
+          "tags": [],
+          "description": null,
+          "source": "packages\\pds-storybook\\stories\\utils\\PdsAsk.stories.js"
+        }
+      ],
+      "files": [
+        "packages\\pds-storybook\\stories\\utils\\PdsAsk.stories.js"
+      ]
+    },
+    "what-is-pds": {
+      "slug": "what-is-pds",
+      "storyTitle": "About PDS/What Is PDS",
+      "category": "About PDS",
+      "name": "What Is PDS",
+      "description": "Learn about Pure Design System and its revolutionary approach to design systems",
+      "tags": [
+        "adoptedt stylesheets",
+        "design system",
+        "introduction",
+        "overview",
+        "philosophy",
+        "progressive enhancements",
+        "web components",
+        "what is pds"
+      ],
+      "pdsParameters": {
+        "tags": [
+          "what is pds",
+          "introduction",
+          "overview",
+          "design system",
+          "philosophy",
+          "progressive enhancements",
+          "web components",
+          "adoptedt stylesheets"
+        ]
+      },
+      "stories": [],
+      "files": [
+        "packages\\pds-storybook\\stories\\WhatIsPDS.stories.js"
+      ]
+    }
   }
 }