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/expandable/expandable.ts
import { css, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdExpandable = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.open = false;
    this.inverted = false;
    this.localize = new LocalizeController(this);
  }
  updateMaxHeight() {
    var _a;
    const scrollHeight = (_a = this.contentPreview) == null ? void 0 : _a.scrollHeight.toString();
    this.style.setProperty("--max-height-pixel", `${scrollHeight}px`);
    this.style.setProperty("--max-height", scrollHeight);
  }
  onToggleClick() {
    this.updateMaxHeight();
    this.open = !this.open;
  }
  async onOpenChange() {
    this.body.classList.add("transitioning");
    if (this.open) {
      this.emit("sd-show");
      await stopAnimations(this.body);
      const { keyframes, options } = getAnimation(this, "expandable.show", { dir: this.localize.dir() });
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.style.height = "auto";
      this.updateComplete.then(() => {
        this.emit("sd-after-show");
      });
    } else {
      this.emit("sd-hide");
      await stopAnimations(this.body);
      const { keyframes, options } = getAnimation(this, "expandable.hide", { dir: this.localize.dir() });
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.style.height = "auto";
      this.updateComplete.then(() => {
        this.emit("sd-after-hide");
      });
    }
    this.details.setAttribute("open", this.open.toString());
    this.body.classList.remove("transitioning");
  }
  /** Opens the expandable */
  async show() {
    if (this.open) {
      return void 0;
    }
    this.onToggleClick();
    return waitForEvent(this, "sd-after-show");
  }
  /** Closes the expandable */
  async hide() {
    if (!this.open) {
      return void 0;
    }
    this.onToggleClick();
    return waitForEvent(this, "sd-after-hide");
  }
  render() {
    return html`<div part="base" class="flex flex-col-reverse gap-4"><button part="toggle" class="${cx(
      "sd-interactive sd-interactive--reset",
      this.inverted && "sd-interactive--inverted",
      !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}"><span part="toggle-icon" class="${cx(
      "flex items-center mr-2 transition-transform duration-medium ease-in-out",
      this.open && "rotate-180"
    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="_internal" name="chevron-down" class="text-xl"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="_internal" name="chevron-down" class="text-xl"></sd-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
  }
  firstUpdated() {
    this.cloneContentToLightDOM();
    this.details.setAttribute("open", this.open.toString());
  }
  cloneContentToLightDOM() {
    const slot = document.createElement("div");
    slot.setAttribute("slot", "clone");
    const nodes = Array.from(this.childNodes);
    nodes.forEach((node) => {
      const clone = node.cloneNode(true);
      slot.appendChild(clone);
    });
    this.appendChild(slot);
  }
};
SdExpandable.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(
              --gradient-color-start,
              transparent,
              var(--gradient-color-end, rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))))
            ) 80%,var(--gradient-color-end, rgba(var(--sd-color-background-white, rgba(var(--sd-color-white))))) 100%;position:relative;display:inline-block;width:100%}.toggle::-moz-focus-inner{--tw-border-style:none;border-style:none;padding:calc(var(--sd-spacing-1) * 0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content,:host:has(.transitioning) .content{max-block-size:var(--max-height-pixel,1000vh)}.content::after{position:absolute;bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);display:block;width:100%;opacity:var(--sd-opacity-0);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));content:' ';height:var(--gradient-height);background:linear-gradient(180deg,var(--gradient));pointer-events:none}:host([inverted]){--gradient-color-start:transparent;--gradient-color-end:rgba(var(--sd-color-background-primary) / 1)}:host([inverted]) .content::after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,var(--gradient)))}:host(:not([open])) .content::after{opacity:var(--sd-opacity-100)}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`
];
__decorateClass([
  query(".content-preview")
], SdExpandable.prototype, "contentPreview", 2);
__decorateClass([
  query("details")
], SdExpandable.prototype, "details", 2);
__decorateClass([
  query('[part="content"]')
], SdExpandable.prototype, "body", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdExpandable.prototype, "open", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdExpandable.prototype, "inverted", 2);
__decorateClass([
  watch("open", { waitUntilFirstUpdate: true })
], SdExpandable.prototype, "onOpenChange", 1);
SdExpandable = __decorateClass([
  customElement("sd-expandable")
], SdExpandable);
setDefaultAnimation("expandable.show", {
  keyframes: [{ height: "var(--component-expandable-max-block-size, 90px)" }, { height: "auto" }],
  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
});
setDefaultAnimation("expandable.hide", {
  keyframes: [{ height: "auto" }, { height: "var(--component-expandable-max-block-size, 90px)" }],
  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
});

export {
  SdExpandable
};
