@aurodesignsystem/auro-formkit 2.0.0-beta.41 → 2.0.0-beta.43

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Semantic Release Automated Changelog
 
+# [2.0.0-beta.43](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.42...v2.0.0-beta.43) (2025-02-24)
+
+
+### Bug Fixes
+
+* add register to AuroBibtemplate component and update with latest release scripts [#228](https://github.com/AlaskaAirlines/auro-formkit/issues/228) ([cfabce6](https://github.com/AlaskaAirlines/auro-formkit/commit/cfabce601ef3265e2ab037c342655ba834a49e4d))
+* expose paths to readme files [#228](https://github.com/AlaskaAirlines/auro-formkit/issues/228) ([93aabae](https://github.com/AlaskaAirlines/auro-formkit/commit/93aabae27abd03e04b938f830dd6beb6a975ba89))
+* **form:** address PR feedback ([724dea6](https://github.com/AlaskaAirlines/auro-formkit/commit/724dea6f278259eaef5ed14f01b4771e22056ebc))
+* make form to watch dom tree update ([d9488dc](https://github.com/AlaskaAirlines/auro-formkit/commit/d9488dc6f88794c30d5d663dcab9f34a42082679))
+* store mutationObservers properly ([abc058a](https://github.com/AlaskaAirlines/auro-formkit/commit/abc058a08e3c1b81df5c64732807a7a58c6a7b67))
+* update web-dev-server config to append .html for non-file URLs and enhance turbo.json dependencies ([696fcb0](https://github.com/AlaskaAirlines/auro-formkit/commit/696fcb0027ab4e0bc0083be050cfdbd520040f83))
+
+
+### Performance Improvements
+
+* **form:** remove old mutation observers ([6b8083f](https://github.com/AlaskaAirlines/auro-formkit/commit/6b8083f5948966613b340653906e37085efd754d))
+* update web-dev-server configurations and add new dev commands ([7d21e43](https://github.com/AlaskaAirlines/auro-formkit/commit/7d21e4373006891473f1ab331b406f4d9126a823))
+
+# [2.0.0-beta.42](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.41...v2.0.0-beta.42) (2025-02-21)
+
+
+### Bug Fixes
+
+* add `largeMobileHeadeline` attr for  bib headeline size, fix flickering issue in fullscreen ([2f4526a](https://github.com/AlaskaAirlines/auro-formkit/commit/2f4526a88eadd1a01a7f7168aa31e22240d14ab9))
+* make dropdown to pull `dropdownbib` properly ([9a45cb8](https://github.com/AlaskaAirlines/auro-formkit/commit/9a45cb8332c509eb3f9d1fc67ed70488b9bb7187))
+
+
+### Features
+
+* add `mobileFullscreenBreakpoint` property on combobox and pass to dropdown ([c036ba3](https://github.com/AlaskaAirlines/auro-formkit/commit/c036ba3ffc33b3f168e3f31326409361dbab278a))
+* basic bibtemplate structure [#323](https://github.com/AlaskaAirlines/auro-formkit/issues/323) ([be8ad9c](https://github.com/AlaskaAirlines/auro-formkit/commit/be8ad9c3c579f42ed5a0fcc768813e73f6c243ff))
+* move combobox's input to bib in fullscreen mode [#322](https://github.com/AlaskaAirlines/auro-formkit/issues/322) ([4188411](https://github.com/AlaskaAirlines/auro-formkit/commit/4188411d3407d9522d441b7abad1e31fb92d7901))
+
 # [2.0.0-beta.41](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.40...v2.0.0-beta.41) (2025-02-11)
 
 

package/NOTICE

@@ -0,0 +1,2 @@
+Alaska Airlines Auro Design System
+Copyright 2024 Alaska Airlines, Inc. or its affiliates. All Rights Reserved.

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`          |
--->
-
-# Formkit
+-->
+
+# 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.
@@ -25,38 +25,106 @@ The following sections are editable by making changes to the following files:
 It is a monorepo that contains the following components:
 
 - `auro-checkbox`
+    - `auro-checkbox-group`
 - `auro-combobox`
 - `auro-counter`
+    - `auro-counter-group`
 - `auro-datepicker`
 - `auro-dropdown`
 - `auro-form`
 - `auro-input`
 - `auro-menu`
+    - `auro-menu-option`
 - `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:
+
+### Usage
+
+You can use Auro Formkit components in your project in two ways: default or custom registration.
+
+#### Default Registration
+
+For default 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.
+
+#### Class 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>`.
+
+### 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>
+```
+
+`index.html -> <body>`
+
+```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 -->
+
 ## 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.
@@ -66,24 +134,24 @@ To only develop a single component, use the `--filter` flag:
 ```
 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.
@@ -95,38 +163,38 @@ 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
-- Example: The `@auro-formkit/combobox` package might depend on `@auro-formkit/input`
+- Example: The `@aurodesignsystem/combobox` package might depend on `@auro-formkit/input`
 - 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:
@@ -137,8 +205,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
@@ -150,8 +218,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
@@ -163,8 +231,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:
@@ -175,8 +243,8 @@ 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
     "lit": "^3.2.1"                   // Framework
@@ -213,8 +281,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**.

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

@@ -0,0 +1,38 @@
+export class AuroBibtemplate extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    static get properties(): {
+        isFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        large: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * This will register this element with the browser.
+     * @param {string} [name="auro-bibtemplate"] - The name of element that you want to register to.
+     *
+     * @example
+     * AuroCheckbox.register("custom-bibtemplate") // this will register this element to <custom-bibtemplate/>
+     *
+     */
+    static register(name?: string): void;
+    iconTag: any;
+    headerTag: any;
+    /**
+     * Prevents scrolling of the body when touching empty areas of the component.
+     * @param {Event} event - The touchmove event.
+     * @returns {void}
+     */
+    preventBodyScroll(event: Event): void;
+    onCloseButtonClick(): void;
+    /**
+     * Exposes CSS parts for styling from parent components.
+     * @returns {void}
+     */
+    exposeCssParts(): void;
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from "lit";

package/components/{combobox/dist/formkit/auro-dropdownVersion.d.ts → bibtemplate/dist/headerVersion.d.ts}

@@ -1,3 +1,2 @@
 declare const _default: "3.0.0";
 export default _default;
-//# sourceMappingURL=auro-dropdownVersion.d.ts.map

package/components/bibtemplate/dist/iconVersion.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "6.1.2";
+export default _default;

package/components/bibtemplate/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { AuroBibtemplate };
+import { AuroBibtemplate } from './auro-bibtemplate.js';