fix(accordion): render expanded panels under their headers

Author: RtlZeroMemory

docs/widgets/accordion.md

@@ -2,6 +2,8 @@
 
 Displays stacked sections that can be expanded or collapsed.
 
+Expanded content renders directly under its own header in item order.
+
 ## Usage
 
 ```ts

docs/widgets/catalog.json

@@ -375,7 +375,7 @@
       "name": "accordion",
       "requiredProps": ["id", "items"],
       "commonProps": ["expanded", "onChange"],
-      "example": "ui.accordion({ id: 'acc', items })"
+      "example": "ui.accordion({ id: 'acc', items, expanded, onChange })"
     },
     {
       "name": "breadcrumb",

packages/core/src/widgets/__tests__/accordion.test.ts

@@ -8,8 +8,15 @@ import {
   resolveAccordionExpanded,
   toggleAccordionExpanded,
 } from "../accordion.js";
+import type { VNode } from "../types.js";
 import { ui } from "../ui.js";
 
+function childSummary(child: VNode): string {
+  if (child.kind === "text") return child.text;
+  if (child.kind === "button") return child.props.label;
+  return child.kind;
+}
+
 const baseProps = {
   id: "acc-main",
   items: [
@@ -105,18 +112,24 @@ describe("accordion vnode construction", () => {
     const children = buildAccordionChildren(baseProps);
     assert.equal(children[0]?.kind, "focusZone");
     if (children[0]?.kind !== "focusZone") return;
-    assert.equal(children[0].props.id, getAccordionHeadersZoneId(baseProps.id));
-    assert.equal(children[0].children.length, 3);
+    const zone = children[0];
+    assert.equal(zone.props.id, getAccordionHeadersZoneId(baseProps.id));
+    assert.equal(zone.children.length, 4);
+    assert.deepEqual(zone.children.map(childSummary), [
+      "> Intro",
+      "v API",
+      "api-content",
+      "> FAQ",
+    ]);
   });
 
-  test("buildAccordionChildren appends expanded panel content", () => {
+  test("buildAccordionChildren renders expanded panel directly after its header", () => {
     const children = buildAccordionChildren({ ...baseProps, expanded: ["faq"] });
-    assert.equal(children.length, 2);
-    const content = children[1];
-    assert.equal(content?.kind, "text");
-    if (content?.kind === "text") {
-      assert.equal(content.text, "faq-content");
-    }
+    assert.equal(children.length, 1);
+    const zone = children[0];
+    assert.equal(zone?.kind, "focusZone");
+    if (zone?.kind !== "focusZone") return;
+    assert.deepEqual(zone.children.map(childSummary), ["> Intro", "> API", "v FAQ", "faq-content"]);
   });
 
   test("buildAccordionChildren in single mode keeps first expanded panel", () => {
@@ -125,18 +138,17 @@ describe("accordion vnode construction", () => {
       expanded: ["faq", "intro"],
       allowMultiple: false,
     });
-    assert.equal(children.length, 2);
-    const content = children[1];
-    assert.equal(content?.kind, "text");
-    if (content?.kind === "text") {
-      assert.equal(content.text, "faq-content");
-    }
+    assert.equal(children.length, 1);
+    const zone = children[0];
+    assert.equal(zone?.kind, "focusZone");
+    if (zone?.kind !== "focusZone") return;
+    assert.deepEqual(zone.children.map(childSummary), ["> Intro", "> API", "v FAQ", "faq-content"]);
   });
 
   test("createAccordionVNode emits accordion kind", () => {
     const vnode = createAccordionVNode(baseProps);
     assert.equal(vnode.kind, "accordion");
-    assert.equal(vnode.children.length, 2);
+    assert.equal(vnode.children.length, 1);
   });
 
   test("ui.accordion returns a layout-transparent composite wrapper vnode", () => {

packages/core/src/widgets/accordion.ts

@@ -94,12 +94,12 @@ export function buildAccordionChildren(props: AccordionProps): readonly VNode[]
   const expanded = resolveAccordionExpanded(props.expanded, itemKeys, allowMultiple);
   const expandedSet = new Set(expanded);
 
-  const headerButtons: VNode[] = [];
+  const zoneChildren: VNode[] = [];
   for (let i = 0; i < props.items.length; i++) {
     const item = props.items[i];
     if (!item) continue;
     const isExpanded = expandedSet.has(item.key);
-    headerButtons.push({
+    zoneChildren.push({
       kind: "button",
       props: {
         id: getAccordionTriggerId(props.id, i, item.key),
@@ -110,9 +110,12 @@ export function buildAccordionChildren(props: AccordionProps): readonly VNode[]
         },
       },
     });
+    if (isExpanded) {
+      zoneChildren.push(item.content);
+    }
   }
 
-  const children: VNode[] = [
+  return Object.freeze([
     {
       kind: "focusZone",
       props: {
@@ -122,17 +125,9 @@ export function buildAccordionChildren(props: AccordionProps): readonly VNode[]
         columns: 1,
         wrapAround: false,
       },
-      children: Object.freeze(headerButtons),
+      children: Object.freeze(zoneChildren),
     },
-  ];
-
-  for (const item of props.items) {
-    if (!item) continue;
-    if (!expandedSet.has(item.key)) continue;
-    children.push(item.content);
-  }
-
-  return Object.freeze(children);
+  ]);
 }
 
 export function createAccordionVNode(props: AccordionProps): VNode {