Vue.component('accordion-header', {
    inject: ['accordionItemState'],

    template: `
        <h2 class="accordion-header">
            <button @click="accordionItemState.expanded = !accordionItemState.expanded">
                {{ accordionItemState.expanded ? '▼' : '►' }}
                <slot></slot>
            </button>
        </h2>
    `
})