@aurodesignsystem/auro-formkit 5.10.0 → 5.11.0-rc-1426.2

package/CHANGELOG.md

@@ -1,32 +1,12 @@
-# [5.10.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.9.4...v5.10.0) (2026-02-14)
+# [5.11.0-rc-1426.2](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.11.0-rc-1426.1...v5.11.0-rc-1426.2) (2026-04-08)
 
 
 ### Bug Fixes
 
-* add Chromatic workflow for visual testing on rc branches ([ad9c2d3](https://github.com/AlaskaAirlines/auro-formkit/commit/ad9c2d32b0181a222c9cb4731887bf0683f486c5))
-* address failing a11y tests in select and combobox ([45230a8](https://github.com/AlaskaAirlines/auro-formkit/commit/45230a81b71959594c2ba65745f515a5a3befd1f))
-* adjust types to enable cem to process correctly ([6781a8d](https://github.com/AlaskaAirlines/auro-formkit/commit/6781a8dcdd9f4eda11286a83a923e0eaeab428e7))
-* **combobox:** error attribute now correctly displays error UI [#1272](https://github.com/AlaskaAirlines/auro-formkit/issues/1272) ([96f09ab](https://github.com/AlaskaAirlines/auro-formkit/commit/96f09abf449fcfdf6f935aa51215f216ef739e29))
-* **combobox:** update validity check to reflect correct state after clearing customError ([77eaa14](https://github.com/AlaskaAirlines/auro-formkit/commit/77eaa14d29ea10419facecde0472b1c2f9ff4142))
-* **combobox:** updateActiveOption method correctly highlights menu option [#1275](https://github.com/AlaskaAirlines/auro-formkit/issues/1275) ([2733cbb](https://github.com/AlaskaAirlines/auro-formkit/commit/2733cbb34dbad71a45f761449d73fb87dd6b54bb))
-* make menuoptions visible to screenreaders [#456](https://github.com/AlaskaAirlines/auro-formkit/issues/456) ([c6326a2](https://github.com/AlaskaAirlines/auro-formkit/commit/c6326a29ab0ee0423a28a975cd9082b828599b7e))
-* set max length for each input type [#1331](https://github.com/AlaskaAirlines/auro-formkit/issues/1331) ([1dbfa0c](https://github.com/AlaskaAirlines/auro-formkit/commit/1dbfa0cb6182db0f6faaf807a7664b0af060ddee))
-* update release workflow to include cache directories ([72c45d0](https://github.com/AlaskaAirlines/auro-formkit/commit/72c45d024595ea244fa3e959bf284110d63aee3b))
-* user input credit card formatting logic [#1324](https://github.com/AlaskaAirlines/auro-formkit/issues/1324) ([8328de1](https://github.com/AlaskaAirlines/auro-formkit/commit/8328de1337d1233089c41efff4d6ded6d73b8322))
+* **select:** ensure dropdown trigger is focused after click selection AB[#1528057](https://github.com/AlaskaAirlines/auro-formkit/issues/1528057) ([d4f95bc](https://github.com/AlaskaAirlines/auro-formkit/commit/d4f95bcccb31218c06eb698b9d29410b08958145))
 
+# Changelog
 
-### Features
-
-* add story generation utilities and update stories for checkbox component ([9afbfbe](https://github.com/AlaskaAirlines/auro-formkit/commit/9afbfbe66de1eaa05ab9291ee05c71a65d810c67))
-
-
-### Reverts
-
-* Revert "fix: address failing a11y tests in select and combobox" ([7a40335](https://github.com/AlaskaAirlines/auro-formkit/commit/7a4033504e5cf3c94d27e2133b09e4379d405791))
-* Revert "fix: make menuoptions visible to screenreaders [#456](https://github.com/AlaskaAirlines/auro-formkit/issues/456)" ([aaddbb5](https://github.com/AlaskaAirlines/auro-formkit/commit/aaddbb585e28b38025b49b3cf72dfab598bbcef9))
-
-### Changelog
-
-You can view a history of changes to this repository on the releases page:
+You can view a complete history of changes to this repository on the GitHub releases page:
 
 https://github.com/AlaskaAirlines/auro-formkit/releases

package/README.md

@@ -3,21 +3,25 @@ The README.md file is a compiled document. No edits should be made directly to t
 
 README.md is created by running `npm run build:docs:kit`.
 
+This file is generated based on the template at
+`./docs/templates/kitReadmeTemplate.md`
+and compiled to `./README.md` each time the docs are compiled.
+
 The following sections are editable by making changes to the following files:
 
 | SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
 |------------------------|---------------------------------------------------|-------------------------------------|
-| Description            | Description of the component                      | `./docs/partials/description.md`    |
-| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
-| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
-| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
-# Auro Formkit
+| Description            | Description of the kit                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this kit           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any kit specific information | `./docs/partials/readmeAddlInfo.md` |
+| kit Example Code | HTML sample code of the kits use            | `./apiExamples/basic.html`          |
+-->
+
+# Formkit
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
-<!-- The below content is automatically added from ./docs/partials/description.md -->
-
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+
 ## Description
 
 `auro-formkit` is a collection of web components that can be used to build forms.
@@ -38,58 +42,73 @@ It is a monorepo that contains the following components:
 - `auro-radio`
     - `auro-radio-group`
 - `auro-select`
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Install
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+
+### 1. User Accounts
+- Sign up and login forms  
+- Email and password validation  
+
+### 2. Checkout & Payments
+- Collect shipping and billing info  
+- Use autofill and validation to reduce errors  
+
+### 3. Booking & Scheduling
+- Select dates and times  
+- Prevent invalid selections (like past dates)  
+
+### 4. Search & Filters
+- Search inputs with suggestions  
+- Filters like price ranges or categories  
+
+### 5. File Uploads
+- Upload images, documents, or media  
+- Restrict file types and allow multiple files  
+
+### 6. Feedback & Surveys
+- Collect ratings, choices, and comments  
+- Require answers where needed  
+
+### 7. Calculators & Dynamic Forms
+- Show real-time results (e.g., pricing, totals)  
+
+### 8. Multi-Step Forms
+- Break long forms into smaller steps  
+
+### 9. Mobile-Friendly Input
+- Use input types that trigger the right keyboard  
+
+### 10. Accessible Forms
+- Proper labels and grouped inputs  
+- Built-in error handling  
+
+### 11. Built-in Validation
+- Use HTML5 rules instead of custom JavaScript
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Getting Started
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/kitInstall.md) -->
+<!-- The below content is automatically added from ./docs/partials/kitInstall.md -->
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-formkit/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-formkit/actions/workflows/testPublish.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-formkit?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-formkit?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
 ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
 
+#### NPM Installation
+
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
-
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Getting Started
-
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/gettingStarted.md) -->
-<!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->
-To start using the Auro Formkit components, follow the instructions below:
-
-### Usage
-
-You can use Auro Formkit components in your project in two ways: automatic or custom registration.
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-import "@aurodesignsystem/auro-formkit/auro-checkbox";
-```
-
-This will automatically register both the `<auro-checkbox>` and the included `<auro-checkbox-group>` component for use in your project. Note that not all Auro Formkit components have sub-components. Be sure to check the documentation for each component to understand its specific usage and registration requirements.
-
-#### Custom Registration
-
-If you prefer to register the component with a custom name, you can call the component class directly to create a custom registration:
-
-```javascript
-import { AuroCheckbox, AuroCheckboxGroup } from "@aurodesignsystem/auro-formkit/auro-checkbox/class";
-
-AuroCheckbox.register('custom-checkbox');
-AuroCheckbox.register('custom-checkbox-group');
-```
-
-This will register the component as `<custom-checkbox>` and `<custom-checkbox-group>`.
-
-#### TypeScript Module Resolution
+<!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->
+
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -102,111 +121,47 @@ 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 -->
+
+## Install from CDN
 
-### Basic HTML Example
-
-Here is an example of how to use the Auro Checkbox component in your HTML:
-
-`index.html -> <head>`
-
-```html
-<script type="module">
-    import "@aurodesignsystem/auro-formkit/auro-checkbox";
-</script>
-```
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ./docs/partials/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.
 
-`index.html -> <body>`
+Each component is imported individually by its export path:
 
 ```html
-<auro-checkbox-group>
-    <span slot="legend">
-        Form label goes here
-    </span>
-    <auro-checkbox value="value1" name="basic" id="checkbox-basic1">
-        Checkbox option
-    </auro-checkbox>
-    <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>
-        Checkbox option two
-    </auro-checkbox>
-</auro-checkbox-group>
-```
-
-By following these steps, you can easily integrate Auro Formkit components into your project.
-<!-- 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 -->
-
-## Development
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
-<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
-
-### Filtering
-
-Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
-
-To only develop a single component, use the `--filter` flag:
-
-```shell
-npx turbo dev --filter=@aurodesignsystem/auro-input
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Start development environment
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/localhost.md) -->
-<!-- The below content is automatically added from ./docs/partials/localhost.md -->
-
-## Local Development
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/testing.md) -->
-<!-- The below content is automatically added from ./docs/partials/testing.md -->
-```
-npm run test
-```
-
-#### Port configuration
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Additional Information
 
-Turbo will attempt to test components in parallel which will lead to port conflicts.
-
-Setting the `concurrency` to `1` will prevent Turbo from running tests in parallel:
-
-```
-"test": "turbo run test --concurrency=1",
-```
-
-`turbo.json`does not support `--concurrency` yet. See [this issue](https://github.com/vercel/turborepo/discussions/7493).
-<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
-<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
-
-## Turborepo Overview
-
-This monorepo is managed using [Turborepo](https://turborepo.org/).
-
-### Managing dependencies
-
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+
+### Turborepo Overview
+
+This monorepo is managed using [Turborepo](https://turborepo.org/).
+
+### Managing dependencies
+
 #### Best practices for dependency installation
 
 When you install a dependency in a component or package in `auro-formkit`, you should install it directly in the package that uses it. 
 
-The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
-
-### Types of Dependencies by Source
-
+The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
+
+### Types of Dependencies by Source
+
 #### External Dependencies
 - These are packages fetched from the `npm` registry (e.g., Lit, Rollup, Sass)
 - Declared in `package.json` using exact versions or version ranges
-- Installed in `node_modules` during `npm install` or `yarn install`
-
+- Installed in `node_modules` during `npm install` or `yarn install`
+
 #### Internal Dependencies
 - These are packages from within the `auro-formkit` monorepo
 - Allow sharing code between different packages in your repository
@@ -214,33 +169,19 @@ The package's `package.json` will have every dependency that it needs. This is t
 - Must be declared in `package.json` just like external dependencies
 - Use workspace protocols (e.g., `"workspace:*"` or `"workspace:^1.0.0"`)
 
-### Types of Dependencies by Purpose
-
+### Types of Dependencies by Purpose
+
 #### Dependencies (`dependencies`)
 - Required for the package to function in production
 - Example:
   ```json
   {
     "dependencies": {
-      "lit.js": "^3.0.0",                    // External dependency
-      "@aurodesignsystem/input": "workspace:*"  // Internal dependency
-    }
-  }
-  ```
-
-#### Peer Dependencies (`peerDependencies`)
-- Packages that your library expects the consuming application to provide
-- Common for plugins or UI component libraries
-- Example:
-  ```json
-  {
-    "peerDependencies": {
-      "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-      "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      "lit": "^3.0.0"
     }
   }
-  ```
-
+  ```
+
 ### Development Dependencies (`devDependencies`)
 - Only needed during development, testing, or building
 - Not included in the production bundle
@@ -248,36 +189,30 @@ The package's `package.json` will have every dependency that it needs. This is t
   ```json
   {
     "devDependencies": {
-      "typescript": "^5.0.0",
-      "@open-wc/testing": "^4.0.0"  // Internal dev dependency
+      "@aurodesignsystem/auro-dropdown": "*",
+      "@aurodesignsystem/build-tools": "*",
+      "rollup": "^4.24.4"
     }
   }
-  ```
+  ```
+
+### Example: Component Dependencies
 
-## Example: Component Dependencies
-
-Let's use `@auro-formki/combobox` as an example to illustrate these concepts:
+Let's use `@aurodesignsystem/combobox` as an example to illustrate these concepts:
 
 ```json
 {
   "name": "@aurodesignsystem/combobox",
   "dependencies": {
-    // Internal dependencies
-    "@aurodesignsystem/auro-dropdown": "*",     // Required UI component
-    "@aurodesignsystem/auro-input": "*",        // Required UI component
-
-    // External dependencies
-    "@alaskaairux/icons": "^5.3.0",  // Required UI component
-    "lit": "^3.2.1"                   // Framework
-  },
-  "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+    "lit": "^3.2.1"
   },
   "devDependencies": {
+    // Internal component dependencies
+    "@aurodesignsystem/auro-dropdown": "*",
+    "@aurodesignsystem/auro-input": "*",
     // Build utilities
     "rollup": "^4.24.4",
-    "@aurodesignsystem/build-tools": "*",
+    "@aurodesignsystem/build-tools": "*"
   }
 }
 ```
@@ -286,7 +221,6 @@ This structure ensures that:
 1. The package explicitly declares all its dependencies
 2. Internal dependencies are properly tracked and versioned
 3. Development tools are separated from production dependencies
-4. Peer dependencies are clearly communicated to consumers
 
 - External dependencies come from the `npm` registry.
 
@@ -302,8 +236,8 @@ This practice has several benefits:
 
 - **Pruning unused dependencies:** When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need.
 
-For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
-
+For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
+
 ### Root `package.json`
 
 The only dependencies that belong in the root `package.json` are **tools for managing the repository**.
@@ -311,4 +245,20 @@ The only dependencies that belong in the root `package.json` are **tools for man
 Some examples of dependencies that make sense to install in the root are `turbo`, `husky`, or `stylelint`.
 
 Conversely, dependencies Auro components rely on should be installed in their respective packages, such as `Lit`, `Rollup`, or other `auro-formkit` dependencies.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Formkit Development
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
+
+### Filtering
+
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+
+To only develop a single component, use the `--filter` flag:
+
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
 <!-- AURO-GENERATED-CONTENT:END -->

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

@@ -48,6 +48,12 @@ export class AuroBibtemplate extends LitElement {
      * @returns {void}
      */
     preventBodyScroll(event: Event): void;
+    /**
+     * Focuses the close button inside the bibtemplate's shadow DOM.
+     * Used by parent components to set initial focus when the fullscreen dialog opens.
+     * @returns {void}
+     */
+    focusCloseButton(): void;
     onCloseButtonClick(): void;
     /**
      * Exposes CSS parts for styling from parent components.

package/components/bibtemplate/dist/index.js

@@ -322,6 +322,18 @@ class AuroBibtemplate extends LitElement {
     this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
   }
 
+  /**
+   * Focuses the close button inside the bibtemplate's shadow DOM.
+   * Used by parent components to set initial focus when the fullscreen dialog opens.
+   * @returns {void}
+   */
+  focusCloseButton() {
+    const closeBtn = this.shadowRoot.querySelector('#closeButton');
+    if (closeBtn) {
+      closeBtn.focus();
+    }
+  }
+
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));

package/components/bibtemplate/dist/registered.js

@@ -322,6 +322,18 @@ class AuroBibtemplate extends LitElement {
     this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
   }
 
+  /**
+   * Focuses the close button inside the bibtemplate's shadow DOM.
+   * Used by parent components to set initial focus when the fullscreen dialog opens.
+   * @returns {void}
+   */
+  focusCloseButton() {
+    const closeBtn = this.shadowRoot.querySelector('#closeButton');
+    if (closeBtn) {
+      closeBtn.focus();
+    }
+  }
+
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));

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

@@ -1300,7 +1300,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1324,7 +1324,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -1582,7 +1582,7 @@ class AuroHelpText extends i$2 {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
        * @default 'default'
        */
       appearance: {
@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202604081414';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1292,7 +1292,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1316,7 +1316,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -1574,7 +1574,7 @@ class AuroHelpText extends i$2 {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
        * @default 'default'
        */
       appearance: {
@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202604081414';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1245,7 +1245,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1269,7 +1269,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -1527,7 +1527,7 @@ class AuroHelpText extends LitElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
        * @default 'default'
        */
       appearance: {
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202604081414';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1245,7 +1245,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required && elem.touched) {
+      if (!hasValue && elem.required && (force || elem.touched)) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1269,7 +1269,7 @@ class AuroFormValidation {
       if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
-        this.auroInputElements.forEach(input => input.validate());
+        this.auroInputElements.forEach(input => input.validate(force));
 
         // Reset element validity to the validity of the input
         elem.validity = this.auroInputElements[0].validity;
@@ -1527,7 +1527,7 @@ class AuroHelpText extends LitElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
        * @default 'default'
        */
       appearance: {
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602140013';
+var formkitVersion = '202604081414';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.