import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as downSmall } from './index2.js';
import { d as defineCustomElement$2 } from './pds-icon2.js';

const pdsAccordionCss = ":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open]{background-color:var(--color-content-background)}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}";
const PdsAccordionStyle0 = pdsAccordionCss;

const PdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PdsAccordion extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.handleToggle = () => {
            this.isOpen = this.detailsEl.open;
        };
        this.getOpenAttribute = () => {
            if (this.isOpen !== false) {
                return { open: true };
            }
            return '';
        };
        this.componentId = undefined;
        this.isOpen = false;
    }
    handleOpenState(newValue) {
        this.isOpen = newValue;
    }
    componentDidLoad() {
        this.detailsEl.addEventListener('toggle', this.handleToggle);
    }
    render() {
        return (h(Host, { key: '228d08704d0e735ed515308df91a7880c2c450ed', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '442e319353f611a5f3d3de767de8dc0f86d2540e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'c3b11619644caee3ba90854e608072436ae0ac34' }, h("slot", { key: 'fb9b2fa1c0e6a8ddce8e9575b31da5c248f075d5', name: "label" }, "Details"), h("pds-icon", { key: '3435405fa293d47aa240a6bfa947fe0707c1154a', icon: downSmall })), h("div", { key: 'a35cb679b545fbbd408a4217764b66eabd495c6e', class: "pds-accordion__body" }, h("slot", { key: 'fa6efbc3624c1c1152eabca17201c24801eef3ee' })))));
    }
    static get watchers() { return {
        "isOpen": ["handleOpenState"]
    }; }
    static get style() { return PdsAccordionStyle0; }
}, [1, "pds-accordion", {
        "componentId": [1, "component-id"],
        "isOpen": [1540, "open"]
    }, undefined, {
        "isOpen": ["handleOpenState"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-accordion", "pds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-accordion":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsAccordion$1);
            }
            break;
        case "pds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PdsAccordion = PdsAccordion$1;
const defineCustomElement = defineCustomElement$1;

export { PdsAccordion, defineCustomElement };

//# sourceMappingURL=pds-accordion.js.map