components/accordion.js

class CustomAccordion extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    max-width: 800px;
                    margin: 0 auto;
                }
                .accordion-item {
                    margin-bottom: 1rem;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    background-color: white;
                }
                .accordion-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 1rem 1.5rem;
                    cursor: pointer;
                    font-weight: 600;
                    color: #111827;
                    transition: background-color 0.3s;
                }
                .accordion-header:hover {
                    background-color: #f9fafb;
                }
                .accordion-header i {
                    transition: transform 0.3s;
                }
                .accordion-content {
                    padding: 0 1.5rem;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease, padding 0.3s ease;
                    color: #6b7280;
                }
                .accordion-item.active .accordion-content {
                    max-height: 300px;
                    padding: 0 1.5rem 1.5rem;
                }
                .accordion-item.active .accordion-header i {
                    transform: rotate(180deg);
                }
            </style>
            <div class="accordion">
                <div class="accordion-item">
                    <div class="accordion-header">
                        <span>What components are available?</span>
                        <i data-feather="chevron-down"></i>
                    </div>
                    <div class="accordion-content">
                        <p>We offer a wide range of components including cards, navigation bars, forms, accordions, testimonials, and more. Each component is fully responsive and customizable.</p>
                    </div>
                </div>
                <div class="accordion-item">
                    <div class="accordion-header">
                        <span>How do I use these components?</span>
                        <i data-feather="chevron-down"></i>
                    </div>
                    <div class="accordion-content">
                        <p>Simply include the component script in your HTML file and use the custom element tag. All components are documented with usage examples.</p>
                    </div>
                </div>
                <div class="accordion-item">
                    <div class="accordion-header">
                        <span>Are these components free to use?</span>
                        <i data-feather="chevron-down"></i>
                    </div>
                    <div class="accordion-content">
                        <p>Yes! All components are MIT licensed and free to use in both personal and commercial projects. Attribution is appreciated but not required.</p>
                    </div>
                </div>
            </div>
        `;

        this.shadowRoot.querySelectorAll('.accordion-header').forEach(header => {
            header.addEventListener('click', () => {
                const item = header.parentElement;
                item.classList.toggle('active');
            });
        });
    }
}
customElements.define('custom-accordion', CustomAccordion);