From 50b7f7be07e5f2b447b85ed37634193635c125db Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 18 Mar 2025 09:52:39 -0500
Subject: [PATCH 1/9] add open, ontoggle, and id props

---
 lib/components/display/accordion.jsx | 89 +++++++++++++++-------------
 1 file changed, 48 insertions(+), 41 deletions(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index 1a5715ec..b2366f63 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -1,41 +1,48 @@
-import { Disclosure } from "@headlessui/react";
-import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
-import gwMerge from "../../gw-merge";
-
-function Accordion({
-  heading,
-  defaultOpen = false,
-  unmountOnClose = false,
-  className,
-  children,
-}) {
-  return (
-    <Disclosure defaultOpen={defaultOpen}>
-      {({ open }) => {
-        return (
-          <>
-            <Disclosure.Button
-              className={gwMerge(
-                "gw-flex gw-justify-between gw-items-center gw-w-full gw-shadow gw-px-3 gw-py-2 gw-text-sm gw-font-semibold gw-text-gray-500 gw-bg-gray-50 hover:gw-bg-gray-100",
-                open ? "gw-rounded-t" : "gw-rounded",
-                className
-              )}
-            >
-              {heading}
-              {open ? <VscChevronDown /> : <VscChevronRight />}
-            </Disclosure.Button>
-            <Disclosure.Panel
-              className="gw-shadow"
-              unmount={unmountOnClose}
-            >
-              {children}
-            </Disclosure.Panel>
-          </>
-        );
-      }}
-    </Disclosure>
-  );
-}
-
-export default Accordion;
-export { Accordion };
+import { Disclosure } from "@headlessui/react";
+import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
+import gwMerge from "../../gw-merge";
+
+function Accordion({
+  heading,
+  defaultOpen = false,
+  unmountOnClose = false,
+  className,
+  isOpen,
+  onToggle,
+  children,
+  id
+}) {
+  return (
+    <Disclosure defaultOpen={defaultOpen}>
+      {({ open }) => {
+        const isExpanded = isOpen ?? open; 
+
+        return (
+          <>
+            <Disclosure.Button
+              onClick={onToggle}
+              className={gwMerge(
+                "gw-flex gw-justify-between gw-items-center gw-w-full gw-shadow gw-px-3 gw-py-2 gw-text-sm gw-font-semibold gw-text-gray-500 gw-bg-gray-50 hover:gw-bg-gray-100",
+                isExpanded ? "gw-rounded-t" : "gw-rounded",
+                className
+              )}
+            >
+              {heading}
+              {isExpanded ? <VscChevronDown /> : <VscChevronRight />}
+            </Disclosure.Button>
+            <Disclosure.Panel
+              className="gw-shadow"
+              unmount={unmountOnClose}
+              id={id || undefined}
+            >
+              {children}
+            </Disclosure.Panel>
+          </>
+        );
+      }}
+    </Disclosure>
+  );
+}
+
+export default Accordion;
+export { Accordion };

From 74af4d7420f94b53fb4ab0fc684f094a1b12bfbc Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 18 Mar 2025 09:53:11 -0500
Subject: [PATCH 2/9] Add screen reader support/508

---
 lib/components/display/accordion.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index b2366f63..9fd0ed5b 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -20,6 +20,8 @@ function Accordion({
         return (
           <>
             <Disclosure.Button
+              aria-expanded={isExpanded}
+              aria-controls={`accordion-panel`}
               onClick={onToggle}
               className={gwMerge(
                 "gw-flex gw-justify-between gw-items-center gw-w-full gw-shadow gw-px-3 gw-py-2 gw-text-sm gw-font-semibold gw-text-gray-500 gw-bg-gray-50 hover:gw-bg-gray-100",

From 04da8e912889c623ea35f9302a5d39b77d3612a0 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 18 Mar 2025 09:53:49 -0500
Subject: [PATCH 3/9] Convert Disclosure from dot operators

---
 lib/components/display/accordion.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index 9fd0ed5b..f13a441c 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -1,4 +1,4 @@
-import { Disclosure } from "@headlessui/react";
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
 import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
 import gwMerge from "../../gw-merge";
 
@@ -19,7 +19,7 @@ function Accordion({
 
         return (
           <>
-            <Disclosure.Button
+            <DisclosureButton
               aria-expanded={isExpanded}
               aria-controls={`accordion-panel`}
               onClick={onToggle}
@@ -31,14 +31,14 @@ function Accordion({
             >
               {heading}
               {isExpanded ? <VscChevronDown /> : <VscChevronRight />}
-            </Disclosure.Button>
-            <Disclosure.Panel
+            </DisclosureButton>
+            <DisclosurePanel
               className="gw-shadow"
               unmount={unmountOnClose}
               id={id || undefined}
             >
               {children}
-            </Disclosure.Panel>
+            </DisclosurePanel>
           </>
         );
       }}

From fdb5c7bf4a648aed1be6b111b3e5d4783c6e97a3 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 18 Mar 2025 16:22:28 -0500
Subject: [PATCH 4/9] Add initial accordion docs, include random id for
 accordion panel

---
 lib/components/display/accordion.jsx          |   4 +-
 .../documentation/display/accordion.jsx       | 346 ++++++++++--------
 2 files changed, 191 insertions(+), 159 deletions(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index f13a441c..ac09498e 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -12,6 +12,8 @@ function Accordion({
   children,
   id
 }) {
+  // Generate a random id if one is not provided
+  const randomId = id || `accordion-panel-${btoa(Math.random().toString()).substring(5,15)}`;
   return (
     <Disclosure defaultOpen={defaultOpen}>
       {({ open }) => {
@@ -35,7 +37,7 @@ function Accordion({
             <DisclosurePanel
               className="gw-shadow"
               unmount={unmountOnClose}
-              id={id || undefined}
+              id={randomId}
             >
               {children}
             </DisclosurePanel>
diff --git a/src/app-pages/documentation/display/accordion.jsx b/src/app-pages/documentation/display/accordion.jsx
index 70b69b39..c4ee8bd5 100644
--- a/src/app-pages/documentation/display/accordion.jsx
+++ b/src/app-pages/documentation/display/accordion.jsx
@@ -1,158 +1,188 @@
-import { UsaceBox, Code, Text, Accordion, Badge } from "../../../../lib";
-import { CodeExample } from "../../../app-components/code-example";
-import PropsTable from "../../../app-components/props-table";
-import DocsPage from "../_docs-page";
-import { LuPartyPopper } from "react-icons/lu";
-
-const pageBreadcrumbs = [
-  {
-    text: "Documentation",
-    href: "/docs",
-  },
-  {
-    text: "Display",
-    href: "/docs/display",
-  },
-  {
-    text: "Accordion",
-    href: "/docs/display/accordion",
-  },
-];
-
-const componentProps = [
-  {
-    name: "heading",
-    type: "string | component",
-    default: "undefined",
-    desc: "The header of the accordion. Can be plain text or a custom component.",
-  },
-  {
-    name: "defaultOpen",
-    type: "boolean",
-    default: "false",
-    desc: "Whether the accordion is open by default.",
-  },
-  {
-    name: "unmountOnClose",
-    type: "boolean",
-    default: "false",
-    desc: "Whether to unmount the content when the accordion is closed. False will cause the content to be hidden but still in the DOM.",
-  },
-];
-
-function AccordionDocs() {
-  return (
-    <DocsPage breadcrumbs={pageBreadcrumbs}>
-      <UsaceBox title="Accordion">
-        {/* Description of the component and what problem it solves */}
-        <div className="gw-pb-6">
-          <Text>
-            Accordions allow you to stack lots of information into a smaller
-            vertical space by putting content into collapsible sections. The
-            header of the accordion can be plain text or a custom component
-            including other components such as a badge or icon.
-          </Text>
-        </div>
-        {/* Example usage - remove if not needed */}
-        <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3">
-          <div className="gw-w-[50%]">
-            <Accordion
-              defaultOpen
-              heading={
-                <span className="gw-flex gw-justify-between gw-w-full gw-items-center gw-gap-1">
-                  Start Here
-                  <Badge color="green" className="gw-mr-2">
-                    <LuPartyPopper className="gw-mr-1" />
-                    new!
-                  </Badge>
-                </span>
-              }
-            >
-              <div className="gw-py-3">
-                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>
-            </Accordion>
-            <Accordion heading="Then Look Here">
-              <div className="gw-py-3">
-                Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
-                dictum at tempor commodo ullamcorper a. Ultrices neque ornare
-                aenean euismod elementum nisi quis. Quam lacus suspendisse
-                faucibus interdum posuere lorem. Purus semper eget duis at. Eu
-                tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
-                sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
-                ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
-                fames ac turpis egestas maecenas pharetra convallis. Malesuada
-                bibendum arcu vitae elementum curabitur vitae nunc sed velit.
-              </div>
-            </Accordion>
-          </div>
-        </div>
-        {/* Example code */}
-        <CodeExample
-          code={`import { Accordion, Badge } from "@usace/groundwork";
-import { LuPartyPopper } from "react-icons/lu";
-
-
-function Component() {
-  return (
-    <div className="w-[50%]">
-      <Accordion
-        defaultOpen
-        heading={
-          <span className="flex justify-between w-full items-center gap-1">
-            Start Here
-            <Badge color="green" className="mr-2">
-              <LuPartyPopper className="mr-1" />
-              new!
-            </Badge>
-          </span>
-        }
-      >
-        <div className="py-3">
-          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>
-      </Accordion>
-      <Accordion heading="Then Look Here">
-        <div className="py-3">
-          Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
-          dictum at tempor commodo ullamcorper a. Ultrices neque ornare
-          aenean euismod elementum nisi quis. Quam lacus suspendisse
-          faucibus interdum posuere lorem. Purus semper eget duis at. Eu
-          tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
-          sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
-          ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
-          fames ac turpis egestas maecenas pharetra convallis. Malesuada
-          bibendum arcu vitae elementum curabitur vitae nunc sed velit.
-        </div>
-      </Accordion>
-    </div>
-  )
-}
-
-export default Component;
-`}
-        />
-        {/* Component props documentation */}
-        <div className="gw-font-bold gw-text-lg gw-pt-6">
-          Component API - <Code className="gw-p-2">{`<Accordion />`}</Code>
-        </div>
-        <PropsTable propsList={componentProps} />
-      </UsaceBox>
-    </DocsPage>
-  );
-}
-
-export default AccordionDocs;
-export { AccordionDocs };
+import { UsaceBox, Code, Text, Accordion, Badge } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+import { LuPartyPopper } from "react-icons/lu";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Display",
+    href: "/docs/display",
+  },
+  {
+    text: "Accordion",
+    href: "/docs/display/accordion",
+  },
+];
+
+const componentProps = [
+  {
+    name: "heading",
+    type: "string | component",
+    default: "undefined",
+    desc: "The header of the accordion. Can be plain text or a custom component.",
+  },
+  {
+    name: "defaultOpen",
+    type: "boolean",
+    default: "false",
+    desc: "Whether the accordion is open by default.",
+  },
+  {
+    name: "unmountOnClose",
+    type: "boolean",
+    default: "false",
+    desc: "Whether to unmount the content when the accordion is closed. False will cause the content to be hidden but still in the DOM.",
+  },
+  {
+    name: "className",
+    type: "string",
+    default: "undefined",
+    desc: "Additional classes to apply to the accordion header.",
+  },
+  {
+    name: "isOpen",
+    type: "boolean",
+    default: "undefined",
+    desc: "Whether the accordion is open. If provided, this will override the defaultOpen prop and the open state will be controlled by the parent component.",
+  },
+  {
+    name: "onToggle",
+    type: "function",
+    default: "undefined",
+    desc: "Callback function to call when the accordion is toggled.",
+  },
+  {
+    name: "children",
+    type: "node",
+    default: "undefined",
+    desc: "The content of the accordion when expanded.",
+  },
+  {
+    name: "id",
+    type: "string",
+    default: "undefined",
+    desc: "The id of the accordion panel. If not provided, a random id will be generated.",
+  },
+];
+
+function AccordionDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Accordion">
+        {/* Description of the component and what problem it solves */}
+        <div className="gw-pb-6">
+          <Text>
+            Accordions allow you to stack lots of information into a smaller
+            vertical space by putting content into collapsible sections. The
+            header of the accordion can be plain text or a custom component
+            including other components such as a badge or icon.
+          </Text>
+        </div>
+        {/* Example usage - remove if not needed */}
+        <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3">
+          <div className="gw-w-[50%]">
+            <Accordion
+              defaultOpen
+              heading={
+                <span className="gw-flex gw-justify-between gw-w-full gw-items-center gw-gap-1">
+                  Start Here
+                  <Badge color="green" className="gw-mr-2">
+                    <LuPartyPopper className="gw-mr-1" />
+                    new!
+                  </Badge>
+                </span>
+              }
+            >
+              <div className="gw-py-3">
+                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>
+            </Accordion>
+            <Accordion heading="Then Look Here">
+              <div className="gw-py-3">
+                Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
+                dictum at tempor commodo ullamcorper a. Ultrices neque ornare
+                aenean euismod elementum nisi quis. Quam lacus suspendisse
+                faucibus interdum posuere lorem. Purus semper eget duis at. Eu
+                tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
+                sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
+                ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
+                fames ac turpis egestas maecenas pharetra convallis. Malesuada
+                bibendum arcu vitae elementum curabitur vitae nunc sed velit.
+              </div>
+            </Accordion>
+          </div>
+        </div>
+        {/* Example code */}
+        <CodeExample
+          code={`import { Accordion, Badge } from "@usace/groundwork";
+import { LuPartyPopper } from "react-icons/lu";
+
+
+function Component() {
+  return (
+    <div className="w-[50%]">
+      <Accordion
+        defaultOpen
+        heading={
+          <span className="flex justify-between w-full items-center gap-1">
+            Start Here
+            <Badge color="green" className="mr-2">
+              <LuPartyPopper className="mr-1" />
+              new!
+            </Badge>
+          </span>
+        }
+      >
+        <div className="py-3">
+          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>
+      </Accordion>
+      <Accordion heading="Then Look Here">
+        <div className="py-3">
+          Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
+          dictum at tempor commodo ullamcorper a. Ultrices neque ornare
+          aenean euismod elementum nisi quis. Quam lacus suspendisse
+          faucibus interdum posuere lorem. Purus semper eget duis at. Eu
+          tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
+          sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
+          ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
+          fames ac turpis egestas maecenas pharetra convallis. Malesuada
+          bibendum arcu vitae elementum curabitur vitae nunc sed velit.
+        </div>
+      </Accordion>
+    </div>
+  )
+}
+
+export default Component;
+`}
+        />
+        {/* Component props documentation */}
+        <div className="gw-font-bold gw-text-lg gw-pt-6">
+          Component API - <Code className="gw-p-2">{`<Accordion />`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default AccordionDocs;
+export { AccordionDocs };

From 55b8bac3d2e285423caf8804453d21f805f4a194 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Mon, 31 Mar 2025 09:17:14 -0500
Subject: [PATCH 5/9] Correct to LF

---
 lib/components/display/accordion.jsx          | 104 ++---
 .../documentation/display/accordion.jsx       | 376 +++++++++---------
 2 files changed, 240 insertions(+), 240 deletions(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index ac09498e..0fa5ee63 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -1,52 +1,52 @@
-import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
-import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
-import gwMerge from "../../gw-merge";
-
-function Accordion({
-  heading,
-  defaultOpen = false,
-  unmountOnClose = false,
-  className,
-  isOpen,
-  onToggle,
-  children,
-  id
-}) {
-  // Generate a random id if one is not provided
-  const randomId = id || `accordion-panel-${btoa(Math.random().toString()).substring(5,15)}`;
-  return (
-    <Disclosure defaultOpen={defaultOpen}>
-      {({ open }) => {
-        const isExpanded = isOpen ?? open; 
-
-        return (
-          <>
-            <DisclosureButton
-              aria-expanded={isExpanded}
-              aria-controls={`accordion-panel`}
-              onClick={onToggle}
-              className={gwMerge(
-                "gw-flex gw-justify-between gw-items-center gw-w-full gw-shadow gw-px-3 gw-py-2 gw-text-sm gw-font-semibold gw-text-gray-500 gw-bg-gray-50 hover:gw-bg-gray-100",
-                isExpanded ? "gw-rounded-t" : "gw-rounded",
-                className
-              )}
-            >
-              {heading}
-              {isExpanded ? <VscChevronDown /> : <VscChevronRight />}
-            </DisclosureButton>
-            <DisclosurePanel
-              className="gw-shadow"
-              unmount={unmountOnClose}
-              id={randomId}
-            >
-              {children}
-            </DisclosurePanel>
-          </>
-        );
-      }}
-    </Disclosure>
-  );
-}
-
-export default Accordion;
-export { Accordion };
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
+import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
+import gwMerge from "../../gw-merge";
+
+function Accordion({
+  heading,
+  defaultOpen = false,
+  unmountOnClose = false,
+  className,
+  isOpen,
+  onToggle,
+  children,
+  id
+}) {
+  // Generate a random id if one is not provided
+  const randomId = id || `accordion-panel-${btoa(Math.random().toString()).substring(5,15)}`;
+  return (
+    <Disclosure defaultOpen={defaultOpen}>
+      {({ open }) => {
+        const isExpanded = isOpen ?? open; 
+
+        return (
+          <>
+            <DisclosureButton
+              aria-expanded={isExpanded}
+              aria-controls={`accordion-panel`}
+              onClick={onToggle}
+              className={gwMerge(
+                "gw-flex gw-justify-between gw-items-center gw-w-full gw-shadow gw-px-3 gw-py-2 gw-text-sm gw-font-semibold gw-text-gray-500 gw-bg-gray-50 hover:gw-bg-gray-100",
+                isExpanded ? "gw-rounded-t" : "gw-rounded",
+                className
+              )}
+            >
+              {heading}
+              {isExpanded ? <VscChevronDown /> : <VscChevronRight />}
+            </DisclosureButton>
+            <DisclosurePanel
+              className="gw-shadow"
+              unmount={unmountOnClose}
+              id={randomId}
+            >
+              {children}
+            </DisclosurePanel>
+          </>
+        );
+      }}
+    </Disclosure>
+  );
+}
+
+export default Accordion;
+export { Accordion };
diff --git a/src/app-pages/documentation/display/accordion.jsx b/src/app-pages/documentation/display/accordion.jsx
index c4ee8bd5..d6abda34 100644
--- a/src/app-pages/documentation/display/accordion.jsx
+++ b/src/app-pages/documentation/display/accordion.jsx
@@ -1,188 +1,188 @@
-import { UsaceBox, Code, Text, Accordion, Badge } from "../../../../lib";
-import { CodeExample } from "../../../app-components/code-example";
-import PropsTable from "../../../app-components/props-table";
-import DocsPage from "../_docs-page";
-import { LuPartyPopper } from "react-icons/lu";
-
-const pageBreadcrumbs = [
-  {
-    text: "Documentation",
-    href: "/docs",
-  },
-  {
-    text: "Display",
-    href: "/docs/display",
-  },
-  {
-    text: "Accordion",
-    href: "/docs/display/accordion",
-  },
-];
-
-const componentProps = [
-  {
-    name: "heading",
-    type: "string | component",
-    default: "undefined",
-    desc: "The header of the accordion. Can be plain text or a custom component.",
-  },
-  {
-    name: "defaultOpen",
-    type: "boolean",
-    default: "false",
-    desc: "Whether the accordion is open by default.",
-  },
-  {
-    name: "unmountOnClose",
-    type: "boolean",
-    default: "false",
-    desc: "Whether to unmount the content when the accordion is closed. False will cause the content to be hidden but still in the DOM.",
-  },
-  {
-    name: "className",
-    type: "string",
-    default: "undefined",
-    desc: "Additional classes to apply to the accordion header.",
-  },
-  {
-    name: "isOpen",
-    type: "boolean",
-    default: "undefined",
-    desc: "Whether the accordion is open. If provided, this will override the defaultOpen prop and the open state will be controlled by the parent component.",
-  },
-  {
-    name: "onToggle",
-    type: "function",
-    default: "undefined",
-    desc: "Callback function to call when the accordion is toggled.",
-  },
-  {
-    name: "children",
-    type: "node",
-    default: "undefined",
-    desc: "The content of the accordion when expanded.",
-  },
-  {
-    name: "id",
-    type: "string",
-    default: "undefined",
-    desc: "The id of the accordion panel. If not provided, a random id will be generated.",
-  },
-];
-
-function AccordionDocs() {
-  return (
-    <DocsPage breadcrumbs={pageBreadcrumbs}>
-      <UsaceBox title="Accordion">
-        {/* Description of the component and what problem it solves */}
-        <div className="gw-pb-6">
-          <Text>
-            Accordions allow you to stack lots of information into a smaller
-            vertical space by putting content into collapsible sections. The
-            header of the accordion can be plain text or a custom component
-            including other components such as a badge or icon.
-          </Text>
-        </div>
-        {/* Example usage - remove if not needed */}
-        <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3">
-          <div className="gw-w-[50%]">
-            <Accordion
-              defaultOpen
-              heading={
-                <span className="gw-flex gw-justify-between gw-w-full gw-items-center gw-gap-1">
-                  Start Here
-                  <Badge color="green" className="gw-mr-2">
-                    <LuPartyPopper className="gw-mr-1" />
-                    new!
-                  </Badge>
-                </span>
-              }
-            >
-              <div className="gw-py-3">
-                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>
-            </Accordion>
-            <Accordion heading="Then Look Here">
-              <div className="gw-py-3">
-                Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
-                dictum at tempor commodo ullamcorper a. Ultrices neque ornare
-                aenean euismod elementum nisi quis. Quam lacus suspendisse
-                faucibus interdum posuere lorem. Purus semper eget duis at. Eu
-                tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
-                sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
-                ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
-                fames ac turpis egestas maecenas pharetra convallis. Malesuada
-                bibendum arcu vitae elementum curabitur vitae nunc sed velit.
-              </div>
-            </Accordion>
-          </div>
-        </div>
-        {/* Example code */}
-        <CodeExample
-          code={`import { Accordion, Badge } from "@usace/groundwork";
-import { LuPartyPopper } from "react-icons/lu";
-
-
-function Component() {
-  return (
-    <div className="w-[50%]">
-      <Accordion
-        defaultOpen
-        heading={
-          <span className="flex justify-between w-full items-center gap-1">
-            Start Here
-            <Badge color="green" className="mr-2">
-              <LuPartyPopper className="mr-1" />
-              new!
-            </Badge>
-          </span>
-        }
-      >
-        <div className="py-3">
-          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>
-      </Accordion>
-      <Accordion heading="Then Look Here">
-        <div className="py-3">
-          Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
-          dictum at tempor commodo ullamcorper a. Ultrices neque ornare
-          aenean euismod elementum nisi quis. Quam lacus suspendisse
-          faucibus interdum posuere lorem. Purus semper eget duis at. Eu
-          tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
-          sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
-          ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
-          fames ac turpis egestas maecenas pharetra convallis. Malesuada
-          bibendum arcu vitae elementum curabitur vitae nunc sed velit.
-        </div>
-      </Accordion>
-    </div>
-  )
-}
-
-export default Component;
-`}
-        />
-        {/* Component props documentation */}
-        <div className="gw-font-bold gw-text-lg gw-pt-6">
-          Component API - <Code className="gw-p-2">{`<Accordion />`}</Code>
-        </div>
-        <PropsTable propsList={componentProps} />
-      </UsaceBox>
-    </DocsPage>
-  );
-}
-
-export default AccordionDocs;
-export { AccordionDocs };
+import { UsaceBox, Code, Text, Accordion, Badge } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+import { LuPartyPopper } from "react-icons/lu";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Display",
+    href: "/docs/display",
+  },
+  {
+    text: "Accordion",
+    href: "/docs/display/accordion",
+  },
+];
+
+const componentProps = [
+  {
+    name: "heading",
+    type: "string | component",
+    default: "undefined",
+    desc: "The header of the accordion. Can be plain text or a custom component.",
+  },
+  {
+    name: "defaultOpen",
+    type: "boolean",
+    default: "false",
+    desc: "Whether the accordion is open by default.",
+  },
+  {
+    name: "unmountOnClose",
+    type: "boolean",
+    default: "false",
+    desc: "Whether to unmount the content when the accordion is closed. False will cause the content to be hidden but still in the DOM.",
+  },
+  {
+    name: "className",
+    type: "string",
+    default: "undefined",
+    desc: "Additional classes to apply to the accordion header.",
+  },
+  {
+    name: "isOpen",
+    type: "boolean",
+    default: "undefined",
+    desc: "Whether the accordion is open. If provided, this will override the defaultOpen prop and the open state will be controlled by the parent component.",
+  },
+  {
+    name: "onToggle",
+    type: "function",
+    default: "undefined",
+    desc: "Callback function to call when the accordion is toggled.",
+  },
+  {
+    name: "children",
+    type: "node",
+    default: "undefined",
+    desc: "The content of the accordion when expanded.",
+  },
+  {
+    name: "id",
+    type: "string",
+    default: "undefined",
+    desc: "The id of the accordion panel. If not provided, a random id will be generated.",
+  },
+];
+
+function AccordionDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Accordion">
+        {/* Description of the component and what problem it solves */}
+        <div className="gw-pb-6">
+          <Text>
+            Accordions allow you to stack lots of information into a smaller
+            vertical space by putting content into collapsible sections. The
+            header of the accordion can be plain text or a custom component
+            including other components such as a badge or icon.
+          </Text>
+        </div>
+        {/* Example usage - remove if not needed */}
+        <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3">
+          <div className="gw-w-[50%]">
+            <Accordion
+              defaultOpen
+              heading={
+                <span className="gw-flex gw-justify-between gw-w-full gw-items-center gw-gap-1">
+                  Start Here
+                  <Badge color="green" className="gw-mr-2">
+                    <LuPartyPopper className="gw-mr-1" />
+                    new!
+                  </Badge>
+                </span>
+              }
+            >
+              <div className="gw-py-3">
+                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>
+            </Accordion>
+            <Accordion heading="Then Look Here">
+              <div className="gw-py-3">
+                Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
+                dictum at tempor commodo ullamcorper a. Ultrices neque ornare
+                aenean euismod elementum nisi quis. Quam lacus suspendisse
+                faucibus interdum posuere lorem. Purus semper eget duis at. Eu
+                tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
+                sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
+                ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
+                fames ac turpis egestas maecenas pharetra convallis. Malesuada
+                bibendum arcu vitae elementum curabitur vitae nunc sed velit.
+              </div>
+            </Accordion>
+          </div>
+        </div>
+        {/* Example code */}
+        <CodeExample
+          code={`import { Accordion, Badge } from "@usace/groundwork";
+import { LuPartyPopper } from "react-icons/lu";
+
+
+function Component() {
+  return (
+    <div className="w-[50%]">
+      <Accordion
+        defaultOpen
+        heading={
+          <span className="flex justify-between w-full items-center gap-1">
+            Start Here
+            <Badge color="green" className="mr-2">
+              <LuPartyPopper className="mr-1" />
+              new!
+            </Badge>
+          </span>
+        }
+      >
+        <div className="py-3">
+          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>
+      </Accordion>
+      <Accordion heading="Then Look Here">
+        <div className="py-3">
+          Sodales ut etiam sit amet nisl purus. Feugiat in ante metus
+          dictum at tempor commodo ullamcorper a. Ultrices neque ornare
+          aenean euismod elementum nisi quis. Quam lacus suspendisse
+          faucibus interdum posuere lorem. Purus semper eget duis at. Eu
+          tincidunt tortor aliquam nulla. Euismod lacinia at quis risus
+          sed. Maecenas volutpat blandit aliquam etiam erat. Mattis
+          ullamcorper velit sed ullamcorper morbi tincidunt. Et malesuada
+          fames ac turpis egestas maecenas pharetra convallis. Malesuada
+          bibendum arcu vitae elementum curabitur vitae nunc sed velit.
+        </div>
+      </Accordion>
+    </div>
+  )
+}
+
+export default Component;
+`}
+        />
+        {/* Component props documentation */}
+        <div className="gw-font-bold gw-text-lg gw-pt-6">
+          Component API - <Code className="gw-p-2">{`<Accordion />`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default AccordionDocs;
+export { AccordionDocs };

From 284632f88139c89b5a02ab12e7cb8e8391c59a96 Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Tue, 27 May 2025 22:16:04 -0500
Subject: [PATCH 6/9] Remove random ID generator for disclosure panel

---
 lib/components/display/accordion.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index 0fa5ee63..8ab76cf9 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -12,13 +12,10 @@ function Accordion({
   children,
   id
 }) {
-  // Generate a random id if one is not provided
-  const randomId = id || `accordion-panel-${btoa(Math.random().toString()).substring(5,15)}`;
   return (
     <Disclosure defaultOpen={defaultOpen}>
       {({ open }) => {
         const isExpanded = isOpen ?? open; 
-
         return (
           <>
             <DisclosureButton
@@ -37,7 +34,7 @@ function Accordion({
             <DisclosurePanel
               className="gw-shadow"
               unmount={unmountOnClose}
-              id={randomId}
+              id={id}
             >
               {children}
             </DisclosurePanel>

From 86e8418efe33dc04df546d0103d659cdd13ab1d1 Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Mon, 15 Sep 2025 22:53:52 -0500
Subject: [PATCH 7/9] Update disclosure from dot operators

---
 lib/components/display/accordion.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index 7a093a7b..1b514584 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -1,4 +1,8 @@
-import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
 import { VscChevronRight, VscChevronDown } from "react-icons/vsc";
 import gwMerge from "../../gw-merge";
 
@@ -10,12 +14,12 @@ function Accordion({
   isOpen,
   onToggle,
   children,
-  id
+  id,
 }) {
   return (
     <Disclosure defaultOpen={defaultOpen}>
       {({ open }) => {
-        const isExpanded = isOpen ?? open; 
+        const isExpanded = isOpen ?? open;
         return (
           <>
             <DisclosureButton
@@ -30,8 +34,8 @@ function Accordion({
             >
               {heading}
               {open ? <VscChevronDown /> : <VscChevronRight />}
-            </Disclosure.Button>
-            <Disclosure.Panel className="gw-shadow" unmount={unmountOnClose}>
+            </DisclosureButton>
+            <DisclosurePanel className="gw-shadow" unmount={unmountOnClose}>
               {children}
             </DisclosurePanel>
           </>

From b30dab99cbbc33c341cd1a5de94b5cac3a626a76 Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Mon, 15 Sep 2025 22:54:36 -0500
Subject: [PATCH 8/9] Replace id with props

---
 lib/components/display/accordion.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/components/display/accordion.jsx b/lib/components/display/accordion.jsx
index 1b514584..df524c3d 100644
--- a/lib/components/display/accordion.jsx
+++ b/lib/components/display/accordion.jsx
@@ -14,7 +14,7 @@ function Accordion({
   isOpen,
   onToggle,
   children,
-  id,
+  ...props
 }) {
   return (
     <Disclosure defaultOpen={defaultOpen}>
@@ -31,6 +31,7 @@ function Accordion({
                 open ? "gw-rounded-t" : "gw-rounded",
                 className,
               )}
+              {...props}
             >
               {heading}
               {open ? <VscChevronDown /> : <VscChevronRight />}

From 72982e0554cb6a5deee2e11968306b225fb86166 Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Mon, 15 Sep 2025 22:58:37 -0500
Subject: [PATCH 9/9] Updated docs from id to props

---
 .../documentation/display/accordion.jsx        | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app-pages/documentation/display/accordion.jsx b/src/app-pages/documentation/display/accordion.jsx
index 58bba83c..d0d22365 100644
--- a/src/app-pages/documentation/display/accordion.jsx
+++ b/src/app-pages/documentation/display/accordion.jsx
@@ -1,4 +1,5 @@
 import { UsaceBox, Code, Text, Accordion, Badge } from "../../../../lib";
+import Link from "../../../../lib/components/navigation/link";
 import { CodeExample } from "../../../app-components/code-example";
 import PropsTable from "../../../app-components/props-table";
 import DocsPage from "../_docs-page";
@@ -63,10 +64,21 @@ const componentProps = [
     desc: "The content of the accordion when expanded.",
   },
   {
-    name: "id",
-    type: "string",
+    name: "props",
+    type: "object",
     default: "undefined",
-    desc: "The id of the accordion panel. If not provided, a random id will be generated.",
+    desc: (
+      <>
+        Additional props to pass to the accordion components. See{" "}
+        <Link
+          href="https://headlessui.com/react/disclosure#disclosure-panel"
+          className="gw-underline"
+        >
+          Headless UI Disclosure
+        </Link>{" "}
+        docs for more info.
+      </>
+    ),
   },
 ];