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

const helpCss = () => `@charset "UTF-8";limel-popover{display:flex;--popover-surface-width:min(calc(100vw - 4rem), 22rem)}button[slot=trigger]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button[slot=trigger]:hover,button[slot=trigger]:focus,button[slot=trigger]:focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:hover,button[slot=trigger]:focus-visible{transform:translate3d(0, 0.01rem, 0);color:rgb(var(--color-sky-dark));background-color:var(--lime-elevated-surface-background-color)}button[slot=trigger]:hover{box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:hover,button[slot=trigger]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:focus{outline:none}button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]{box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgb(var(--color-sky-default));border-radius:50%;box-shadow:0 0 0 1px rgb(var(--color-sky-lighter), 0.7);width:0.875rem;height:0.875rem;font-size:0.75rem}button[slot=trigger].is-open{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default));box-shadow:var(--button-shadow-inset)}`;

const HelpComponent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * {@inheritdoc Help.trigger}
         */
        this.trigger = '?';
        /**
         * {@inheritdoc Help.openDirection}
         */
        this.openDirection = 'top-start';
        this.isOpen = false;
        this.openPopover = (event) => {
            event.stopPropagation();
            this.isOpen = true;
        };
        this.onPopoverClose = (event) => {
            event.stopPropagation();
            this.isOpen = false;
        };
    }
    render() {
        return (h(Host, { key: 'df993a4485c405a756eb69ccbee5ab8ec616a6d3' }, h("limel-popover", { key: 'f4aab0006a23c83a1609f1c8e1b97f5d6f69b4b4', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: 'a88ae28570d62668a4b34d3e334816bc665dc33e', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                'is-open': this.isOpen,
            } }, this.trigger), h("limel-help-content", { key: '32f146b00380d0de6529a7b6a4ab0bcb82b067d4', value: this.value, readMoreLink: this.readMoreLink }))));
    }
};
HelpComponent.style = helpCss();

export { HelpComponent as limel_help };
