import { P as u, x as p, n as f } from "./plus-base-cd557806.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: {
    orientation: {
      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, l = (s, e, r, o) => {
  for (var t = o > 1 ? void 0 : o ? b(e, r) : e, a = s.length - 1, i; a >= 0; a--)
    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
  return o && t && m(e, r, t), t;
};
let n = class extends u {
  constructor() {
    super(...arguments), this.orientation = "horizontal";
  }
  handleSlotChange() {
    const r = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).filter((o) => o.tagName === "PLUS-BUTTON");
    r.forEach((o, t) => {
      o.groupPosition = this.orientation, t === 0 && (o.groupOrder = "first"), t === r.length - 1 && (o.groupOrder = "last"), t > 0 && t < r.length - 1 && (o.groupOrder = "middle");
    });
  }
  render() {
    const { orientation: s } = this, { base: e } = h({ orientation: s });
    return p`
      <div class=${"button-group " + e()} role="group" aria-live="polite">
        <slot @slotchange=${this.handleSlotChange}></slot>
      </div>
    `;
  }
};
l([
  g(".button-group")
], n.prototype, "buttonGroup", 2);
l([
  f({ type: String })
], n.prototype, "orientation", 2);
n = l([
  d("plus-button-group")
], n);
export {
  n as ButtonGroupComponent
};
