@aurodesignsystem-dev/auro-formkit 0.0.0-pr1608.0 → 0.0.0-pr1608.2

package/components/input/demo/customize.min.js

@@ -12396,7 +12396,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 /**
  * @license

package/components/input/demo/getting-started.min.js

@@ -12396,7 +12396,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 /**
  * @license

package/components/input/demo/index.min.js

@@ -12396,7 +12396,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 /**
  * @license

package/components/input/dist/index.js

@@ -12338,7 +12338,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/dist/registered.js

@@ -12338,7 +12338,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/demo/accessibility.md

@@ -8,12 +8,13 @@ For keyboard interaction details, see the <auro-hyperlink href="keyboard-behavio
 
 <auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
 <auro-header level="3" id="radioGroup">Radio Group</auro-header>
-The `<auro-radio-group>` element uses a `<fieldset>` with a `<legend>` internally, providing native grouping semantics:
+The `<auro-radio-group>` element uses a `<fieldset>` with a `<legend>` internally, providing native grouping semantics. These attributes are applied to that shadow-DOM `<fieldset>`, **not** to the `<auro-radio-group>` host element:
 
 | Attribute | Value | Description |
 |---|---|---|
-| `role` | `radiogroup` (implicit via `fieldset`) | Groups related radio buttons together. |
-| `aria-invalid` | `true` / `false` | Reflects whether the group is currently in an invalid state. |
+| `role` | `radiogroup` | Groups related radio buttons together. Set explicitly on the `<fieldset>`; a bare `<fieldset>` would otherwise expose the implicit role `group`. |
+| `aria-invalid` | `true` | Present only while the group is in an invalid state. The attribute is **omitted entirely** when the group is valid — it is never set to `false`. |
+| `aria-describedby` | id reference | Points at the `id` of the group's help-text/error element, so assistive technology can associate the message with the group on demand rather than relying only on the one-time live-region announcement. |
 
 <auro-header level="3" id="radioElement">Radio</auro-header>
 Each `<auro-radio>` renders a native `<input type="radio">` inside its shadow DOM:
@@ -23,12 +24,22 @@ Each `<auro-radio>` renders a native `<input type="radio">` inside its shadow DO
 | `type` | `radio` | Native radio input type. |
 | `aria-checked` | `true` / `false` | Reflects the selected state of the radio button. |
 | `aria-disabled` | `true` / `false` | Indicates whether the radio button is disabled. |
+| `aria-invalid` | `true` | Mirrored onto each radio from the group while the group is invalid, and removed when it becomes valid. Omitted rather than set to `false`. |
+
+<auro-header level="4" id="invalidStatePlacement">Why the invalid state appears twice</auro-header>
+While the group is invalid, `aria-invalid` is set on both the `<fieldset>` and every individual `<auro-radio>`. This is intentional. Some assistive-technology and browser combinations announce a container's invalid state only when focus first enters the group, not on each subsequent arrow-key move between radios; mirroring the state onto each radio keeps it conveyed throughout. As a side effect, VoiceOver may say "invalid data" twice in a single utterance when you Tab into an invalid group.
+
+The group-level placement is unambiguous: `aria-invalid` is a global attribute in ARIA 1.1, and although ARIA 1.2 deprecates that global use in favor of a supported-role list, `radiogroup` is on that list — so the `<fieldset>` is spec-clean under either version. The **per-radio** placement rests on the looser footing: `radio` is *not* on the ARIA 1.2 supported-role list, so it depends on the same deprecated-global allowance that the [Checkbox accessibility page](../../checkbox/demo/accessibility.html) documents for its `group` fieldset. It is not a *prohibited* attribute for `radio`, current axe-core resolves it as global and reports no violation, and the per-radio redundancy is what keeps the invalid state conveyed while arrowing through options — so it is kept deliberately. An automated axe assertion in the component's test suite pins this outcome, so a change in tooling surfaces there rather than in a consumer's audit.
+
+<auro-header level="4" id="attributePlacementNote">Attribute placement</auro-header>
+`aria-invalid` is applied to the internal `<fieldset>`, which is the element that carries `role="radiogroup"` — ARIA state has to live on the same element as the role it describes. It is **not** set on the `<auro-radio-group>` host element. Do not write CSS selectors or test assertions against `auro-radio-group[aria-invalid]`; query the `part="radio-group"` fieldset or read the `validity` property instead.
 
 <auro-header level="2" id="screenReaderAnnouncements">Screen Reader Announcements</auro-header>
 - **Focus** — When focus moves to a radio button, the screen reader announces the radio label, its selected/unselected state, its position in the group (e.g. "1 of 3"), and role ("radio button").
 - **State change** — Selecting a radio button announces the new state ("selected").
 - **Group context** — The legend text provides group context when navigating between groups.
-- **Error** — When validation fails, the error message is announced to screen reader users.
+- **Error** — When validation fails, the error message is announced immediately via the help text's `role="alert"` live region, and stays discoverable afterward through the group's `aria-describedby` association.
+- **Invalid state** — While the group is invalid, entering it or moving between its radios conveys the invalid state.
 
 <auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
 - The `legend` slot content provides the accessible group label via the native `<legend>` element.

package/components/radio/demo/customize.min.js

@@ -1251,7 +1251,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1579,18 +1579,42 @@ class AuroRadioGroup extends i$2 {
     }
 
     if (changedProperties.has('validity')) {
-      if (this.validity && this.validity !== 'valid') {
-        this.items.forEach((el) => {
-          el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
-        });
+      this.syncItemValidity();
+    }
+  }
+
+  /**
+   * Whether the group is currently in an invalid state.
+   * `validity` — not `error` — is the authoritative source: `validate()` resolves the
+   * `error` attribute to `validity = 'customError'`, so `error` is already covered here.
+   * Single definition of "invalid" for the whole component, consumed by `render()` and
+   * `syncItemValidity()` so the fieldset and its children can never disagree.
+   * @private
+   * @returns {boolean}
+   */
+  get isInvalid() {
+    return Boolean(this.validity && this.validity !== 'valid');
+  }
+
+  /**
+   * Method for mirroring the group's invalid state onto each radio input.
+   * Has to be re-applied from `handleItems()` as well, because a slot change or a
+   * reconnect can happen without `validity` itself changing.
+   * @private
+   * @returns {void}
+   */
+  syncItemValidity() {
+    const invalid = this.isInvalid;
+
+    this.items.forEach((el) => {
+      if (invalid) {
+        el.setAttribute('error', true);
+        el.setAttribute('aria-invalid', 'true');
       } else {
-        this.items.forEach((el) => {
-          el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
-        });
+        el.removeAttribute('error');
+        el.removeAttribute('aria-invalid');
       }
-    }
+    });
   }
 
   /**
@@ -1646,8 +1670,9 @@ class AuroRadioGroup extends i$2 {
 
     this.items.forEach((el) => {
       el.required = this.required;
-      el.error = Boolean(this.error);
     });
+
+    this.syncItemValidity();
   }
 
   /**
@@ -1796,7 +1821,7 @@ class AuroRadioGroup extends i$2 {
         class="${e(groupClasses)}"
         part="radio-group"
         role="radiogroup"
-        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-invalid="${o$1(this.isInvalid ? 'true' : undefined)}"
         aria-describedby="${this.uniqueId}"
       >
         <legend class="${e(legendClasses)}">
@@ -1806,7 +1831,7 @@ class AuroRadioGroup extends i$2 {
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ${!this.isInvalid
         ? u`
           <${this.helpTextTag} id="${this.uniqueId}" appearance="${this.onDark ? 'inverse' : this.appearance}" part="helpText">
             <slot name="helpText"></slot>

package/components/radio/demo/getting-started.min.js

@@ -1251,7 +1251,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1579,18 +1579,42 @@ class AuroRadioGroup extends i$2 {
     }
 
     if (changedProperties.has('validity')) {
-      if (this.validity && this.validity !== 'valid') {
-        this.items.forEach((el) => {
-          el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
-        });
+      this.syncItemValidity();
+    }
+  }
+
+  /**
+   * Whether the group is currently in an invalid state.
+   * `validity` — not `error` — is the authoritative source: `validate()` resolves the
+   * `error` attribute to `validity = 'customError'`, so `error` is already covered here.
+   * Single definition of "invalid" for the whole component, consumed by `render()` and
+   * `syncItemValidity()` so the fieldset and its children can never disagree.
+   * @private
+   * @returns {boolean}
+   */
+  get isInvalid() {
+    return Boolean(this.validity && this.validity !== 'valid');
+  }
+
+  /**
+   * Method for mirroring the group's invalid state onto each radio input.
+   * Has to be re-applied from `handleItems()` as well, because a slot change or a
+   * reconnect can happen without `validity` itself changing.
+   * @private
+   * @returns {void}
+   */
+  syncItemValidity() {
+    const invalid = this.isInvalid;
+
+    this.items.forEach((el) => {
+      if (invalid) {
+        el.setAttribute('error', true);
+        el.setAttribute('aria-invalid', 'true');
       } else {
-        this.items.forEach((el) => {
-          el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
-        });
+        el.removeAttribute('error');
+        el.removeAttribute('aria-invalid');
       }
-    }
+    });
   }
 
   /**
@@ -1646,8 +1670,9 @@ class AuroRadioGroup extends i$2 {
 
     this.items.forEach((el) => {
       el.required = this.required;
-      el.error = Boolean(this.error);
     });
+
+    this.syncItemValidity();
   }
 
   /**
@@ -1796,7 +1821,7 @@ class AuroRadioGroup extends i$2 {
         class="${e(groupClasses)}"
         part="radio-group"
         role="radiogroup"
-        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-invalid="${o$1(this.isInvalid ? 'true' : undefined)}"
         aria-describedby="${this.uniqueId}"
       >
         <legend class="${e(legendClasses)}">
@@ -1806,7 +1831,7 @@ class AuroRadioGroup extends i$2 {
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ${!this.isInvalid
         ? u`
           <${this.helpTextTag} id="${this.uniqueId}" appearance="${this.onDark ? 'inverse' : this.appearance}" part="helpText">
             <slot name="helpText"></slot>

package/components/radio/demo/index.min.js

@@ -1251,7 +1251,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1579,18 +1579,42 @@ class AuroRadioGroup extends i$2 {
     }
 
     if (changedProperties.has('validity')) {
-      if (this.validity && this.validity !== 'valid') {
-        this.items.forEach((el) => {
-          el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
-        });
+      this.syncItemValidity();
+    }
+  }
+
+  /**
+   * Whether the group is currently in an invalid state.
+   * `validity` — not `error` — is the authoritative source: `validate()` resolves the
+   * `error` attribute to `validity = 'customError'`, so `error` is already covered here.
+   * Single definition of "invalid" for the whole component, consumed by `render()` and
+   * `syncItemValidity()` so the fieldset and its children can never disagree.
+   * @private
+   * @returns {boolean}
+   */
+  get isInvalid() {
+    return Boolean(this.validity && this.validity !== 'valid');
+  }
+
+  /**
+   * Method for mirroring the group's invalid state onto each radio input.
+   * Has to be re-applied from `handleItems()` as well, because a slot change or a
+   * reconnect can happen without `validity` itself changing.
+   * @private
+   * @returns {void}
+   */
+  syncItemValidity() {
+    const invalid = this.isInvalid;
+
+    this.items.forEach((el) => {
+      if (invalid) {
+        el.setAttribute('error', true);
+        el.setAttribute('aria-invalid', 'true');
       } else {
-        this.items.forEach((el) => {
-          el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
-        });
+        el.removeAttribute('error');
+        el.removeAttribute('aria-invalid');
       }
-    }
+    });
   }
 
   /**
@@ -1646,8 +1670,9 @@ class AuroRadioGroup extends i$2 {
 
     this.items.forEach((el) => {
       el.required = this.required;
-      el.error = Boolean(this.error);
     });
+
+    this.syncItemValidity();
   }
 
   /**
@@ -1796,7 +1821,7 @@ class AuroRadioGroup extends i$2 {
         class="${e(groupClasses)}"
         part="radio-group"
         role="radiogroup"
-        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-invalid="${o$1(this.isInvalid ? 'true' : undefined)}"
         aria-describedby="${this.uniqueId}"
       >
         <legend class="${e(legendClasses)}">
@@ -1806,7 +1831,7 @@ class AuroRadioGroup extends i$2 {
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ${!this.isInvalid
         ? u`
           <${this.helpTextTag} id="${this.uniqueId}" appearance="${this.onDark ? 'inverse' : this.appearance}" part="helpText">
             <slot name="helpText"></slot>

package/components/radio/dist/auro-radio-group.d.ts

@@ -186,6 +186,24 @@ export class AuroRadioGroup extends LitElement {
      * @returns {void}
      */
     updated(changedProperties: Map<string, any>): void;
+    /**
+     * Whether the group is currently in an invalid state.
+     * `validity` — not `error` — is the authoritative source: `validate()` resolves the
+     * `error` attribute to `validity = 'customError'`, so `error` is already covered here.
+     * Single definition of "invalid" for the whole component, consumed by `render()` and
+     * `syncItemValidity()` so the fieldset and its children can never disagree.
+     * @private
+     * @returns {boolean}
+     */
+    private get isInvalid();
+    /**
+     * Method for mirroring the group's invalid state onto each radio input.
+     * Has to be re-applied from `handleItems()` as well, because a slot change or a
+     * reconnect can happen without `validity` itself changing.
+     * @private
+     * @returns {void}
+     */
+    private syncItemValidity;
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/radio/dist/index.js

@@ -1190,7 +1190,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1518,18 +1518,42 @@ class AuroRadioGroup extends LitElement {
     }
 
     if (changedProperties.has('validity')) {
-      if (this.validity && this.validity !== 'valid') {
-        this.items.forEach((el) => {
-          el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
-        });
+      this.syncItemValidity();
+    }
+  }
+
+  /**
+   * Whether the group is currently in an invalid state.
+   * `validity` — not `error` — is the authoritative source: `validate()` resolves the
+   * `error` attribute to `validity = 'customError'`, so `error` is already covered here.
+   * Single definition of "invalid" for the whole component, consumed by `render()` and
+   * `syncItemValidity()` so the fieldset and its children can never disagree.
+   * @private
+   * @returns {boolean}
+   */
+  get isInvalid() {
+    return Boolean(this.validity && this.validity !== 'valid');
+  }
+
+  /**
+   * Method for mirroring the group's invalid state onto each radio input.
+   * Has to be re-applied from `handleItems()` as well, because a slot change or a
+   * reconnect can happen without `validity` itself changing.
+   * @private
+   * @returns {void}
+   */
+  syncItemValidity() {
+    const invalid = this.isInvalid;
+
+    this.items.forEach((el) => {
+      if (invalid) {
+        el.setAttribute('error', true);
+        el.setAttribute('aria-invalid', 'true');
       } else {
-        this.items.forEach((el) => {
-          el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
-        });
+        el.removeAttribute('error');
+        el.removeAttribute('aria-invalid');
       }
-    }
+    });
   }
 
   /**
@@ -1585,8 +1609,9 @@ class AuroRadioGroup extends LitElement {
 
     this.items.forEach((el) => {
       el.required = this.required;
-      el.error = Boolean(this.error);
     });
+
+    this.syncItemValidity();
   }
 
   /**
@@ -1735,7 +1760,7 @@ class AuroRadioGroup extends LitElement {
         class="${classMap(groupClasses)}"
         part="radio-group"
         role="radiogroup"
-        aria-invalid="${ifDefined(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-invalid="${ifDefined(this.isInvalid ? 'true' : undefined)}"
         aria-describedby="${this.uniqueId}"
       >
         <legend class="${classMap(legendClasses)}">
@@ -1745,7 +1770,7 @@ class AuroRadioGroup extends LitElement {
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ${!this.isInvalid
         ? html$1`
           <${this.helpTextTag} id="${this.uniqueId}" appearance="${this.onDark ? 'inverse' : this.appearance}" part="helpText">
             <slot name="helpText"></slot>

package/components/radio/dist/registered.js

@@ -1190,7 +1190,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609021913';
+var formkitVersion = '202609030018';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1518,18 +1518,42 @@ class AuroRadioGroup extends LitElement {
     }
 
     if (changedProperties.has('validity')) {
-      if (this.validity && this.validity !== 'valid') {
-        this.items.forEach((el) => {
-          el.setAttribute('error', true);
-          el.setAttribute('aria-invalid', 'true');
-        });
+      this.syncItemValidity();
+    }
+  }
+
+  /**
+   * Whether the group is currently in an invalid state.
+   * `validity` — not `error` — is the authoritative source: `validate()` resolves the
+   * `error` attribute to `validity = 'customError'`, so `error` is already covered here.
+   * Single definition of "invalid" for the whole component, consumed by `render()` and
+   * `syncItemValidity()` so the fieldset and its children can never disagree.
+   * @private
+   * @returns {boolean}
+   */
+  get isInvalid() {
+    return Boolean(this.validity && this.validity !== 'valid');
+  }
+
+  /**
+   * Method for mirroring the group's invalid state onto each radio input.
+   * Has to be re-applied from `handleItems()` as well, because a slot change or a
+   * reconnect can happen without `validity` itself changing.
+   * @private
+   * @returns {void}
+   */
+  syncItemValidity() {
+    const invalid = this.isInvalid;
+
+    this.items.forEach((el) => {
+      if (invalid) {
+        el.setAttribute('error', true);
+        el.setAttribute('aria-invalid', 'true');
       } else {
-        this.items.forEach((el) => {
-          el.removeAttribute('error');
-          el.removeAttribute('aria-invalid');
-        });
+        el.removeAttribute('error');
+        el.removeAttribute('aria-invalid');
       }
-    }
+    });
   }
 
   /**
@@ -1585,8 +1609,9 @@ class AuroRadioGroup extends LitElement {
 
     this.items.forEach((el) => {
       el.required = this.required;
-      el.error = Boolean(this.error);
     });
+
+    this.syncItemValidity();
   }
 
   /**
@@ -1735,7 +1760,7 @@ class AuroRadioGroup extends LitElement {
         class="${classMap(groupClasses)}"
         part="radio-group"
         role="radiogroup"
-        aria-invalid="${ifDefined(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-invalid="${ifDefined(this.isInvalid ? 'true' : undefined)}"
         aria-describedby="${this.uniqueId}"
       >
         <legend class="${classMap(legendClasses)}">
@@ -1745,7 +1770,7 @@ class AuroRadioGroup extends LitElement {
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
 
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ${!this.isInvalid
         ? html$1`
           <${this.helpTextTag} id="${this.uniqueId}" appearance="${this.onDark ? 'inverse' : this.appearance}" part="helpText">
             <slot name="helpText"></slot>