diff --git a/src/components/ebay-accordion/accordion.stories.ts b/src/components/ebay-accordion/accordion.stories.ts
index 9568d5e30..b87b1e04a 100644
--- a/src/components/ebay-accordion/accordion.stories.ts
+++ b/src/components/ebay-accordion/accordion.stories.ts
@@ -53,8 +53,8 @@ export default {
                 },
             },
         },
-        item: {
-            name: "@item",
+        details: {
+            name: "@details",
             description:
                 "Represents an <ebay-details/> element to be used as part of the group. Allowed attributes are `open`, `as`, `text` and `renderBody`",
             table: {
@@ -71,6 +71,16 @@ export default {
                 },
             },
         },
+        onClick: {
+            action: "on-click",
+            description: "Triggered on click of details",
+            table: {
+                category: "Events",
+                defaultValue: {
+                    summary: "{ originalEvent }",
+                },
+            },
+        },
     },
 };
 
diff --git a/src/components/ebay-accordion/component-browser.ts b/src/components/ebay-accordion/component-browser.ts
index 128a0452a..6fb3f53c1 100644
--- a/src/components/ebay-accordion/component-browser.ts
+++ b/src/components/ebay-accordion/component-browser.ts
@@ -6,10 +6,11 @@ export interface AccordionInput extends Omit<Marko.Input<"ul">, `on${string}`> {
     size?: "regular" | "large";
     "auto-collapse"?: AttrBoolean;
     "a11y-role-description"?: AttrString;
-    item?: Marko.AttrTag<
+    details?: Marko.AttrTag<
         Omit<DetailsInput, "size" | "alignment" | "layout" | `on${string}`>
     >;
     "on-toggle"?: (event: { originalEvent: Event; open: boolean }) => void;
+    "on-click"?: (event: { originalEvent: MouseEvent }) => void;
 }
 
 export interface Input extends WithNormalizedProps<AccordionInput> {}
@@ -17,16 +18,26 @@ class Accordion extends Marko.Component<Input> {
     handleToggle(event: { originalEvent: Event; open: boolean }) {
         
         const { autoCollapse } = this.input;
-        if(autoCollapse && event.open) {
-            const accordion = this.getEl("accordion-root") as HTMLUListElement;
-            const detailsElements = accordion.querySelectorAll("details");
+        const accordion = this.getEl("accordion-root") as HTMLUListElement;
+        const detailsElements = Array.from(accordion.querySelectorAll("details"));
+        const index = detailsElements.indexOf(
+            event.originalEvent.target as HTMLDetailsElement,
+        );
+
+        if (autoCollapse && event.open) {
             detailsElements.forEach((details: HTMLDetailsElement) => {
                 // Close the <details> element by setting its open attribute to false
                 if (details !== event.originalEvent.target) {
                     details.open = false;
-                } 
-            });            
+                }
+            });
         }
+
+        this.emit("toggle", {
+            originalEvent: event.originalEvent,
+            open: (event.originalEvent.target as HTMLDetailsElement).open,
+            index,
+        });
     }
 }
 
diff --git a/src/components/ebay-accordion/examples/autoCollapsed.marko b/src/components/ebay-accordion/examples/autoCollapsed.marko
index 4e4b4b41a..6c3863ae9 100644
--- a/src/components/ebay-accordion/examples/autoCollapsed.marko
+++ b/src/components/ebay-accordion/examples/autoCollapsed.marko
@@ -1,11 +1,14 @@
 <ebay-accordion auto-collapse=true>
-    <@item text="Item 1">
+    <@details>
+        <@summary>Item 1</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/examples/default.marko b/src/components/ebay-accordion/examples/default.marko
index 7e3e3425e..d93307d13 100644
--- a/src/components/ebay-accordion/examples/default.marko
+++ b/src/components/ebay-accordion/examples/default.marko
@@ -1,11 +1,14 @@
 <ebay-accordion ...input>
-    <@item text="Item 1">
+    <@details>
+        <@summary>Item 1</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/examples/large.marko b/src/components/ebay-accordion/examples/large.marko
index 6ad85223e..e417152cb 100644
--- a/src/components/ebay-accordion/examples/large.marko
+++ b/src/components/ebay-accordion/examples/large.marko
@@ -1,11 +1,14 @@
 <ebay-accordion size="large">
-    <@item text="Item 1">
+    <@details>
+        <@summary>Item 1</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/examples/opened.marko b/src/components/ebay-accordion/examples/opened.marko
index 974d1ce6f..d8b9cadf6 100644
--- a/src/components/ebay-accordion/examples/opened.marko
+++ b/src/components/ebay-accordion/examples/opened.marko
@@ -1,11 +1,14 @@
 <ebay-accordion>
-    <@item text="Item 1" open>
+    <@details open>
+        <@summary>Item 1</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/index.marko b/src/components/ebay-accordion/index.marko
index 46a63eb6c..0e8fe9b87 100644
--- a/src/components/ebay-accordion/index.marko
+++ b/src/components/ebay-accordion/index.marko
@@ -5,7 +5,7 @@ static function noop() {}
 $ const {
     class: inputClass,
     size,
-    item: items = [],
+    details: items = [],
     autoCollapse,
     a11yRoleDescription,
     ...htmlInput
@@ -25,6 +25,7 @@ $ (input as any).toJSON = noop;
                 ...item
                 layout="accordion"
                 on-toggle("handleToggle")
+                on-click("emit", "click")
             >
                 <${item.renderBody} />
             </ebay-details>
diff --git a/src/components/ebay-accordion/marko-tag.json b/src/components/ebay-accordion/marko-tag.json
index daa4dc664..d2a2fea37 100644
--- a/src/components/ebay-accordion/marko-tag.json
+++ b/src/components/ebay-accordion/marko-tag.json
@@ -11,14 +11,13 @@
     "@as": "string",
     "@auto-collapse": "boolean",
     "@a11y-role-description": "string",
-    "@item <item>[]": {
+    "@details <details>[]": {
         "attribute-groups": ["html-attributes"],
         "@*": {
             "targetProperty": null,
             "type": "expression"
         },
-        "@html-attributes": "expression",
-        "@text": "string"
+        "@html-attributes": "expression"
     },
     "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-accordion)"
 }
diff --git a/src/components/ebay-accordion/test/__snapshots__/test.server.js.snap b/src/components/ebay-accordion/test/__snapshots__/test.server.js.snap
index 42929f653..562ee588d 100644
--- a/src/components/ebay-accordion/test/__snapshots__/test.server.js.snap
+++ b/src/components/ebay-accordion/test/__snapshots__/test.server.js.snap
@@ -28,11 +28,11 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-3-0"
+              data-marko-key="@svg s0-0-1[0]-4-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-3-0"
+                data-marko-key="@defs s0-0-1[0]-4-0"
               >
                 <symbol
                   id="icon-add-16"
@@ -50,11 +50,11 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-4-0"
+              data-marko-key="@svg s0-0-1[0]-5-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-4-0"
+                data-marko-key="@defs s0-0-1[0]-5-0"
               >
                 <symbol
                   id="icon-remove-16"
@@ -73,7 +73,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[0]"
+          data-marko-key="7 s0-0-1[0]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -100,7 +100,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-3-0"
+              data-marko-key="@svg s0-0-1[1]-4-0"
               focusable="false"
             >
               <use
@@ -110,7 +110,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-4-0"
+              data-marko-key="@svg s0-0-1[1]-5-0"
               focusable="false"
             >
               <use
@@ -121,7 +121,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[1]"
+          data-marko-key="7 s0-0-1[1]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -148,7 +148,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-3-0"
+              data-marko-key="@svg s0-0-1[2]-4-0"
               focusable="false"
             >
               <use
@@ -158,7 +158,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-4-0"
+              data-marko-key="@svg s0-0-1[2]-5-0"
               focusable="false"
             >
               <use
@@ -169,7 +169,7 @@ exports[`accordion > renders accordion with auto-collapse true 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[2]"
+          data-marko-key="7 s0-0-1[2]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -207,11 +207,11 @@ exports[`accordion > renders accordion with large size 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-3-0"
+              data-marko-key="@svg s0-0-1[0]-4-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-3-0"
+                data-marko-key="@defs s0-0-1[0]-4-0"
               >
                 <symbol
                   id="icon-add-16"
@@ -229,11 +229,11 @@ exports[`accordion > renders accordion with large size 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-4-0"
+              data-marko-key="@svg s0-0-1[0]-5-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-4-0"
+                data-marko-key="@defs s0-0-1[0]-5-0"
               >
                 <symbol
                   id="icon-remove-16"
@@ -252,7 +252,7 @@ exports[`accordion > renders accordion with large size 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[0]"
+          data-marko-key="7 s0-0-1[0]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -279,7 +279,7 @@ exports[`accordion > renders accordion with large size 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-3-0"
+              data-marko-key="@svg s0-0-1[1]-4-0"
               focusable="false"
             >
               <use
@@ -289,7 +289,7 @@ exports[`accordion > renders accordion with large size 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-4-0"
+              data-marko-key="@svg s0-0-1[1]-5-0"
               focusable="false"
             >
               <use
@@ -300,7 +300,7 @@ exports[`accordion > renders accordion with large size 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[1]"
+          data-marko-key="7 s0-0-1[1]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -327,7 +327,7 @@ exports[`accordion > renders accordion with large size 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-3-0"
+              data-marko-key="@svg s0-0-1[2]-4-0"
               focusable="false"
             >
               <use
@@ -337,7 +337,7 @@ exports[`accordion > renders accordion with large size 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-4-0"
+              data-marko-key="@svg s0-0-1[2]-5-0"
               focusable="false"
             >
               <use
@@ -348,7 +348,7 @@ exports[`accordion > renders accordion with large size 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[2]"
+          data-marko-key="7 s0-0-1[2]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -386,11 +386,11 @@ exports[`accordion > renders accordion with localized role description 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-3-0"
+              data-marko-key="@svg s0-0-1[0]-4-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-3-0"
+                data-marko-key="@defs s0-0-1[0]-4-0"
               >
                 <symbol
                   id="icon-add-16"
@@ -408,11 +408,11 @@ exports[`accordion > renders accordion with localized role description 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-4-0"
+              data-marko-key="@svg s0-0-1[0]-5-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-4-0"
+                data-marko-key="@defs s0-0-1[0]-5-0"
               >
                 <symbol
                   id="icon-remove-16"
@@ -431,7 +431,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[0]"
+          data-marko-key="7 s0-0-1[0]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -458,7 +458,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-3-0"
+              data-marko-key="@svg s0-0-1[1]-4-0"
               focusable="false"
             >
               <use
@@ -468,7 +468,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-4-0"
+              data-marko-key="@svg s0-0-1[1]-5-0"
               focusable="false"
             >
               <use
@@ -479,7 +479,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[1]"
+          data-marko-key="7 s0-0-1[1]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -506,7 +506,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-3-0"
+              data-marko-key="@svg s0-0-1[2]-4-0"
               focusable="false"
             >
               <use
@@ -516,7 +516,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-4-0"
+              data-marko-key="@svg s0-0-1[2]-5-0"
               focusable="false"
             >
               <use
@@ -527,7 +527,7 @@ exports[`accordion > renders accordion with localized role description 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[2]"
+          data-marko-key="7 s0-0-1[2]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -565,11 +565,11 @@ exports[`accordion > renders default accordion 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-3-0"
+              data-marko-key="@svg s0-0-1[0]-4-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-3-0"
+                data-marko-key="@defs s0-0-1[0]-4-0"
               >
                 <symbol
                   id="icon-add-16"
@@ -587,11 +587,11 @@ exports[`accordion > renders default accordion 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[0]-4-0"
+              data-marko-key="@svg s0-0-1[0]-5-0"
               focusable="false"
             >
               <defs
-                data-marko-key="@defs s0-0-1[0]-4-0"
+                data-marko-key="@defs s0-0-1[0]-5-0"
               >
                 <symbol
                   id="icon-remove-16"
@@ -610,7 +610,7 @@ exports[`accordion > renders default accordion 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[0]"
+          data-marko-key="7 s0-0-1[0]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -637,7 +637,7 @@ exports[`accordion > renders default accordion 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-3-0"
+              data-marko-key="@svg s0-0-1[1]-4-0"
               focusable="false"
             >
               <use
@@ -647,7 +647,7 @@ exports[`accordion > renders default accordion 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[1]-4-0"
+              data-marko-key="@svg s0-0-1[1]-5-0"
               focusable="false"
             >
               <use
@@ -658,7 +658,7 @@ exports[`accordion > renders default accordion 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[1]"
+          data-marko-key="7 s0-0-1[1]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
@@ -685,7 +685,7 @@ exports[`accordion > renders default accordion 1`] = `
             <svg
               aria-hidden="true"
               class="details__expand icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-3-0"
+              data-marko-key="@svg s0-0-1[2]-4-0"
               focusable="false"
             >
               <use
@@ -695,7 +695,7 @@ exports[`accordion > renders default accordion 1`] = `
             <svg
               aria-hidden="true"
               class="details__collapse icon icon--16"
-              data-marko-key="@svg s0-0-1[2]-4-0"
+              data-marko-key="@svg s0-0-1[2]-5-0"
               focusable="false"
             >
               <use
@@ -706,7 +706,7 @@ exports[`accordion > renders default accordion 1`] = `
         </summary>
         <div
           class="details__content"
-          data-marko-key="6 s0-0-1[2]"
+          data-marko-key="7 s0-0-1[2]"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
diff --git a/src/components/ebay-accordion/test/mock/index.js b/src/components/ebay-accordion/test/mock/index.js
index fa4f6e359..a6fafc438 100644
--- a/src/components/ebay-accordion/test/mock/index.js
+++ b/src/components/ebay-accordion/test/mock/index.js
@@ -2,21 +2,27 @@
 import { createRenderBody } from "../../../../common/test-utils/shared";
 
 export const Default_Accordion = {
-    item: [
+    details: [
         {
-            text: "Item 1",
+            summary: {
+                renderBody: createRenderBody("Item 1"),
+            },
             renderBody: createRenderBody(
                 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
             ),
         },
         {
-            text: "Item 2",
+            summary: {
+                renderBody: createRenderBody("Item 2"),
+            },
             renderBody: createRenderBody(
                 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
             ),
         },
         {
-            text: "Item 3",
+            summary: {
+                renderBody: createRenderBody("Item 3"),
+            },
             renderBody: createRenderBody(
                 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
             ),
diff --git a/src/components/ebay-accordion/test/test.browser.js b/src/components/ebay-accordion/test/test.browser.js
index 2c6d957da..c46b37ebd 100644
--- a/src/components/ebay-accordion/test/test.browser.js
+++ b/src/components/ebay-accordion/test/test.browser.js
@@ -17,6 +17,8 @@ afterAll(() => fastAnimations.stop());
 afterEach(cleanup);
 let component;
 
+const getSectionText = (item) => item.summary.renderBody.text;
+
 describe("given the accordion in the default state", () => {
     const input = mock.Default_Accordion;
 
@@ -25,25 +27,32 @@ describe("given the accordion in the default state", () => {
     });
 
     it("should render all sections collapsed", () => {
-        input.item.forEach((item) => {
+        input.details.forEach((item) => {
             expect(
-                component.getByText(item.text).closest("details").open,
+                component.getByText(getSectionText(item)).closest("details")
+                    .open,
             ).to.equal(false);
         });
     });
 
     describe("when first section toggled", () => {
         beforeEach(async () => {
-            await fireEvent.click(component.getByText(input.item[0].text));
+            await fireEvent.click(
+                component.getByText(getSectionText(input.details[0])),
+            );
         });
 
         it("should open the clicked section", async () => {
-            const firstSection = component.getByText(input.item[0].text);
+            const firstSection = component.getByText(
+                getSectionText(input.details[0]),
+            );
             expect(firstSection.closest("details").open).to.equal(true);
         });
 
         it("should close an open section when clicked again", async () => {
-            const firstSection = component.getByText(input.item[0].text);
+            const firstSection = component.getByText(
+                getSectionText(input.details[0]),
+            );
             expect(firstSection.closest("details").open).to.equal(true);
             await fireEvent.click(firstSection);
             expect(firstSection.closest("details").open).to.equal(false);
@@ -60,20 +69,30 @@ describe("given the accordion with autocollapse enabled", () => {
 
     it("should collapse previous section when new section is opened", async () => {
         // Open first section
-        await fireEvent.click(component.getByText(input.item[0].text));
+        await fireEvent.click(
+            component.getByText(getSectionText(input.details[0])),
+        );
         expect(
-            component.getByText(input.item[0].text).closest("details").open,
+            component
+                .getByText(getSectionText(input.details[0]))
+                .closest("details").open,
         ).to.equal(true);
 
         // Open second section
-        await fireEvent.click(component.getByText(input.item[1].text));
+        await fireEvent.click(
+            component.getByText(getSectionText(input.details[1])),
+        );
 
         // Verify first section closed and second section opened
         expect(
-            component.getByText(input.item[0].text).closest("details").open,
+            component
+                .getByText(getSectionText(input.details[0]))
+                .closest("details").open,
         ).to.equal(false);
         expect(
-            component.getByText(input.item[1].text).closest("details").open,
+            component
+                .getByText(getSectionText(input.details[1]))
+                .closest("details").open,
         ).to.equal(true);
     });
 });
diff --git a/src/components/ebay-details/component-browser.ts b/src/components/ebay-details/component-browser.ts
index b52da7e7e..80bc70f6d 100644
--- a/src/components/ebay-details/component-browser.ts
+++ b/src/components/ebay-details/component-browser.ts
@@ -1,7 +1,8 @@
 import type { WithNormalizedProps } from "../../global";
 
-export interface DetailsInput extends Omit<Marko.HTML.Details, `on${string}`> {
-    text: string;
+export interface DetailsInput
+    extends Omit<Marko.Input<"details">, `on${string}`> {
+    summary?: Marko.AttrTag<Marko.Input<"span">>;
     size?: "regular" | "small";
     alignment?: "regular" | "center";
     layout?: "regular" | "accordion";
diff --git a/src/components/ebay-details/details.stories.ts b/src/components/ebay-details/details.stories.ts
index 1e30441d5..97908dc26 100644
--- a/src/components/ebay-details/details.stories.ts
+++ b/src/components/ebay-details/details.stories.ts
@@ -1,16 +1,12 @@
 import { Story } from "@storybook/marko";
 import { tagToString } from "../../common/storybook/storybook-code-source";
+import { addRenderBodies } from "../../common/storybook/utils";
 import Readme from "./README.md";
 import Details from "./index.marko";
 import type { Input } from "./component-browser";
 
 const Template: Story<Input> = (args) => ({
-    input: {
-        ...args,
-        renderBody: function (out: any) {
-            out.html(args.renderBody);
-        } as any,
-    },
+    input: addRenderBodies(args),
 });
 
 export default {
@@ -26,6 +22,13 @@ export default {
 
     argTypes: {
         renderBody: {},
+        summary: {
+            name: "@summary",
+            description: "The body which will be wrapped as the details summary",
+            table: {
+                category: "@attribute tags",
+            },
+        },
         alignment: {
             type: "options",
             description: "The position of the details",
@@ -89,12 +92,14 @@ export default {
 export const Standard = Template.bind({});
 Standard.args = {
     renderBody:
-        `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.` as any,
-    text: "Show me the details!",
+        `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+    summary: {
+        renderBody: `Show me details!`,
+    },
     size: "regular",
     open: false,
     as: "p",
-};
+} as any;
 
 Standard.parameters = {
     docs: {
diff --git a/src/components/ebay-details/examples/centered.marko b/src/components/ebay-details/examples/centered.marko
index 9a05ede48..799e42753 100644
--- a/src/components/ebay-details/examples/centered.marko
+++ b/src/components/ebay-details/examples/centered.marko
@@ -1,3 +1,4 @@
-<ebay-details text="details">
+<ebay-details>
+    <@summary>details</@summary>
     Sample content inside of details
 </ebay-details>
diff --git a/src/components/ebay-details/examples/default.marko b/src/components/ebay-details/examples/default.marko
index c49d811a1..5829c0142 100644
--- a/src/components/ebay-details/examples/default.marko
+++ b/src/components/ebay-details/examples/default.marko
@@ -1,4 +1,5 @@
-<ebay-details text="details">
+<ebay-details>
+    <@summary>details</@summary>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
diff --git a/src/components/ebay-details/examples/div-root.marko b/src/components/ebay-details/examples/div-root.marko
index 410e00ce9..2d21b1aee 100644
--- a/src/components/ebay-details/examples/div-root.marko
+++ b/src/components/ebay-details/examples/div-root.marko
@@ -1,6 +1,7 @@
 class {}
 
-<ebay-details text="details" as="div">
+<ebay-details as="div">
+    <@summary>details</@summary>
     <div>
         Block content
     </div>
diff --git a/src/components/ebay-details/examples/multiple-options.marko b/src/components/ebay-details/examples/multiple-options.marko
index 338952c6f..29c767496 100644
--- a/src/components/ebay-details/examples/multiple-options.marko
+++ b/src/components/ebay-details/examples/multiple-options.marko
@@ -1,5 +1,6 @@
 class {}
 
-<ebay-details text="details" size="small" open on-toggle((ev) => console.log('toggle', ev.open)) >
+<ebay-details size="small" open on-toggle((ev) => console.log('toggle', ev.open)) >
+    <@summary>details</@summary>
     Sample content inside of details
 </ebay-details>
diff --git a/src/components/ebay-details/examples/opened.marko b/src/components/ebay-details/examples/opened.marko
index 0091f48bb..374aa8a9a 100644
--- a/src/components/ebay-details/examples/opened.marko
+++ b/src/components/ebay-details/examples/opened.marko
@@ -1,3 +1,4 @@
-<ebay-details text="details" open>
+<ebay-details open>
+    <@summary>details</@summary>
     Sample content inside of details
 </ebay-details>
diff --git a/src/components/ebay-details/examples/small.marko b/src/components/ebay-details/examples/small.marko
index abe0a9da3..99d415d43 100644
--- a/src/components/ebay-details/examples/small.marko
+++ b/src/components/ebay-details/examples/small.marko
@@ -1,3 +1,4 @@
-<ebay-details text="details" size="small">
+<ebay-details size="small">
+    <@summary>details</@summary>
     Sample content inside of details
 </ebay-details>
diff --git a/src/components/ebay-details/index.marko b/src/components/ebay-details/index.marko
index 416b3e51e..bf9761ee7 100644
--- a/src/components/ebay-details/index.marko
+++ b/src/components/ebay-details/index.marko
@@ -7,7 +7,7 @@ $ const {
     open,
     alignment,
     size,
-    text,
+    summary,
     renderBody,
     layout,
     as: inputAs,
@@ -23,22 +23,24 @@ $ (input as any).toJSON = noop;
     key="root"
     onToggle("toggleDetails")
     onClick("clickDetails")>
-    <summary class=[
-        "details__summary",
-        size === "small" && "details__summary--small",
-        alignment === "center" && "details__summary--center"
-    ]>
-        <span class="details__label">${text}</span>
-        <span class="details__icon" hidden>
-            <if(layout === "accordion")>
-                <ebay-add-16-icon class="details__expand"/>
-                <ebay-remove-16-icon class="details__collapse"/>
-            </if>
-            <else>
-                <ebay-chevron-down-16-icon/>
-            </else>
-        </span>
-    </summary>
+    <if(summary)>
+        <summary class=[
+            "details__summary",
+            size === "small" && "details__summary--small",
+            alignment === "center" && "details__summary--center"
+        ]>
+            <span class="details__label"><${summary.renderBody}/></span>
+            <span class="details__icon" hidden>
+                <if(layout === "accordion")>
+                    <ebay-add-16-icon class="details__expand"/>
+                    <ebay-remove-16-icon class="details__collapse"/>
+                </if>
+                <else>
+                    <ebay-chevron-down-16-icon/>
+                </else>
+            </span>
+        </summary>
+    </if>
     <${inputAs || "div"} class=layout === "accordion" && "details__content">
         <${renderBody}/>
     </>
diff --git a/src/components/ebay-details/marko-tag.json b/src/components/ebay-details/marko-tag.json
index aa30238e6..24e237dec 100644
--- a/src/components/ebay-details/marko-tag.json
+++ b/src/components/ebay-details/marko-tag.json
@@ -11,7 +11,13 @@
     "@size": {
         "enum": ["regular", "small"]
     },
-    "@text": "string",
+    "@summary": {
+        "@*": {
+            "targetProperty": null,
+            "type": "expression"
+        },
+        "@html-attributes": "expression"
+    },
     "@as": "string",
     "@open": "boolean",
     "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-details)"
diff --git a/src/components/ebay-details/test/__snapshots__/test.server.js.snap b/src/components/ebay-details/test/__snapshots__/test.server.js.snap
index 1bc0e5cf3..9408687e3 100644
--- a/src/components/ebay-details/test/__snapshots__/test.server.js.snap
+++ b/src/components/ebay-details/test/__snapshots__/test.server.js.snap
@@ -10,44 +10,8 @@ exports[`details > passes through additional html attributes 1`] = `
   style="color:red"
   type="number"
 >
-  <summary
-    class="details__summary"
-  >
-    <span
-      class="details__label"
-    />
-    <span
-      class="details__icon"
-      hidden=""
-    >
-      <!--M#s0-5-0-->
-      <svg
-        aria-hidden="true"
-        class="icon icon--16"
-        data-marko-key="@svg s0-5-0"
-        focusable="false"
-      >
-        <defs
-          data-marko-key="@defs s0-5-0"
-        >
-          <symbol
-            id="icon-chevron-down-16"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M8.707 12.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L8 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6Z"
-            />
-          </symbol>
-        </defs>
-        <use
-          href="#icon-chevron-down-16"
-        />
-      </svg>
-      <!--M/-->
-    </span>
-  </summary>
   <div
-    data-marko-key="6 s0"
+    data-marko-key="7 s0"
   />
 </details>
 `;
@@ -62,44 +26,8 @@ exports[`details > passes through additional html attributes 2`] = `
   style="color:red"
   type="number"
 >
-  <summary
-    class="details__summary"
-  >
-    <span
-      class="details__label"
-    />
-    <span
-      class="details__icon"
-      hidden=""
-    >
-      <!--M#s0-5-0-->
-      <svg
-        aria-hidden="true"
-        class="icon icon--16"
-        data-marko-key="@svg s0-5-0"
-        focusable="false"
-      >
-        <defs
-          data-marko-key="@defs s0-5-0"
-        >
-          <symbol
-            id="icon-chevron-down-16"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M8.707 12.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L8 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6Z"
-            />
-          </symbol>
-        </defs>
-        <use
-          href="#icon-chevron-down-16"
-        />
-      </svg>
-      <!--M/-->
-    </span>
-  </summary>
   <div
-    data-marko-key="6 s0"
+    data-marko-key="7 s0"
   />
 </details>
 `;
@@ -126,11 +54,11 @@ exports[`details > renders as div version 1`] = `
         <svg
           aria-hidden="true"
           class="icon icon--16"
-          data-marko-key="@svg s0-5-0"
+          data-marko-key="@svg s0-6-0"
           focusable="false"
         >
           <defs
-            data-marko-key="@defs s0-5-0"
+            data-marko-key="@defs s0-6-0"
           >
             <symbol
               id="icon-chevron-down-16"
@@ -148,7 +76,7 @@ exports[`details > renders as div version 1`] = `
       </span>
     </summary>
     <div
-      data-marko-key="6 s0"
+      data-marko-key="7 s0"
     >
       body content
     </div>
@@ -178,11 +106,11 @@ exports[`details > renders basic version 1`] = `
         <svg
           aria-hidden="true"
           class="icon icon--16"
-          data-marko-key="@svg s0-5-0"
+          data-marko-key="@svg s0-6-0"
           focusable="false"
         >
           <defs
-            data-marko-key="@defs s0-5-0"
+            data-marko-key="@defs s0-6-0"
           >
             <symbol
               id="icon-chevron-down-16"
@@ -200,7 +128,7 @@ exports[`details > renders basic version 1`] = `
       </span>
     </summary>
     <div
-      data-marko-key="6 s0"
+      data-marko-key="7 s0"
     >
       body content
     </div>
@@ -230,11 +158,11 @@ exports[`details > renders center version 1`] = `
         <svg
           aria-hidden="true"
           class="icon icon--16"
-          data-marko-key="@svg s0-5-0"
+          data-marko-key="@svg s0-6-0"
           focusable="false"
         >
           <defs
-            data-marko-key="@defs s0-5-0"
+            data-marko-key="@defs s0-6-0"
           >
             <symbol
               id="icon-chevron-down-16"
@@ -252,7 +180,7 @@ exports[`details > renders center version 1`] = `
       </span>
     </summary>
     <div
-      data-marko-key="6 s0"
+      data-marko-key="7 s0"
     >
       body content
     </div>
@@ -282,11 +210,11 @@ exports[`details > renders in open state 1`] = `
         <svg
           aria-hidden="true"
           class="icon icon--16"
-          data-marko-key="@svg s0-5-0"
+          data-marko-key="@svg s0-6-0"
           focusable="false"
         >
           <defs
-            data-marko-key="@defs s0-5-0"
+            data-marko-key="@defs s0-6-0"
           >
             <symbol
               id="icon-chevron-down-16"
@@ -304,7 +232,7 @@ exports[`details > renders in open state 1`] = `
       </span>
     </summary>
     <div
-      data-marko-key="6 s0"
+      data-marko-key="7 s0"
     >
       body content
     </div>
@@ -334,11 +262,11 @@ exports[`details > renders small version 1`] = `
         <svg
           aria-hidden="true"
           class="icon icon--16"
-          data-marko-key="@svg s0-5-0"
+          data-marko-key="@svg s0-6-0"
           focusable="false"
         >
           <defs
-            data-marko-key="@defs s0-5-0"
+            data-marko-key="@defs s0-6-0"
           >
             <symbol
               id="icon-chevron-down-16"
@@ -356,7 +284,7 @@ exports[`details > renders small version 1`] = `
       </span>
     </summary>
     <div
-      data-marko-key="6 s0"
+      data-marko-key="7 s0"
     >
       body content
     </div>
diff --git a/src/components/ebay-details/test/mock/index.js b/src/components/ebay-details/test/mock/index.js
index a9a077d1b..2de91616d 100644
--- a/src/components/ebay-details/test/mock/index.js
+++ b/src/components/ebay-details/test/mock/index.js
@@ -2,7 +2,9 @@
 import { createRenderBody } from "../../../../common/test-utils/shared";
 
 export const Default_Details = {
-    text: "open",
+    summary: {
+        renderBody: createRenderBody("open"),
+    },
     renderBody: createRenderBody("body content"),
 };
 
diff --git a/src/components/ebay-details/test/test.browser.js b/src/components/ebay-details/test/test.browser.js
index d20960ee0..7237f31cb 100644
--- a/src/components/ebay-details/test/test.browser.js
+++ b/src/components/ebay-details/test/test.browser.js
@@ -26,7 +26,9 @@ describe("given the details is in the default state", () => {
 
     it("should render with open false", () => {
         expect(
-            component.getByText(input.text).closest("details").open,
+            component
+                .getByText(input.summary.renderBody.text)
+                .closest("details").open,
         ).to.equal(false);
     });
 });
@@ -40,14 +42,16 @@ describe("given the details is in the open state", () => {
 
     it("should render with open false", () => {
         expect(
-            component.getByText(input.text).closest("details").open,
+            component
+                .getByText(input.summary.renderBody.text)
+                .closest("details").open,
         ).to.equal(true);
     });
 });
 
 describe("given the details is in the default state and click is triggered", () => {
     const input = mock.Default_Details;
-    const detailsText = input.text;
+    const detailsText = input.summary.renderBody.text;
 
     beforeEach(async () => {
         component = await render(template, input);
@@ -67,7 +71,7 @@ describe("given the details is in the default state and click is triggered", ()
 
 describe("given the details is in the open state and click is triggered", () => {
     const input = mock.Open_Details;
-    const detailsText = input.text;
+    const detailsText = input.summary.renderBody.text;
 
     beforeEach(async () => {
         component = await render(template, input);