\n ${this.label || this.icon ? m`\n
this.mouseLeave = !0}\n >\n ${this.label}\n
\n ` : null}\n ${this.tooltipTitle || this.tooltipText ? t : null}\n ${e ? m`\n
\n \n
\n ` : null}\n
\n \n \n
\n `;\n }\n}, Ht.styles = C`\n :host {\n --bim-label--c: var(--bim-ui_bg-contrast-100);\n display: block;\n flex: 1;\n pointer-events: none;\n }\n\n :host(:not([disabled]):hover) {\n cursor: pointer;\n }\n\n bim-label {\n pointer-events: none;\n }\n\n .parent {\n --bim-label--fz: var(--bim-ui_size-xs);\n --bim-icon--c: var(--bim-label--c);\n display: flex;\n height: 100%;\n user-select: none;\n row-gap: 0.125rem;\n column-gap: 0.125rem;\n }\n\n .button,\n .children {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: auto;\n min-height: var(--bim-ui_size-5xl);\n min-width: var(--bim-ui_size-5xl);\n background-color: var(--bim-button--bgc, var(--bim-ui_bg-contrast-20));\n outline: var(--bim-button--olw) solid var(--bim-button--olc);\n }\n\n .button {\n flex-grow: 1;\n }\n\n :host(:not([label-hidden])[label]) .button {\n justify-content: var(--bim-button--jc, center);\n }\n\n :host(:hover) .button,\n :host(:hover) .children {\n --bim-label--c: var(--bim-ui_main-contrast);\n --bim-icon--c: var(--bim-ui_main-contrast);\n fill: white;\n background-color: var(--bim-ui_main-base);\n }\n\n :host(:not([label]):not([icon])) .children {\n flex: 1;\n }\n\n :host([active]) .button {\n --bim-label--c: var(--bim-ui_main-contrast);\n --bim-icon--c: var(--bim-ui_main-contrast);\n background-color: var(--bim-ui_main-base);\n }\n\n :host([vertical]) .parent {\n justify-content: center;\n }\n\n :host(:not([label-hidden])[label]) .button {\n padding: 0 0.5rem;\n }\n\n :host([disabled]) .parent {\n background-color: gray;\n }\n\n .children {\n --bim-icon--fz: var(--bim-ui_size-base);\n padding: 0 0.125rem;\n }\n\n ::slotted(bim-button) {\n --bim-icon--fz: var(--bim-ui_size-base);\n --bim-button--bgc: var(\n --bim-context-menu--bgc,\n var(--bim-ui_bg-contrast-20)\n );\n --bim-button--bdrs: var(--bim-ui_size-4xs);\n --bim-button--olw: 0;\n --bim-button--olc: transparent;\n }\n\n .tooltip {\n position: absolute;\n padding: 0.75rem;\n z-index: 99;\n display: flex;\n flex-flow: column;\n row-gap: 0.375rem;\n box-shadow: 0 0 10px 3px rgba(0 0 0 / 20%);\n outline: 1px solid var(--bim-ui_bg-contrast-40);\n font-size: var(--bim-ui_size-xs);\n border-radius: var(--bim-ui_size-4xs);\n background-color: var(--bim-ui_bg-contrast-20);\n color: var(--bim-ui_bg-contrast-100);\n }\n\n .tooltip p {\n margin: 0;\n padding: 0;\n }\n\n :host(:not([tooltip-visible])) .tooltip {\n display: none;\n }\n `, Ht);\nq([\n d({ type: String, reflect: !0 })\n], D.prototype, \"label\");\nq([\n d({ type: Boolean, attribute: \"label-hidden\", reflect: !0 })\n], D.prototype, \"labelHidden\");\nq([\n d({ type: Boolean, reflect: !0 })\n], D.prototype, \"active\");\nq([\n d({ type: Boolean, reflect: !0, attribute: \"disabled\" })\n], D.prototype, \"disabled\");\nq([\n d({ type: String, reflect: !0 })\n], D.prototype, \"icon\");\nq([\n d({ type: Boolean, reflect: !0 })\n], D.prototype, \"vertical\");\nq([\n d({ type: Number, attribute: \"tooltip-time\", reflect: !0 })\n], D.prototype, \"tooltipTime\");\nq([\n d({ type: Boolean, attribute: \"tooltip-visible\", reflect: !0 })\n], D.prototype, \"tooltipVisible\");\nq([\n d({ type: String, attribute: \"tooltip-title\", reflect: !0 })\n], D.prototype, \"tooltipTitle\");\nq([\n d({ type: String, attribute: \"tooltip-text\", reflect: !0 })\n], D.prototype, \"tooltipText\");\nlet Wo = D;\nvar Qo = Object.defineProperty, de = (i, t, e, s) => {\n for (var n = void 0, r = i.length - 1, o; r >= 0; r--)\n (o = i[r]) && (n = o(t, e, n) || n);\n return n && Qo(t, e, n), n;\n};\nconst ki = class ki extends w {\n constructor() {\n super(...arguments), this.checked = !1, this.inverted = !1, this.onValueChange = new Event(\"change\");\n }\n /**\n * A getter that returns the current checked state of the checkbox. This is useful for retrieving the checkbox's value in form submissions or JavaScript interactions as it provides a consistent `value` property as many other components.\n * @type {boolean}\n * @default false\n * @example