import { r, h as s, H as n, g as i } from "./index.61732cef.js";
import { k as c } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const a = () => ":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 = c();
    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: "c35364063a026fa37b25062bb3d2b3c428a48883" }, s("swirl-stack", { key: "4f098ba2e2ab10c84a163da9f7d2d6b602f5d2cd", 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: "5c9b3c4494d6732cc95f59675768ac66c6a5e0e8" })));
  }
  get el() {
    return i(this);
  }
};
l.style = a();
export {
  l as swirl_toolbar
};
