@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.10

package/components/checkbox/src/auro-checkbox-group.js

@@ -19,14 +19,6 @@ import tokensCss from "./styles/tokens-css.js";
 /**
  * The auro-checkbox-group element is a wrapper for auro-checkbox element.
  *
- * @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} required - Populates the `required` attribute on the element. Used for client-side validation.
- * @attr {Boolean} horizontal - If set, checkboxes will be aligned horizontally.
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
  * @slot {HTMLSlotElement} optionalLabel - Allows for the optional label to be overridden.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
@@ -38,11 +30,15 @@ export class AuroCheckboxGroup extends LitElement {
     super();
 
     this.validity = undefined;
-    this.value = undefined;
     this.disabled = undefined;
     this.required = false;
     this.horizontal = false;
 
+    /**
+     * @private
+     */
+    this.value = undefined;
+
     /**
      * @private
      */
@@ -74,38 +70,71 @@ export class AuroCheckboxGroup extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * If set, disables the checkbox group.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+       */
+      error: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * If set, checkboxes will be aligned horizontally.
+       */
       horizontal: {
         type: Boolean,
         reflect: true
       },
-      value: {
-        type: Array
-      },
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
       noValidate: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Populates the `required` attribute on the element. Used for client-side validation.
+       */
       required: {
         type: Boolean,
         reflect: true
       },
-      error: {
-        type: String,
-        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
       },
+
+      /**
+       * Specifies the `validityState` this element is in.
+       */
       validity: {
         type: String,
         reflect: true
@@ -212,7 +241,7 @@ export class AuroCheckboxGroup extends LitElement {
   handlePreselectedItems() {
     let preSelectedValues = false;
 
-    this.items.forEach((item) => {
+    this.checkboxes.forEach((item) => {
       if (item.hasAttribute('checked') && this.value === undefined) {
         preSelectedValues = true;
       }
@@ -223,7 +252,7 @@ export class AuroCheckboxGroup extends LitElement {
         this.value = [];
       }
 
-      this.items.forEach((item) => {
+      this.checkboxes.forEach((item) => {
         this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
       });
     }
@@ -238,13 +267,25 @@ export class AuroCheckboxGroup extends LitElement {
     const groupTagName = this.tagName.toLowerCase();
     const checkboxTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
 
-    this.items = Array.from(this.querySelectorAll(checkboxTagName));
+    this.checkboxes = Array.from(this.querySelectorAll(checkboxTagName));
 
     this.handlePreselectedItems();
 
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checkboxes.forEach((checkbox) => {
+      checkbox.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
   /**
    * LitElement lifecycle method. Called after the DOM has been updated.
    * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -252,7 +293,7 @@ export class AuroCheckboxGroup extends LitElement {
    */
   updated(changedProperties) {
     if (changedProperties.has('disabled')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.disabled) {
           el.setAttribute('disabled', true);
         } else {
@@ -262,7 +303,7 @@ export class AuroCheckboxGroup extends LitElement {
     }
 
     if (changedProperties.has('validity')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
         } else {
@@ -292,7 +333,7 @@ export class AuroCheckboxGroup extends LitElement {
 
   render() {
     const groupClasses = {
-      'displayFlex': this.horizontal && this.items.length <= this.maxNumber
+      'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
     };
 
     return html`
@@ -311,7 +352,7 @@ export class AuroCheckboxGroup extends LitElement {
           </p>`
         : html`
           <p class="checkboxGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
-            ${this.setCustomValidity}
+            ${this.errorMessage}
           </p>`
       }
     `;

package/components/checkbox/src/auro-checkbox.js

@@ -18,12 +18,6 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
- * @attr {Boolean} checked - If set to true, the checkbox will be filled with a checkmark.
- * @attr {Boolean} disabled - If set to true, the checkbox will not be clickable.
- * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
- * @attr {String} id - Sets the individual `id` per element.
- * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
- * @attr {String} value - Sets the element's input value.
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -35,6 +29,10 @@ export class AuroCheckbox extends LitElement {
     super();
     this.checked = false;
     this.disabled = false;
+
+    /**
+     * @private
+     */
     this.error = false;
 
     /**
@@ -54,21 +52,40 @@ export class AuroCheckbox extends LitElement {
   // function to define props used within the scope of this component
   static get properties() {
     return {
+
+      /**
+       * If set to true, the checkbox will be filled with a checkmark.
+       */
       checked: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set to true, the checkbox will not be clickable.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
-      error: {
-        type: Boolean,
+
+      /**
+       * Sets the individual `id` per element.
+       */
+      id: { type: String },
+
+      /**
+       * Accepts any string and is used to identify related checkboxes when submitting form data.
+       */
+      name: { type: String },
+
+      /**
+       * Sets the element's input value. Must be unique within an auro-checkbox-group element.
+       */
+      value: {
+        type: String,
         reflect: true
-      },
-      id:       { type: String },
-      name:     { type: String },
-      value:    { type: String }
+      }
     };
   }
 
@@ -130,6 +147,15 @@ export class AuroCheckbox extends LitElement {
     return this.svg;
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');

package/components/combobox/.turbo/turbo-build$colon$sass.log

@@ -1,8 +1,8 @@
 
-> @auro-formkit/auro-combobox@2.1.4 build:sass
+> @aurodesignsystem/auro-combobox@2.1.4 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -12,7 +12,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 6:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -22,7 +22,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 7:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -33,7 +33,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/utilityClasses/_displayProperties.scss 6:9  @import
     src/styles/style.scss 7:9                                                            root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 

package/components/combobox/.turbo/turbo-build.log

@@ -1,22 +1,22 @@
 
-> @auro-formkit/auro-combobox@2.1.4 build
+> @aurodesignsystem/auro-combobox@2.1.4 build
 > run-s build:version build:sass bundler build:docs types
 
 
-> @auro-formkit/auro-combobox@2.1.4 build:version
+> @aurodesignsystem/auro-combobox@2.1.4 build:version
 > node ./src/scripts/version.mjs
 
-Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@auro-formkit/auro-dropdown/package.json
-Writing version file to: ./src/formkit/auro-dropdownVersion.js
-Successfully wrote version file for @auro-formkit/auro-dropdown
-Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@auro-formkit/auro-input/package.json
-Writing version file to: ./src/formkit/auro-inputVersion.js
-Successfully wrote version file for @auro-formkit/auro-input
+Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-dropdown/package.json
+Writing version file to: ./src/dropdownVersion.js
+Successfully wrote version file for @aurodesignsystem/auro-dropdown
+Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-input/package.json
+Writing version file to: ./src/inputVersion.js
+Successfully wrote version file for @aurodesignsystem/auro-input
 
-> @auro-formkit/auro-combobox@2.1.4 build:sass
+> @aurodesignsystem/auro-combobox@2.1.4 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -26,7 +26,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 6:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -36,7 +36,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 7:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -47,7 +47,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/utilityClasses/_displayProperties.scss 6:9  @import
     src/styles/style.scss 7:9                                                            root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -59,33 +59,29 @@ More info and automated migrator: https://sass-lang.com/d/import
     src/styles/style.scss 7:9                                                            root stylesheet
 
 
-> @auro-formkit/auro-combobox@2.1.4 bundler
+> @aurodesignsystem/auro-combobox@2.1.4 bundler
 > rollup -c node:@auro-formkit/config/rollup
 
 
 ./src/index.js → dist...
-created dist in 859ms
+created dist in 897ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 670ms
+created ./demo/ in 781ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 651ms
+created ./demo/ in 527ms
 
-> @auro-formkit/auro-combobox@2.1.4 build:docs
+> @aurodesignsystem/auro-combobox@2.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component combobox
 
 Web Component Analyzer analyzing 1 file...
-Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combobox/docTemplates/README.md" file...
 ✔ /README.md Updated
  Transforms run
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md 
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md 
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md 
@@ -93,6 +89,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combob
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md 
   ⁕ FILE:src=./docs/partials/description.md 
   ⁕ FILE:src=./docs/partials/readmeAddlInfo.md 
+  ⁕ FILE:src=../../docs/templates/componentInstall.md 
+  ⁕ FILE:src=../../docs/templates/componentUsage.md 
+  ⁕ FILE:src=../../docs/templates/componentBundleUseModBrowsers.md 
   ⁕ FILE:src=./docs/partials/useCases.md 
   ⁕ CODE:src=./apiExamples/basic.html 
   ⁕ CODE:src=./apiExamples/basic.html 
@@ -130,6 +129,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combob
   ⁕ FILE:src=./../apiExamples/value.html 
   ⁕ FILE:src=./../apiExamples/typeMonthDayYear.html 
   ⁕ FILE:src=./../apiExamples/focus.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/helpText.html 
   ⁕ FILE:src=./../apiExamples/loading.html 
   ⁕ FILE:src=./../apiExamples/inDialog.html 
@@ -147,6 +147,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combob
   ⁕ CODE:src=./../apiExamples/typeMonthDayYear.html 
   ⁕ CODE:src=./../apiExamples/focus.js 
   ⁕ CODE:src=./../apiExamples/focus.html 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/helpText.html 
   ⁕ CODE:src=./../apiExamples/loading.js 
   ⁕ CODE:src=./../apiExamples/loading.html 
@@ -155,6 +157,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combob
 
 Docs processed successfully for combobox
 
-> @auro-formkit/auro-combobox@2.1.4 types
+> @aurodesignsystem/auro-combobox@2.1.4 types
 > tsc --project tsconfig.json
 

package/components/combobox/.turbo/turbo-postCss$colon$component.log

@@ -1,5 +1,4 @@
 
-> @auro-formkit/auro-combobox@2.1.4 postCss:component
+> @aurodesignsystem/auro-combobox@2.1.4 postCss:component
 > node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs
 
-Unable to scan directory: Error: ENOENT: no such file or directory, scandir '/home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-library/scripts/src'

package/components/combobox/.turbo/turbo-sass$colon$render.log

@@ -1,9 +1,9 @@
 
-> @auro-formkit/auro-combobox@2.1.4 sass:render
+> @aurodesignsystem/auro-combobox@2.1.4 sass:render
 > sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js
 
 Rendering src/styles/style.css...
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
 More info: https://sass-lang.com/d/legacy-js-api
 

package/components/combobox/README.md

@@ -4,8 +4,8 @@ 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`.
 
 This file is generated based on a template fetched from
-`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
-and copied to `./componentDocs/README.md` each time the the docs are compiled.
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
@@ -17,7 +17,7 @@ The following sections are editable by making changes to the following files:
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
 -->
 
-# Formkit/auro-combobox
+# Combobox
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
@@ -37,18 +37,12 @@ For the most up to date information on [UI development browser support](https://
 
 ## 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/-formkit/-formkit/auro-combobox/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/auro-combobox/actions/workflows/testPublish.yml)
-[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/auro-combobox?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/auro-combobox)
-[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/auro-combobox?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)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
 ```shell
-$ npm i @auro-formkit/-formkit/-formkit/auro-combobox
+$ 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 -->
 
 ### Design Token CSS Custom Property dependency
@@ -61,17 +55,18 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 ### Define dependency in project component
 
 <!-- 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 `<-formkit/-formkit/auro-combobox>` component.
+Defining the component dependency within each component that is using the `<auro-combobox>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
 
 ```js
-import "@auro-formkit/-formkit/-formkit/auro-combobox";
+import "@aurodesignsystem/auro-formkit/auro-combobox";
 ```
-
 <!-- 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 -->
 
@@ -93,7 +88,7 @@ import "@auro-formkit/-formkit/-formkit/auro-combobox";
 ## Install bundled assets from CDN
 
 <!-- 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 -- `-formkit/-formkit/auro-combobox__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-combobox__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
 
 **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.
 
@@ -101,17 +96,17 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 ### Bundle example code
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
-
-```html
+<!-- 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/@auro-formkit/-formkit/-formkit/auro-combobox@2.1.4/dist/-formkit/-formkit/auro-combobox__bundled.js" type="module"></script>
-```
-
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.9/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.9/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.9/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.9/dist/auro-combobox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-formkit/auro-combobox use cases
+## auro-combobox use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
@@ -128,7 +123,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ## API Code Examples
 
-### Default auro-formkit/auro-combobox
+### Default auro-combobox
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -188,7 +183,7 @@ The custom element API file is generated in the build and committed back to the
 ### 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\-formkit/-formkit/auro-combobox.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.
+Automated tests are required for every Auro component. See `.\test\auro-combobox.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 -->
 

package/components/combobox/demo/api.js

@@ -3,8 +3,9 @@
 import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
-import { inDialogExample } from '../apiExamples/inDialog.js';
-import { auroMenuLoadingExample } from '../apiExamples/loading.js';
+import { inDialogExample } from '../apiExamples/inDialog';
+import { resetStateExample } from '../apiExamples/resetState';
+import { auroMenuLoadingExample } from '../apiExamples/loading';
 
 
 import { AuroCombobox } from '../src/auro-combobox.js';
@@ -21,6 +22,7 @@ export function initExamples(initCount) {
     valueExample();
     focusExample();
     inDialogExample();
+    resetStateExample();
     auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {