@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

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

@@ -1,13 +1,7 @@
 /**
- * @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.
@@ -20,79 +14,117 @@ export class AuroRadioGroup extends LitElement {
     static get properties(): {
         /**
          * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
+         * @type {'default' | 'inverse'}
          * @default 'default'
          */
-        appearance: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        appearance: "default" | "inverse";
+        /**
+         * If true, all radio buttons will be disabled.
+         */
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        horizontal: {
-            type: BooleanConstructor;
-        };
+        /**
+         * If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+         */
         error: {
             type: StringConstructor;
             reflect: boolean;
         };
-        value: {
-            type: StringConstructor;
+        /**
+         * Indicates whether the legend slot is set or not.
+         * @private
+         */
+        hasLegend: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * If true, displays radio buttons horizontally.
+         */
+        horizontal: {
+            type: BooleanConstructor;
         };
+        /**
+         * If true, disables auto-validation on blur.
+         */
         noValidate: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * DEPRECATED - use `appearance="inverse"` instead.
+         */
         onDark: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Specifies the current selected radio button.
+         */
+        optionSelected: {
+            type: ObjectConstructor;
+        };
+        /**
+         * Populates the `required` attribute on the element. Used for client-side validation.
+         */
         required: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Sets a custom help text message to display for all validityStates.
+         */
         setCustomValidity: {
             type: StringConstructor;
         };
+        /**
+         * Custom help text message to display when validity = `customError`.
+         */
         setCustomValidityCustomError: {
             type: StringConstructor;
         };
+        /**
+         * Custom help text message to display when validity = `valueMissing`.
+         */
         setCustomValidityValueMissing: {
             type: StringConstructor;
         };
-        validity: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        optionSelected: {
-            type: ObjectConstructor;
-        };
         /**
          * Indicates whether the radio group is in a dirty state (has been interacted with).
-         * @type {boolean}
-         * @default false
          * @private
          */
-        touched: boolean;
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
-         * Indicates whether the legend slot is set or not.
-         * @type {boolean}
-         * @default false
-         * @private
+         * Specifies the `validityState` this element is in.
          */
-        hasLegend: boolean;
+        validity: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the current value of the selected radio button.
+         */
+        value: {
+            type: StringConstructor;
+        };
     };
     /**
      * 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/>
      *
      */
     static register(name?: string): void;
+    _initializeDefaults(): void;
     appearance: string;
     disabled: boolean;
     horizontal: boolean;

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

@@ -1,14 +1,8 @@
 /**
- * @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.
@@ -25,59 +19,72 @@ export class AuroRadio extends LitElement {
     static get properties(): {
         /**
          * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
+         * @type {'default' | 'inverse'}
          * @default 'default'
          */
-        appearance: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        appearance: "default" | "inverse";
+        /**
+         * If set to true, the radio button will be filled.
+         */
         checked: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * If set to true, the radio button will be non-clickable.
+         */
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        required: {
+        /**
+         * If set to true, sets an error state on the radio button.
+         */
+        error: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        error: {
-            type: BooleanConstructor;
+        /**
+         * The id global attribute defines an identifier (ID) which must be unique in the whole document.
+         */
+        id: {
+            type: StringConstructor;
             reflect: boolean;
         };
-        onDark: {
-            type: BooleanConstructor;
+        /**
+         * ID for input node.
+         * @private
+         */
+        inputId: {
+            type: StringConstructor;
             reflect: boolean;
+            attribute: boolean;
         };
+        /**
+         * Label for the radio button.
+         */
         label: {
             type: StringConstructor;
         };
+        /**
+         * Name for the radio button group.
+         */
         name: {
             type: StringConstructor;
         };
-        value: {
-            type: StringConstructor;
-        };
         /**
-         * Whether or not the radio button has been touched by the user.
-         * @private
+         * DEPRECATED - use `appearance="inverse"` instead.
          */
-        touched: {
+        onDark: {
             type: BooleanConstructor;
             reflect: boolean;
-            attribute: boolean;
         };
         /**
-         * ID for input node.
-         * @private
+         * Defines element as required.
          */
-        inputId: {
-            type: StringConstructor;
+        required: {
+            type: BooleanConstructor;
             reflect: boolean;
-            attribute: boolean;
         };
         /**
          * Don't add to api.md since changing of this can easily break a11y.
@@ -87,18 +94,34 @@ export class AuroRadio extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Whether or not the radio button has been touched by the user.
+         * @private
+         */
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * The value of the radio button.
+         */
+        value: {
+            type: StringConstructor;
+        };
     };
     /**
      * 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/>
      *
      */
     static register(name?: string): void;
+    _initializeDefaults(): void;
     appearance: string;
-    checked: boolean;
+    checked: any;
     disabled: boolean;
     required: boolean;
     error: boolean;

package/components/radio/dist/index.js

@@ -94,22 +94,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.
@@ -121,12 +115,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 LitElement {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.checked = false;
     this.disabled = false;
@@ -156,45 +152,44 @@ class AuroRadio extends LitElement {
 
       /**
        * 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
       },
 
       /**
@@ -207,6 +202,32 @@ class AuroRadio extends LitElement {
         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
@@ -214,13 +235,28 @@ class AuroRadio extends LitElement {
       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/>
@@ -1537,7 +1573,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-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.
@@ -1545,18 +1581,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.
@@ -1569,6 +1599,10 @@ class AuroRadioGroup extends LitElement {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.disabled = false;
     this.horizontal = false;
@@ -1624,7 +1658,7 @@ class AuroRadioGroup extends LitElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1632,51 +1666,91 @@ class AuroRadioGroup extends LitElement {
         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: {
@@ -1686,22 +1760,25 @@ class AuroRadioGroup extends LitElement {
       },
 
       /**
-       * 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/>