import { p as proxyCustomElement, H, h, d as Host } from './p-AiOs8RvA.js';

const verdocsCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}verdocs-checkbox.small label>input[type=checkbox]+*::before{width:16px;height:16px;line-height:16px}";

const VerdocsCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsCheckbox extends H {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Whether the radio button is currently selected.
         */
        this.checked = false;
        /**
         * HTML form field name for the input.
         */
        this.name = '';
        /**
         * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be
         * repositioned with CSS.
         */
        this.label = '';
        /**
         * Value to track with the input. Value is not used internally by this component but is sometimes useful to set
         * because it can be retrieved in event handlers via e.target.value. This can be used to identify which
         * checkbox was clicked in a checkbox group.
         */
        this.value = '';
        /**
         * Style of checkbox to render. Use 'dark' when rendering on a dark background.
         */
        this.theme = 'light';
        /**
         * Size of checkbox to render.
         */
        this.size = 'normal';
        /**
         * If set, the button will still be displayed but not selectable.
         */
        this.disabled = false;
    }
    render() {
        return (h(Host, { key: '28188f0522b460d6aa8744cc7d5c0498a53d4955', class: { disabled: this.disabled, [this.theme]: true, [this.size]: true } }, h("label", { key: '8a7d1c1480b5d102aa90f213f249fef9b69522be' }, h("input", { key: '87e8e03b06658349e583915205510c523d9bfec1', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: '307ccba611b5b935a5f40eca326e0176b939c1ed' }, this.label))));
    }
    static get style() { return verdocsCheckboxCss; }
}, [0, "verdocs-checkbox", {
        "checked": [4],
        "name": [1],
        "label": [1],
        "value": [1],
        "theme": [1],
        "size": [1],
        "disabled": [4]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-checkbox"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-checkbox":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsCheckbox);
            }
            break;
    } });
}

export { VerdocsCheckbox as V, defineCustomElement as d };
//# sourceMappingURL=p-B4xcxu5g.js.map

//# sourceMappingURL=p-B4xcxu5g.js.map