'use strict';

var index = require('./index-Bq84pjsN.js');
var utils = require('./utils-T4aQipUb.js');

const popoverCss = () => `@layer base {      dds-popover {     display: contents;   }       .dds-popover {     margin: 0;     position-area: end span-end;     position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;        } }  @layer states {      .dds-popover:popover-open {     display: block;   } }  @layer reset, base, states;`;

const Popover = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get host() { return index.getElement(this); }
    // MARK: Props
    loading = false;
    popoverId;
    // MARK: States
    // MARK: Events
    // MARK: Lifecycle
    // MARK: Render
    render() {
        const { popoverId } = this;
        const fallbackId = utils.useId();
        const id = popoverId || fallbackId;
        return (index.jsxs(index.Host, { children: [index.jsx("dds-button", { popovertarget: id, popovertargetaction: "toggle", children: "Toggle popover" }, '16cebe31c04db5c72f71b8c747117a031917dd60'), index.jsx("div", { class: "dds-popover", id: id, popover: "auto", children: index.jsx("slot", {}, 'c7972fb3ef8968958945b080ce8a0708968c6879') }, 'd77ddf49d7fc84fb849d6bc2982c118ba557854c')] }, 'd6a9e744284a6e5ad750cfb7b16a745eaedf46ba'));
    }
};
Popover.style = popoverCss();

exports.dds_popover = Popover;
