diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 5411c067..c1c105f3 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -198,6 +198,8 @@ import { Accordion } from "carbon-components-svelte";
| Prop name | Type | Default value |
| :-------- | :-------------------------------- | :------------ |
| align | "start" | "end"
| "end" |
+| size | "sm" | "xl"
| -- |
+| disabled | boolean
| false |
| skeleton | boolean
| false |
### Slots
@@ -231,6 +233,7 @@ import { AccordionItem } from "carbon-components-svelte";
| :-------------- | :------------------- | :---------------- |
| title | string
| "title" |
| open | boolean
| false |
+| disabled | boolean
| false |
| iconDescription | string
| "Expand/Collapse" |
### Slots
@@ -262,10 +265,12 @@ import { AccordionSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value |
-| :-------- | :------------------- | :------------ |
-| count | number
| 4 |
-| open | boolean
| true |
+| Prop name | Type | Default value |
+| :-------- | :-------------------------------- | :------------ |
+| count | number
| 4 |
+| align | "start" | "end"
| "end" |
+| size | "sm" | "xl"
| -- |
+| open | boolean
| true |
### Slots
diff --git a/docs/package.json b/docs/package.json
index 208780bf..5be73cd4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,7 +12,7 @@
"@carbon/themes": "^10.20.0",
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1",
- "carbon-components": "^10.21.0",
+ "carbon-components": "^10.22.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0",
"fs-extra": "^9.0.1",
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index fe2c6517..6bfca06f 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -63,10 +63,83 @@
+### Extra-large size
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+### Small size
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+### Disabled
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+### Disabled (item)
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
### Skeleton
+
+
+### Skeleton (chevron aligned left)
+
+
+
+### Skeleton (custom count)
+
### Skeleton (closed)
-
\ No newline at end of file
+
+
+### Skeleton (extra-large)
+
+
+
+### Skeleton (small)
+
+
+
diff --git a/docs/yarn.lock b/docs/yarn.lock
index f543447e..9f02ffbb 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
carbon-components-svelte@../:
- version "0.15.0"
+ version "0.16.0"
dependencies:
carbon-icons-svelte "^10.17.0"
flatpickr "4.6.3"
-carbon-components@^10.21.0:
- version "10.21.0"
- resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.21.0.tgz#3e7f79530af79039aab7bf937f0f129642806316"
- integrity sha512-IS8WPFGg74g6ZyWpJc4cDlkhqGeNZ1sJshAVTftkb7Nur9W58lSRcu6G9cRMgeL+I/YAia3Q+X4lPh/X16JsGw==
+carbon-components@^10.22.0:
+ version "10.22.0"
+ resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9"
+ integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ==
dependencies:
flatpickr "4.6.1"
lodash.debounce "^4.0.8"
diff --git a/src/Accordion/Accordion.Skeleton.svelte b/src/Accordion/Accordion.Skeleton.svelte
index 26eb01bd..f34c6997 100644
--- a/src/Accordion/Accordion.Skeleton.svelte
+++ b/src/Accordion/Accordion.Skeleton.svelte
@@ -5,6 +5,18 @@
*/
export let count = 4;
+ /**
+ * Specify alignment of accordion item chevron icon
+ * @type {"start" | "end"} [align="end"]
+ */
+ export let align = "end";
+
+ /**
+ * Specify the size of the accordion
+ * @type {"sm" | "xl"} [size]
+ */
+ export let size = undefined;
+
/**
* Set to `false` to close the first accordion item
* @type {boolean} [open=true]
@@ -19,6 +31,9 @@
class:bx--accordion="{true}"
class:bx--skeleton="{true}"
{...$$restProps}
+ class="bx--accordion--{align}
+ {size && `bx--accordion--${size}`}
+ {$$restProps.class}"
on:click
on:mouseover
on:mouseenter
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 2159e051..d85f873e 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -5,18 +5,40 @@
*/
export let align = "end";
+ /**
+ * Specify the size of the accordion
+ * @type {"sm" | "xl"} [size]
+ */
+ 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}
{
+ if (!value && initialDisabled) return;
+ disabled = value;
+ });
+
+ let animation = undefined;
+
+ onMount(() => {
+ return () => {
+ unsubscribe();
+ };
+ });