@synergy-design-system/components/dist/chunks/chunk.PIMA7UA3.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  button_group_styles_default
} from "./chunk.GRVNUIP2.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3THJTCRO.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/button-group/button-group.component.ts
import { html } from "lit";
import { property, query, state } from "lit/decorators.js";
var SynButtonGroup = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.disableRole = false;
    this.label = "";
  }
  handleFocus(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--focus", true);
  }
  handleBlur(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--focus", false);
  }
  handleMouseOver(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--hover", true);
  }
  handleMouseOut(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--hover", false);
  }
  handleSlotChange() {
    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
    slottedElements.forEach((el) => {
      const index = slottedElements.indexOf(el);
      const button = findButton(el);
      if (button) {
        button.toggleAttribute("data-syn-button-group__button", true);
        button.toggleAttribute("data-syn-button-group__button--first", index === 0);
        button.toggleAttribute("data-syn-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
        button.toggleAttribute("data-syn-button-group__button--last", index === slottedElements.length - 1);
        button.toggleAttribute(
          "data-syn-button-group__button--radio",
          button.tagName.toLowerCase() === "syn-radio-button"
        );
      }
    });
  }
  render() {
    return html`
      <div
        part="base"
        class="button-group"
        role="${this.disableRole ? "presentation" : "group"}"
        aria-label=${this.label}
        @focusout=${this.handleBlur}
        @focusin=${this.handleFocus}
        @mouseover=${this.handleMouseOver}
        @mouseout=${this.handleMouseOut}
      >
        <slot @slotchange=${this.handleSlotChange}></slot>
      </div>
    `;
  }
};
SynButtonGroup.styles = [component_styles_default, button_group_styles_default];
__decorateClass([
  query("slot")
], SynButtonGroup.prototype, "defaultSlot", 2);
__decorateClass([
  state()
], SynButtonGroup.prototype, "disableRole", 2);
__decorateClass([
  property()
], SynButtonGroup.prototype, "label", 2);
function findButton(el) {
  var _a;
  const selector = "syn-button, syn-radio-button";
  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
}

export {
  SynButtonGroup
};
//# sourceMappingURL=chunk.PIMA7UA3.js.map