import { r as registerInstance, h, H as Host } from './core-34fac203.js';

let groupId = 0;
const Optgroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.optgroupId = `'anj-optgroup-${groupId++}`;
        /**
         * Should the labels be sticky
         */
        this.sticky = false;
    }
    onMouseDown(event) {
        event.preventDefault();
    }
    render() {
        return (h(Host, { role: "group" }, h("label", { id: this.optgroupId, class: "anj-optgroup-label", onMouseDown: ev => this.onMouseDown(ev) }, this.label), h("slot", null)));
    }
    static get style() { return "anj-optgroup {\n  display: block;\n}\nanj-optgroup[sticky] .anj-optgroup-label {\n  background-color: var(--anj-light);\n  border-bottom: 1px solid var(--anj-border);\n  border-collapse: separate;\n  position: -webkit-sticky;\n  position: sticky;\n  top: 0;\n}\nanj-optgroup .anj-optgroup-label {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  background-color: transparent;\n  border: 0;\n  color: var(--anj-text);\n  clear: both;\n  cursor: pointer;\n  font-weight: 400;\n  padding: 0.25rem 0.75rem;\n  text-align: inherit;\n  white-space: nowrap;\n  width: 100%;\n  color: var(--anj-neutral-dark);\n  cursor: default;\n  margin-bottom: 0;\n}\nanj-optgroup .anj-optgroup-label, anj-optgroup .anj-optgroup-label::before, anj-optgroup .anj-optgroup-label::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\nanj-optgroup .anj-optgroup-label:focus, anj-optgroup .anj-optgroup-label:active, anj-optgroup .anj-optgroup-label *:focus, anj-optgroup .anj-optgroup-label *:active {\n  outline: none;\n}\nanj-optgroup .anj-optgroup-label:active, anj-optgroup .anj-optgroup-label:hover, anj-optgroup .anj-optgroup-label:focus {\n  background-color: var(--anj-background);\n  color: var(--anj-text);\n  text-decoration: none;\n  outline: none;\n}\nanj-optgroup .anj-optgroup-label:hover, anj-optgroup .anj-optgroup-label:focus {\n  background-color: var(--anj-light);\n  color: var(--anj-neutral-dark);\n}\nanj-optgroup anj-option {\n  padding-left: 1.5rem;\n}"; }
};

export { Optgroup as anj_optgroup };
