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

const verdocsCheckboxCss = "@charset \"UTF-8\";verdocs-checkbox{line-height:18px;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", 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+*::before{content:\"✓\";color:white;text-align:center;background:var(--verdocs-checkbox-color, #55bc81);border-color:var(--verdocs-checkbox-color, #55bc81)}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:var(--verdocs-checkbox-color, #55bc81);border-color:var(--verdocs-checkbox-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(registerHost) {
        super();
        if (registerHost !== false) {
            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: 'd2892c518c698165ff53b9c4e6adbc09362dbe05', class: { disabled: this.disabled, [this.theme]: true, [this.size]: true } }, h("label", { key: '41117ea43777103f6710651fcc87ef5d6f59f9c0' }, h("input", { key: 'd3f2a7ffdb472f2ae440ffe5c9c3b7146c576adf', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: 'fa1500ebe3e299aebdecdb8d236ac929a8dc24b4' }, this.label))));
    }
    static get style() { return verdocsCheckboxCss; }
}, [256, "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-BvV9rOTP.js.map

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