<svelte:options customElement={{ tag: 'm-accordion-list', extend: customElementForwardEvents }} />

<script lang="ts">
  import { onMount } from 'svelte';
  import { SvelteSet } from 'svelte/reactivity';
  import { customElementForwardEvents } from '../../utils';
  import { accordion, update } from './accordion-list.state.svelte';

  /**
   * An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.
   *
   * @slot default - Use this slot to display the accordion items.
   */

  interface Props {
    /**
     * Defines the visual appearance of the button.
     */
    appearance?: 'standard' | 'ghost';
    /**
     * Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior..
     */
    behavior?: 'multiple' | 'single';
    /**
     * IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded.
     */
    value?: string[];
  }

  let { appearance = 'standard', behavior = 'multiple', value = $bindable([]) }: Props = $props();

  let element: HTMLElement;

  $effect(() => {
    update([...value]);
  });

  onMount(() => {
    const handler = (event: Event) => {
      const customEvent = event as CustomEvent;
      const itemId = customEvent.detail.id;

      if (behavior === 'single') {
        update(accordion.openIds.includes(itemId) ? [] : [itemId]);
        value = [itemId];
      } else {
        const set = new SvelteSet([...accordion.openIds]);
        if (set.has(itemId)) {
          set.delete(itemId);
        } else {
          set.add(itemId);
        }
        update([...set]);
        value = [...accordion.openIds];
      }
    };

    element.addEventListener('update:open', handler);

    return () => {
      element.removeEventListener('update:open', handler);
    };
  });
</script>

<div bind:this={element} class={['mc-accordion', `mc-accordion--${appearance}`]}>
  <slot />
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-accordion {
  border-radius: var(--border-radius-m, 0.5rem);
  background-color: var(--accordion-list-color-background-standard, #ffffff);
  color: var(--accordion-list-color-text-title, #000000);
  border: 1px solid var(--accordion-list-color-border, #cccccc);
  box-sizing: border-box;
  overflow: hidden;
}
@supports (interpolate-size: allow-keywords) {
  .mc-accordion {
    interpolate-size: allow-keywords;
  }
}
.mc-accordion__item {
  border-bottom: 1px solid var(--accordion-list-color-border, #cccccc);
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__item {
    transition: border-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__item {
    transition: none;
  }
}
.mc-accordion__item:last-child {
  border-bottom: none;
}
@supports (interpolate-size: allow-keywords) {
  .mc-accordion__item:is(details)::details-content {
    overflow: hidden;
    height: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .mc-accordion__item:is(details)::details-content {
      /* stylelint-disable-next-line no-invalid-position-declaration */
      transition: height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), content-visibility 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
      /* stylelint-disable-next-line no-invalid-position-declaration */
      transition-behavior: allow-discrete;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-accordion__item:is(details)::details-content {
      /* stylelint-disable-next-line no-invalid-position-declaration */
      transition: none;
    }
  }
  .mc-accordion__item:is(details)[open]::details-content {
    height: auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__item:is(details)[open] .mc-accordion__header::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__item:is(details)[open] .mc-accordion__header::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-accordion__item:is(details)[open] .mc-accordion__header::after {
  transform: translateY(-50%) rotateX(180deg);
}
.mc-accordion__item:is(details) .mc-accordion__header {
  list-style: none;
  cursor: pointer;
}
.mc-accordion__item:is(details) .mc-accordion__header::-webkit-details-marker {
  display: none;
}
.mc-accordion__item:is(details) .mc-accordion__header::marker {
  display: none;
}
.mc-accordion__header {
  position: relative;
  background-color: var(--accordion-list-color-background-standard, #ffffff);
}
.mc-accordion__header:is(summary) {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__header:is(summary)::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__header:is(summary)::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-accordion__header:is(summary)::after {
  transform: translateY(-50%) rotateX(0deg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: var(--accordion-list-color-text-title, #000000);
  z-index: 1;
}
.mc-accordion__header:is(summary):hover .mc-accordion__trigger::before {
  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-accordion__header:is(summary):hover::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-accordion__header:is(summary):active .mc-accordion__trigger::before {
  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-accordion__header:is(summary):active::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-accordion__header:is(summary):focus-visible {
  outline: none;
}
.mc-accordion__header:is(summary):focus-visible .mc-accordion__trigger::before {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-accordion__title {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  line-height: var(--line-height-m, 1.5);
  display: block;
  margin-block: 0;
  padding: 0;
  font-family: inherit;
  position: relative;
  z-index: 1;
}
.mc-accordion__title-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.mc-accordion__title-wrapper > * {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-accordion__subtitle {
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-light, 300);
  line-height: var(--line-height-m, 1.5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-block: 0;
  padding: 0;
  color: var(--accordion-list-color-text-subtitle, #666666);
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__trigger {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__trigger {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-accordion__trigger:focus-visible {
  outline: none;
}
.mc-accordion__trigger:focus-visible::before {
  box-shadow: inset 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-outer, #000000)), inset 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-mid, #ffffff));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-accordion__trigger:disabled, .mc-accordion__trigger[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.mc-accordion__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  margin-block: 0;
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  position: relative;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  vertical-align: baseline;
  appearance: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__trigger::before {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__trigger::before {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-accordion__trigger::before {
  content: "";
  position: absolute;
  inset: 0.25rem;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
  outline: 0 solid transparent;
  outline-offset: -0.125rem;
  border-radius: var(--border-radius-s, 0.25rem);
}
.mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger) {
  padding-right: 2.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)::after {
  transform: translateY(-50%) rotateX(0deg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: var(--accordion-list-color-text-title, #000000);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)[aria-expanded=true]::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)[aria-expanded=true]::after {
    /* stylelint-disable-next-line no-invalid-position-declaration */
    transition: none;
  }
}
.mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)[aria-expanded=true]::after {
  transform: translateY(-50%) rotateX(180deg);
}
.mc-accordion__header:is(summary) .mc-accordion__trigger {
  padding-right: 2.25rem;
}
.mc-accordion__trigger:is(button) {
  width: 100%;
}
.mc-accordion__trigger:hover::before {
  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-accordion__trigger:hover::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-accordion__trigger:active::before {
  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-accordion__trigger:active::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-accordion__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  fill: currentcolor;
}
.mc-accordion__content {
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-m, 1.5);
  background-color: var(--accordion-list-color-background-standard, #ffffff);
  overflow: hidden;
  padding: 0 0.75rem;
  max-height: 0;
}
.mc-accordion__content > :first-child {
  margin-top: 0;
}
.mc-accordion__content > :last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mc-accordion__content {
    transition: max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-accordion__content {
    transition: none;
  }
}
.mc-accordion__content[aria-hidden=false] {
  max-height: 9999vh;
  padding-top: 0.125rem;
  padding-bottom: 1rem;
}
.mc-accordion__item[open] .mc-accordion__content {
  max-height: 9999vh;
  padding-top: 0.125rem;
  padding-bottom: 1rem;
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .mc-accordion__content {
      /* stylelint-disable-next-line no-invalid-position-declaration */
      transition: height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), content-visibility 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
      /* stylelint-disable-next-line no-invalid-position-declaration */
      transition-behavior: allow-discrete;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-accordion__content {
      /* stylelint-disable-next-line no-invalid-position-declaration */
      transition: none;
    }
  }
  .mc-accordion__content {
    height: 0;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mc-accordion__content[aria-hidden=false] {
    height: auto;
    padding-top: 0.125rem;
    padding-bottom: 1rem;
  }
  .mc-accordion__item[open] .mc-accordion__content {
    height: auto;
    padding-top: 0.125rem;
    padding-bottom: 1rem;
  }
}
.mc-accordion--ghost {
  background-color: transparent;
  border: none;
}
.mc-accordion--ghost .mc-accordion__header, .mc-accordion--ghost .mc-accordion__content {
  background-color: var(--accordion-list-color-background-ghost, rgba(255, 255, 255, 0.01));
}
.mc-accordion--ghost .mc-accordion__trigger:hover::before, .mc-accordion--ghost .mc-accordion__trigger:active::before {
  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
}</style>
