import {
  getAnimation,
  setDefaultAnimation
} from "./chunk.N4LHE3QK.js";
import {
  waitForEvent
} from "./chunk.B4BZKR24.js";
import {
  LocalizeController
} from "./chunk.X3FE7OHE.js";
import {
  watch
} from "./chunk.X2OQMWGY.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  animateTo,
  shimKeyframesHeightAuto,
  stopAnimations
} from "./chunk.HQWAKJBV.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/accordion/accordion.ts
import { css } from "lit";
import { html } from "lit/static-html.js";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdAccordion = class extends SolidElement {
  constructor() {
    super(...arguments);
    // static styles: CSSResultGroup = styles;
    this.localize = new LocalizeController(this);
    this.open = false;
  }
  firstUpdated() {
    this.body.hidden = !this.open;
    this.body.style.height = this.open ? "auto" : "0";
    if (this.open) {
      this.accordion.open = true;
    }
    this.accordionObserver = new MutationObserver((changes) => {
      for (const change of changes) {
        if (change.type === "attributes" && change.attributeName === "open") {
          if (this.accordion.open) {
            this.show();
          } else {
            this.hide();
          }
        }
      }
    });
    this.accordionObserver.observe(this.accordion, { attributes: true });
  }
  disconnectedCallback() {
    var _a;
    super.disconnectedCallback();
    (_a = this.accordionObserver) == null ? void 0 : _a.disconnect();
  }
  handleSummaryClick(event) {
    event.preventDefault();
    if (this.open) {
      this.hide();
    } else {
      this.show();
    }
  }
  handleSummaryKeyDown(event) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      if (this.open) {
        this.hide();
      } else {
        this.show();
      }
    }
    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
      event.preventDefault();
      this.hide();
    }
    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
      event.preventDefault();
      this.show();
    }
  }
  async handleOpenChange() {
    if (this.open) {
      this.accordion.open = true;
      const slShow = this.emit("sd-show", { cancelable: true });
      if (slShow.defaultPrevented) {
        this.open = false;
        this.accordion.open = false;
        return;
      }
      await stopAnimations(this.body);
      this.body.hidden = false;
      const { keyframes, options } = getAnimation(this, "accordion.show", { dir: this.localize.dir() });
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.style.height = "auto";
      this.emit("sd-after-show");
    } else {
      const slHide = this.emit("sd-hide", { cancelable: true });
      if (slHide.defaultPrevented) {
        this.accordion.open = true;
        this.open = true;
        return;
      }
      await stopAnimations(this.body);
      const { keyframes, options } = getAnimation(this, "accordion.hide", { dir: this.localize.dir() });
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.hidden = true;
      this.body.style.height = "auto";
      this.accordion.open = false;
      this.emit("sd-after-hide");
    }
  }
  /** Shows the accordion. */
  async show() {
    if (this.open) {
      return void 0;
    }
    this.open = true;
    return waitForEvent(this, "sd-after-show");
  }
  /** Hides the accordion */
  async hide() {
    if (!this.open) {
      return void 0;
    }
    this.open = false;
    return waitForEvent(this, "sd-after-hide");
  }
  render() {
    return html`<details part="base"><summary part="header" id="header" class="${cx(
      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 relative group transition-colors ease-in-out duration-fast hover:sd-accordion--hover-color-background"
    )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
      !this.open && "opacity-0",
      "w-1 sd-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
    )}"></div><slot name="summary" part="summary" class="${cx(
      this.open ? "sd-accordion--open-color-text" : "sd-accordion-color-text",
      "flex flex-auto items-center text-left"
    )}">${this.summary}</slot><span part="summary-icon" class="${cx(
      "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
      this.open && "rotate-180"
    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="_internal" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="_internal" name="chevron-down"></sd-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
  }
};
SdAccordion.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-color:rgba(var(--sd-accordion-color-border,var(--sd-accordion-color-text)));border-block-width:var(--sd-accordion-border-width)}[part=summary-icon] sd-icon{color:rgb(var(--sd-accordion__chevron-color-text,var(--sd-accordion-color-icon-fill)))}`
];
__decorateClass([
  query('[part="base"]')
], SdAccordion.prototype, "accordion", 2);
__decorateClass([
  query('[part="header"]')
], SdAccordion.prototype, "header", 2);
__decorateClass([
  query('[part="content"]')
], SdAccordion.prototype, "body", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdAccordion.prototype, "open", 2);
__decorateClass([
  property({ reflect: true })
], SdAccordion.prototype, "summary", 2);
__decorateClass([
  watch("open", { waitUntilFirstUpdate: true })
], SdAccordion.prototype, "handleOpenChange", 1);
SdAccordion = __decorateClass([
  customElement("sd-accordion")
], SdAccordion);
setDefaultAnimation("accordion.show", {
  keyframes: [
    { height: "0", opacity: "0" },
    { height: "auto", opacity: "1" }
  ],
  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
});
setDefaultAnimation("accordion.hide", {
  keyframes: [
    { height: "auto", opacity: "1" },
    { height: "0", opacity: "0" }
  ],
  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
});

export {
  SdAccordion
};
