agnosticui-core 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/components/Radio/core/_Radio.d.ts

@@ -113,9 +113,19 @@ export declare class AgRadio extends AgRadio_base implements RadioProps {
      */
     private _syncFormValue;
     /**
-     * Sync validity to ElementInternals by delegating to the inner
-     * <input type="radio">. The required constraint is met when any radio
-     * in the group is checked; the browser handles this natively.
+     * Returns true if any ag-radio in this named group is checked.
+     * Uses the same DOM-traversal logic as uncheckOtherRadiosInGroup so it
+     * works whether the radios are in the document or nested inside a shadow root.
+     */
+    private _isGroupChecked;
+    /**
+     * Sync validity to ElementInternals.
+     *
+     * Shadow DOM isolation prevents the inner <input type="radio"> from seeing
+     * sibling ag-radio elements in separate shadow trees, so native delegation
+     * would report each unchecked required radio as invalid individually.
+     * Instead we query the DOM directly: a required radio group is valid when
+     * ANY radio with the same name is checked.
      */
     private _syncValidity;
     /**

package/dist/components/Radio/core/_Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/core/_Radio.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"_Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/core/_Radio.ts"],"names":[],"mappings":"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"}

package/dist/components/Radio/core/_Radio.js

@@ -1,16 +1,16 @@
 import { LitElement as p, css as b, nothing as c, html as h } from "lit";
-import { n as o } from "../../../property-CemaeiRl.js";
-import { formControlStyles as v } from "../../../shared/form-control-styles.js";
-import { createFormControlIds as f, buildAriaDescribedBy as w } from "../../../shared/form-control-utils.js";
-import { FaceMixin as m, syncInnerInputValidity as y } from "../../../shared/face-mixin.js";
-var k = Object.defineProperty, s = (g, r, i, d) => {
-  for (var e = void 0, a = g.length - 1, l; a >= 0; a--)
-    (l = g[a]) && (e = l(r, i, e) || e);
-  return e && k(r, i, e), e;
+import { n as s } from "../../../property-CemaeiRl.js";
+import { formControlStyles as f } from "../../../shared/form-control-styles.js";
+import { createFormControlIds as v, buildAriaDescribedBy as w } from "../../../shared/form-control-utils.js";
+import { FaceMixin as m } from "../../../shared/face-mixin.js";
+var y = Object.defineProperty, d = (u, e, a, t) => {
+  for (var r = void 0, i = u.length - 1, l; i >= 0; i--)
+    (l = u[i]) && (r = l(e, a, r) || r);
+  return r && y(e, a, r), r;
 }, n;
-const t = (n = class extends m(p) {
+const o = (n = class extends m(p) {
   constructor() {
-    super(...arguments), this.value = "", this.checked = !1, this.disabled = !1, this.size = "medium", this.theme = "primary", this.labelText = "", this.labelPosition = "end", this.label = "", this.labelHidden = !1, this.noLabel = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "", this._ids = f("ag-radio");
+    super(...arguments), this.value = "", this.checked = !1, this.disabled = !1, this.size = "medium", this.theme = "primary", this.labelText = "", this.labelPosition = "end", this.label = "", this.labelHidden = !1, this.noLabel = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "", this._ids = v("ag-radio");
   }
   // ─── FACE ─────────────────────────────────────────────────────────────────
   /**
@@ -23,12 +23,40 @@ const t = (n = class extends m(p) {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
   /**
-   * Sync validity to ElementInternals by delegating to the inner
-   * <input type="radio">. The required constraint is met when any radio
-   * in the group is checked; the browser handles this natively.
+   * Returns true if any ag-radio in this named group is checked.
+   * Uses the same DOM-traversal logic as uncheckOtherRadiosInGroup so it
+   * works whether the radios are in the document or nested inside a shadow root.
+   */
+  _isGroupChecked() {
+    if (this.checked) return !0;
+    let e = this.getRootNode();
+    for (; e && "host" in e; ) {
+      const t = e.host?.getRootNode();
+      if (t && t !== e)
+        e = t;
+      else
+        break;
+    }
+    const a = e instanceof Document ? e : document;
+    return Array.from(a.querySelectorAll(`ag-radio[name="${this.name}"]`)).some(
+      (t) => t.checked
+    );
+  }
+  /**
+   * Sync validity to ElementInternals.
+   *
+   * Shadow DOM isolation prevents the inner <input type="radio"> from seeing
+   * sibling ag-radio elements in separate shadow trees, so native delegation
+   * would report each unchecked required radio as invalid individually.
+   * Instead we query the DOM directly: a required radio group is valid when
+   * ANY radio with the same name is checked.
    */
   _syncValidity() {
-    y(this._internals, this.inputRef);
+    if (!this.required) {
+      this._internals.setValidity({});
+      return;
+    }
+    this._isGroupChecked() ? this._internals.setValidity({}) : this._internals.setValidity({ valueMissing: !0 }, "Please select one of these options.");
   }
   /**
    * FACE lifecycle: called when the parent form is reset.
@@ -56,64 +84,64 @@ const t = (n = class extends m(p) {
   firstUpdated() {
     this.inputRef = this.shadowRoot?.querySelector(".radio-input"), this._syncFormValue(), this._syncValidity(), this._syncStates();
   }
-  updated(r) {
-    super.updated(r), r.has("checked") && (this._syncFormValue(), this._syncValidity(), this._syncStates());
+  updated(e) {
+    super.updated(e), e.has("checked") && (this._syncFormValue(), this._syncValidity(), this._syncStates());
   }
-  handleClick(r) {
-    this.onClick && this.onClick(r);
+  handleClick(e) {
+    this.onClick && this.onClick(e);
   }
-  handleKeyDown(r) {
-    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(r.key))
+  handleKeyDown(e) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key))
       return;
-    r.preventDefault();
-    const i = this.getRadiosInGroup();
-    if (i.length === 0) return;
-    const d = i.indexOf(this);
-    if (d === -1) return;
-    let e;
-    r.key === "Home" ? e = 0 : r.key === "End" ? e = i.length - 1 : r.key === "ArrowDown" || r.key === "ArrowRight" ? e = (d + 1) % i.length : e = (d - 1 + i.length) % i.length;
-    const a = i[e];
-    if (a && !a.disabled) {
-      const l = a.shadowRoot?.querySelector(".radio-input");
+    e.preventDefault();
+    const a = this.getRadiosInGroup();
+    if (a.length === 0) return;
+    const t = a.indexOf(this);
+    if (t === -1) return;
+    let r;
+    e.key === "Home" ? r = 0 : e.key === "End" ? r = a.length - 1 : e.key === "ArrowDown" || e.key === "ArrowRight" ? r = (t + 1) % a.length : r = (t - 1 + a.length) % a.length;
+    const i = a[r];
+    if (i && !i.disabled) {
+      const l = i.shadowRoot?.querySelector(".radio-input");
       if (l) {
-        l.focus(), a.checked = !0, a.uncheckOtherRadiosInGroup();
-        const u = new CustomEvent(
+        l.focus(), i.checked = !0, i.uncheckOtherRadiosInGroup();
+        const g = new CustomEvent(
           "change",
           {
             detail: {
               checked: !0,
-              value: a.value,
-              name: a.name
+              value: i.value,
+              name: i.name
             },
             bubbles: !0,
             composed: !0
           }
         );
-        a.dispatchEvent(u), a.onChange && a.onChange(u);
+        i.dispatchEvent(g), i.onChange && i.onChange(g);
       }
     }
   }
   getRadiosInGroup() {
     if (!this.name) return [];
-    let r = this.getRootNode();
-    for (; r && "host" in r; ) {
-      const e = r.host?.getRootNode();
-      if (e && e !== r)
-        r = e;
+    let e = this.getRootNode();
+    for (; e && "host" in e; ) {
+      const r = e.host?.getRootNode();
+      if (r && r !== e)
+        e = r;
       else
         break;
     }
-    const d = (r instanceof Document ? r : document).querySelectorAll(`ag-radio[name="${this.name}"]`);
-    return Array.from(d).filter((e) => e instanceof n && !e.disabled);
+    const t = (e instanceof Document ? e : document).querySelectorAll(`ag-radio[name="${this.name}"]`);
+    return Array.from(t).filter((r) => r instanceof n && !r.disabled);
   }
-  handleChange(r) {
+  handleChange(e) {
     if (this.disabled) {
-      r.preventDefault();
+      e.preventDefault();
       return;
     }
-    const i = r.target, d = this.checked;
-    this.checked = i.checked, this._syncFormValue(), this._syncValidity(), this._syncStates(), this.checked && !d && this.name && this.uncheckOtherRadiosInGroup();
-    const e = new CustomEvent(
+    const a = e.target, t = this.checked;
+    this.checked = a.checked, this._syncFormValue(), this._syncValidity(), this._syncStates(), this.checked && !t && this.name && this.uncheckOtherRadiosInGroup();
+    const r = new CustomEvent(
       "change",
       {
         detail: {
@@ -125,19 +153,19 @@ const t = (n = class extends m(p) {
         composed: !0
       }
     );
-    this.dispatchEvent(e), this.onChange && this.onChange(e);
+    this.dispatchEvent(r), this.onChange && this.onChange(r);
   }
   uncheckOtherRadiosInGroup() {
-    let r = this.getRootNode();
-    for (; r && "host" in r; ) {
-      const e = r.host?.getRootNode();
-      if (e && e !== r)
-        r = e;
+    let e = this.getRootNode();
+    for (; e && "host" in e; ) {
+      const r = e.host?.getRootNode();
+      if (r && r !== e)
+        e = r;
       else
         break;
     }
-    (r instanceof Document ? r : document).querySelectorAll(`ag-radio[name="${this.name}"]`).forEach((e) => {
-      e !== this && e instanceof n && (e.checked = !1);
+    (e instanceof Document ? e : document).querySelectorAll(`ag-radio[name="${this.name}"]`).forEach((r) => {
+      r !== this && r instanceof n && (r.checked = !1, r._syncValidity(), r._syncStates());
     });
   }
   /**
@@ -199,18 +227,18 @@ const t = (n = class extends m(p) {
     });
   }
   render() {
-    const r = `
+    const e = `
       radio-wrapper
       ${this.labelPosition === "start" ? "radio-wrapper--label-start" : ""}
-    `, i = `
+    `, a = `
       radio-indicator
       radio-indicator--${this.size}
       radio-indicator--${this.theme}
-    `, d = `
+    `, t = `
       radio-label
       radio-label--${this.size}
-    `, e = this._getAriaDescribedBy(), a = h`
-      <label class=${r.trim()} part="ag-radio-wrapper">
+    `, r = this._getAriaDescribedBy(), i = h`
+      <label class=${e.trim()} part="ag-radio-wrapper">
         <input
           type="radio"
           id="${this._ids.inputId}"
@@ -223,14 +251,14 @@ const t = (n = class extends m(p) {
           ?required=${this.required}
           aria-required="${this.required ? "true" : "false"}"
           aria-invalid="${this.invalid ? "true" : "false"}"
-          aria-describedby="${e || c}"
+          aria-describedby="${r || c}"
           @click=${this.handleClick}
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
           aria-checked=${this.checked ? "true" : "false"}
         />
-        <span class=${i.trim()} part="ag-radio-indicator"></span>
-        <span class=${d.trim()} part="ag-radio-label">
+        <span class=${a.trim()} part="ag-radio-indicator"></span>
+        <span class=${t.trim()} part="ag-radio-label">
           ${this.labelText ? this.labelText : h`<slot></slot>`}
         </span>
       </label>
@@ -238,14 +266,14 @@ const t = (n = class extends m(p) {
     return this.label || this.helpText || this.errorMessage ? h`
         <div class="ag-radio-wrapper-with-external">
           ${this._renderExternalLabel()}
-          ${a}
+          ${i}
           ${this._renderHelper()}
           ${this._renderError()}
         </div>
-      ` : a;
+      ` : i;
   }
 }, n.styles = [
-  v,
+  f,
   b`
       :host {
         display: inline-block;
@@ -432,55 +460,55 @@ const t = (n = class extends m(p) {
     }
   `
 ], n);
-s([
-  o({ type: String, reflect: !0 })
-], t.prototype, "value");
-s([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "checked");
-s([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-s([
-  o({ type: String })
-], t.prototype, "size");
-s([
-  o({ type: String })
-], t.prototype, "theme");
-s([
-  o({ type: String })
-], t.prototype, "labelText");
-s([
-  o({ type: String })
-], t.prototype, "labelPosition");
-s([
-  o({ type: String })
-], t.prototype, "label");
-s([
-  o({ type: Boolean, attribute: "label-hidden" })
-], t.prototype, "labelHidden");
-s([
-  o({ type: Boolean, attribute: "no-label" })
-], t.prototype, "noLabel");
-s([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "required");
-s([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "invalid");
-s([
-  o({ type: String, attribute: "error-message" })
-], t.prototype, "errorMessage");
-s([
-  o({ type: String, attribute: "help-text" })
-], t.prototype, "helpText");
-s([
-  o({ attribute: !1 })
-], t.prototype, "onClick");
-s([
-  o({ attribute: !1 })
-], t.prototype, "onChange");
-let R = t;
+d([
+  s({ type: String, reflect: !0 })
+], o.prototype, "value");
+d([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "checked");
+d([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+d([
+  s({ type: String })
+], o.prototype, "size");
+d([
+  s({ type: String })
+], o.prototype, "theme");
+d([
+  s({ type: String })
+], o.prototype, "labelText");
+d([
+  s({ type: String })
+], o.prototype, "labelPosition");
+d([
+  s({ type: String })
+], o.prototype, "label");
+d([
+  s({ type: Boolean, attribute: "label-hidden" })
+], o.prototype, "labelHidden");
+d([
+  s({ type: Boolean, attribute: "no-label" })
+], o.prototype, "noLabel");
+d([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "required");
+d([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "invalid");
+d([
+  s({ type: String, attribute: "error-message" })
+], o.prototype, "errorMessage");
+d([
+  s({ type: String, attribute: "help-text" })
+], o.prototype, "helpText");
+d([
+  s({ attribute: !1 })
+], o.prototype, "onClick");
+d([
+  s({ attribute: !1 })
+], o.prototype, "onChange");
+let C = o;
 export {
-  R as AgRadio
+  C as AgRadio
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agnosticui-core",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "author": "AgnosticUI",
   "license": "Apache-2.0",
   "type": "module",

package/src/components/Radio/core/_Radio.ts

@@ -5,7 +5,7 @@ import {
   createFormControlIds,
   buildAriaDescribedBy,
 } from '../../../shared/form-control-utils';
-import { FaceMixin, syncInnerInputValidity } from '../../../shared/face-mixin';
+import { FaceMixin } from '../../../shared/face-mixin';
 
 
 export type RadioSize = 'small' | 'medium' | 'large';
@@ -356,12 +356,46 @@ export class AgRadio extends FaceMixin(LitElement) implements RadioProps {
   }
 
   /**
-   * Sync validity to ElementInternals by delegating to the inner
-   * <input type="radio">. The required constraint is met when any radio
-   * in the group is checked; the browser handles this natively.
+   * Returns true if any ag-radio in this named group is checked.
+   * Uses the same DOM-traversal logic as uncheckOtherRadiosInGroup so it
+   * works whether the radios are in the document or nested inside a shadow root.
+   */
+  private _isGroupChecked(): boolean {
+    if (this.checked) return true;
+    let root: Node = this.getRootNode();
+    while (root && 'host' in root) {
+      const parent = (root as ShadowRoot).host?.getRootNode();
+      if (parent && parent !== root) {
+        root = parent;
+      } else {
+        break;
+      }
+    }
+    const doc = root instanceof Document ? root : document;
+    return Array.from(doc.querySelectorAll(`ag-radio[name="${this.name}"]`)).some(
+      (el) => (el as AgRadio).checked
+    );
+  }
+
+  /**
+   * Sync validity to ElementInternals.
+   *
+   * Shadow DOM isolation prevents the inner <input type="radio"> from seeing
+   * sibling ag-radio elements in separate shadow trees, so native delegation
+   * would report each unchecked required radio as invalid individually.
+   * Instead we query the DOM directly: a required radio group is valid when
+   * ANY radio with the same name is checked.
    */
   private _syncValidity(): void {
-    syncInnerInputValidity(this._internals, this.inputRef);
+    if (!this.required) {
+      this._internals.setValidity({});
+      return;
+    }
+    if (this._isGroupChecked()) {
+      this._internals.setValidity({});
+    } else {
+      this._internals.setValidity({ valueMissing: true }, 'Please select one of these options.');
+    }
   }
 
   /**
@@ -571,6 +605,11 @@ export class AgRadio extends FaceMixin(LitElement) implements RadioProps {
     allRadios.forEach((radio) => {
       if (radio !== this && radio instanceof AgRadio) {
         radio.checked = false;
+        // If checked didn't actually change (was already false), Lit's updated() won't
+        // fire on the sibling, so _syncValidity() wouldn't be called. Force it so
+        // unchecked siblings correctly reflect the group's new validity state.
+        radio._syncValidity();
+        radio._syncStates();
       }
     });
   }