import { P as p, x as u, n as f } from "./plus-base-1920dd44.mjs";
import { e as d } from "./custom-element-eaccb8d2.mjs";
import { i as g } from "./query-48157d42.mjs";
import { s as c } from "./index-975d3293.mjs";
const h = c({
  slots: {
    base: ["flex flex-row"]
  },
  variants: {
    type: {
      vertical: {
        base: "flex-col items-stretch w-fit"
      },
      horizontal: {
        base: "flex-row"
      }
    },
    size: {
      sm: {},
      md: {},
      lg: {}
    },
    kind: {
      dot: {
        base: "rounded-full"
      },
      text: {
        base: "rounded-full"
      }
    },
    status: {},
    invert: {
      true: {
        base: ""
      }
    },
    placement: {},
    isSingleChar: {}
  },
  compoundVariants: [],
  defaultVariants: {}
});
var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (r, o, s, e) => {
  for (var t = e > 1 ? void 0 : e ? b(o, s) : o, a = r.length - 1, n; a >= 0; a--)
    (n = r[a]) && (t = (e ? n(o, s, t) : n(t)) || t);
  return e && t && m(o, s, t), t;
};
let l = class extends p {
  constructor() {
    super(...arguments), this.type = "horizontal";
  }
  handleSlotChange() {
    const s = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).filter((e) => e.tagName === "PLUS-BUTTON");
    s.forEach((e, t) => {
      e.groupPosition = this.type, t === 0 && (e.groupOrder = "first"), t === s.length - 1 && (e.groupOrder = "last"), t > 0 && t < s.length - 1 && (e.groupOrder = "middle");
    });
  }
  render() {
    const { type: r } = this, { base: o } = h({ type: r });
    return u`
      <div class=${"button-group " + o()} role="group" aria-live="polite">
        <slot @slotchange=${this.handleSlotChange}></slot>
      </div>
    `;
  }
};
i([
  g(".button-group")
], l.prototype, "buttonGroup", 2);
i([
  f({ type: String })
], l.prototype, "type", 2);
l = i([
  d("plus-button-group")
], l);
export {
  l as ButtonGroupComponent
};
