import { r as registerInstance, h, H as Host, a as getElement } from './index-B2f84Zog.js';

const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}";

const PdsTabpanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Keeps track of the tabpanel selected state, this property is passed by parent component
         */
        /** @internal */
        this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
    }
    render() {
        return (h(Host, { key: '6ba83ea71c899d61f67884780731591a05aa1894', slot: "tabpanels" }, h("div", { key: 'abaa610f7a68a3977303e08f1221976ae2840272', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'b80ecc1380f424d545b31843b53de1b2854e9f28' }))));
    }
    get el() { return getElement(this); }
};
PdsTabpanel.style = pdsTabpanelCss;

export { PdsTabpanel as pds_tabpanel };
//# sourceMappingURL=pds-tabpanel.entry.js.map
