@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.11

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
@@ -323,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 }
+      }
     };
   }
 

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 915ms
+created dist in 985ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 682ms
+created ./demo/ in 848ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 502ms
+created ./demo/ in 679ms
 
-> @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 
@@ -158,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.10/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.10/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.10/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.10/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.md

@@ -5,20 +5,22 @@
 
 ## Properties
 
-| Property            | Attribute           | Type      | Default     | Description                                      |
-|---------------------|---------------------|-----------|-------------|--------------------------------------------------|
-| [checkmark](#checkmark)         | `checkmark`         | `Boolean` |             | When attribute is present auro-menu will apply checkmarks to selected options. |
-| [disabled](#disabled)          | `disabled`          | `Boolean` |             | If set, disables the combobox.                   |
-| [error](#error)             | `error`             | `Boolean` |             | Sets a persistent error state (e.g. an error state returned from the server). |
-| [noFilter](#noFilter)          | `noFilter`          | `Boolean` | false       | If set, combobox will not filter menuoptions based in input. |
-| [noValidate](#noValidate)        | `noValidate`        | `Boolean` |             | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)    | `optionSelected`    | `Object`  | null        | Specifies the current selected option.           |
-| [required](#required)          | `required`          | `Boolean` |             | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String`  |             | Sets a custom help text message to display for all validityStates. |
-| [triggerIcon](#triggerIcon)       | `triggerIcon`       | `Boolean` |             | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)              | `type`              | `String`  |             | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)          | `validity`          | `String`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)             | `value`             | `String`  | null        | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Type      | Default     | Description                                      |
+|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
+| [checkmark](#checkmark)                     | `checkmark`                     | `Boolean` |             | When attribute is present auro-menu will apply checkmarks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      | `Boolean` |             | If set, disables the combobox.                   |
+| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [noFilter](#noFilter)                      | `noFilter`                      | `Boolean` | false       | If set, combobox will not filter menuoptions based in input. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected option.           |
+| [required](#required)                      | `required`                      | `Boolean` |             | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `Boolean` |             | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          | `String`  |             | Applies the defined value as the type attribute on auro-input. |
+| [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `String`  | "undefined" | Value selected for the dropdown menu.            |
 
 ## Methods
 
@@ -179,7 +181,7 @@ export function dynamicMenuExample() {
 
   inputEl.addEventListener('input', () => {
     let data = dynamicData.getData();
-    data = dynamicData.filterData(data, dynamicMenuExample.value);
+    data = dynamicData.filterData(data, inputEl.value);
 
     generateHtml(data);
   });
@@ -294,7 +296,7 @@ Sets a persistent error state (e.g. an error state returned from the server).
     </auro-menu>
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
@@ -410,7 +412,7 @@ Use the `value` attribute to programmatically set the value of the combobox.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
   <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
-  <auro-combobox value="Apples">
+  <auro-combobox>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -430,7 +432,7 @@ Use the `value` attribute to programmatically set the value of the combobox.
 <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
 
 ```html
-<auro-combobox value="Apples">
+<auro-combobox>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -464,7 +466,7 @@ Note: using a value that does not match a menu option will reset the combobox va
   <auro-button id="valueInvalidExampleBtn">Set to custom value</auro-button>
   <auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
   <br/><br/>
-  <auro-combobox id="valueExample" value="Apples">
+  <auro-combobox id="valueExample">
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -488,7 +490,7 @@ Note: using a value that does not match a menu option will reset the combobox va
 <auro-button id="valueInvalidExampleBtn">Set to custom value</auro-button>
 <auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
 <br/><br/>
-<auro-combobox id="valueExample" value="Apples">
+<auro-combobox id="valueExample">
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -510,11 +512,11 @@ export function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'Oranges';
+    valueExample.value = ['Oranges'];
   });
 
   document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'Dragon Fruit';
+    valueExample.value = ['Dragon Fruit'];
   });
 
   document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {