import { r as t, c as d, h as e, H as n, g as s } from "./index.e6beb8d9.js";
import { c } from "./index-orsBiyT_.fc4357c3.js";
import { v as a } from "./v4-DD3477fe.2624487e.js";
import "react";
import "react-dom";
const r = () => ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}", l = class {
  constructor(i) {
    t(this, i), this.expansionChange = d(this, "expansionChange", 7), this.headingLevel = 2, this.itemId = a(), this.expanded = !1, this.headingId = `${a()}-heading`, this.onHeadingClick = () => {
      this.toggle();
    };
  }
  componentWillLoad() {
    if (this.accordion = this.el.closest("swirl-accordion"), this.expanded = this.initiallyOpen && !this.disabled || !1, !Boolean(this.accordion))
      throw new Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.");
  }
  async collapse() {
    !this.expanded || this.disabled || (this.expanded = !1, this.expansionChange.emit(this.expanded));
  }
  async expand() {
    this.expanded || this.disabled || (this.expanded = !0, this.expansionChange.emit(this.expanded));
  }
  async toggle() {
    this.expanded ? this.collapse() : this.expand();
  }
  render() {
    const i = `h${this.headingLevel}`, o = c("accordion-item", {
      "accordion-item--expanded": this.expanded
    });
    return e(n, { key: "c7dbf8610a8061663e807d6448d816b6c5c04c2c" }, e("div", { key: "0c181fb5a7d324d41fdf509d3995cf659004797a", class: o }, e(i, { key: "eb4690b426695b295c34df728f9263cbd6426e74", class: "accordion-item__heading" }, e("button", { key: "c6c513a6f769c5c9883601e08b87256e5ed8f643", "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, e("slot", { key: "f2b6ef8fd42c27bacee97bc1ce9ef2e50b8133cd", name: "media" }), e("span", { key: "3e80e812a5aba76b6f43b7a65193efc6ecc07044", class: "accordion-item__toggle-text" }, this.heading, this.description && e("swirl-text", { key: "df59a0989f9578d3f1f29240c2031d8d6e9add96", as: "span", color: "subdued", size: "sm" }, this.description)), e("slot", { key: "3cddf0c277e4a658845adfa56c5e24fdf954987e", name: "trailing" }), e("span", { key: "e7f05f9c01318bd187724d3a055dd518a5b2869a", class: "accordion-item__icon" }, !this.expanded && e("swirl-icon", { key: "4935c3703e306b07636550ceacb74a466a203edc", glyph: "chevron-right", size: 20 }), this.expanded && e("swirl-icon", { key: "e5152cbcb2f891a277c15ad80c05b590b87fa401", glyph: "expand-more", size: 20 })))), e("div", { key: "ac8d64944ec2623630eabe08dade9f482e9e342b", "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, e("slot", { key: "139c8943a079c8aa25df74541c37d70d35694cd8" }))));
  }
  get el() {
    return s(this);
  }
};
l.style = r();
export {
  l as swirl_accordion_item
};
