@aurodesignsystem/auro-formkit 2.2.1-beta.2 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Semantic Release Automated Changelog
 
+## [2.2.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.0...v2.2.1) (2025-04-22)
+
+
+### Bug Fixes
+
+* bubble focusable element's focusevent up to `#trigger` ([a9aabf3](https://github.com/AlaskaAirlines/auro-formkit/commit/a9aabf3702947201225744d87b621bd2d2bc0f36))
+* clear event listeners on disconnectCallback in dropdown ([612ba3d](https://github.com/AlaskaAirlines/auro-formkit/commit/612ba3d1f2e9f80b8ecb39b2f026f8599044fe80))
+* close only datepicker if dapicker is open inside of drawer ([15e8e14](https://github.com/AlaskaAirlines/auro-formkit/commit/15e8e147ca6d95982159a4004c5ac19f43fb1057))
+* fix broken tabbing interaction ([493b453](https://github.com/AlaskaAirlines/auro-formkit/commit/493b4533353a6b03727f4448f53b3f2528c31080))
+* null check on focus event binder in dropdown ([adabb63](https://github.com/AlaskaAirlines/auro-formkit/commit/adabb630d1fdc71618281643fff747a33f159955))
+* properly closes bib when selecting an option ([51a5e91](https://github.com/AlaskaAirlines/auro-formkit/commit/51a5e91b8f3e66d6b4fbc414e2a502947394e902))
+* put checkbox to be centered programmatically ([dd5e321](https://github.com/AlaskaAirlines/auro-formkit/commit/dd5e3216be4f1bd04719395ecd97ad8de759d9b0))
+* put radio bullet to be centered programmatically ([b01be2c](https://github.com/AlaskaAirlines/auro-formkit/commit/b01be2c116db454560cffc3651fc260a58d5159a))
+
+
+### Performance Improvements
+
+* adding condition check of dropdown existence ([1ac8070](https://github.com/AlaskaAirlines/auro-formkit/commit/1ac8070c906a18418c4636506c35a26706bf0f26))
+
+## [2.2.1-beta.3](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.1-beta.2...v2.2.1-beta.3) (2025-04-14)
+
+
+### Bug Fixes
+
+* bubble focusable element's focusevent up to `#trigger` ([a9aabf3](https://github.com/AlaskaAirlines/auro-formkit/commit/a9aabf3702947201225744d87b621bd2d2bc0f36))
+* clear event listeners on disconnectCallback in dropdown ([612ba3d](https://github.com/AlaskaAirlines/auro-formkit/commit/612ba3d1f2e9f80b8ecb39b2f026f8599044fe80))
+* close only datepicker if dapicker is open inside of drawer ([15e8e14](https://github.com/AlaskaAirlines/auro-formkit/commit/15e8e147ca6d95982159a4004c5ac19f43fb1057))
+* fix broken tabbing interaction ([493b453](https://github.com/AlaskaAirlines/auro-formkit/commit/493b4533353a6b03727f4448f53b3f2528c31080))
+* null check on focus event binder in dropdown ([adabb63](https://github.com/AlaskaAirlines/auro-formkit/commit/adabb630d1fdc71618281643fff747a33f159955))
+
+
+### Performance Improvements
+
+* adding condition check of dropdown existence ([1ac8070](https://github.com/AlaskaAirlines/auro-formkit/commit/1ac8070c906a18418c4636506c35a26706bf0f26))
+
 ## [2.2.1-beta.2](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.1-beta.1...v2.2.1-beta.2) (2025-04-07)
 
 

package/README.md

@@ -11,13 +11,13 @@ The following sections are editable by making changes to the following files:
 | 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
 
 <!-- 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,34 +38,34 @@ It is a monorepo that contains the following components:
 - `auro-radio`
     - `auro-radio-group`
 - `auro-select`
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Install
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.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)
-
+![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+
 ```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 -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
 
 <!-- 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:
-
+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.
-
+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:
@@ -74,8 +74,8 @@ For automatic registration, simply import the component:
 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.
-
+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:
@@ -87,8 +87,8 @@ AuroCheckbox.register('custom-checkbox');
 AuroCheckbox.register('custom-checkbox-group');
 ```
 
-This will register the component as `<custom-checkbox>` and `<custom-checkbox-group>`.
-
+This will register the component as `<custom-checkbox>` and `<custom-checkbox-group>`.
+
 #### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
@@ -101,8 +101,8 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 }
 ```
 
-This configuration enables proper module resolution for the component's TypeScript files.
-
+This configuration enables proper module resolution for the component's TypeScript files.
+
 ### Basic HTML Example
 
 Here is an example of how to use the Auro Checkbox component in your HTML:
@@ -112,8 +112,8 @@ Here is an example of how to use the Auro Checkbox component in your HTML:
 ```html
 <script type="module">
     import "@aurodesignsystem/auro-formkit/auro-checkbox";
-</script>
-```
+</script>
+```
 
 `index.html -> <body>`
 
@@ -128,24 +128,24 @@ Here is an example of how to use the Auro Checkbox component in your HTML:
     <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>
         Checkbox option two
     </auro-checkbox>
-</auro-checkbox-group>
-```
+</auro-checkbox-group>
+```
 
 By following these steps, you can easily integrate Auro Formkit components into your project.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- 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 -->
-
+<!-- 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 -->
-
+<!-- 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.
@@ -155,24 +155,24 @@ 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: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 -->
-
+<!-- The below content is automatically added from ./docs/partials/localhost.md -->
+
 ## Local Development
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- 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 -->
-```
+<!-- The below content is automatically added from ./docs/partials/testing.md -->
+```
 npm run test
-```
-
+```
+
 #### Port configuration
 
 Turbo will attempt to test components in parallel which will lead to port conflicts.
@@ -184,29 +184,29 @@ Setting the `concurrency` to `1` will prevent Turbo from running tests in parall
 ```
 
 `turbo.json`does not support `--concurrency` yet. See [this issue](https://github.com/vercel/turborepo/discussions/7493).
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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 -->
-
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+
 ## Turborepo Overview
 
-This monorepo is managed using [Turborepo](https://turborepo.org/).
-
-### Managing dependencies
-
+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,8 +214,8 @@ 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:
@@ -226,8 +226,8 @@ The package's `package.json` will have every dependency that it needs. This is t
       "@auro-formkit/input": "workspace:*"  // Internal dependency
     }
   }
-  ```
-
+  ```
+
 #### Peer Dependencies (`peerDependencies`)
 - Packages that your library expects the consuming application to provide
 - Common for plugins or UI component libraries
@@ -239,8 +239,8 @@ The package's `package.json` will have every dependency that it needs. This is t
       "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     }
   }
-  ```
-
+  ```
+
 ### Development Dependencies (`devDependencies`)
 - Only needed during development, testing, or building
 - Not included in the production bundle
@@ -252,8 +252,8 @@ The package's `package.json` will have every dependency that it needs. This is t
       "@open-wc/testing": "^4.0.0"  // Internal dev dependency
     }
   }
-  ```
-
+  ```
+
 ## Example: Component Dependencies
 
 Let's use `@auro-formki/combobox` as an example to illustrate these concepts:
@@ -264,10 +264,10 @@ Let's use `@auro-formki/combobox` as an example to illustrate these concepts:
   "dependencies": {
     // Internal dependencies
     "@aurodesignsystem/auro-dropdown": "*",     // Required UI component
-    "@aurodesignsystem/auro-input": "*",        // Required UI component
-
+    "@aurodesignsystem/auro-input": "*",        // Required UI component
+
     // External dependencies
-    "@alaskaairux/icons": "^4.44.1",  // Required UI component
+    "@alaskaairux/icons": "^5.3.0",  // Required UI component
     "lit": "^3.2.1"                   // Framework
   },
   "peerDependencies": {
@@ -302,8 +302,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 +311,4 @@ 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 -->
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.1/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.3/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/readme.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.1/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.3/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.1/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.3/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->