import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { g as genId } from './index2.js';

const bsAccordionCss = ".bs-accordion,bs-accordion{--accordion-link-color:var(--bs-purple-400);--accordion-link-outline-color:var(--bs-blue-base);--accordion-outline-color:transparent;--accordion-padding-inline:0;--accordion-text-size:var(--bs-text-sm);border-block:1px solid var(--bs-border-base);display:block}@media (min-width: 957px){.bs-accordion,bs-accordion{--accordion-padding-inline:var(--bs-space-2);--accordion-text-size:var(--bs-text-base)}}.bs-accordion :where(header button),bs-accordion :where(header button){align-items:center;background-color:var(--bs-bg-base);border:0px solid transparent;border-radius:0.25rem;color:var(--bs-ink-base);cursor:pointer;display:grid;font-size:var(--accordion-text-size);font-weight:var(--bs-font-normal);grid-template-columns:minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);grid-template-areas:\"start main end\";line-height:1.5;outline:2px solid var(--accordion-outline-color);padding-block:var(--bs-space-f-2);padding-inline:var(--accordion-padding-inline);width:100%}.bs-accordion :where(header button:focus-visible),bs-accordion :where(header button:focus-visible){--accordion-outline-color:var(--bs-blue-base)}.bs-accordion :where(header button)>*,bs-accordion :where(header button)>*{font-size:inherit;font-weight:inherit;line-height:inherit}.bs-accordion :where(header button) :where([data-position]),bs-accordion :where(header button) :where([data-position]){width:var(--accordion-text-size)}.bs-accordion :where(header button)>:where([data-position=\"start\"]),bs-accordion :where(header button)>:where([data-position=\"start\"]){grid-area:start;margin-right:var(--bs-space-2)}.bs-accordion :where(header button)>:where([data-position=\"end\"]),bs-accordion :where(header button)>:where([data-position=\"end\"]){grid-area:end;transform:rotate(0);transition:transform 250ms ease-out}.bs-accordion :where(header[data-open]:not([data-open=\"false\"])) :where([data-position=\"end\"]),bs-accordion :where(header[data-open]:not([data-open=\"false\"])) :where([data-position=\"end\"]){transform:rotate(180deg)}.bs-accordion :where(header button)>:where(span),bs-accordion :where(header button)>:where(span){grid-area:main;margin-right:var(--bs-space-2);text-align:left}.bs-accordion :where(header button)>:where(span),bs-accordion :where(header button)>:where(span){vertical-align:middle}@media (min-width: 957px){.bs-accordion :where(header button)>:where(span),bs-accordion :where(header button)>:where(span){margin-right:var(--bs-space-3)}}.bs-accordion :where(.bs-accordion-content),bs-accordion :where(.bs-accordion-content){display:grid;font-size:var(--accordion-text-size);grid-template-rows:0fr;overflow:hidden;padding-inline:var(--accordion-padding-inline);transition:grid-template-rows 250ms ease-out}.bs-accordion :where(.bs-accordion-content)>:where(:first-child),bs-accordion :where(.bs-accordion-content)>:where(:first-child){overflow:hidden}.bs-accordion :where(.bs-accordion-content[data-open]:not([data-open=\"false\"])),bs-accordion :where(.bs-accordion-content[data-open]:not([data-open=\"false\"])){grid-template-rows:1fr;padding-block-end:var(--bs-space-f-2)}:where(.bs-accordion[data-stacked])+.bs-accordion:where([data-stacked]),:where(.bs-accordion[data-stacked])+bs-accordion:where([data-stacked]){border-block-start-color:transparent}:where(*){margin-block:0px;margin-inline:0px;font-family:Roobert}bs-accordion{display:block}";

const BsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class BsAccordion extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.toggled = createEvent(this, "toggled", 7);
    this.controlled = false;
    this.icon = undefined;
    this.headerText = undefined;
    this.headingLevel = undefined;
    this.openItem = false;
    this.openItemId = undefined;
    this.stacked = false;
    this.isOpen = false;
  }
  componentWillLoad() {
    if (!this.hostEl.id)
      this.hostEl.id = genId();
    this.contentId = this.hostEl.id + '-content';
    this.headingId = this.hostEl.id + '-title';
  }
  handleToggled() {
    this.toggled.emit(this.hostEl.id);
    if (!this.controlled)
      this.isOpen = !this.isOpen;
  }
  get openItemMatch() {
    return this.openItemId === this.hostEl.id || this.openItem === true;
  }
  get showContent() {
    return this.controlled ? this.openItemMatch : this.isOpen;
  }
  // avoid unnecessary re-renders
  componentShouldUpdate(newValue, oldValue, propName) {
    if (newValue === oldValue)
      return false;
    if (propName === 'openItemId') {
      return newValue === this.hostEl.id || oldValue === this.hostEl.id;
    }
  }
  render() {
    const IconTag = this.icon ? `bs-icon-${this.icon}` : null;
    return (h(Host, { class: "bs-accordion", "data-stacked": this.stacked }, h("header", { part: "header", "data-open": this.showContent }, h("button", { "aria-controls": this.contentId, "aria-expanded": this.showContent, type: "button", onClick: () => this.handleToggled() }, IconTag && h(IconTag, { "data-position": "start" }), h("span", { id: this.headingId, "aria-level": this.headingLevel, role: "heading" }, this.headerText), h("bs-icon-caret-down", { "data-position": "end" }))), h("div", { "aria-labelledby": this.headingId, class: "bs-accordion-content", "data-open": this.showContent, id: this.contentId, part: "content", role: "region" }, h("div", { "data-slot": true }, h("slot", null)))));
  }
  get hostEl() { return this; }
  static get style() { return bsAccordionCss; }
}, [4, "bs-accordion", {
    "controlled": [4],
    "icon": [1],
    "headerText": [1, "header-text"],
    "headingLevel": [2, "heading-level"],
    "openItem": [4, "open-item"],
    "openItemId": [1, "open-item-id"],
    "stacked": [4],
    "isOpen": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-accordion"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-accordion":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsAccordion$1);
      }
      break;
  } });
}

const BsAccordion = BsAccordion$1;
const defineCustomElement = defineCustomElement$1;

export { BsAccordion, defineCustomElement };

//# sourceMappingURL=bs-accordion.js.map