import {
  SdAccordion
} from "./chunk.UI7JLJDL.js";
import {
  setDefaultAnimation
} from "./chunk.N4LHE3QK.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/quickfact/quickfact.ts
import { css } from "lit";
import { html, literal } from "lit/static-html.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { property } from "lit/decorators.js";
import cx from "classix";
var SdQuickfact = class extends SdAccordion {
  constructor() {
    super(...arguments);
    this.expandable = false;
  }
  render() {
    const base = this.expandable ? literal`details` : literal`div`;
    const header = this.expandable ? literal`summary` : literal`div`;
    return html`<${base} part="base" class="sm:p-6"><${header} part="header" id="header" class="${cx(
      "text-base font-bold items-center focus-visible:focus-outline text-primary relative group flex flex-row hover:bg-transparent gap-3 pb-3 pt-0 px-0 sm:flex-col sm:gap-4 sm:pb-8",
      this.expandable && "cursor-pointer select-none"
    )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
      "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
      this.expandable ? "sd-quickfact--expandable-color-text" : "text-black cursor-default"
    )}">${this.summary}</slot><span part="summary-icon" class="${cx(
      "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-transform ease-in-out duration-medium text-xl sm:mt-2",
      this.open && "rotate-180",
      !this.expandable && "hidden"
    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
  }
};
SdQuickfact.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=summary-icon]{color:rgba(var(--sd-color-icon-fill-primary,rgba(var(--sd-color-primary))))}[part=icon]{font-size:var(--sd-spacing-12,3rem);color:rgba(var(--sd-color-icon-fill-primary,rgba(var(--sd-color-primary))))}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
];
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdQuickfact.prototype, "expandable", 2);
SdQuickfact = __decorateClass([
  customElement("sd-quickfact")
], SdQuickfact);
setDefaultAnimation("quickfact.show", {
  keyframes: [{ height: "0" }, { height: "auto" }],
  options: { duration: "var(--sd-duration-medium, 300ms)", easing: "ease-in-out" }
});
setDefaultAnimation("quickfact.hide", {
  keyframes: [{ height: "auto" }, { height: "0" }],
  options: { duration: "var(--sd-duration-medium, 300ms)", easing: "ease-in-out" }
});

export {
  SdQuickfact
};
