From a498ffc7e20f914c5703afc94642c0cb713e4290 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 21 Apr 2024 14:34:05 -0700
Subject: [PATCH] docs(accordion): also demo batch disable

---
 docs/src/pages/components/Accordion.svx       |  6 ++++--
 ...on.svelte => ProgrammaticAccordion.svelte} | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)
 rename docs/src/pages/framed/Accordion/{ExpandableAccordion.svelte => ProgrammaticAccordion.svelte} (69%)

diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 0dad5d43..ad75baf4 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -140,9 +140,11 @@ By default, the chevron is right-aligned. Set `align="start"` to left-align the
 
 ## Programmatic example
 
-This example demonstrates how a list of items can be programmatically expanded and collapsed.
+This example demonstrates how all items can be programmatically expanded, collapsed, or disabled.
 
-<FileSource src="/framed/Accordion/ExpandableAccordion" />
+Disabled accordion items cannot be expanded.
+
+<FileSource src="/framed/Accordion/ProgrammaticAccordion" />
 
 ## Disabled
 
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ProgrammaticAccordion.svelte
similarity index 69%
rename from docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
rename to docs/src/pages/framed/Accordion/ProgrammaticAccordion.svelte
index 3b8ce26e..408ad0ca 100644
--- a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
+++ b/docs/src/pages/framed/Accordion/ProgrammaticAccordion.svelte
@@ -1,5 +1,7 @@
 <script>
-  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+  import { Accordion, AccordionItem, Button, ButtonSet } from "carbon-components-svelte";
+
+  let disabled = false;
 
   const items = [
     {
@@ -22,12 +24,17 @@
   let open = false;
 </script>
 
-<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
-  {open ? "Collapse" : "Expand"}
-  all
-</Button>
+<ButtonSet>
+  <Button size="field" disabled="{disabled}" on:click="{() => (open = !open)}">
+    {open ? "Collapse" : "Expand"}
+    all
+  </Button>
+  <Button kind="ghost" size="field" on:click="{() => (disabled = !disabled)}">
+    {disabled ? "Enable" : "Disable"} all
+  </Button>
+</ButtonSet>
 
-<Accordion>
+<Accordion disabled="{disabled}">
   {#each items as item}
     <AccordionItem title="{item.title}" open="{open}">
       <p>{item.description}</p>