import {
  HasSlotController
} from "./chunk.IVMQWO2L.js";
import {
  watch
} from "./chunk.X2OQMWGY.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/checkbox-group/checkbox-group.ts
import { css, html } from "lit";
import { property } from "lit/decorators.js";
import cx from "classix";
var SdCheckboxGroup = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "label", "help-text");
    this.size = "lg";
    this.orientation = "vertical";
    this.label = "";
    this.helpText = "";
  }
  getAllCheckboxes() {
    return [...this.querySelectorAll("sd-6-22-0-checkbox")];
  }
  async syncCheckboxElements() {
    const checkboxes = this.getAllCheckboxes();
    await Promise.all(
      // Sync the checked state and size
      checkboxes.map(async (checkbox) => {
        await checkbox.updateComplete;
        checkbox.size = this.size;
      })
    );
  }
  syncCheckboxes() {
    if (customElements.get("sd-6-22-0-checkbox")) {
      this.syncCheckboxElements();
    } else {
      customElements.whenDefined("sd-6-22-0-checkbox").then(() => this.syncCheckboxes());
    }
  }
  handleSizeChange() {
    this.syncCheckboxes();
  }
  handleInvalid() {
    this.syncCheckboxes();
  }
  render() {
    const hasLabelSlot = this.hasSlotController.test("label");
    const hasLabel = this.label ? true : hasLabelSlot;
    const hasHelpTextSlot = this.hasSlotController.test("help-text");
    const hasHelpText = this.helpText ? true : hasHelpTextSlot;
    const defaultSlot = html`<slot @slotchange="${this.syncCheckboxes}"></slot>`;
    const hasTooltip = this.hasSlotController.test("tooltip");
    return html`<fieldset part="form-control" class="${cx(
      "border-0 p-0 m-0",
      {
        /* sizes, fonts */
        sm: "text-sm",
        md: "text-base",
        lg: "text-base"
      }[this.size]
    )}" role="group" aria-labelledby="label">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${hasTooltip ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
      {
        vertical: "flex flex-col",
        horizontal: "flex flex-row"
      }[this.orientation]
    )}">${defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>`;
  }
};
/**
 * Inherits Tailwind classes and includes additional styling.
 */
SdCheckboxGroup.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-22-0-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-22-0-checkbox:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-6-22-0-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-22-0-checkbox:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-22-0-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-22-0-checkbox:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckboxGroup.prototype, "size", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckboxGroup.prototype, "orientation", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckboxGroup.prototype, "label", 2);
__decorateClass([
  property({ type: String, attribute: "help-text", reflect: true })
], SdCheckboxGroup.prototype, "helpText", 2);
__decorateClass([
  watch("size", { waitUntilFirstUpdate: true })
], SdCheckboxGroup.prototype, "handleSizeChange", 1);
__decorateClass([
  watch("invalid", { waitUntilFirstUpdate: true })
], SdCheckboxGroup.prototype, "handleInvalid", 1);
SdCheckboxGroup = __decorateClass([
  customElement("sd-6-22-0-checkbox-group")
], SdCheckboxGroup);

export {
  SdCheckboxGroup
};
