@helixui/library 3.3.1 → 3.4.0

package/dist/shared/hx-checkbox-group-C9n315Ju.js

@@ -1,323 +0,0 @@
-import { css as x, nothing as d, html as h } from "lit";
-import { property as l, state as p, customElement as _ } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { F as u } from "./FormMixin-B8PXk5RQ.js";
-import { b as g } from "./forced-colors-CTEDFRGa.js";
-import { H as m } from "./helix-element-BNEYeiys.js";
-import { c as b } from "./id-counter-DuX8vsui.js";
-const k = x`
-  :host {
-    display: block;
-  }
-
-  :host([disabled]) {
-    opacity: var(--hx-opacity-disabled);
-    cursor: not-allowed;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  /* ─── Fieldset ─── */
-
-  .fieldset {
-    border: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-2);
-    font-family: var(--hx-checkbox-group-font-family, var(--hx-font-family-sans));
-  }
-
-  /* ─── Legend ─── */
-
-  .fieldset__legend {
-    display: flex;
-    align-items: baseline;
-    gap: var(--hx-space-1);
-    font-size: var(--hx-font-size-sm);
-    font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));
-    line-height: var(--hx-line-height-normal);
-    padding: 0;
-    margin-bottom: var(--hx-space-1);
-  }
-
-  .fieldset__required-marker {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
-    font-weight: var(--hx-font-weight-bold);
-  }
-
-  /* ─── Items Container ─── */
-
-  .fieldset__items {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));
-  }
-
-  :host([orientation='horizontal']) .fieldset__items {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  /* ─── Error State ─── */
-
-  .fieldset--error .fieldset__legend {
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
-  }
-
-  /* ─── Help Text & Error Messages ─── */
-
-  .fieldset__help-text {
-    font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));
-    line-height: var(--hx-line-height-normal);
-  }
-
-  .fieldset__error {
-    font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));
-    line-height: var(--hx-line-height-normal);
-  }
-
-  /* ─── High Contrast Mode (forced-colors) ─── */
-
-  @media (forced-colors: active) {
-    .fieldset {
-      border: none;
-    }
-
-    .fieldset__legend {
-      color: CanvasText;
-    }
-
-    .fieldset--error .fieldset__legend {
-      color: LinkText;
-    }
-
-    :host([disabled]) {
-      opacity: 1;
-    }
-
-    :host([disabled]) .fieldset__legend {
-      color: GrayText;
-    }
-
-    .fieldset__help-text {
-      color: GrayText;
-    }
-
-    .fieldset__error {
-      color: LinkText;
-    }
-  }
-`;
-var C = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, t, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? y(t, r) : t, n = e.length - 1, c; n >= 0; n--)
-    (c = e[n]) && (s = (a ? c(t, r, s) : c(s)) || s);
-  return a && s && C(t, r, s), s;
-};
-const v = b("hx-checkbox-group");
-let o = class extends u(m) {
-  constructor() {
-    super(...arguments), this.name = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this._orientation = "vertical", this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._groupId = v(), this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._handleCheckboxChange = (e) => {
-      if (e.target === this) return;
-      e.stopImmediatePropagation();
-      const t = this._getCheckedValues();
-      this._updateFormValue(t), this._updateValidity(t), this._handleInteractionInput(), this.dispatchEvent(
-        new CustomEvent("hx-change", {
-          bubbles: !0,
-          composed: !0,
-          detail: { values: t }
-        })
-      );
-    };
-  }
-  get orientation() {
-    return this._orientation;
-  }
-  set orientation(e) {
-    e !== "vertical" && e !== "horizontal" && (e = "vertical"), this._orientation = e;
-  }
-  // ─── Slot Handlers ───
-  /** @internal */
-  _handleErrorSlotChange(e) {
-    const t = e.target;
-    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  /** @internal */
-  _handleHelpSlotChange(e) {
-    const t = e.target;
-    this._hasHelpSlot = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("hx-change", this._handleCheckboxChange);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("hx-change", this._handleCheckboxChange);
-  }
-  updated(e) {
-    var t;
-    if (super.updated(e), e.has("disabled") && this._syncCheckboxes(), e.has("name") && this._syncCheckboxNames(), e.has("error") && this.error) {
-      const r = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
-      if (r) {
-        const a = this.error;
-        requestAnimationFrame(() => {
-          r.textContent = "", requestAnimationFrame(() => {
-            r.textContent = a;
-          });
-        });
-      }
-    }
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this._syncCheckboxes(), this._syncCheckboxNames();
-    const t = this._getCheckedValues();
-    this._updateFormValue(t), this._updateValidity(t);
-  }
-  // ─── Checkbox Management ───
-  /** @internal */
-  _getCheckboxes() {
-    return Array.from(this.children).filter((e) => e.tagName === "HX-CHECKBOX");
-  }
-  /** @internal */
-  _getCheckedValues() {
-    return this._getCheckboxes().filter((e) => e.checked).map((e) => e.value);
-  }
-  /** @internal */
-  _syncCheckboxes() {
-    this._getCheckboxes().forEach((t) => {
-      t.disabled = this.disabled;
-    });
-  }
-  /** @internal */
-  _syncCheckboxNames() {
-    if (!this.name) return;
-    this._getCheckboxes().forEach((t) => {
-      t.name = this.name;
-    });
-  }
-  /** @internal */
-  _handleSlotChange() {
-    this._syncCheckboxes(), this._syncCheckboxNames();
-    const e = this._getCheckedValues();
-    this._updateFormValue(e), this._updateValidity(e);
-  }
-  // ─── Form Integration ───
-  /** @internal */
-  _updateFormValue(e) {
-    if (e.length === 0) {
-      this._internals.setFormValue(null);
-      return;
-    }
-    const t = new FormData();
-    e.forEach((r) => t.append(this.name, r)), this._internals.setFormValue(t);
-  }
-  /** @internal */
-  _updateValidity(e) {
-    const t = e ?? this._getCheckedValues();
-    if (this.required && t.length === 0) {
-      const r = this._getCheckboxes()[0];
-      this._internals.setValidity(
-        { valueMissing: !0 },
-        this.error || "Please select at least one option.",
-        r
-      );
-    } else
-      this._internals.setValidity({});
-  }
-  /** @internal */
-  _onFormReset() {
-    this._getCheckboxes().forEach((t) => {
-      t.checked = !1;
-    }), this._internals.setFormValue(null), this._updateValidity([]), this._resetInteractionState();
-  }
-  /** @internal */
-  _onFormStateRestore(e, t) {
-    if (!(e instanceof FormData)) return;
-    const r = e.getAll(this.name).map((s) => String(s));
-    this._getCheckboxes().forEach((s) => {
-      s.checked = r.includes(s.value);
-    }), this._updateFormValue(r), this._updateValidity(r);
-  }
-  /** @internal */
-  _onFormDisabled(e) {
-    this.disabled = e;
-  }
-  // ─── Render ───
-  render() {
-    const e = !!this.error || this._hasErrorSlot, t = {
-      fieldset: !0,
-      "fieldset--error": e,
-      "fieldset--disabled": this.disabled,
-      "fieldset--required": this.required
-    }, r = [
-      e ? this._errorId : null,
-      this.helpText || this._hasHelpSlot ? this._helpTextId : null
-    ].filter(Boolean).join(" ") || void 0;
-    return h`
-      <fieldset
-        part="group"
-        class=${f(t)}
-        aria-describedby=${r ?? d}
-      >
-        <legend part="label" class="fieldset__legend">
-          <slot name="label">${this.label}</slot>
-          ${this.required ? h`<span class="fieldset__required-marker" aria-hidden="true">*</span>` : d}
-        </legend>
-
-        <div class="fieldset__items">
-          <slot @slotchange=${this._handleSlotChange}></slot>
-        </div>
-
-        ${e ? h`<div part="error" class="fieldset__error" id=${this._errorId} role="alert">
-              <slot name="error" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>
-            </div>` : h`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
-
-        <div part="help-text" class="fieldset__help-text" id=${this._helpTextId}>
-          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>
-        </div>
-      </fieldset>
-    `;
-  }
-};
-o.styles = [k, g];
-o.formAssociated = !0;
-i([
-  l({ type: String, reflect: !0 })
-], o.prototype, "name", 2);
-i([
-  l({ type: String })
-], o.prototype, "label", 2);
-i([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "required", 2);
-i([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-i([
-  l({ type: String })
-], o.prototype, "error", 2);
-i([
-  l({ type: String, attribute: "help-text" })
-], o.prototype, "helpText", 2);
-i([
-  l({ type: String, reflect: !0 })
-], o.prototype, "orientation", 1);
-i([
-  p()
-], o.prototype, "_hasErrorSlot", 2);
-i([
-  p()
-], o.prototype, "_hasHelpSlot", 2);
-o = i([
-  _("hx-checkbox-group")
-], o);
-export {
-  o as H
-};
-//# sourceMappingURL=hx-checkbox-group-C9n315Ju.js.map

package/dist/shared/hx-checkbox-group-C9n315Ju.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-checkbox-group-C9n315Ju.js","sources":["../../src/components/hx-checkbox-group/hx-checkbox-group.styles.ts","../../src/components/hx-checkbox-group/hx-checkbox-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxGroupStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Fieldset ─── */\n\n  .fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2);\n    font-family: var(--hx-checkbox-group-font-family, var(--hx-font-family-sans));\n  }\n\n  /* ─── Legend ─── */\n\n  .fieldset__legend {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1);\n    font-size: var(--hx-font-size-sm);\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));\n    line-height: var(--hx-line-height-normal);\n    padding: 0;\n    margin-bottom: var(--hx-space-1);\n  }\n\n  .fieldset__required-marker {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));\n    font-weight: var(--hx-font-weight-bold);\n  }\n\n  /* ─── Items Container ─── */\n\n  .fieldset__items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));\n  }\n\n  :host([orientation='horizontal']) .fieldset__items {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Error State ─── */\n\n  .fieldset--error .fieldset__legend {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .fieldset__help-text {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .fieldset__error {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .fieldset {\n      border: none;\n    }\n\n    .fieldset__legend {\n      color: CanvasText;\n    }\n\n    .fieldset--error .fieldset__legend {\n      color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .fieldset__legend {\n      color: GrayText;\n    }\n\n    .fieldset__help-text {\n      color: GrayText;\n    }\n\n    .fieldset__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixCheckboxGroupStyles } from './hx-checkbox-group.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\nimport type { HelixCheckbox } from '../hx-checkbox/hx-checkbox.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextCheckboxGroupId = createIdCounter('hx-checkbox-group');\n\n/** Detail for the hx-change event dispatched by hx-checkbox-group. */\nexport interface HxCheckboxGroupChangeDetail {\n  values: string[];\n}\n\n/**\n * A form-associated checkbox group that manages a set of `<hx-checkbox>` children.\n *\n * @summary Form-associated checkbox group with label, validation, help text, and multi-value form submission.\n *\n * @tag hx-checkbox-group\n *\n * @slot - `<hx-checkbox>` elements.\n * @slot label - Rich HTML group label (overrides the label property when used).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Group-level help text.\n *\n * @fires {CustomEvent<{values: string[]}>} hx-change - Dispatched when any child checkbox changes.\n *\n * @csspart group - The fieldset wrapper.\n * @csspart label - The legend/label.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-checkbox-group-gap=var(--hx-space-3, 0.75rem)] - Gap between checkbox items.\n * @cssprop [--hx-checkbox-group-label-color=var(--hx-color-neutral-700, #313E4B)] - Label text color.\n * @cssprop [--hx-checkbox-group-error-color=var(--hx-color-error-500, #E5493E)] - Error message color.\n * @cssprop [--hx-checkbox-group-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n *\n * @drupal\n * Form-associated; render via Twig:\n * ```twig\n * <hx-checkbox-group name=\"{{ field_name }}\" label=\"{{ label }}\"{{ required ? ' required' : '' }}>\n *   {% for option in options %}\n *     <hx-checkbox value=\"{{ option.value }}\" label=\"{{ option.label }}\"></hx-checkbox>\n *   {% endfor %}\n * </hx-checkbox-group>\n * ```\n * The `name` attribute propagates automatically to child checkboxes — no Drupal behavior required.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-checkbox-group-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-checkbox-group')\nexport class HelixCheckboxGroup extends FormMixin(HelixElement) {\n  static override styles = [helixCheckboxGroupStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The name used for form submission. Passed to child `hx-checkbox` elements.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The fieldset legend/label text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether at least one checkbox must be checked for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the entire group is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the group enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text to display below the group. Can also be provided via the help-text slot.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Layout orientation of the checkbox items.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  get orientation(): 'vertical' | 'horizontal' {\n    return this._orientation;\n  }\n  set orientation(value: string) {\n    if (value !== 'vertical' && value !== 'horizontal') {\n      devWarn('hx-checkbox-group', `Invalid orientation \"${value}\", defaulting to \"vertical\".`);\n      value = 'vertical';\n    }\n    this._orientation = value as 'vertical' | 'horizontal';\n  }\n  /** @internal */\n  private _orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Whether the named error slot contains projected content. @internal */\n  @state() private _hasErrorSlot = false;\n  /** Whether the named help-text slot contains projected content. @internal */\n  @state() private _hasHelpSlot = false;\n\n  // ─── Internal IDs ───\n\n  /** @internal */\n  private _groupId = _nextCheckboxGroupId();\n  /** @internal */\n  private _helpTextId = `${this._groupId}-help`;\n  /** @internal */\n  private _errorId = `${this._groupId}-error`;\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-change', this._handleCheckboxChange);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-change', this._handleCheckboxChange);\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this._syncCheckboxes();\n    }\n    if (changedProperties.has('name')) {\n      this._syncCheckboxNames();\n    }\n    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Checkbox Management ───\n\n  /** @internal */\n  private _getCheckboxes(): HelixCheckbox[] {\n    return Array.from(this.children).filter((c): c is HelixCheckbox => c.tagName === 'HX-CHECKBOX');\n  }\n\n  /** @internal */\n  private _getCheckedValues(): string[] {\n    return this._getCheckboxes()\n      .filter((cb) => cb.checked)\n      .map((cb) => cb.value);\n  }\n\n  /** @internal */\n  private _syncCheckboxes(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.disabled = this.disabled;\n    });\n  }\n\n  /** @internal */\n  private _syncCheckboxNames(): void {\n    if (!this.name) return;\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.name = this.name;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleCheckboxChange = (e: Event): void => {\n    // Only intercept events from direct hx-checkbox children — do not re-intercept\n    // the hx-change we dispatch ourselves from this element.\n    if (e.target === this) return;\n\n    e.stopImmediatePropagation();\n\n    const values = this._getCheckedValues();\n    this._updateFormValue(values);\n    this._updateValidity(values);\n    this._handleInteractionInput();\n\n    /**\n     * Dispatched when any child checkbox changes.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ values: string[] }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { values },\n      }),\n    );\n  };\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  private _updateFormValue(values: string[]): void {\n    if (values.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n    const formData = new FormData();\n    values.forEach((v) => formData.append(this.name, v));\n    this._internals.setFormValue(formData);\n  }\n\n  /** @internal */\n  override _updateValidity(values?: string[]): void {\n    const checkedValues = values ?? this._getCheckedValues();\n    if (this.required && checkedValues.length === 0) {\n      const firstCheckbox = this._getCheckboxes()[0];\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'Please select at least one option.',\n        firstCheckbox,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = false;\n    });\n    this._internals.setFormValue(null);\n    this._updateValidity([]);\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (!(state instanceof FormData)) return;\n    const restoredValues = state.getAll(this.name).map((v) => String(v));\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = restoredValues.includes(cb.value);\n    });\n    this._updateFormValue(restoredValues);\n    this._updateValidity(restoredValues);\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldsetClasses = {\n      fieldset: true,\n      'fieldset--error': hasError,\n      'fieldset--disabled': this.disabled,\n      'fieldset--required': this.required,\n    };\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        this.helpText || this._hasHelpSlot ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <fieldset\n        part=\"group\"\n        class=${classMap(fieldsetClasses)}\n        aria-describedby=${describedBy ?? nothing}\n      >\n        <legend part=\"label\" class=\"fieldset__legend\">\n          <slot name=\"label\">${this.label}</slot>\n          ${this.required\n            ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n            : nothing}\n        </legend>\n\n        <div class=\"fieldset__items\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        ${hasError\n          ? html`<div part=\"error\" class=\"fieldset__error\" id=${this._errorId} role=\"alert\">\n              <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n            </div>`\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n\n        <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </fieldset>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox-group': HelixCheckboxGroup;\n  }\n}\n"],"names":["helixCheckboxGroupStyles","css","_nextCheckboxGroupId","createIdCounter","HelixCheckboxGroup","FormMixin","HelixElement","values","value","slot","changedProperties","errorEl","_a","msg","checkedValues","c","cb","formData","v","firstCheckbox","state","_mode","restoredValues","disabled","hasError","fieldsetClasses","describedBy","html","classMap","nothing","forcedColorsField","__decorateClass","property","customElement"],"mappings":"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"}