@helixui/library 3.3.1 → 3.4.0

package/dist/shared/hx-radio-CJvNU2yP.js

@@ -1,621 +0,0 @@
-import { css as g, nothing as h, html as p } from "lit";
-import { property as d, state as S, customElement as m } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { F as C } from "./FormMixin-B8PXk5RQ.js";
-import { b as k } from "./forced-colors-CTEDFRGa.js";
-import { H as w } from "./helix-element-BNEYeiys.js";
-import { c as R } from "./id-counter-DuX8vsui.js";
-const E = g`
-  :host {
-    display: block;
-  }
-
-  :host([disabled]) {
-    opacity: var(--hx-opacity-disabled, 0.5);
-    pointer-events: none;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  /* ─── Fieldset ─── */
-
-  .fieldset {
-    border: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-2, 0.5rem);
-    font-family: var(--hx-radio-group-font-family, var(--hx-font-family-sans, sans-serif));
-  }
-
-  /* ─── Legend ─── */
-
-  .fieldset__legend {
-    display: flex;
-    align-items: baseline;
-    gap: var(--hx-space-1, 0.25rem);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #202b39));
-    line-height: var(--hx-line-height-normal, 1.5);
-    padding: 0;
-    margin-bottom: var(--hx-space-1, 0.25rem);
-  }
-
-  .fieldset__required-marker {
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
-    font-weight: var(--hx-font-weight-bold, 700);
-  }
-
-  /* ─── Group Container ─── */
-
-  .fieldset__group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));
-  }
-
-  :host([orientation='horizontal']) .fieldset__group {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  /* ─── Error State ─── */
-
-  .fieldset--error .fieldset__legend {
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
-  }
-
-  /* ─── Help Text & Error Messages ─── */
-
-  .fieldset__help-text {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #66787b));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  .fieldset__error {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  /* ─── 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 I = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
-  for (var o = r > 1 ? void 0 : r ? $(t, i) : t, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (o = (r ? s(t, i, o) : s(o)) || o);
-  return r && o && I(t, i, o), o;
-};
-const T = R("hx-radio-group");
-let l = class extends C(w) {
-  constructor() {
-    super(...arguments), this.value = "", this.name = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.orientation = "vertical", this._hasErrorSlot = !1, this._groupId = T(), this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._cachedRadios = null, this._individualDisabledStates = /* @__PURE__ */ new WeakMap(), this._handleRadioSelect = (e) => {
-      if (!(e instanceof CustomEvent)) return;
-      e.stopPropagation();
-      const t = e.detail.value;
-      t !== this.value && (this.value = t, this._handleInteractionInput(), this.dispatchEvent(
-        new CustomEvent("hx-change", {
-          bubbles: !0,
-          composed: !0,
-          detail: { value: this.value, checked: !0 }
-        })
-      ));
-    }, this._handleKeydown = (e) => {
-      var x, b, _, v;
-      const t = this._getEnabledRadios();
-      if (t.length === 0 || ![
-        "ArrowUp",
-        "ArrowDown",
-        "ArrowLeft",
-        "ArrowRight",
-        " ",
-        "Home",
-        "End"
-      ].includes(e.key))
-        return;
-      if (e.preventDefault(), e.key === " ") {
-        const u = (b = (x = e.target) == null ? void 0 : x.closest) == null ? void 0 : b.call(x, "hx-radio");
-        u && !u.disabled && u.dispatchEvent(
-          new CustomEvent("hx-radio-select", {
-            bubbles: !0,
-            composed: !0,
-            detail: { value: u.value }
-          })
-        );
-        return;
-      }
-      const r = (v = (_ = e.target) == null ? void 0 : _.closest) == null ? void 0 : v.call(_, "hx-radio"), o = r ? t.indexOf(r) : t.findIndex((u) => u.checked);
-      let a;
-      e.key === "Home" ? a = 0 : e.key === "End" ? a = t.length - 1 : e.key === "ArrowDown" || e.key === "ArrowRight" ? a = o === -1 ? 0 : (o + 1) % t.length : a = o <= 0 ? t.length - 1 : o - 1;
-      const s = t[a];
-      s && (s.focus(), s.dispatchEvent(
-        new CustomEvent("hx-radio-select", {
-          bubbles: !0,
-          composed: !0,
-          detail: { value: s.value }
-        })
-      ));
-    };
-  }
-  /**
-   * Queries the rendered group container element within the shadow root.
-   * @internal
-   */
-  get _groupEl() {
-    var e;
-    return ((e = this.renderRoot) == null ? void 0 : e.querySelector(".fieldset__group")) ?? null;
-  }
-  // ─── Slot Handlers ───
-  /**
-   * Handles slotchange events on the error slot to detect assigned content.
-   * @internal
-   */
-  _handleErrorSlotChange(e) {
-    e.target instanceof HTMLSlotElement && (this._hasErrorSlot = e.target.assignedNodes({ flatten: !0 }).length > 0);
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("hx-radio-select", this._handleRadioSelect), this.addEventListener("keydown", this._handleKeydown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("hx-radio-select", this._handleRadioSelect), this.removeEventListener("keydown", this._handleKeydown);
-  }
-  updated(e) {
-    var t;
-    if (super.updated(e), e.has("value") && (this._internals.setFormValue(this.value || null), this._syncRadios()), e.has("disabled") && this._syncRadios(), e.has("error") && this.error) {
-      const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
-      if (i) {
-        const r = this.error;
-        requestAnimationFrame(() => {
-          i.textContent = "", requestAnimationFrame(() => {
-            i.textContent = r;
-          });
-        });
-      }
-    }
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this._syncRadios(), !this.label && this.getAttribute("aria-label");
-  }
-  /**
-   * Returns all child hx-radio elements, using the cache when available.
-   * @internal
-   */
-  _getRadios() {
-    return this._cachedRadios || (this._cachedRadios = Array.from(this.querySelectorAll("hx-radio"))), this._cachedRadios;
-  }
-  /**
-   * Returns only the child hx-radio elements that are not disabled.
-   * @internal
-   */
-  _getEnabledRadios() {
-    return this._getRadios().filter((e) => !e.disabled && !this.disabled);
-  }
-  /**
-   * Synchronizes checked state, disabled state, and roving tabindex across all child radios.
-   * @internal
-   */
-  _syncRadios() {
-    const e = this._getRadios(), t = this._getEnabledRadios();
-    e.forEach((r) => {
-      const o = r.value === this.value && this.value !== "";
-      if (r.checked = o, this.disabled)
-        this._individualDisabledStates.has(r) || this._individualDisabledStates.set(r, r.disabled), r.disabled = !0;
-      else {
-        const a = this._individualDisabledStates.get(r);
-        a !== void 0 && (r.disabled = a, this._individualDisabledStates.delete(r));
-      }
-    });
-    const i = t.find((r) => r.checked);
-    if (e.forEach((r) => {
-      r.tabIndex = -1;
-    }), i)
-      i.tabIndex = 0;
-    else if (t.length > 0) {
-      const r = t[0];
-      r && (r.tabIndex = 0);
-    }
-  }
-  /**
-   * Handles slotchange events on the default slot to refresh the radio cache.
-   * @internal
-   */
-  _handleSlotChange() {
-    this._cachedRadios = null, this._syncRadios();
-  }
-  // ─── Form Integration ───
-  /**
-   * Updates the ElementInternals validity state based on the required constraint and current value.
-   * @internal
-   */
-  _updateValidity() {
-    this.required && !this.value ? this._internals.setValidity(
-      { valueMissing: !0 },
-      this.error || "Please select an option.",
-      this._groupEl ?? void 0
-    ) : this._internals.setValidity({});
-  }
-  /** @internal */
-  _onFormReset() {
-    this.value = "", this._internals.setFormValue(null), this._syncRadios(), this._resetInteractionState();
-  }
-  /** @internal */
-  _onFormStateRestore(e, t) {
-    typeof e == "string" && (this.value = e);
-  }
-  /** @internal */
-  _onFormDisabled(e) {
-    this.disabled = e;
-  }
-  // ─── Render ───
-  render() {
-    const e = !!this.error, t = `${this._groupId}-legend`, i = {
-      fieldset: !0,
-      "fieldset--error": e,
-      "fieldset--disabled": this.disabled,
-      "fieldset--required": this.required
-    }, r = !!this.helpText, s = [
-      e || this._hasErrorSlot ? this._errorId : null,
-      r ? this._helpTextId : null
-    ].filter(Boolean).join(" ") || h;
-    return p`
-      <fieldset
-        part="fieldset"
-        class=${y(i)}
-        role="radiogroup"
-        aria-labelledby=${this.label ? t : h}
-        aria-describedby=${s}
-        aria-required=${this.required ? "true" : h}
-      >
-        ${this.label ? p`
-              <legend part="legend" class="fieldset__legend" id=${t}>
-                ${this.label}
-                ${this.required ? p`<span class="fieldset__required-marker" aria-hidden="true">*</span>` : h}
-              </legend>
-            ` : h}
-
-        <div part="group" class="fieldset__group" role="none">
-          <slot @slotchange=${this._handleSlotChange}></slot>
-        </div>
-
-        <!-- WCAG 1.3.1: wrap slot in a persistent container so _errorId stays stable
-             regardless of whether error content comes from the slot or the property. -->
-        <div id=${this._errorId}>
-          <slot name="error" @slotchange=${this._handleErrorSlotChange}>
-            ${e ? p`<div part="error" class="fieldset__error" role="alert">${this.error}</div>` : h}
-          </slot>
-        </div>
-
-        ${this.helpText && !e ? p`
-              <div part="help-text" class="fieldset__help-text" id=${this._helpTextId}>
-                <slot name="help-text">${this.helpText}</slot>
-              </div>
-            ` : h}
-      </fieldset>
-    `;
-  }
-};
-l.styles = [E, k];
-l.formAssociated = !0;
-n([
-  d({ type: String, reflect: !0 })
-], l.prototype, "value", 2);
-n([
-  d({ type: String, reflect: !0 })
-], l.prototype, "name", 2);
-n([
-  d({ type: String })
-], l.prototype, "label", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
-], l.prototype, "required", 2);
-n([
-  d({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-n([
-  d({ type: String })
-], l.prototype, "error", 2);
-n([
-  d({ type: String, attribute: "help-text" })
-], l.prototype, "helpText", 2);
-n([
-  d({ type: String, reflect: !0 })
-], l.prototype, "orientation", 2);
-n([
-  S()
-], l.prototype, "_hasErrorSlot", 2);
-l = n([
-  m("hx-radio-group")
-], l);
-const H = g`
-  :host {
-    display: block;
-  }
-
-  :host([disabled]) {
-    opacity: var(--hx-opacity-disabled, 0.5);
-    pointer-events: none;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .radio {
-    display: inline-flex;
-    align-items: center;
-    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;
-    position: relative;
-    font-family: var(--hx-radio-font-family, var(--hx-font-family-sans, sans-serif));
-  }
-
-  .radio--disabled {
-    cursor: not-allowed;
-  }
-
-  /* ─── Hidden Native Input ─── */
-
-  .radio__input {
-    position: absolute;
-    width: var(--hx-space-px);
-    height: var(--hx-space-px);
-    padding: 0;
-    margin: calc(var(--hx-space-px) * -1);
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* ─── Visual Radio Circle ─── */
-
-  .radio__control {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
-    height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));
-    border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-radio-border-color, var(--hx-color-border-strong, #66787b));
-    border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-radio-bg, var(--hx-color-surface-default, #ffffff));
-    transition:
-      border-color var(--hx-transition-fast, 150ms ease),
-      background-color var(--hx-transition-fast, 150ms ease),
-      box-shadow var(--hx-transition-fast, 150ms ease);
-    flex-shrink: 0;
-  }
-
-  /* ─── Inner Dot ─── */
-
-  .radio__dot {
-    width: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);
-    height: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);
-    border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-radio-dot-color, var(--hx-color-text-on-primary, #ffffff));
-    transform: scale(0);
-    transition: transform var(--hx-transition-fast, 150ms ease);
-  }
-
-  /* ─── Checked State ─── */
-
-  .radio--checked .radio__control {
-    border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #429797));
-    background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #429797));
-  }
-
-  .radio--checked .radio__dot {
-    transform: scale(1);
-  }
-
-  /* ─── Focus State ─── */
-
-  :host(:focus-visible) .radio__control {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-radio-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  /* ─── Hover State ─── */
-
-  .radio:not(.radio--disabled):not(.radio--checked):hover .radio__control {
-    border-color: var(--hx-radio-hover-border-color, var(--hx-color-border-strong, #66787b));
-  }
-
-  /* ─── Label ─── */
-
-  .radio__label {
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-radio-label-color, var(--hx-color-text-strong, #202b39));
-    line-height: var(--hx-line-height-normal, 1.5);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  /* ─── Reduced Motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    .radio__control,
-    .radio__dot {
-      transition: none;
-    }
-  }
-
-  /* ─── High Contrast Mode (forced-colors) ─── */
-
-  @media (forced-colors: active) {
-    .radio__control {
-      forced-color-adjust: none;
-      background-color: ButtonFace;
-      border: 2px solid ButtonText;
-    }
-
-    :host(:focus-visible) .radio__control {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
-    }
-
-    .radio--checked .radio__control {
-      background-color: Highlight;
-      border-color: Highlight;
-    }
-
-    .radio--checked .radio__dot {
-      background-color: HighlightText;
-    }
-
-    :host([disabled]) {
-      opacity: 1;
-    }
-
-    :host([disabled]) .radio__control {
-      border-color: GrayText;
-      background-color: ButtonFace;
-    }
-
-    :host([disabled]) .radio--checked .radio__control {
-      background-color: GrayText;
-      border-color: GrayText;
-    }
-
-    :host([disabled]) .radio__label {
-      color: GrayText;
-    }
-
-    .radio__label {
-      color: CanvasText;
-    }
-  }
-`;
-var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, f = (e, t, i, r) => {
-  for (var o = r > 1 ? void 0 : r ? A(t, i) : t, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (o = (r ? s(t, i, o) : s(o)) || o);
-  return r && o && z(t, i, o), o;
-};
-const D = R("hx-radio");
-let c = class extends w {
-  constructor() {
-    super(...arguments), this.value = "", this.label = "", this.disabled = !1, this.checked = !1, this._inputId = D();
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback(), this._internals.role = "radio", this._syncAriaState();
-  }
-  updated(e) {
-    super.updated(e), (e.has("checked") || e.has("label") || e.has("disabled")) && this._syncAriaState();
-  }
-  /**
-   * Mirror reactive ARIA state onto ElementInternals. Setting a value to `null`
-   * removes it from the accessibility tree (matching the previous
-   * removeAttribute behavior).
-   *
-   * WCAG 4.1.2: expose the label text as ariaLabel on the host so assistive
-   * technology can associate the visible label with the radio role. The label
-   * span lives inside Shadow DOM and aria-labelledby cannot cross shadow
-   * boundaries, so ariaLabel on the host is the correct pattern here.
-   *
-   * WCAG 4.1.2: omit ariaDisabled entirely when not disabled. Setting
-   * aria-disabled="false" is verbose and unnecessary — omission is preferred.
-   *
-   * @internal
-   */
-  _syncAriaState() {
-    this._internals.ariaChecked = String(this.checked), this._internals.ariaLabel = this.label || null, this._internals.ariaDisabled = this.disabled ? "true" : null;
-  }
-  // ─── Event Handling ───
-  /** @internal */
-  _handleClick() {
-    this.disabled || this.dispatchEvent(
-      new CustomEvent("hx-radio-select", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.value }
-      })
-    );
-  }
-  // ─── Render ───
-  render() {
-    const e = {
-      radio: !0,
-      "radio--checked": this.checked,
-      "radio--disabled": this.disabled
-    };
-    return p`
-      <div class=${y(e)} @click=${this._handleClick}>
-        <input
-          class="radio__input"
-          type="radio"
-          id=${this._inputId}
-          .checked=${this.checked}
-          ?disabled=${this.disabled}
-          tabindex="-1"
-          aria-hidden="true"
-        />
-        <span part="radio" class="radio__control" aria-hidden="true">
-          <span class="radio__dot"></span>
-        </span>
-        <span part="label" class="radio__label">
-          <slot>${this.label}</slot>
-        </span>
-      </div>
-    `;
-  }
-};
-c.styles = [H, k];
-f([
-  d({ type: String })
-], c.prototype, "value", 2);
-f([
-  d({ type: String })
-], c.prototype, "label", 2);
-f([
-  d({ type: Boolean, reflect: !0 })
-], c.prototype, "disabled", 2);
-f([
-  d({ type: Boolean, reflect: !0 })
-], c.prototype, "checked", 2);
-c = f([
-  m("hx-radio")
-], c);
-export {
-  c as H,
-  l as a
-};
-//# sourceMappingURL=hx-radio-CJvNU2yP.js.map