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

// src/components/optgroup/optgroup.ts
import { css } from "lit";
import { html } from "lit/static-html.js";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdOptgroup = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.disabled = false;
    this.label = "";
  }
  /**
   * Syncs the disabled prop for all slotted sd-options when it is triggered
   */
  handleDisableOptions() {
    const { disabled } = this;
    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-option").forEach((opt) => {
      opt.disabled = disabled;
    });
  }
  handleDisabledChange() {
    this.handleDisableOptions();
  }
  render() {
    const { disabled } = this;
    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-divider id="divider" class="pt-2 pb-4" part="divider"></sd-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
  }
};
SdOptgroup.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{--display-divider:block}#divider{display:var(--display-divider)}`
];
__decorateClass([
  query("slot:not([name])")
], SdOptgroup.prototype, "defaultSlot", 2);
__decorateClass([
  property({ reflect: true, type: Boolean })
], SdOptgroup.prototype, "disabled", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdOptgroup.prototype, "label", 2);
__decorateClass([
  watch("disabled", { waitUntilFirstUpdate: true })
], SdOptgroup.prototype, "handleDisabledChange", 1);
SdOptgroup = __decorateClass([
  customElement("sd-optgroup")
], SdOptgroup);

export {
  SdOptgroup
};
