import { r as d, c as t, h as e, H as n, g as s } from "./index.61732cef.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) {
    d(this, i), this.expansionChange = t(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: "9eb402da9e5382bc658a3bf2bcc6a4e6fc83eb15" }, e("div", { key: "baf87dc91914002c5c26dd360a11520b0059638f", class: o }, e(i, { key: "a80584ad5c65a7f6a1ddbc504c456dedd4d8ae50", class: "accordion-item__heading" }, e("button", { key: "2a99df8d96f34a7b7e0f9c7838e052f79881f5da", "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: "f81381e388c95ba7ab3fddaf9622cf8036289dfd", name: "media" }), e("span", { key: "bc855d5d5fc262c67478d00e5b4979f9f573c465", class: "accordion-item__toggle-text" }, this.heading, this.description && e("swirl-text", { key: "e84613303533dbc57b2e8fbf78ae0b8682631fd7", as: "span", color: "subdued", size: "sm" }, this.description)), e("slot", { key: "c441d88ef4e97bb0a0be9b6b79f3c2a4976bc82f", name: "trailing" }), e("span", { key: "1fd5da1543bd83149408f79521aec30d8cfea3e8", class: "accordion-item__icon" }, !this.expanded && e("swirl-icon", { key: "05616a2e22f5f9154654bac3e015bb9ad968bd79", glyph: "chevron-right", size: 20 }), this.expanded && e("swirl-icon", { key: "eb1e3be7c7ef2153c195d87d9170d76b56627f24", glyph: "expand-more", size: 20 })))), e("div", { key: "ea15a0c40f8b32194b1acd5f1c6be4db8fbf1f82", "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, e("slot", { key: "b85f37fcc199ba95c68f049bc15470dc224f5c2b" }))));
  }
  get el() {
    return s(this);
  }
};
l.style = r();
export {
  l as swirl_accordion_item
};
