import { r as registerInstance, g as getElement, j as jsx, H as Host } from './index-C7YNCRgy.js';

const resetCss = () => `@layer reset, base, variants, states, sizes;  @layer reset {   :host {     display: contents;     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;     font-family: var(--dds-font-family-sans);     font-feature-settings: var(--dds-font-features-sans);     text-rendering: optimizeLegibility;     -webkit-font-smoothing: antialiased;      *,     *::after,     *::before,     *::backdrop,     *::file-selector-button {       box-sizing: border-box;       margin: 0;       padding: 0;       min-inline-size: 0;       min-block-size: 0;     }      * {       scrollbar-width: thin;       scrollbar-color: color-mix(gray 50%, transparent);     }      *:focus-visible {       z-index: 1;     }      > * {       interpolate-size: allow-keywords;       -webkit-tap-highlight-color: transparent;     }   } } `;

const buttonGroupCss = () => `@layer base {   :host .dds-button-group {     display: inline-flex;     flex-wrap: nowrap;     border: none;     cursor: pointer;   } }  @layer gap {    }  @layer reset, base, gap; `;

const ButtonGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get host() { return getElement(this); }
    // MARK: Props
    gap = "auto";
    // MARK: States
    // MARK: Events
    // MARK: Lifecycle
    componentDidLoad() {
        this.handleSlotChange();
    }
    handleSlotChange() {
        if (!this.host) {
            return;
        }
        const slottedElements = this.host.querySelectorAll("dds-button");
        slottedElements.forEach((button, index) => {
            button.classList.add("dds-button-group__button");
            button.classList.toggle("dds-button-group__button--first", index === 0);
            button.classList.toggle("dds-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
            button.classList.toggle("dds-button-group__button--last", index === slottedElements.length - 1);
        });
    }
    // MARK: Render
    render() {
        const { gap } = this;
        return (jsx(Host, { gap: gap, children: jsx("div", { class: "dds-button-group", role: "group", children: jsx("slot", { onSlotchange: () => this.handleSlotChange() }, '4542f540b5447910ed1c7ef4dcbf78cf465c06d4') }, '1540685e0d65f33e2564861fc0fa29daa8cbb494') }, '6267d1fec77251171c427a0e1576ee41a51ca134'));
    }
};
ButtonGroup.style = resetCss() + buttonGroupCss();

export { ButtonGroup as dds_button_group };
