import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { B as BEM } from './bem.js';

const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * The value of the button, which is submitted with the form data.
         */
        this.position = '';
        /**
         * `auto` will position the button items vertical and full width.
         * `row` will force that the buttons are also horizontal on mobile.
         */
        this.direction = 'auto';
        /**
         * If `true` the flex direction is used in reverse on mobile.
         */
        this.reverse = false;
    }
    render() {
        const block = BEM.block('button-group');
        return (h(Host, { key: 'a41720ea16a458ae915bece1adf109d2f20ea8ec', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: '03f0d65f12c0ac0e14f4854ef85e845fe51f9e62', class: {
                'field': true,
                'is-grouped': true,
                'is-reverse': this.reverse,
                [`has-direction-${this.direction}`]: true,
            } }, h("slot", { key: 'a65f6a5a52b522c600c4df6c0963cdd59ad07462' }))));
    }
}, [260, "bal-button-group", {
        "position": [1],
        "direction": [1],
        "reverse": [4]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-button-group"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-button-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ButtonGroup);
            }
            break;
    } });
}

export { ButtonGroup as B, defineCustomElement as d };
