import { r as registerInstance, h, d as getElement, H as Host } from './index-24b18689.js';
import { D as DownArrow } from './icons-212531e8.js';

const collapsibleCss = "collapsible{}";

const SparkleMenuCollapsible = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.isOpen = true; // default open
  }
  hostData() {
    return {
      class: 'sparkle-menu-collapsible--status-open',
      role: 'button',
      tabindex: '0',
      'aria-label': 'Collapsible Menu'
    };
  }
  toggle() {
    this.isOpen = !this.isOpen;
    removeClassThatStartWith(this.el, 'sparkle-menu-collapsible--status-');
    this.el.classList.add(`sparkle-menu-collapsible--status-${this.isOpen ? 'open' : 'closed'}`);
  }
  __stencil_render() {
    return [
      h("a", { onClick: () => this.toggle(), class: `sparkle-menu-collapsible__title` }, this.heading, h(DownArrow, null)),
      h("div", { class: "sparkle-menu-collapsible__contents" }, h("slot", null))
    ];
  }
  get el() { return getElement(this); }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
const removeClassThatStartWith = (el, classStart) => {
  el.classList.forEach(className => {
    if (className.startsWith(classStart)) {
      el.classList.remove(className);
    }
  });
};
SparkleMenuCollapsible.style = collapsibleCss;

export { SparkleMenuCollapsible as sparkle_menu_collapsible };
