-| Name | Type | Bubbles | Composed | Description |
-| -------- | ----------------------------- | ------- | -------- | ---------------------------------------------------------- |
-| `change` | `CustomEvent` | Yes | Yes | Fires a custom 'change' event when the active item changes |
+| Name | Type | Description |
+| --------------- | --------------------------- | ---------------------------------------------------------------- |
+| **expand-mode** | `single` (default), `multi` | Determines if multiple items or a single item can opened at once |
-## Methods
+#### Methods
-| Name | Returns | Description |
-| ---------- | ------- | ----------------------------------------------------------------------------------------- |
-| `closeAll` | `void` | When `expand-mode` is set to `multi`, closes all the accordion items from the open state. |
+| Name | Returns | Description |
+| ------------ | ------- | ----------------------------------------------------------------------------------------- |
+| **closeAll** | `void` | When `expand-mode` is set to `multi`, closes all the accordion items from the open state. |
+
+### Accordion Item
+
+#### Properties
+
+
+
+| Name | Type | Description |
+| ----------------- | -------------------------------------- | ---------------------------------------------------------------- |
+| **heading** | `string` | Determines if multiple items or a single item can opened at once |
+| **heading-level** | `1`, `2` (default), `3`, `4`, `5`, `6` | Determines the heading level |
+| **expanded** | `boolean` | Sets the open state |
+| **meta** | `string` | Sets the meta text for the heading |
+| **no-indicator** | `boolean` | Hides the open state indicator icon (chevron) |
+| **size** | `normal` (default), `condensed` | Sets the size |
+
+
+
+#### Events
+
+
+
+| Name | Type | Bubbles | Composed | Description |
+| ---------- | ------------------------ | ------- | -------- | -------------------------------------------------------- |
+| **change** | `CustomEvent` | Yes | Yes | Fires a custom 'change' event when the button is invoked |
+
+
+
+#### Slots
+
+
+
+| Name | Description |
+| -------- | ---------------------------- |
+| **icon** | Add an icon to the component |
diff --git a/libs/components/src/lib/accordion/USE-CASES.md b/libs/components/src/lib/accordion/USE-CASES.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/components/src/lib/accordion/VARIATIONS.md b/libs/components/src/lib/accordion/VARIATIONS.md
new file mode 100644
index 0000000000..1dfeff25b1
--- /dev/null
+++ b/libs/components/src/lib/accordion/VARIATIONS.md
@@ -0,0 +1,157 @@
+## Heading
+
+Use the `heading` attribute on **Accordion Item** to set the heading text.
+
+```html preview 250px
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
+
+
+
+ To ensure [accessible heading levels](/components/accordion/accessibility/#heading-levels) use the [`heading-level` attribute](/components/accordion/code/#heading-level).
+
+
+
+## Expand Mode
+
+Use the `expand-mode` attribute on **Accordion** to determine if multiple items can opened at once or single (default).
+
+```html preview 500px
+
Single
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+ This is the third item's accordion body.
+
+
+
Multiple
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+ This is the third item's accordion body.
+
+
+```
+
+## Expanded
+
+Use the `expanded` attribute on **Accordion Item** to set it's open state.
+
+```html preview 250px
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
+
+## Icon
+
+The `icon` attribute displays an icon from the [icon library](/icons/icons-gallery), which prefixes the **Accordion Item**'s heading.
+
+To add custom icons, use the [icon slot](/components/accordion/code/#icon-slot).
+
+```html preview 200px
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
+
+### Icon Trailing
+
+Use the `icon-trailing` attribute to postfix the icon in place of the **Accordion Item**'s chevron.
+
+```html preview 200px
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
+
+## Meta
+
+Use the `meta` attribute to add meta data to the **Accordion Item**'s heading.
+
+```html preview 200px
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
+
+## Size
+
+Use the `size` attribute to control the size of the **Accordion Item**.
+
+```html preview 350px
+
Normal
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+
Condensed
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
+
+## No Indicator
+
+Use the `no-indicator` attribute on **Accordion Item** to remove indicator icon from the heading element.
+
+```html preview 250px
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+```
diff --git a/libs/components/src/lib/accordion/ui.test.ts b/libs/components/src/lib/accordion/ui.test.ts
index 533856a0e4..7e536c112a 100644
--- a/libs/components/src/lib/accordion/ui.test.ts
+++ b/libs/components/src/lib/accordion/ui.test.ts
@@ -1,8 +1,6 @@
-import * as path from 'path';
import { expect, test } from '@playwright/test';
import type { Page } from '@playwright/test';
import {
- extractHTMLBlocksFromReadme,
loadComponents,
loadTemplate,
} from '../../visual-tests/visual-tests-utils.js';
@@ -10,13 +8,40 @@ import {
const components = ['accordion', 'accordion-item'];
test('should show the component', async ({ page }: { page: Page }) => {
- const template = extractHTMLBlocksFromReadme(
- path.join(new URL('.', import.meta.url).pathname, 'README.md')
- ).reduce(
- (htmlString: string, block: string) =>
- `${htmlString}
${block}
`,
- ''
- );
+ const template = `
+
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+ This is the third item's accordion body.
+
+
+ This is the fourth item's accordion body.
+
+
+
+
+
+
+ This is the first item's accordion body.
+
+
+ This is the second item's accordion body.
+
+
+ This is the third item's accordion body.
+
+
+ This is the fourth item's accordion body.
+
+
+
+ `;
await page.setViewportSize({ width: 500, height: 720 });
@@ -30,7 +55,6 @@ test('should show the component', async ({ page }: { page: Page }) => {
});
const testWrapper = await page.$('#wrapper');
-
await page.waitForLoadState('networkidle');
expect(await testWrapper?.screenshot()).toMatchSnapshot(
diff --git a/libs/components/src/lib/button/GUIDELINES.md b/libs/components/src/lib/button/GUIDELINES.md
index a80ada7b14..921780029e 100644
--- a/libs/components/src/lib/button/GUIDELINES.md
+++ b/libs/components/src/lib/button/GUIDELINES.md
@@ -582,235 +582,7 @@ The smaller size buttons (`condensed` and `super-condensed`) are useful when use
-## Button Groups
-
-A button group is a grouping of buttons whose actions are related to each other.
-
-### Alignment and Positioning
-
-In general, the primary button placement should match the alignment of the button group. For example, right aligned button groups place the primary button on the right. Left aligned button groups place the primary button on the left.
-
-
-
-
-```html preview center example 290px
-
- Are you sure you want to delete this appointment?
-
-
-
-
-
-```
-
-
-
-
-
-```html preview example 290px
-
-
-
-```
-
-
-
-
-### Appearance and connotation
-
-
-
-
-```html preview example 195px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-````
-
-
-
-
-
-```html preview example 135px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-````
-
-
-
-
-
-
-
-```html preview example 135px
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-```html preview example 135px
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-### Ghost buttons
+## Ghost buttons