@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/radio/dist/registered.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/>

package/components/select/README.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Select
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
@@ -27,7 +28,15 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
+## Select Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+See description.
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -40,30 +49,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-select> automatically
-import '@aurodesignsystem/auro-formkit/auro-select';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroSelect.register('custom-select')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
-
-// Register with a custom name if desired
-AuroSelect.register('custom-select');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -76,37 +62,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-select>
-  <span slot="ariaLabel.bib.close">Close Popup</span>
-  <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Select Example</span>
-  <auro-menu>
-    <auro-menuoption value="stops">Stops</auro-menuoption>
-    <auro-menuoption value="price">Price</auro-menuoption>
-    <auro-menuoption value="duration">Duration</auro-menuoption>
-    <auro-menuoption value="departure">Departure</auro-menuoption>
-    <auro-menuoption value="arrival">Arrival</auro-menuoption>
-    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-  </auro-menu>
-</auro-select>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install from CDN
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -116,19 +75,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## auro-select use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-See description.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -142,4 +89,60 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
+
+// Register with a custom name if desired
+AuroSelect.register('custom-select');
+```
+
+This will create a new custom element `<custom-select>` that behaves exactly like `<auro-select>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-select placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </custom-select>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-select placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </custom-select>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/select/demo/api.html

@@ -58,6 +58,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
 
     <style>

package/components/select/demo/api.js

@@ -1,10 +1,10 @@
-import { customErrorValidityExample } from "../apiExamples/customErrorValidity";
+import { customErrorValidityExample } from "../apiExamples/custom-error-validity";
 import { valueExample } from "../apiExamples/value";
-import { valueExtractionExample } from "../apiExamples/valueExtraction";
-import { valueAlertExample } from "../apiExamples/valueAlert.js";
-import { inDialogExample } from '../apiExamples/inDialog';
-import { resetStateExample } from "../apiExamples/resetState";
-import { auroMenuLoadingExample } from "../apiExamples/loading";
+import { valueExtractionExample } from "../apiExamples/value-extraction";
+import { valueAlertExample } from "../apiExamples/value-alert";
+import { inDialogExample } from '../apiExamples/in-dialog';
+import { resetStateExample } from "../apiExamples/reset-state";
+// import { auroMenuLoadingExample } from "../apiExamples/loading";
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
@@ -23,7 +23,7 @@ export function initExamples(initCount) {
     valueAlertExample();
     inDialogExample();
     resetStateExample();
-    auroMenuLoadingExample();
+    // auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called