component Collapse {
  outputs {
    toggle(payload: { index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] })
    open(payload: { index: number; item: string | number | boolean | null | object })
    close(payload: { index: number; item: string | number | boolean | null | object })
  }

  props {
size: string = "default"
    color: string = "primary"
    items: unknown[] = []
    multiple: boolean = false
    mode: string = "panel"
    initialOpenIndexes: unknown[] = []
    ariaLabel: string = "Collapsible content"
    class: string = ""
  }

  state openIndexes = initialOpenIndexes

  functions {
    shared function isOpen(index) {
      return openIndexes.includes(index)
    }

    client function toggleItem(index, item, opening) {
      if (item.disabled) {
        return
      }
      opening = !isOpen(index)
      if (opening) {
        if (multiple) {
          openIndexes = openIndexes.concat(index)
        } else {
          openIndexes = [index]
        }
        output.open({ index: index, item: item })
      } else {
        openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
        output.close({ index: index, item: item })
      }
      output.toggle({
        index: index,
        item: item,
        open: opening,
        openIndexes: openIndexes
      })
    }
  }

  view {
    <section
      {...attrs}
      class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--collapse {class}"
      data-mode="{mode}"
      aria-label="{ariaLabel}"
     data-wrn-owner="Collapse" data-wrn-part="root" data-wrn-component="Collapse" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
      {#each items as item, index}
        <article class="wrn-next__collapse-item" data-open="{isOpen(index)}" data-wrn-owner="Collapse" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
          {#if mode === "inline" && item.preview}
            <p class="wrn-next__collapse-preview" data-wrn-owner="Collapse" data-wrn-part="preview" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.preview}</p>
          {/if}

          <button
            class="wrn-next__collapse-trigger"
            type="button"
            aria-expanded="{isOpen(index) ? 'true' : 'false'}"
            aria-controls="{item.id || 'collapse-panel-' + index}"
            disabled="{item.disabled}"
            @click="toggleItem(index, item)"
           data-wrn-owner="Collapse" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
            <span>{isOpen(index) && (mode === "inline" || item.closeLabel) ? (item.closeLabel || "Read less") : item.label}</span>
            <span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true" data-wrn-owner="Collapse" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
          </button>

          <div
            id="{item.id || 'collapse-panel-' + index}"
            class="wrn-next__collapse-panel"
            data-open="{isOpen(index)}"
            aria-hidden="{isOpen(index) ? 'false' : 'true'}"
            inert="{!isOpen(index)}"
           data-wrn-owner="Collapse" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
            <div class="wrn-next__collapse-content" data-wrn-owner="Collapse" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
              {#if item.title}<h4 data-wrn-owner="Collapse" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.title}</h4>{/if}
              {#if item.content}<p>{item.content}</p>{/if}
              {#if item.links && item.links.length}
                <nav aria-label="Related links">
                  {#each item.links as link}<a href="{link.href || '#'}" data-wrn-owner="Collapse" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{link.label}</a>{/each}
                </nav>
              {/if}
            </div>
          </div>
        </article>
      {/each}
      <slot />
    </section>
  }

  style {
    .wrn-next--collapse.wrn-component--size-sm {
      font-size: 0.875rem;
    }
    .wrn-next--collapse.wrn-component--size-lg {
      font-size: 1.0625rem;
    }

    .wrn-next--collapse {
      --wrn-collapse-color: var(--wrn-component-color, var(--wrn-color-primary));
      display: grid;
      width: 100%;
      min-width: 0;
      gap: 0.625rem;
      color: var(--wrn-color-text);
    }

    .wrn-next__collapse-item {
      display: grid;
      min-width: 0;
      justify-items: stretch;
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius);
      background: var(--wrn-color-surface);
      box-shadow: var(--wrn-shadow-1);
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .wrn-next__collapse-trigger {
      display: flex;
      width: 100%;
      min-height: 3rem;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--wrn-color-text);
      font: inherit;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: -0.008em;
      text-align: left;
      cursor: pointer;
      transition: background-color 120ms ease;
    }

    .wrn-next__collapse-trigger:focus-visible {
      outline: 2px solid var(--wrn-collapse-color);
      outline-offset: -2px;
    }

    .wrn-next__collapse-trigger:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .wrn-next__collapse-chevron {
      flex: none;
      width: 1rem;
      height: 1rem;
      color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
      transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
    }

    .wrn-next__collapse-item[data-open="true"] .wrn-next__collapse-chevron {
      transform: rotate(180deg);
    }

    .wrn-next__collapse-panel {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      margin-top: 0;
      opacity: 0;
      transition: max-height 320ms var(--wrn-ease-emphasized), opacity 200ms var(--wrn-ease-standard);
    }

    .wrn-next__collapse-panel[data-open="true"] {
      max-height: 40rem;
      margin-top: 0;
      opacity: 1;
    }

    .wrn-next__collapse-content {
      display: grid;
      overflow: hidden;
      min-height: 0;
      gap: 0.5rem;
      padding: 0.875rem 1rem 1rem;
      border: 0;
      border-top: 1px solid var(--wrn-color-border);
      border-radius: 0;
      background: var(--wrn-color-surface-soft, transparent);
      box-shadow: none;
      color: var(--wrn-color-text-muted);
      font-size: 0.875rem;
      line-height: 1.6;
    }

    .wrn-next__collapse-content h4,
    .wrn-next__collapse-content p,
    .wrn-next__collapse-preview {
      margin: 0;
    }

    .wrn-next__collapse-content nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .wrn-next__collapse-content a {
      color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
      font-weight: 600;
      text-decoration: none;
    }

    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-item {
      overflow: visible;
      justify-items: start;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-preview {
      order: 1;
      margin-bottom: 0.5rem;
    }

    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-panel {
      order: 2;
      width: 100%;
    }

    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-panel[data-open="true"] {
      margin-top: 0;
    }

    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger {
      order: 3;
      width: fit-content;
      margin-top: 0.5rem;
      min-height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
      font-size: 0.875rem;
    }

    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-content {
      padding: 0;
      border: 0;
      background: transparent;
    }

    @media (prefers-reduced-motion: reduce) {
    .wrn-next__collapse-chevron,
      .wrn-next__collapse-panel {
        transition: none;
      }
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
          line-height: 1.6;
        }
  
    .wrn-next__collapse-trigger:hover:not(:disabled) {
      background: var(--wrn-color-surface-soft);
    }
  
    .wrn-next__collapse-item[data-open="true"] {
      border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
      box-shadow: var(--wrn-shadow-2);
    }
  
    .wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger:hover:not(:disabled) {
      background: transparent;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  
    .wrn-next__collapse-content h4 {
      color: var(--wrn-color-text);
      font-size: 0.875rem;
      font-weight: 620;
    }
  }
}