@helixui/library 3.3.1 → 3.4.0

package/dist/shared/hx-checkbox-C48KYKFq.js

@@ -0,0 +1,696 @@
+import { css as z, nothing as m, html as g } from "lit";
+import { property as l, query as S, state as b, customElement as T } from "lit/decorators.js";
+import { classMap as E } from "lit/directives/class-map.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { live as y } from "lit/directives/live.js";
+import { F as A } from "./FormMixin-B8PXk5RQ.js";
+import { b as H } from "./forced-colors-CTEDFRGa.js";
+import { s as $, i as B, r as I } from "./aria-idref-CxvyzfQS.js";
+import { m as D } from "./aria-delegation-Doq6RRUy.js";
+import { c as R } from "./id-counter-DuX8vsui.js";
+import { H as q } from "./helix-element-BNEYeiys.js";
+const F = z`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-checkbox-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Control (checkbox + label row) ─── */
+
+  .checkbox__control {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--hx-space-2, 0.5rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .checkbox__control {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hidden Native Input ─── */
+
+  .checkbox__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Visual Checkbox ─── */
+
+  .checkbox__box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
+    border: var(--hx-border-width-medium, 2px) solid
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #66787b));
+    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    margin-top: var(--hx-space-px, 1px);
+  }
+
+  /* ─── Focus Ring ─── */
+
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner input is demoted
+   * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so
+   * keyboard users still get a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .checkbox__box {
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * input is the tab target. The native :focus-visible on the input drives
+   * the same visual ring, scoped via the inner-state class.
+   */
+  .checkbox__input:focus-visible ~ .checkbox__box {
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
+  }
+
+  /* ─── Checked State ─── */
+
+  .checkbox--checked .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+  }
+
+  /* ─── Indeterminate State ─── */
+
+  .checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
+    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+  }
+
+  /* ─── Error State ─── */
+
+  .checkbox--error .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
+  }
+
+  .checkbox--error.checkbox--checked .checkbox__box,
+  .checkbox--error.checkbox--indeterminate .checkbox__box {
+    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
+  }
+
+  /* ─── Hover ─── */
+
+  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */
+  .checkbox__control:hover .checkbox__box {
+    border-color: var(
+      --hx-checkbox-hover-border-color,
+      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #429797))
+    );
+  }
+
+  .checkbox--checked .checkbox__control:hover .checkbox__box {
+    filter: brightness(var(--hx-filter-brightness-hover, 0.9));
+  }
+
+  .checkbox--error .checkbox__control:hover .checkbox__box {
+    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
+  }
+
+  /* ─── Checkmark Icon ─── */
+
+  .checkbox__icon {
+    display: none;
+    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    fill: none;
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .checkbox--checked .checkbox__icon--check {
+    display: block;
+  }
+
+  .checkbox--indeterminate .checkbox__icon--indeterminate {
+    display: block;
+  }
+
+  /* ─── Label ─── */
+
+  .checkbox__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #202b39));
+    line-height: var(--hx-line-height-normal, 1.5);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .checkbox__required-marker {
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .checkbox__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #4a5362));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding-inline-start: calc(
+      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
+    );
+  }
+
+  .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));
+    line-height: var(--hx-line-height-normal, 1.5);
+    padding-inline-start: calc(
+      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
+    );
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) {
+    --hx-checkbox-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='sm']) .checkbox__help-text,
+  :host([hx-size='sm']) .checkbox__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  :host([hx-size='lg']) {
+    --hx-checkbox-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__label {
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  :host([hx-size='lg']) .checkbox__help-text,
+  :host([hx-size='lg']) .checkbox__error {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .checkbox__box {
+      transition: none;
+    }
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .checkbox__box {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      border: 2px solid ButtonText;
+    }
+
+    :host(:focus-visible) .checkbox__box,
+    .checkbox__input:focus-visible ~ .checkbox__box {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .checkbox--checked .checkbox__box,
+    .checkbox--indeterminate .checkbox__box {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .checkbox__icon {
+      stroke: HighlightText;
+    }
+
+    .checkbox--error .checkbox__box {
+      border-color: LinkText;
+    }
+
+    .checkbox--error.checkbox--checked .checkbox__box,
+    .checkbox--error.checkbox--indeterminate .checkbox__box {
+      background-color: LinkText;
+      border-color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .checkbox__box {
+      border-color: GrayText;
+      background-color: ButtonFace;
+    }
+
+    :host([disabled]) .checkbox--checked .checkbox__box,
+    :host([disabled]) .checkbox--indeterminate .checkbox__box {
+      background-color: GrayText;
+      border-color: GrayText;
+    }
+
+    :host([disabled]) .checkbox__label {
+      color: GrayText;
+    }
+
+    .checkbox__label {
+      color: CanvasText;
+    }
+
+    .checkbox__help-text {
+      color: GrayText;
+    }
+
+    .checkbox__error {
+      color: LinkText;
+    }
+  }
+`;
+var M = Object.defineProperty, V = Object.getOwnPropertyDescriptor, o = (e, t, i, c) => {
+  for (var s = c > 1 ? void 0 : c ? V(t, i) : t, h = e.length - 1, a; h >= 0; h--)
+    (a = e[h]) && (s = (c ? a(t, i, s) : a(s)) || s);
+  return c && s && M(t, i, s), s;
+};
+const j = R("hx-checkbox");
+let r = class extends D(A(q)) {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this.size = "md", this.accessibleLabel = "", this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._hasLabelSlot = !1, this.__groupedSuppress = !1, this._announcedError = "", this._hasWarnedLabelConflict = !1, this._ariaMirror = null, this._handleHostKeyDown = (e) => {
+      this.disabled || this._supportsIdrefRefs && e.target === this && e.key === " " && (e.preventDefault(), this._handleChange());
+    }, this._handleHostClick = (e) => {
+      this.disabled || !this._supportsIdrefRefs || e.composedPath()[0] !== this || this._handleChange();
+    }, this._handleInternalChange = (e) => {
+      if (e.stopPropagation(), this.disabled) return;
+      const t = e.currentTarget;
+      this.indeterminate = !1, this.checked = t.checked, this._updateFormValue(), this._handleInteractionInput(), this.dispatchEvent(
+        new CustomEvent("hx-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { checked: this.checked, value: this.value }
+        })
+      );
+    }, this._suppressInnerClick = (e) => {
+      e.preventDefault(), e.stopPropagation();
+    }, this._suppressInnerChange = (e) => {
+      e.stopPropagation();
+    }, this._fallbackAriaLabelledBy = null, this._fallbackAriaDescribedBy = null, this._supportsIdrefRefs = !0, this._internalTabindexManaged = !1, this._id = j(), this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._labelId = `${this._id}-label`;
+  }
+  /**
+   * Returns the effective label for the checkbox, checking accessible-label first,
+   * then the aria-label attribute, falling back to empty string.
+   * @internal
+   */
+  get _effectiveLabel() {
+    var e, t, i;
+    return ((e = this.accessibleLabel) == null ? void 0 : e.trim()) || ((t = this.getAttribute("data-aria-label")) == null ? void 0 : t.trim()) || ((i = this.getAttribute("aria-label")) == null ? void 0 : i.trim()) || "";
+  }
+  /**
+   * Set by `hx-checkbox-group` to mark this child as group-managed. While
+   * truthy, `_updateFormValue()` short-circuits to `setFormValue(null)`
+   * regardless of `name`, so the child does NOT participate in form submission
+   * — only the group does. This is durable against post-attach mutations to
+   * `cb.name` by consumers/frameworks (which would otherwise re-arm
+   * `_updateFormValue()` via the `name` setter and cause double-submission).
+   * Codex round-3 finding #1.
+   *
+   * Public via accessor for the group's exclusive use; the underscore prefix
+   * marks it as group-internal (not consumer API). The group sets it during
+   * `slotchange` and clears it (via the same setter) when a child is removed.
+   * @internal
+   */
+  set _groupedSuppress(e) {
+    this.__groupedSuppress !== e && (this.__groupedSuppress = e, this._updateFormValue());
+  }
+  get _groupedSuppress() {
+    return this.__groupedSuppress;
+  }
+  // ─── Slot Handlers ───
+  /** @internal */
+  _handleErrorSlotChange(e) {
+    const t = e.target;
+    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  /** @internal */
+  _handleHelpTextSlotChange(e) {
+    const t = e.target;
+    this._hasHelpTextSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  /** @internal */
+  _handleLabelSlotChange(e) {
+    const t = e.target;
+    this._hasLabelSlot = t.assignedNodes().length > 0;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    if (super.connectedCallback(), this._supportsIdrefRefs = $(this._internals), this._syncHostAriaSemantics(), !this.hasAttribute("tabindex")) {
+      this._internalTabindexManaged = !0;
+      const e = this._supportsIdrefRefs ? "0" : "-1";
+      this.setAttribute("tabindex", this.disabled ? "-1" : e);
+    }
+    this.addEventListener("keydown", this._handleHostKeyDown), this.addEventListener("click", this._handleHostClick), this._ariaMirror = B(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleHostKeyDown), this.removeEventListener("click", this._handleHostClick), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    var t, i, c, s, h;
+    super.updated(e), (e.has("checked") || e.has("value") || e.has("name")) && this._updateFormValue(), (e.has("disabled") || e.has("_supportsIdrefRefs")) && this._internalTabindexManaged && (this.disabled ? this.setAttribute("tabindex", "-1") : this.setAttribute("tabindex", this._supportsIdrefRefs ? "0" : "-1")), this._syncHostAriaSemantics();
+    {
+      const a = !!((t = this.accessibleLabel) != null && t.trim() || (i = this.getAttribute("data-aria-label")) != null && i.trim() || (c = this.getAttribute("aria-label")) != null && c.trim()), x = !!this.label || (((h = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".checkbox__label slot")) == null ? void 0 : h.assignedNodes({ flatten: !0 }).length) ?? 0) > 0;
+      a && x && !this._hasWarnedLabelConflict ? this._hasWarnedLabelConflict = !0 : (!a || !x) && (this._hasWarnedLabelConflict = !1);
+    }
+    e.has("error") && (e.get("error") && this.error ? (this._announcedError = "", requestAnimationFrame(() => {
+      this._announcedError = this.error;
+    })) : this._announcedError = this.error);
+  }
+  // ─── Form Integration ───
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  /** Returns the validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** @internal */
+  _updateValidity() {
+    if (this.required && !this.checked) {
+      const e = this._supportsIdrefRefs ? this : this._inputEl ?? void 0;
+      this._internals.setValidity(
+        { valueMissing: !0 },
+        this.error || this.requiredMessage,
+        e
+      );
+    } else
+      this._internals.setValidity({});
+    this._syncHostAriaSemantics();
+  }
+  // ─── Form Lifecycle Hooks ───
+  _onFormReset() {
+    this.checked = !1, this.indeterminate = !1, this._internals.setFormValue(null), this._resetInteractionState();
+  }
+  _onFormStateRestore(e, t) {
+    this.checked = typeof e == "string" && e === this.value;
+  }
+  _onFormDisabled(e) {
+    this.disabled = e;
+  }
+  // ─── Event Handling ───
+  /**
+   * Writes the checkbox value to ElementInternals' form value. Suppressed when
+   * the checkbox is grouped — `hx-checkbox-group` flips `_groupedSuppress` on
+   * children so the group is the sole form participant.
+   *
+   * Codex round-3 finding #1: round-2 used `cb.name = ''` as the suppression
+   * signal, but a consumer (or framework binding) that re-set `cb.name = 'foo'`
+   * after attach regained form participation through the `name` setter. The
+   * `_groupedSuppress` flag is a durable, name-independent kill switch.
+   * Stand-alone checkboxes (no parent group) are unaffected.
+   * @internal
+   */
+  _updateFormValue() {
+    if (this.__groupedSuppress || !this.name) {
+      this._internals.setFormValue(null);
+      return;
+    }
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  /** @internal */
+  _handleChange() {
+    this.disabled || (this.indeterminate = !1, this.checked = !this.checked, this._updateFormValue(), this._handleInteractionInput(), this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { checked: this.checked, value: this.value }
+      })
+    ), this._supportsIdrefRefs && this.focus());
+  }
+  /** @internal */
+  _handleKeyDown(e) {
+    e.key === " " && (e.preventDefault(), e.stopPropagation(), this._handleChange());
+  }
+  // ─── Public Methods ───
+  /**
+   * Moves focus to the announced checkbox surface. Codex round-1 finding #1
+   * relocated the focus target from the inner `<input>` to the host on
+   * modern engines so AT only sees one announced widget. Round-7 finding #3
+   * extends that contract to the no-IDL-ref fallback: when the host is
+   * demoted (`tabindex=-1`, role/state cleared on `internals`) the inner
+   * `<input>` owns the announced semantics and tab order, so programmatic
+   * `focus()` must redirect there — otherwise scripted focus and error
+   * recovery land on the demoted host on unsupported engines.
+   */
+  focus(e) {
+    var t;
+    if (this._supportsIdrefRefs) {
+      super.focus(e);
+      return;
+    }
+    (t = this._inputEl) == null || t.focus(e);
+  }
+  // ─── Host ARIA Semantics (ElementInternals) ───
+  /**
+   * Mirrors checkbox semantics onto the host via ElementInternals so that
+   * consumer-supplied `aria-label`, `aria-labelledby`, and `aria-describedby`
+   * on `<hx-checkbox>` reach the announced control. Without this, those
+   * attributes — intercepted by `mixinDelegatesAria` and stored on the host —
+   * would not propagate through to the inner shadow `<input>`.
+   *
+   * Codex finding (aria-delegation, severity high): the announced semantic
+   * node was the inner `<input>` and the host's labelled-by tokens could not
+   * cross the shadow boundary.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var i, c, s;
+    const e = this._internals, t = this._effectiveLabel;
+    if (this._supportsIdrefRefs) {
+      e.role = "checkbox", e.ariaChecked = this.indeterminate ? "mixed" : this.checked ? "true" : "false", e.ariaRequired = this.required ? "true" : "false", e.ariaInvalid = e.validity.valid ? "false" : "true", e.ariaDisabled = this.disabled ? "true" : "false", e.ariaLabel = t || null;
+      const h = e, a = this.getAttribute("data-aria-labelledby"), x = this.getAttribute("data-aria-describedby"), u = I(this, a), _ = (i = this.shadowRoot) == null ? void 0 : i.getElementById(this._labelId), v = !!this.label || this._hasLabelSlot;
+      u.length === 0 && !t && v && _ && u.push(_), h.ariaLabelledByElements = u.length > 0 ? u : null;
+      const p = I(this, x), n = (c = this.shadowRoot) == null ? void 0 : c.getElementById(this._helpTextId), f = (s = this.shadowRoot) == null ? void 0 : s.getElementById(this._errorId), k = !!(this.error || this._hasErrorSlot);
+      n && (this.helpText || this._hasHelpTextSlot) && !k && p.push(n), f && k && p.push(f), h.ariaDescribedByElements = p.length > 0 ? p : null, this._fallbackAriaLabelledBy = null, this._fallbackAriaDescribedBy = null;
+    } else {
+      e.role = null, e.ariaChecked = null, e.ariaRequired = null, e.ariaInvalid = null, e.ariaDisabled = null, e.ariaLabel = null;
+      const h = this.getAttribute("data-aria-labelledby"), a = this.getAttribute("data-aria-describedby");
+      this._fallbackAriaLabelledBy = h || null, this._fallbackAriaDescribedBy = a || null;
+    }
+  }
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpTextSlot, i = !!this.label || this._hasLabelSlot, c = e || this.required && !this.checked, s = {
+      checkbox: !0,
+      "checkbox--checked": this.checked,
+      "checkbox--indeterminate": this.indeterminate,
+      "checkbox--error": e,
+      "checkbox--disabled": this.disabled,
+      "checkbox--required": this.required,
+      "checkbox--sm": this.size === "sm",
+      "checkbox--md": this.size === "md",
+      "checkbox--lg": this.size === "lg"
+    }, h = [e ? null : t ? this._helpTextId : null, e ? this._errorId : null].filter(Boolean).join(" ") || void 0, a = this._effectiveLabel || void 0, x = !a && i, u = this._fallbackAriaLabelledBy, _ = this._fallbackAriaDescribedBy, v = [h ?? null, _].filter(Boolean).join(" ") || void 0, p = u ?? (x ? this._labelId : void 0), n = !this._supportsIdrefRefs, f = n && !this.disabled ? "0" : "-1", k = n ? void 0 : this._suppressInnerClick, w = n ? this._handleInternalChange : this._suppressInnerChange, C = n ? void 0 : this._handleChange, L = n ? void 0 : this._handleKeyDown;
+    return g`
+      <div class=${E(s)}>
+        <label part="control" class="checkbox__control" @click=${d(C)}>
+          <input
+            class="checkbox__input"
+            type="checkbox"
+            id=${this._id}
+            tabindex=${f}
+            .checked=${y(this.checked)}
+            .indeterminate=${y(this.indeterminate)}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${d(this.name || void 0)}
+            .value=${this.value}
+            aria-checked=${this.indeterminate ? "mixed" : m}
+            aria-invalid=${c ? "true" : m}
+            aria-describedby=${d(v)}
+            aria-label=${d(a)}
+            aria-labelledby=${d(p)}
+            aria-hidden=${n ? m : "true"}
+            @keydown=${d(L)}
+            @click=${d(k)}
+            @change=${w}
+          />
+
+          <span part="checkbox" class="checkbox__box">
+            <svg
+              part="checkmark"
+              class="checkbox__icon checkbox__icon--check"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+            >
+              <polyline points="3.5 8 6.5 11 12.5 5"></polyline>
+            </svg>
+            <svg
+              class="checkbox__icon checkbox__icon--indeterminate"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+            >
+              <line x1="4" y1="8" x2="12" y2="8"></line>
+            </svg>
+          </span>
+
+          <span part="label" class="checkbox__label" id=${this._labelId}>
+            <slot @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>
+            ${this.required ? g`<span class="checkbox__required-marker" aria-hidden="true">*</span>` : m}
+          </span>
+        </label>
+
+        <!--
+          P0-01: wrapper div always owns _errorId so aria-describedby works
+          regardless of whether error content comes from the .error property
+          or the named slot. role="status" replaces aria-live="polite" to
+          avoid conflicting live-region semantics.
+        -->
+        <div
+          part="error"
+          class="checkbox__error"
+          id=${this._errorId}
+          role="status"
+          ?hidden=${!e}
+        >
+          <slot name="error" @slotchange=${this._handleErrorSlotChange}>
+            ${this._announcedError}
+          </slot>
+        </div>
+
+        <!--
+          Persistent help-text container. Rendered whenever the property OR
+          the slot has content, hidden when an error is present so guidance
+          does not compete with validation feedback. Always present in the
+          shadow tree so the host's aria-describedby chain remains stable.
+        -->
+        <div
+          part="help-text"
+          class="checkbox__help-text"
+          id=${this._helpTextId}
+          ?hidden=${!t || e}
+        >
+          <slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}
+            >${this.helpText}</slot
+          >
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [F, H];
+r.formAssociated = !0;
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "checked", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "indeterminate", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+o([
+  l({ type: String, reflect: !0 })
+], r.prototype, "name", 2);
+o([
+  l({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+o([
+  l({ type: String })
+], r.prototype, "label", 2);
+o([
+  l({ type: String })
+], r.prototype, "error", 2);
+o([
+  l({ type: String, attribute: "help-text" })
+], r.prototype, "helpText", 2);
+o([
+  l({ attribute: "required-message" })
+], r.prototype, "requiredMessage", 2);
+o([
+  l({ type: String, attribute: "hx-size", reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  l({ type: String, attribute: "accessible-label" })
+], r.prototype, "accessibleLabel", 2);
+o([
+  S(".checkbox__input")
+], r.prototype, "_inputEl", 2);
+o([
+  b()
+], r.prototype, "_hasErrorSlot", 2);
+o([
+  b()
+], r.prototype, "_hasHelpTextSlot", 2);
+o([
+  b()
+], r.prototype, "_hasLabelSlot", 2);
+o([
+  b()
+], r.prototype, "_announcedError", 2);
+o([
+  b()
+], r.prototype, "_fallbackAriaLabelledBy", 2);
+o([
+  b()
+], r.prototype, "_fallbackAriaDescribedBy", 2);
+o([
+  b()
+], r.prototype, "_supportsIdrefRefs", 2);
+r = o([
+  T("hx-checkbox")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-checkbox-C48KYKFq.js.map