@pure-ds/storybook 0.4.19 → 0.4.21

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

@@ -146,6 +146,57 @@ function serializeForDisplay(value) {
   }
 }
 
+/**
+ * Generate realistic source code for pds-form elements
+ */
+function generatePdsFormMarkup(formElement) {
+  const attrs = [];
+  
+  // Check for properties
+  if (formElement.jsonSchema) {
+    attrs.push('.jsonSchema=${schema}');
+  }
+  if (formElement.uiSchema) {
+    attrs.push('.uiSchema=${uiSchema}');
+  }
+  if (formElement.values) {
+    attrs.push('.values=${values}');
+  }
+  if (formElement.options && Object.keys(formElement.options).length > 0) {
+    attrs.push('.options=${options}');
+  }
+  
+  // Check for common event listeners by looking at the element's event listeners
+  // Since we can't easily detect event listeners, we'll check common patterns
+  const hasSubmitHandler = formElement.getAttribute('data-has-submit') !== null || true; // Assume submit handler
+  if (hasSubmitHandler) {
+    attrs.push('@pw:submit=${(e) => handleSubmit(e.detail)}');
+  }
+  
+  // Check for boolean attributes
+  if (formElement.hasAttribute('data-required')) {
+    attrs.push('data-required');
+  }
+  if (formElement.hasAttribute('hide-actions')) {
+    attrs.push('hide-actions');
+  }
+  
+  const formattedAttrs = attrs.length > 0 
+    ? '\n  ' + attrs.join('\n  ') + '\n'
+    : '';
+  
+  // Check for slotted content
+  const slots = formElement.querySelectorAll('[slot]');
+  let slotContent = '';
+  if (slots.length > 0) {
+    slotContent = '\n  ' + Array.from(slots).map(slot => {
+      return `<div slot="${slot.getAttribute('slot')}">\n    <!-- slotted content -->\n  </div>`;
+    }).join('\n  ') + '\n';
+  }
+  
+  return `<pds-form${formattedAttrs}>${slotContent}</pds-form>`;
+}
+
 /**
  * Global decorator that extracts and sends HTML to the panel
  */
@@ -160,18 +211,44 @@ export const withHTMLExtractor = (storyFn, context) => {
     // Try to get HTML from the story container
     const container = document.querySelector('#storybook-root');
     if (container) {
-      if (story && story._$litType$) {
-        html = await litToHTML(story);
+      // Check if this story has pds-form elements
+      const pdsFormElements = Array.from(container.querySelectorAll('pds-form'));
+      
+      if (pdsFormElements.length > 0) {
+        // Generate realistic markup for pds-form stories
+        const alerts = Array.from(container.querySelectorAll('.alert'));
+        let markup = '';
+        
+        // Include any alert/info boxes before the form
+        if (alerts.length > 0) {
+          alerts.forEach(alert => {
+            markup += `<div class="alert ${alert.className.split(' ').filter(c => c !== 'alert').join(' ')}">\n`;
+            markup += `  ${alert.innerHTML.replace(/\n\s+/g, '\n  ')}\n`;
+            markup += `</div>\n\n`;
+          });
+        }
+        
+        // Add pds-form markup
+        pdsFormElements.forEach(form => {
+          markup += generatePdsFormMarkup(form);
+        });
+        
+        html = markup;
       } else {
-        html = formatHTML(extractHTML(container));
+        // No pds-form elements, use standard extraction
+        if (story && story._$litType$) {
+          html = await litToHTML(story);
+        } else {
+          html = formatHTML(extractHTML(container));
+        }
       }
 
-      const forms = Array.from(container.querySelectorAll('pds-form'))
+      const forms = pdsFormElements
         .map((form, index) => {
           const label =
             form.getAttribute?.('id') ||
             form.getAttribute?.('name') ||
-            (Array.from(container.querySelectorAll('pds-form')).length > 1 ? `Form ${index + 1}` : 'Form');
+            (pdsFormElements.length > 1 ? `Form ${index + 1}` : 'Form');
 
           const jsonSchema = serializeForDisplay(form.jsonSchema);
           const uiSchema = serializeForDisplay(form.uiSchema);

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-13T12:40:57.809Z",
+  "generatedAt": "2026-01-14T14:26:09.141Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",

package/package.json

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

package/public/assets/js/app.js

@@ -645,6 +645,10 @@ fieldset {
         color: var(--color-primary-700);
       }
     }
+
+    input[type="checkbox"]{
+      border-radius: var(--radius-xs);
+    }
     
     input[type="radio"],
     input[type="checkbox"] {
@@ -653,18 +657,27 @@ fieldset {
       width: var(--spacing-5);
       height: var(--spacing-5);
       min-height: var(--spacing-5);
+      padding: var(--spacing-2);
       margin: 0;
       cursor: pointer;
       flex-shrink: 0;
       accent-color: var(--color-primary-600);
-      appearance: auto;
-      -webkit-appearance: auto;
-      -moz-appearance: auto;
-      
-      &:focus {
-        outline: 2px solid var(--color-primary-500);
-        outline-offset: 2px;
+
+      &:focus-visible {
+        outline: none;
+
+        box-shadow:
+          0 0 0 2px var(--color-primary-500),
+          0 0 0 4px color-mix(in srgb,
+            var(--color-primary-500) 40%,
+            transparent
+          );
       }
+
+      &:checked {
+        background-color: var(--color-primary-600);
+      }
+      
     }
   }
   

package/public/assets/js/pds.js

@@ -643,6 +643,10 @@ fieldset {
         color: var(--color-primary-700);
       }
     }
+
+    input[type="checkbox"]{
+      border-radius: var(--radius-xs);
+    }
     
     input[type="radio"],
     input[type="checkbox"] {
@@ -651,18 +655,27 @@ fieldset {
       width: var(--spacing-5);
       height: var(--spacing-5);
       min-height: var(--spacing-5);
+      padding: var(--spacing-2);
       margin: 0;
       cursor: pointer;
       flex-shrink: 0;
       accent-color: var(--color-primary-600);
-      appearance: auto;
-      -webkit-appearance: auto;
-      -moz-appearance: auto;
-      
-      &:focus {
-        outline: 2px solid var(--color-primary-500);
-        outline-offset: 2px;
+
+      &:focus-visible {
+        outline: none;
+
+        box-shadow:
+          0 0 0 2px var(--color-primary-500),
+          0 0 0 4px color-mix(in srgb,
+            var(--color-primary-500) 40%,
+            transparent
+          );
       }
+
+      &:checked {
+        background-color: var(--color-primary-600);
+      }
+      
     }
   }
   

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

@@ -1116,6 +1116,7 @@ export class SchemaForm extends LitElement {
       this.#deleteByPathPrefix(this.#data, path + "/");
       this.requestUpdate();
       this.#emit("pw:value-change", {
+        path,
         name: path,
         value: i,
         validity: { valid: true },
@@ -1865,7 +1866,6 @@ export class SchemaForm extends LitElement {
           <select
             id=${id}
             name=${path}
-            .value=${value ?? ""}
             ?disabled=${!!attrs.disabled}
             ?required=${!!attrs.required}
             ?data-dropdown=${useDropdown}
@@ -1874,7 +1874,7 @@ export class SchemaForm extends LitElement {
             <option value="" ?selected=${value == null}>—</option>
             ${enumValues.map(
               (v, i) =>
-                html`<option value=${String(v)}>
+                html`<option value=${String(v)} ?selected=${String(value) === String(v)}>
                   ${String(enumLabels[i])}
                 </option>`
             )}
@@ -2092,17 +2092,28 @@ export class SchemaForm extends LitElement {
     const withoutSlash = path.startsWith("/") ? path.substring(1) : path;
     if (this.uiSchema[withoutSlash]) return this.uiSchema[withoutSlash];
 
-    // Try nested navigation (e.g., userProfile/settings/preferences/theme)
+    // Try nested navigation (e.g., /accountType/companyName)
     // Skip array indices (numeric parts and wildcard *) when navigating UI schema
     const parts = path.replace(/^\//, "").split("/");
     let current = this.uiSchema;
-    for (const part of parts) {
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
       // Skip numeric array indices and wildcard in UI schema navigation
       if (/^\d+$/.test(part) || part === "*") continue;
 
+      // Try both with and without leading slash for each segment
       if (current && typeof current === "object" && part in current) {
         current = current[part];
+      } else if (current && typeof current === "object" && ("/" + part) in current) {
+        current = current["/" + part];
       } else {
+        // If this is the first segment, try looking up the full path from root
+        if (i === 0) {
+          const fullPath = "/" + parts.join("/");
+          if (this.uiSchema[fullPath]) {
+            return this.uiSchema[fullPath];
+          }
+        }
         return undefined;
       }
     }
@@ -2227,17 +2238,23 @@ export class SchemaForm extends LitElement {
     this.#setByPath(this.#data, path, val);
 
     // Apply calculated values for any dependent fields
-    this.#applyCalculatedValues(path);
+    // This will call requestUpdate() if there are dependents
+    const hadDependents = this.#applyCalculatedValues(path);
+
+    // Only request update here if there were no dependents
+    // (to avoid double render)
+    if (!hadDependents) {
+      this.requestUpdate();
+    }
 
-    this.requestUpdate();
     const validity = { valid: true };
-    this.#emit("pw:value-change", { name: path, value: val, validity });
+    this.#emit("pw:value-change", { path, name: path, value: val, validity });
   }
 
   #applyCalculatedValues(changedPath) {
     // Find fields that depend on the changed path
     const dependents = this.#dependencies.get(changedPath);
-    if (!dependents) return;
+    if (!dependents || dependents.size === 0) return false;
 
     for (const targetPath of dependents) {
       const ui = this.#uiFor(targetPath);
@@ -2255,6 +2272,11 @@ export class SchemaForm extends LitElement {
         }
       }
     }
+    
+    // Force re-render since there were dependents
+    // This ensures ui:visibleWhen, ui:requiredWhen, ui:disabledWhen get re-evaluated
+    this.requestUpdate();
+    return true; // Indicate that we triggered a re-render
   }
 
   #getByPath(obj, path) {

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

@@ -1838,6 +1838,10 @@ fieldset {
         color: var(--color-primary-700);
       }
     }
+
+    input[type="checkbox"]{
+      border-radius: var(--radius-xs);
+    }
     
     input[type="radio"],
     input[type="checkbox"] {
@@ -1846,18 +1850,27 @@ fieldset {
       width: var(--spacing-5);
       height: var(--spacing-5);
       min-height: var(--spacing-5);
+      padding: var(--spacing-2);
       margin: 0;
       cursor: pointer;
       flex-shrink: 0;
       accent-color: var(--color-primary-600);
-      appearance: auto;
-      -webkit-appearance: auto;
-      -moz-appearance: auto;
-      
-      &:focus {
-        outline: 2px solid var(--color-primary-500);
-        outline-offset: 2px;
+
+      &:focus-visible {
+        outline: none;
+
+        box-shadow:
+          0 0 0 2px var(--color-primary-500),
+          0 0 0 4px color-mix(in srgb,
+            var(--color-primary-500) 40%,
+            transparent
+          );
       }
+
+      &:checked {
+        background-color: var(--color-primary-600);
+      }
+      
     }
   }
   

package/stories/components/PdsForm.stories.js

@@ -1020,6 +1020,151 @@ export const WithGridLayout = {
   },
 };
 
+export const WithGridLayoutAuto = {
+  name: "Grid Layout - Auto",
+  parameters: {
+    docs: {
+      description: {
+        story: `Auto-fit grid layout that automatically adjusts the number of columns based on available space and minimum column width.
+
+This is the **PDS way** to create responsive grids without media queries. Use \`columns: "auto"\` with \`autoSize\` to specify the minimum column width.
+
+### Usage Example
+
+\`\`\`html
+<pds-form
+  .jsonSchema=\${schema}
+  .uiSchema=\${uiSchema}
+  .options=\${options}
+  @pw:submit=\${(e) => toastFormData(e.detail)}
+></pds-form>
+
+<script type="module">
+import { html } from 'lit';
+
+const schema = {
+  type: "object",
+  properties: {
+    productInfo: {
+      type: "object",
+      title: "Product Information",
+      properties: {
+        name: { type: "string", title: "Product Name" },
+        sku: { type: "string", title: "SKU" },
+        price: { type: "number", title: "Price" },
+        // ... more fields
+      }
+    }
+  }
+};
+
+const uiSchema = {
+  productInfo: {
+    "ui:layout": "grid",
+    "ui:layoutOptions": {
+      columns: "auto",   // Auto-fit columns
+      autoSize: "md",    // Min width ~200px (grid-auto-md)
+      gap: "md"
+    }
+  }
+};
+
+const options = {
+  widgets: { booleans: "toggle" }
+};
+</script>
+\`\`\`
+
+### Available sizes:
+- \`"sm"\` → ~150px minimum width
+- \`"md"\` → ~200px minimum width
+- \`"lg"\` → ~250px minimum width
+- \`"xl"\` → ~300px minimum width
+
+The grid automatically creates as many columns as will fit, wrapping to new rows when needed. **No JavaScript required!**`,
+      },
+    },
+  },
+  render: () => {
+    const schema = {
+      type: "object",
+      properties: {
+        productInfo: {
+          type: "object",
+          title: "Product Information",
+          properties: {
+            name: {
+              type: "string",
+              title: "Product Name",
+              examples: ["Wireless Headphones"],
+            },
+            sku: { type: "string", title: "SKU", examples: ["WH-1000XM4"] },
+            price: { type: "number", title: "Price", examples: [299.99] },
+            quantity: { type: "integer", title: "Quantity", examples: [50] },
+            category: {
+              type: "string",
+              title: "Category",
+              enum: [
+                "Electronics",
+                "Clothing",
+                "Books",
+                "Home",
+                "Sports",
+                "Garden",
+              ],
+            },
+            brand: { type: "string", title: "Brand", examples: ["Sony"] },
+            weight: { type: "number", title: "Weight (kg)", examples: [0.25] },
+            dimensions: {
+              type: "string",
+              title: "Dimensions",
+              examples: ["20 x 18 x 8 cm"],
+            },
+            inStock: {
+              type: "boolean",
+              title: "In Stock",
+              default: true,
+            },
+            featured: {
+              type: "boolean",
+              title: "Featured Product",
+              default: false,
+            },
+          },
+        },
+      },
+    };
+
+    const uiSchema = {
+      productInfo: {
+        "ui:layout": "grid",
+        "ui:layoutOptions": {
+          columns: "auto",   // Auto-fit columns
+          autoSize: "md",    // Min column width (grid-auto-md)
+          gap: "md"
+        },
+      },
+    };
+
+    const options = {
+      widgets: { booleans: "toggle" },
+    };
+
+    return html`
+      <div class="alert alert-info">
+        <p><strong>💡 Try resizing your browser window!</strong></p>
+        <p>The grid automatically adjusts the number of columns based on available space. Fields maintain a minimum width of ~200px and wrap to new rows as needed.</p>
+      </div>
+      <pds-form
+        .jsonSchema=${schema}
+        .uiSchema=${uiSchema}
+        .options=${options}
+        @pw:submit=${(e) => toastFormData(e.detail)}
+      ></pds-form>
+    `;
+  },
+};
+
 export const WithAccordionLayout = {
   name: "Accordion Layout",
   render: () => {
@@ -2698,6 +2843,136 @@ const uiSchema = {
   },
 };
 
+export const OneOfWithPresetValues = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Demonstrates that \`oneOf\` and \`anyOf\` select fields correctly display preset values.
+
+This story showcases the fix for a bug where select dropdowns wouldn't show the selected value when using \`.values\` to preset form data.
+
+### Example Schema:
+\`\`\`javascript
+{
+  organizationType: {
+    oneOf: [
+      { const: "ngo", title: "Non-Governmental Organization" },
+      { const: "charity", title: "Charitable Organization" },
+      { const: "company", title: "Commercial Company" }
+    ]
+  }
+}
+\`\`\`
+
+### Preset Values:
+\`\`\`javascript
+<pds-form 
+  .values=$\{{ organizationType: "charity", category: "health" }}
+  ...
+>
+\`\`\`
+
+The dropdowns should correctly show "Charitable Organization" and "Health & Medical" as selected.`,
+      },
+      source: {
+        code: `<pds-form
+  data-required
+  .jsonSchema=\${schema}
+  .uiSchema=\${uiSchema}
+  .values=\${initialValues}
+  @pw:submit=\${(e) => toastFormData(e.detail)}
+></pds-form>`,
+      },
+    },
+  },
+  render: () => {
+    const schema = {
+      type: "object",
+      title: "Organization Registration",
+      properties: {
+        organizationName: {
+          type: "string",
+          title: "Organization Name",
+          examples: ["Red Cross International"],
+        },
+        organizationType: {
+          type: "string",
+          title: "Organization Type",
+          oneOf: [
+            { const: "ngo", title: "Non-Governmental Organization" },
+            { const: "charity", title: "Charitable Organization" },
+            { const: "company", title: "Commercial Company" },
+            { const: "government", title: "Government Agency" },
+            { const: "educational", title: "Educational Institution" },
+          ],
+        },
+        category: {
+          type: "string",
+          title: "Primary Category",
+          anyOf: [
+            { const: "health", title: "Health & Medical" },
+            { const: "education", title: "Education & Research" },
+            { const: "environment", title: "Environment & Conservation" },
+            { const: "social", title: "Social Services" },
+            { const: "arts", title: "Arts & Culture" },
+            { const: "technology", title: "Technology & Innovation" },
+          ],
+        },
+        registrationNumber: {
+          type: "string",
+          title: "Registration Number",
+          examples: ["123-456-789"],
+        },
+        country: {
+          type: "string",
+          title: "Country",
+          enum: ["NL", "BE", "DE", "FR", "GB"],
+        },
+      },
+      required: ["organizationName", "organizationType", "category"],
+    };
+
+    const uiSchema = {
+      "ui:layout": "grid",
+      "ui:layoutOptions": {
+        columns: "auto",   // Auto-fit columns
+        autoSize: "md",    // Min column width (grid-auto-md)
+        gap: "md"
+      }
+    };
+
+    // Preset values that should be correctly selected in the dropdowns
+    const initialValues = {
+      organizationName: "Global Health Foundation",
+      organizationType: "charity",
+      category: "health",
+      registrationNumber: "974983702",
+      country: "NL",
+    };
+
+    return html`
+      <div class="alert alert-info">
+        <p>
+          <strong>✓ This form has preset values:</strong> The dropdowns should
+          correctly show "Charitable Organization", "Health & Medical", and
+          "NL" as selected.
+        </p>
+        <p>
+          Try changing the values and submitting to see how oneOf/anyOf/enum
+          work together.
+        </p>
+      </div>
+      <pds-form
+        data-required
+        .jsonSchema=${schema}
+        .uiSchema=${uiSchema}
+        .values=${initialValues}
+        @pw:submit=${(e) => toastFormData(e.detail)}
+      ></pds-form>
+    `;
+  },
+};
+
 export const ConditionalRequired = {
   parameters: {
     docs: {
@@ -2770,13 +3045,16 @@ export const ConditionalComplex = {
   parameters: {
     docs: {
       description: {
-        story: `A comprehensive example combining multiple conditional features: visibility, required states, and calculated values.
+        story: `A comprehensive example combining multiple conditional features with accordion layout to reduce visual complexity.
 
 ### Features demonstrated:
-- **Show/Hide**: Company name appears for business accounts; shipping address hidden for pickup
+- **Accordion Sections**: Related fields grouped into collapsible sections
+- **Show/Hide**: Business account section appears only for business accounts; shipping address hidden for pickup
 - **Conditional Required**: Company name required for business; phone required when preferred
 - **Disable**: Email disabled when phone is preferred
-- **Calculations**: Full name, subtotal, shipping cost, and total are all computed automatically`,
+- **Calculations**: Full name, subtotal, shipping cost, and total are all computed automatically
+
+The accordion layout prevents awkward field jumping between columns and makes the form easier to navigate.`,
       },
     },
   },
@@ -2786,143 +3064,191 @@ export const ConditionalComplex = {
       title: "Order Form",
       properties: {
         accountType: {
-          type: "string",
+          type: "object",
           title: "Account Type",
-          oneOf: [
-            { const: "personal", title: "Personal" },
-            { const: "business", title: "Business" },
-          ],
-          default: "personal",
-        },
-        companyName: {
-          type: "string",
-          title: "Company Name",
-          examples: ["Acme Inc."],
-        },
-        preferPhone: {
-          type: "boolean",
-          title: "I prefer to be contacted by phone",
-          default: false,
-        },
-        email: {
-          type: "string",
-          format: "email",
-          title: "Email",
-          examples: ["you@example.com"],
-        },
-        phone: {
-          type: "string",
-          title: "Phone",
-          examples: ["555-123-4567"],
-        },
-        firstName: {
-          type: "string",
-          title: "First Name",
-          examples: ["John"],
-        },
-        lastName: {
-          type: "string",
-          title: "Last Name",
-          examples: ["Doe"],
-        },
-        fullName: {
-          type: "string",
-          title: "Full Name (calculated)",
-        },
-        deliveryType: {
-          type: "string",
-          title: "Delivery Type",
-          oneOf: [
-            { const: "standard", title: "Standard (5-7 days)" },
-            { const: "express", title: "Express (1-2 days)" },
-            { const: "pickup", title: "Pickup" },
-          ],
-          default: "standard",
-        },
-        quantity: {
-          type: "integer",
-          title: "Quantity",
-          minimum: 1,
-          default: 1,
-        },
-        unitPrice: {
-          type: "number",
-          title: "Unit Price",
-          default: 29.99,
-        },
-        subtotal: {
-          type: "number",
-          title: "Subtotal",
+          properties: {
+            type: {
+              type: "string",
+              title: "Select Account Type",
+              oneOf: [
+                { const: "personal", title: "Personal" },
+                { const: "business", title: "Business" },
+              ],
+              default: "personal",
+            },
+            companyName: {
+              type: "string",
+              title: "Company Name",
+              examples: ["Acme Inc."],
+            },
+          },
         },
-        shippingCost: {
-          type: "number",
-          title: "Shipping Cost",
+        contactPreferences: {
+          type: "object",
+          title: "Contact Information",
+          properties: {
+            preferPhone: {
+              type: "boolean",
+              title: "I prefer to be contacted by phone",
+              default: false,
+            },
+            email: {
+              type: "string",
+              format: "email",
+              title: "Email",
+              examples: ["you@example.com"],
+            },
+            phone: {
+              type: "string",
+              title: "Phone",
+              examples: ["555-123-4567"],
+            },
+          },
         },
-        total: {
-          type: "number",
-          title: "Total",
+        customerDetails: {
+          type: "object",
+          title: "Customer Details",
+          properties: {
+            firstName: {
+              type: "string",
+              title: "First Name",
+              examples: ["John"],
+            },
+            lastName: {
+              type: "string",
+              title: "Last Name",
+              examples: ["Doe"],
+            },
+            fullName: {
+              type: "string",
+              title: "Full Name (calculated)",
+            },
+          },
         },
-        shippingAddress: {
+        deliveryOptions: {
           type: "object",
-          title: "Shipping Address",
+          title: "Delivery & Shipping",
           properties: {
-            street: {
+            deliveryType: {
               type: "string",
-              title: "Street",
-              examples: ["123 Main St"],
+              title: "Delivery Type",
+              oneOf: [
+                { const: "standard", title: "Standard (5-7 days)" },
+                { const: "express", title: "Express (1-2 days)" },
+                { const: "pickup", title: "Pickup" },
+              ],
+              default: "standard",
+            },
+            shippingAddress: {
+              type: "object",
+              title: "Shipping Address",
+              properties: {
+                street: {
+                  type: "string",
+                  title: "Street",
+                  examples: ["123 Main St"],
+                },
+                city: { type: "string", title: "City", examples: ["New York"] },
+                zip: { type: "string", title: "ZIP Code", examples: ["10001"] },
+              },
+            },
+          },
+        },
+        orderCalculations: {
+          type: "object",
+          title: "Order Summary",
+          properties: {
+            quantity: {
+              type: "integer",
+              title: "Quantity",
+              minimum: 1,
+              default: 1,
+            },
+            unitPrice: {
+              type: "number",
+              title: "Unit Price",
+              default: 29.99,
+            },
+            subtotal: {
+              type: "number",
+              title: "Subtotal",
+            },
+            shippingCost: {
+              type: "number",
+              title: "Shipping Cost",
+            },
+            total: {
+              type: "number",
+              title: "Total",
             },
-            city: { type: "string", title: "City", examples: ["New York"] },
-            zip: { type: "string", title: "ZIP Code", examples: ["10001"] },
           },
         },
       },
-      required: ["email", "firstName", "lastName", "deliveryType"],
+      required: ["contactPreferences", "customerDetails", "deliveryOptions"],
     };
 
     const uiSchema = {
-      "ui:layout": "grid",
-      "ui:layoutOptions": { columns: 2, gap: "md" },
+      "ui:layout": "accordion",
+      "ui:layoutOptions": { openFirst: true },
 
-      "/companyName": {
-        "ui:visibleWhen": { "/accountType": "business" },
-        "ui:requiredWhen": { "/accountType": "business" },
-      },
-      "/email": {
-        "ui:disabledWhen": { "/preferPhone": true },
-        "ui:icon": "envelope",
-      },
-      "/phone": {
-        "ui:requiredWhen": { "/preferPhone": true },
-        "ui:icon": "phone",
-      },
-      "/fullName": {
-        "ui:calculate": { $concat: ["/firstName", " ", "/lastName"] },
+      "/accountType": {
+        "ui:layout": "stack",
+        "companyName": {
+          "ui:visibleWhen": { "/accountType/type": "business" },
+          "ui:requiredWhen": { "/accountType/type": "business" },
+        },
       },
-      "/subtotal": {
-        "ui:calculate": { $multiply: ["/quantity", "/unitPrice"] },
+      "/contactPreferences": {
+        "ui:layout": "stack",
+        "email": {
+          "ui:disabledWhen": { "/contactPreferences/preferPhone": true },
+          "ui:icon": "envelope",
+        },
+        "phone": {
+          "ui:requiredWhen": { "/contactPreferences/preferPhone": true },
+          "ui:icon": "phone",
+        },
       },
-      "/shippingCost": {
-        "ui:calculate": {
-          $if: {
-            cond: { "/deliveryType": "express" },
-            then: 25,
-            else: {
-              $if: {
-                cond: { "/deliveryType": "pickup" },
-                then: 0,
-                else: 10,
+      "/customerDetails": {
+        "ui:layout": "flex",
+        "ui:layoutOptions": { gap: "md", wrap: true },
+        "firstName": {},
+        "lastName": {},
+        "fullName": {
+          "ui:calculate": { $concat: ["/customerDetails/firstName", " ", "/customerDetails/lastName"] },
+        },
+      },
+      "/deliveryOptions": {
+        "ui:layout": "stack",
+        "shippingAddress": {
+          "ui:visibleWhen": { "/deliveryOptions/deliveryType": { $ne: "pickup" } },
+          "ui:layout": "flex",
+          "ui:layoutOptions": { gap: "sm", wrap: true },
+        },
+      },
+      "/orderCalculations": {
+        "ui:layout": "stack",
+        "subtotal": {
+          "ui:calculate": { $multiply: ["/orderCalculations/quantity", "/orderCalculations/unitPrice"] },
+        },
+        "shippingCost": {
+          "ui:calculate": {
+            $if: {
+              cond: { "/deliveryOptions/deliveryType": "express" },
+              then: 25,
+              else: {
+                $if: {
+                  cond: { "/deliveryOptions/deliveryType": "pickup" },
+                  then: 0,
+                  else: 10,
+                },
               },
             },
           },
         },
-      },
-      "/total": {
-        "ui:calculate": { $sum: ["/subtotal", "/shippingCost"] },
-      },
-      "/shippingAddress": {
-        "ui:visibleWhen": { "/deliveryType": { $ne: "pickup" } },
-        "ui:layout": "flex",
-        "ui:layoutOptions": { gap: "sm", wrap: true },
+        "total": {
+          "ui:calculate": { $sum: ["/orderCalculations/subtotal", "/orderCalculations/shippingCost"] },
+        },
       },
     };
 
@@ -2931,28 +3257,19 @@ export const ConditionalComplex = {
         <p><strong>Try these interactions:</strong></p>
         <ul>
           <li>
-            Change <strong>Account Type</strong> to "Business" → Company Name
-            field appears and becomes required
-          </li>
-          <li>
-            Toggle <strong>"Prefer phone contact"</strong> → Email is disabled,
-            Phone becomes required
+            Open <strong>Account Type</strong>, change to "Business" → Company Name field appears and becomes required
           </li>
           <li>
-            Type in <strong>First/Last Name</strong> → Full Name is calculated
-            automatically
+            Open <strong>Contact Information</strong>, toggle <strong>"Prefer phone contact"</strong> → Email is disabled, Phone becomes required
           </li>
           <li>
-            Change <strong>Quantity</strong> or <strong>Unit Price</strong> →
-            Subtotal and Total update
+            Open <strong>Customer Details</strong>, type in <strong>First/Last Name</strong> → Full Name is calculated automatically
           </li>
           <li>
-            Select <strong>Delivery Type</strong> → Shipping cost changes
-            (Express: $25, Standard: $10, Pickup: $0)
+            Open <strong>Delivery & Shipping</strong>, select <strong>"Pickup"</strong> → Shipping Address section is hidden
           </li>
           <li>
-            Select <strong>"Pickup"</strong> → Shipping Address section is
-            hidden
+            Open <strong>Order Summary</strong>, change <strong>Quantity</strong> or <strong>Delivery Type</strong> → Costs update automatically
           </li>
         </ul>
       </div>
@@ -2960,7 +3277,10 @@ export const ConditionalComplex = {
         data-required
         .jsonSchema=${schema}
         .uiSchema=${uiSchema}
-        @pw:submit=${(e) => toastFormData(e.detail)}
+        @pw:submit=${(e) => {
+          console.log('✅ Form Data Structure:', e.detail);
+          toastFormData(e.detail);
+        }}
       ></pds-form>
     `;
   },