material-inspired-component-library/components/accordion/README.md

The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.

# Accordion
This component implements the [Material Design 3 Expressive Expandable Lists](https://m3.material.io/components/lists/guidelines#b5697cef-6e9f-4699-ae10-c3f49649593e) design. Accordions are vertically stacked lists that allow you to show and hide sections of content.

## Basic Usage

### HTML
The Accordion component is an extension of the [**List** component](../list/README.md), using `<details>` and `<summary>` elements for its interactive behaviour. To create a basic accordion, use a `<div>` with the `micl-list` class and nest individual `<details>` elements for each collapsible item. Apply the appropriate `micl-list-item-` class to the `summary` element.

```HTML
<div class="micl-list" role="listbox">
  <details>
    <summary class="micl-list-item-one">
      <span class="micl-list-item__text">
        <span class="micl-list-item__headline">A single-line accordion item</span>
      </span>
    </summary>
    <div class="micl-list-item__content">
      <p class="md-sys-typescale-body-medium">
        This is the content that is revealed when the accordion item is expanded.
      </p>
    </div>
  </details>
</div>
```

- The `role="listbox"` is used for accessibility, indicating a selectable list.

- The `micl-list-item__content` class styles the collapsible area of the accordion item.

### CSS
Import the list styles into your project:

```CSS
@use "material-inspired-component-library/dist/list";
```

Or import all MICL styles:
```CSS
@use "material-inspired-component-library/styles";
```

### JavaScript
This component requires JavaScript to support keyboard navigation:

```JavaScript
import micl from "material-inspired-component-library/dist/micl";
```

This will initialize any Accordion component, including those that will be added to the DOM later on.

### Live Demo
A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available to interact with.

## Variants
To ensure that only one accordion item within a group can be open at a time, add a matching `name` attribute to all the `<details>` elements you want to group together.

```HTML
<div class="micl-list" role="listbox">
  <details name="mygroup">
    <summary class="micl-list-item-two">
      <span class="micl-list-item__text">
        <span class="micl-list-item__headline">Marie Curie</span>
        <span class="micl-list-item__supporting-text">The name of the employee.</span>
      </span>
    </summary>
    <div class="micl-list-item__content">
      <div class="micl-textfield-filled">
        <label for="tf1">Name</label>
        <input type="text" id="tf1" value="Marie Curie">
      </div>
    </div>
  </details>
  <hr class="micl-divider">
  <details name="mygroup">
    <summary class="micl-list-item-two" tabindex="-1">
      <span class="micl-list-item__text">
        <span class="micl-list-item__headline">Country</span>
        <span class="micl-list-item__supporting-text">The country of residence.</span>
      </span>
    </summary>
    <div class="micl-list-item__content">
      <div class="micl-textfield-filled">
        <label for="tf2">Country</label>
        <input type="text" id="tf2" value="France">
      </div>
    </div>
  </details>
</div>
```

Add a trailing icon to an accordion item to indicate that the item can be expanded. If you add the `micl-list-item__icon--expander` class to the icon, the icon will rotate 180 degrees when the accordion panel is opened or closed.

```HTML
<div class="micl-list" role="listbox">
  <details>
    <summary class="micl-list-item-one">
      <span class="micl-list-item__text">
        <span class="micl-list-item__headline">Heading</span>
      </span>
      <span class="micl-list-item__icon micl-list-item__icon--expander material-symbols-outlined" aria-hidden="true">keyboard_arrow_down</span>
    </summary>
    <div class="micl-list-item__content">
      ...content...
    </div>
  </details>
</div>
```

Adding the `micl-list-item--disabled` class to the `<summary>` element causes the accordion item to be displayed in a disabled state.

Use a [Divider component](../divider/README.md) to separate neighbouring accordion items by a divider.

Since the Accordion is based on the List component, you can use the same utility classes for content structure and styling. Refer to the [List component documentation](../list/README.md) for details on how to add icons, avatars, images, and other features to your accordion items.

## Customizations
You can customize the appearance of the Accordion component by overriding its own global CSS variables and those from the List component. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child accordions.

| Variable name | Default Value | Description |
| ------------- | ------------- | ----------- |
| --md-sys-accordion-item-space | 0px | The space between an opened accordion item and its next neighbour. |

**Example: Changing the margin between an opened item and the next**

```HTML
<div class="micl-list" role="listbox" style="--md-sys-accordion-item-space:4px">
  <details>
    ...
  </details>
  <details>
    ...
  </details>
</div>
```

## Compatibility
The Card component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.