@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

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

@@ -1,3 +1,11 @@
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 function dynamicExample() {
   const values = ['Yes', 'No', 'Maybe'];
   const radioGroup = document.getElementById('dynamicExample');
@@ -15,14 +23,6 @@ function dynamicExample() {
   }
 }
 
-function resetStateExample() {
-  const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
-    elem.reset();
-  });
-}
-
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -159,22 +159,16 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable max-lines */
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+/* eslint-disable max-lines, no-underscore-dangle */
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 /**
- * @attr {Boolean} checked - If set to true, the radio button will be filled.
- * @attr {Boolean} disabled - If set to true, the radio button will be non-clickable.
- * @attr {Boolean} required - Defines element as required.
- * @attr {Boolean} error - If set to true, sets an error state on the radio button.
- * @attr {Boolean} onDark - DEPRECATED - use `appearance` instead.
- * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
- *
- * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
- * @attr id
+ * The `auro-radio` element is used to a button that allows the user to select one option from a set.
+ * @customElement auro-radio
  *
+ * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
  * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
  * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  * @event focusSelected - Notifies that the component has gained focus.
@@ -186,12 +180,14 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart radio-input - apply css to a specific checkbox's input.
  * @csspart radio-label - apply css to a specific checkbox's label.
  */
-
-// build the component class
 class AuroRadio extends i$2 {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.checked = false;
     this.disabled = false;
@@ -221,45 +217,44 @@ class AuroRadio extends i$2 {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
         type: String,
         reflect: true
       },
+
+      /**
+       * If set to true, the radio button will be filled.
+       */
       checked: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the radio button will be non-clickable.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
-      required: {
-        type: Boolean,
-        reflect: true
-      },
+
+      /**
+       * If set to true, sets an error state on the radio button.
+       */
       error: {
         type: Boolean,
         reflect: true
       },
-      onDark: {
-        type: Boolean,
-        reflect: true
-      },
-      label:    { type: String },
-      name:     { type: String },
-      value:    { type: String },
 
       /**
-       * Whether or not the radio button has been touched by the user.
-       * @private
+       * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
-      touched: {
-        type: Boolean,
-        reflect: true,
-        attribute: false
+      id: {
+        type: String,
+        reflect: true
       },
 
       /**
@@ -272,6 +267,32 @@ class AuroRadio extends i$2 {
         attribute: false
       },
 
+      /**
+       * Label for the radio button.
+       */
+      label:    { type: String },
+
+      /**
+       * Name for the radio button group.
+       */
+      name:     { type: String },
+
+      /**
+       * DEPRECATED - use `appearance="inverse"` instead.
+       */
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Defines element as required.
+       */
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * Don't add to api.md since changing of this can easily break a11y.
        * @private
@@ -279,13 +300,28 @@ class AuroRadio extends i$2 {
       role: {
         type: String,
         reflect: true
-      }
+      },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
+      },
+
+      /**
+       * The value of the radio button.
+       */
+      value:    { type: String }
     };
   }
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-radio"] - The name of element that you want to register to.
+   * @param {string} [name="auro-radio"] - The name of the element that you want to register.
    *
    * @example
    * AuroRadio.register("custom-radio") // This will resgiter this element to <custom-radio/>
@@ -1609,7 +1645,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202511191711';
+var formkitVersion = '202601271813';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1617,18 +1653,12 @@ var formkitVersion = '202511191711';
 
 
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, -1] }] */
-/* eslint-disable max-lines, lit/binding-positions, lit/no-invalid-html */
+/* eslint-disable max-lines, lit/binding-positions, lit/no-invalid-html, no-underscore-dangle */
 
 /**
- * @attr {String} validity - Specifies the `validityState` this element is in.
- * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
- * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
- * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} onDark - DEPRECATED - use `appearance` instead.
- * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
- * @attr {Object} optionSelected - Specifies the current selected radio button.
+ * The `auro-radio-group` element is used to group a set `auro-radio` elements.
+ * @customElement auro-radio-group
+ *
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -1641,6 +1671,10 @@ class AuroRadioGroup extends i$2 {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.disabled = false;
     this.horizontal = false;
@@ -1696,7 +1730,7 @@ class AuroRadioGroup extends i$2 {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1704,51 +1738,91 @@ class AuroRadioGroup extends i$2 {
         reflect: true
       },
 
-      disabled:   {
+      /**
+       * If true, all radio buttons will be disabled.
+       */
+      disabled: {
         type: Boolean,
         reflect: true
       },
-      horizontal: { type: Boolean },
-      error:      {
+
+      /**
+       * If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+       */
+      error: {
         type: String,
         reflect: true
       },
-      value: {
-        type: String
+
+      /**
+       * Indicates whether the legend slot is set or not.
+       * @private
+       */
+      hasLegend: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
       },
+
+      /**
+       * If true, displays radio buttons horizontally.
+       */
+      horizontal: { type: Boolean },
+
+      /**
+       * If true, disables auto-validation on blur.
+       */
       noValidate: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * DEPRECATED - use `appearance="inverse"` instead.
+       */
       onDark: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Specifies the current selected radio button.
+       */
+      optionSelected: {
+        type: Object
+      },
+
+      /**
+       * Populates the `required` attribute on the element. Used for client-side validation.
+       */
       required: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Sets a custom help text message to display for all validityStates.
+       */
       setCustomValidity: {
         type: String
       },
+
+      /**
+       * Custom help text message to display when validity = `customError`.
+       */
       setCustomValidityCustomError: {
         type: String
       },
+
+      /**
+       * Custom help text message to display when validity = `valueMissing`.
+       */
       setCustomValidityValueMissing: {
         type: String
       },
-      validity: {
-        type: String,
-        reflect: true
-      },
-      optionSelected: {
-        type: Object
-      },
 
       /**
        * Indicates whether the radio group is in a dirty state (has been interacted with).
-       * @type {boolean}
-       * @default false
        * @private
        */
       touched: {
@@ -1758,22 +1832,25 @@ class AuroRadioGroup extends i$2 {
       },
 
       /**
-       * Indicates whether the legend slot is set or not.
-       * @type {boolean}
-       * @default false
-       * @private
+       * Specifies the `validityState` this element is in.
        */
-      hasLegend: {
-        type: Boolean,
-        reflect: false,
-        attribute: false
+      validity: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * Specifies the current value of the selected radio button.
+       */
+      value: {
+        type: String
       }
     };
   }
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-radio-group"] - The name of element that you want to register to.
+   * @param {string} [name="auro-radio-group"] - The name of the element that you want to register.
    *
    * @example
    * AuroRadioGroup.register("custom-radio-group") // This will register this element to <custom-radio-group/>
@@ -2118,8 +2195,8 @@ function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    dynamicExample();
     resetStateExample();
+    dynamicExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/radio/demo/index.md

@@ -1,18 +1,18 @@
 <!--
-The index.md file is a compiled document. No edits should be made directly to this file.
-README.md is created by running `npm run build:docs`.
-This file is generated based on a template fetched from `./docs/partials/index.md`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Radio
-
+# Radio
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 `<auro-radio>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that is rendered as a small circle, which is filled or highlighted when selected. Only one `<auro-radio>` component in a given `<auro-radio-group>` can be selected at the same time.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-radio use cases
-
+## Use Cases
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
 The `<auro-radio>` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `<label>` that meets all use case and accessibility standards.
@@ -24,126 +24,49 @@ The following examples illustrate fully functional `<auro-radio>` elements wrapp
 
 ## Example(s)
 
-### Default
-
-This is a default configuration of `<auro-radio>`.
-
+### Basic Radio
+
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
   <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
 
 ```html
 <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" appearance="inverse"></auro-radio>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 </auro-accordion>
 
-### Default Group
-
-This is a default configuration using the `<auro-radio-group>` and `<auro-radio>` elements. Notice the use of the `slot` attribute to set the group title of the `<auro-radio-group>`.
+### Basic Radio Group
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicGroup.html -->
-  <auro-radio-group>
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
-  <auro-radio-group appearance="inverse">
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
-  <!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
-  ```html
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-radio-group>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
     <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
     <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
   </auro-radio-group>
-  ```
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
-  <auro-radio-group appearance="inverse">
-    <span slot="legend">Form label goes here</span>
-    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
-    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
-    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
-  </auro-radio-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Accordion Nested Group
-
-This example shows how to use `<auro-accordion>` with the `<auro-radio-group>` and `<auro-radio>` elements for
-nested/optional groups (such as a "More Options" section in a payment processor).
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionExample.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/accordionExample.html -->
-  <auro-radio-group>
-    <span slot="legend">Accordion Test</span>
-    <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
-    <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
-    <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
-    <auro-accordion>
-      <span slot="trigger">More payment options</span>
-      <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
-      <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
-    </auro-accordion>
-  </auro-radio-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionExample.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/accordionExample.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
 <auro-radio-group>
-  <span slot="legend">Accordion Test</span>
-  <auro-radio id="basicGroupRadio1" label="Credit or debit card" name="creditordebit" value="credit"></auro-radio>
-  <auro-radio id="basicGroupRadio2" label="Apple Pay" name="applePay" value="applePay"></auro-radio>
-  <auro-radio id="basicGroupRadio3" label="Alaska Airlines Commercial Account" name="alaskaCommercial" value="alaskaCommercial"></auro-radio>
-  <auro-accordion>
-    <span slot="trigger">More payment options</span>
-    <auro-radio id="basicGroupRadio4" label="Click to pay" name="manualCredit" value="manualCredit"></auro-radio>
-    <auro-radio id="basicGroupRadio5" label="Google Pay" name="googlePay" value="googlePay"></auro-radio>
-  </auro-accordion>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
 </auro-radio-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->