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

<script lang="ts">
  import { accordion } from '../accordionlist/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 icon - Use this slot to display an icon before the title.
   * @slot content - Use this slot to display custom content.
   * @event update:open {CustomEvent<boolean>} - Emits when the component state changes.
   */

  interface Props {
    /**
     * A unique identifier for the accordion item.
     * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
     * ensuring accessibility and tracking the open/closed state.
     * If no ID is provided, a unique one is generated automatically.
     */
    id: string;
    /**
     * The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content.
     */
    title: string;
    /**
     * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
     */
    subtitle?: string;
    /**
     * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
     */
    content?: string;
  }

  let { id, title, subtitle, content }: Props = $props();

  let element: HTMLElement;

  const open = $derived(accordion.openIds.includes(id));

  function toggleItem() {
    const event = new CustomEvent('update:open', {
      detail: { id, open },
      bubbles: true,
      composed: true,
    });
    element.dispatchEvent(event);
  }
</script>

<div bind:this={element} class="mc-accordion__item">
  <div class="mc-accordion__header">
    <h2 class="mc-accordion__title">
      <button
        id={`accordion-${id}`}
        class="mc-accordion__trigger"
        aria-controls={`content-${id}`}
        aria-expanded={open}
        onclick={() => toggleItem()}
      >
        {#if $$slots.icon}
          <span class="mc-accordion__icon">
            <slot name="icon" />
          </span>
        {/if}

        <div class="mc-accordion__title-wrapper">
          <span>{title}</span>

          {#if subtitle}
            <span class="mc-accordion__subtitle">
              {subtitle}
            </span>
          {/if}
        </div>
      </button>
    </h2>
  </div>
  <div
    id={`content-${id}`}
    class="mc-accordion__content"
    aria-hidden={!open}
    aria-labelledby={`accordion-${id}`}
    role="region"
  >
    <slot name="content">
      <p>{content || ''}</p>
    </slot>
  </div>
</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 {
      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);
      transition-behavior: allow-discrete;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-accordion__item:is(details)::details-content {
      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 {
    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 {
    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 {
    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 {
    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;
  -webkit-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;
  -webkit-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;
  -webkit-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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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;
  -webkit-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 {
    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 {
    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;
  -webkit-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;
  -webkit-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 {
      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);
      transition-behavior: allow-discrete;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-accordion__content {
      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>
