diff --git a/package.json b/package.json
index 3fbf62c9..93ece02c 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,10 @@
       "types": "./Accordion.d.ts",
       "default": "./Accordion.js"
     },
+    "./AccordionHeading.js": {
+      "types": "./AccordionHeading.d.ts",
+      "default": "./AccordionHeading.js"
+    },
     "./AccordionPanel.js": {
       "types": "./AccordionPanel.d.ts",
       "default": "./AccordionPanel.js"
@@ -260,6 +264,10 @@
       "types": "./Details.d.ts",
       "default": "./Details.js"
     },
+    "./DetailsSummary.js": {
+      "types": "./DetailsSummary.d.ts",
+      "default": "./DetailsSummary.js"
+    },
     "./Dialog.js": {
       "types": "./Dialog.d.ts",
       "default": "./Dialog.js"
@@ -473,6 +481,7 @@
       "default": "./VirtualList.js"
     },
     "./Accordion": "./Accordion.js",
+    "./AccordionHeading": "./AccordionHeading.js",
     "./AccordionPanel": "./AccordionPanel.js",
     "./AppLayout": "./AppLayout.js",
     "./Avatar": "./Avatar.js",
@@ -497,6 +506,7 @@
     "./DatePickerLight": "./DatePickerLight.js",
     "./DateTimePicker": "./DateTimePicker.js",
     "./Details": "./Details.js",
+    "./DetailsSummary": "./DetailsSummary.js",
     "./Dialog": "./Dialog.js",
     "./DrawerToggle": "./DrawerToggle.js",
     "./EmailField": "./EmailField.js",
diff --git a/src/AccordionHeading.ts b/src/AccordionHeading.ts
new file mode 100644
index 00000000..dee3884e
--- /dev/null
+++ b/src/AccordionHeading.ts
@@ -0,0 +1 @@
+export * from './generated/AccordionHeading.js';
diff --git a/src/DetailsSummary.ts b/src/DetailsSummary.ts
new file mode 100644
index 00000000..1f0674ec
--- /dev/null
+++ b/src/DetailsSummary.ts
@@ -0,0 +1 @@
+export * from './generated/DetailsSummary.js';
diff --git a/test/kitchen-sink/Row1.tsx b/test/kitchen-sink/Row1.tsx
index 9fe16dc1..86b2859b 100644
--- a/test/kitchen-sink/Row1.tsx
+++ b/test/kitchen-sink/Row1.tsx
@@ -1,6 +1,7 @@
 import { SideNav } from '../../src/SideNav.js';
 import { SideNavItem } from '../../src/SideNavItem.js';
 import { Accordion } from '../../src/Accordion.js';
+import { AccordionHeading } from '../../src/AccordionHeading.js';
 import { AccordionPanel } from '../../src/AccordionPanel.js';
 import { AvatarGroup } from '../../src/AvatarGroup.js';
 import { BoardRow } from '../../src/BoardRow.js';
@@ -16,10 +17,13 @@ export default function Row1() {
         <SideNavItem>Side Navigation Item 3</SideNavItem>
       </SideNav>
       <Accordion theme="primary">
-        <AccordionPanel>
-          <div slot="summary">AccordeonPanel</div>
+        <AccordionPanel summary="Panel 1">
           <div>Accordion content 1</div>
         </AccordionPanel>
+        <AccordionPanel>
+          <AccordionHeading slot="summary">Panel 2</AccordionHeading>
+          <div>Accordion content 2</div>
+        </AccordionPanel>
       </Accordion>
       <AvatarGroup prefix="Users: " items={[{ name: 'Jane Roe', abbr: 'JD' }]}></AvatarGroup>
       <Chart title="Chart" style={{ height: '300px' }}>
diff --git a/test/kitchen-sink/Row4.tsx b/test/kitchen-sink/Row4.tsx
index 044b3d52..74d38c30 100644
--- a/test/kitchen-sink/Row4.tsx
+++ b/test/kitchen-sink/Row4.tsx
@@ -3,6 +3,7 @@ import { CustomField } from '../../src/CustomField.js';
 import { DatePicker } from '../../src/DatePicker.js';
 import { DateTimePicker } from '../../src/DateTimePicker.js';
 import { Details } from '../../src/Details.js';
+import { DetailsSummary } from '../../src/DetailsSummary.js';
 import { FormItem } from '../../src/FormItem.js';
 import { FormLayout } from '../../src/FormLayout.js';
 import { IntegerField } from '../../src/IntegerField.js';
@@ -21,7 +22,7 @@ export default function Row4() {
         <PasswordField placeholder="Password"></PasswordField>
       </CustomField>
       <Details opened>
-        <label slot="summary">Details</label>
+        <DetailsSummary slot="summary">Details</DetailsSummary>
         <p>Details content</p>
       </Details>
       <FormLayout>