import { r, h as s, H as n, g as i } from "./index.e6beb8d9.js";
import { k as a } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const c = () => ":host{display:block}:host *{box-sizing:border-box}", l = class {
  constructor(e) {
    r(this, e), this.orientation = "horizontal", this.onKeyDown = (t) => {
      t.code === "ArrowDown" || t.code === "ArrowRight" ? (t.preventDefault(), this.focusNextItem()) : (t.code === "ArrowUp" || t.code === "ArrowLeft") && (t.preventDefault(), this.focusPreviousItem());
    };
  }
  componentDidLoad() {
    var o;
    const e = this.getItems();
    this.deactivateTabIndexes(e);
    const t = (o = e[0]) == null ? void 0 : o.querySelector("button");
    !Boolean(t) || (t.tabIndex = 0);
  }
  getItems() {
    return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"));
  }
  focusNextItem() {
    const e = this.getItems(), o = (this.getActiveItemIndex(e) + 1) % e.length;
    this.focusItem(e[o]);
  }
  focusPreviousItem() {
    const e = this.getItems(), t = this.getActiveItemIndex(e), o = t === 0 ? e.length - 1 : t - 1;
    this.focusItem(e[o]);
  }
  getActiveItemIndex(e) {
    const t = a();
    return e.findIndex((o) => o === (t == null ? void 0 : t.closest("swirl-button, swirl-chip")));
  }
  focusItem(e) {
    const t = this.getItems();
    if (this.deactivateTabIndexes(t), !Boolean(e))
      return;
    const o = e.querySelector("button");
    !Boolean(o) || (o.tabIndex = 0, o.focus());
  }
  deactivateTabIndexes(e) {
    e.forEach((t) => {
      const o = t.querySelector("button");
      !Boolean(o) || (o.tabIndex = -1);
    });
  }
  render() {
    return s(n, { key: "70bf9f3d2ec87c5f36b9a8ded91abdee119f12e3" }, s("swirl-stack", { key: "53350ab541639aa2cba9cb2e689526af4d196382", align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: !0 }, s("slot", { key: "04a96fb9d55bb7af2a58b55c1172e33c73227c18" })));
  }
  get el() {
    return i(this);
  }
};
l.style = c();
export {
  l as swirl_toolbar
};
