@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.1

package/components/dropdown/dist/styles/bibColors-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=bibColors-css.d.ts.map

package/components/dropdown/dist/styles/bibStyles-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=bibStyles-css.d.ts.map

package/components/dropdown/dist/styles/color-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=color-css.d.ts.map

package/components/dropdown/dist/styles/style-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=style-css.d.ts.map

package/components/dropdown/dist/styles/tokens-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=tokens-css.d.ts.map

package/components/form/README.md

@@ -18,56 +18,68 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Form
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-`<auro-form>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of ...
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis in tellus nec pellentesque. Integer bibendum ligula sit amet vehicula gravida. Maecenas accumsan, ligula vitae molestie iaculis, tellus mi laoreet ex [install instructions](https://auro.alaskaair.com/components/auro/button/install), ac malesuada velit dolor vel mi. Cras et rutrum urna. Sed mattis mi eu tortor ullamcorper, egestas bibendum mauris cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra eros eget neque commodo vulputate. In tempus eu velit at dictum.
+`<auro-form>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) designed to
+serve as the base logic for all auro-constructed forms.
 
-Nulla at augue facilisis `odio lobortis` molestie vitae a nulla.
+It automatically "scrapes" its inner content for any auro form elements, and surfaces
+them (along with events) to the parent form element as a JSON object.
 <!-- 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 -->
 <!-- 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 -->
 
-## 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 -->
-
-## Install
-
+## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
+#### NPM Installation
+
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Design Token CSS Custom Property dependency
+### Import Options
+
+#### Automatic Registration
 
-<!-- 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).
+For automatic registration, simply import the component:
 
-<!-- AURO-GENERATED-CONTENT:END -->
+```javascript
+// Registers <auro-form> automatically
+import '@aurodesignsystem/auro-formkit/auro-form';
+```
 
-### Define dependency in project component
+#### Custom Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-form>` component.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroForm.register('custom-form')` method on the component class and pass in a unique name.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
+```javascript
+// Import the class only
+import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+
+// Register with a custom name if desired
+AuroForm.register('custom-form');
+```
 
-```js
-import "@aurodesignsystem/auro-formkit/auro-form";
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
 ```
+
+This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
@@ -75,104 +87,56 @@ import "@aurodesignsystem/auro-formkit/auro-form";
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-form>Hello World</auro-form>
-<auro-input>
-    <span slot="label">Hello World</span>
-</auro-input>
+<auro-form>
+  <auro-input id="search-box" name="searchBox" required>
+    <span slot="label">Search flights</span>
+  </auro-input>
+  <auro-button type="submit">Submit</auro-button>
+</auro-form>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Install bundled assets from CDN
+### Design Token CSS Custom Property dependency
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-form__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+<!-- 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).
 
-**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
+<!-- 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.
 
+```html
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0/auro-form/+esm"></script>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Bundle example code
+## 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:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.8/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-form>` element should be used in situations where users may:
-
-* ...
-* ...
-* ...
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
-### Default auro-form
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-form>Hello World</auro-form>
-<auro-input>
-    <span slot="label">Hello World</span>
-</auro-input>
-```
+The `<auro-form>` element should be used in situations where users want to build HTML forms.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Development
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+## Formkit development
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
 
-### Start development environment
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
-
-```shell
-$ npm run dev
-```
+### Filtering
 
-Open [localhost:8000](http://localhost:8000/)
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
 
-If running separate sessions is preferred, please run the following commands in individual terminal shells.
+To only develop a single component, use the `--filter` flag:
 
 ```shell
-$ npm run build:watch
-
-$ npm run serve
+npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### API generation
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
-The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-form.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundled assets
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
-
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/form/demo/api.js

@@ -1,3 +1,3 @@
-import { AuroForm } from "../src/auro-form.js"
+import { AuroForm } from "../src/auro-form.js";
 
 AuroForm.register();

package/components/form/demo/api.md

@@ -0,0 +1,55 @@
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
+<!-- The below content is automatically added from ../docs/api.md -->
+
+# auro-form
+
+The auro-form element provides users a way to ... (it would be great if you fill this out).
+
+## Attributes
+
+| Attribute  | Type      | Description                                      |
+|------------|-----------|--------------------------------------------------|
+| [cssClass](#cssClass) | `String`  | Applies designated CSS class to demo element - you want to delete me! |
+| [fixed](#fixed)    | `Boolean` | Uses fixed pixel values for element shape        |
+
+## Properties
+
+| Property                   | Modifiers | Type                                             | Default | Description                                      |
+|----------------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
+| [formState](#formState)                |           | `FormState`                                      | {}      |                                                  |
+| [isInitialState](#isInitialState)           | readonly  | `boolean`                                        |         | Mostly internal way to determine if a form is in the initial state. |
+| [mutationEventListener](#mutationEventListener)    |           |                                                  |         |                                                  |
+| [mutationObservers](#mutationObservers)        |           | `MutationObserver[]`                             | []      |                                                  |
+| [reset](#reset)                    |           |                                                  |         |                                                  |
+| [resetElements](#resetElements)            | readonly  | `HTMLButtonElement[]`                            |         | Getter for internal _resetElements.              |
+| [sharedInputListener](#sharedInputListener)      |           |                                                  |         |                                                  |
+| [sharedValidationListener](#sharedValidationListener) |           |                                                  |         |                                                  |
+| [submit](#submit)                   |           |                                                  |         |                                                  |
+| [submitElements](#submitElements)           | readonly  | `HTMLButtonElement[]`                            |         | Getter for internal _submitElements.             |
+| [validity](#validity)                 | readonly  | `"valid" \| "invalid"`                           |         | Current validity state of the form, based on form element events. |
+| [value](#value)                    | readonly  | `Record<string, string \| number \| boolean \| string[] \| null>` |         | Reduce the form value into a key-value pair.<br /><br />NOTE: form keys use `name` first, and `id` second if `name` is not available.<br />This follows standard HTML5 form behavior - submission uses `name` by default when creating<br />the FormData object. |
+
+## Methods
+
+| Method                      | Type                              | Description                                      |
+|-----------------------------|-----------------------------------|--------------------------------------------------|
+| [initializeState](#initializeState)           | `(): void`                        | Initialize (or reinitialize) the form state.     |
+| [isButtonElement](#isButtonElement)           | `(element: HTMLElement): boolean` | Check if the tag name is a button element.<br /><br />**element**: The element to check. |
+| [isFormElement](#isFormElement)             | `(element: HTMLElement): boolean` | Check if the tag name is a form element.<br /><br />**element**: The element to check (attr or tag name). |
+| [mutationEventListener](#mutationEventListener)     | `(): void`                        | Mutation observer for form elements. Slot change does not trigger unless<br />root-level elements are added/removed. This is a workaround to ensure<br />nested form elements are also observed. |
+| [onSlotChange](#onSlotChange)              | `(event: Event): void`            | Slot change event listener. This is the main entry point for the form element.<br /><br />**event**: The slot change event. |
+| [queryAuroElements](#queryAuroElements)         | `(): NodeList`                    | Construct the query strings from elements, append them together, execute, and return the NodeList. |
+| [reset](#reset)                     | `(): void`                        | Reset fires an event called `reset` - just as you would expect from a normal form. |
+| [setDisabledStateOnButtons](#setDisabledStateOnButtons) | `(): void`                        |                                                  |
+| [sharedInputListener](#sharedInputListener)       | `(event: Event): void`            | Shared input listener for all form elements.<br /><br />**event**: The event that is fired from the form element. |
+| [sharedValidationListener](#sharedValidationListener)  | `(event: Event): void`            | Shared validation listener for all form elements.<br /><br />**event**: The event that is fired from the form element. |
+| [submit](#submit)                    | `(): void`                        | Submit fires an event called `submit` - just as you would expect from a normal form. |
+
+## Events
+
+| Event    | Type                                             | Description                    |
+|----------|--------------------------------------------------|--------------------------------|
+| [change](#change) | `Event`                                          | Fires when form state changes. |
+| [reset](#reset)  | `CustomEvent<{ previousValue: Record<string, string \| number \| boolean \| string[] \| null>; }>` |                                |
+| [submit](#submit) | `CustomEvent<{ value: Record<string, string \| number \| boolean \| string[] \| null>; }>` |                                |
+<!-- AURO-GENERATED-CONTENT:END -->