diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f8fe4f0b..b33b8b65 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -199,6 +199,7 @@ import { Accordion } from "carbon-components-svelte";
| :-------- | :-------------------------------- | :------------ |
| align | "start" | "end"
| "end" |
| size | "sm" | "xl"
| -- |
+| disabled | boolean
| false |
| skeleton | boolean
| false |
### Slots
@@ -232,6 +233,7 @@ import { AccordionItem } from "carbon-components-svelte";
| :-------------- | :------------------- | :---------------- |
| title | string
| "title" |
| open | boolean
| false |
+| disabled | boolean
| false |
| iconDescription | string
| "Expand/Collapse" |
### Slots
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 64ff137d..6bfca06f 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -91,6 +91,34 @@
+### Disabled
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+### Disabled (item)
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
### Skeleton
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 140e7eea..d85f873e 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -11,13 +11,27 @@
*/
export let size = undefined;
+ /**
+ * Set to `true` to disable the accordion
+ * @type {boolean} [disabled=false]
+ */
+ export let disabled = false;
+
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
+ import { setContext } from "svelte";
+ import { writable } from "svelte/store";
import AccordionSkeleton from "./Accordion.Skeleton.svelte";
+
+ const disableItems = writable(disabled);
+
+ $: disableItems.set(disabled);
+
+ setContext("Accordion", { disableItems });
{#if skeleton}
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 63af47ec..8ba4feb3 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -12,22 +12,44 @@
*/
export let open = false;
+ /**
+ * Set to `true` to disable the accordion item
+ * @type {boolean} [disabled=false]
+ */
+ export let disabled = false;
+
/**
* Specify the ARIA label for the accordion item chevron icon
* @type {string} [iconDescription="Expand/Collapse"]
*/
export let iconDescription = "Expand/Collapse";
+ import { onMount, getContext } from "svelte";
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
- $: animation = undefined;
+ let initialDisabled = disabled;
+
+ const ctx = getContext("Accordion");
+ const unsubscribe = ctx.disableItems.subscribe((value) => {
+ if (!value && initialDisabled) return;
+ disabled = value;
+ });
+
+ let animation = undefined;
+
+ onMount(() => {
+ return () => {
+ unsubscribe();
+ };
+ });