StellarUI

<stellar-accordion>

Grouped native details wrapper that owns shared appearance, affordance placement, and indicator icons for its items.

Properties

Preview

How do I create an account?

Click the Sign Up button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Use the Forgot Password flow on the login page and follow the reset link from your email.

How do I update my profile information?

Open account settings, choose Edit Profile, and save the updated details.

Markup

Copy

<stellar-accordion
  closed-icon="mdi:chevron-right"
  opened-icon="mdi:chevron-down"
>
  <details open>
    <summary>How do I create an account?</summary>
    <p>Click the Sign Up button in the top right corner and follow the registration process.</p>
  </details>
  <details>
    <summary>I forgot my password. What should I do?</summary>
    <p>Use the Forgot Password flow on the login page and follow the reset link from your email.</p>
  </details>
  <details>
    <summary>How do I update my profile information?</summary>
    <p>Open account settings, choose Edit Profile, and save the updated details.</p>
  </details>
</stellar-accordion>

API

Complete props, events, slots, and implementation notes for the shipped accordion.

Props

Prop	Type	Default
`appearance`	`normal \| contained \| separated \| unstyled`	`normal`
`icon-start`	`boolean`	`false`
`multiple`	`boolean`	`false`
`opened-icon`	`string`	`mdi:chevron-down`
`closed-icon`	`string`	`mdi:chevron-right`

Events

Event	Source	Notes
native toggle events	authored `<details>`	Each disclosure keeps normal browser open or close behavior while the parent accordion manages whether one or many panels may stay open.
custom events	none	`stellar-accordion` does not emit custom events.

Slots

Slot	Notes
default	Author one or more direct native `<details>` children. Each item should include a `<summary>` followed by the body content. The parent accordion owns single-open vs multi-open behavior through `multiple`.

Notes

The public tag is `stellar-accordion`, while each item stays authored as a native `<details>` element with a native `<summary>` heading.
`multiple` is off by default, so the parent accordion keeps a single-open group. Turn on `multiple` when several panels should stay expanded at the same time.
`appearance`, boolean `icon-start`, and boolean `multiple` belong on the parent accordion so the whole group shares one visual and interaction contract.
The component styles its direct authored `<details>` children in place instead of inventing a separate wrapper tree.
`closed-icon` and `opened-icon` only affect the summary affordance. Open and closed state still round-trip through each authored child `<details>` element.
The summary affordance is a non-interactive `stellar-toggle-icon` synced from each native `<details>` item. It uses a rotating `stellar-toggle-icon` for the default chevron pair and falls back to icon swapping when the opened and closed icons differ.