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

package/components/checkbox/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-checkbox",
+  "name": "@aurodesignsystem/auro-checkbox",
   "version": "4.1.0",
   "description": "auro-checkbox HTML custom element",
   "type": "module",
@@ -13,11 +13,12 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "^4.44.1",
+    "@aurodesignsystem/auro-helptext": "*",
     "chalk": "^5.3.0",
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2"
   },
   "devDependencies": {
@@ -25,7 +26,7 @@
     "@auro-formkit/config": "*",
     "@auro-formkit/form-validation": "*",
     "@auro-formkit/typescript": "*",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "rollup": "^4.24.0",
@@ -58,8 +59,8 @@
     "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server",
-    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
-    "test:watch": "wtr --watch",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage --port 7709",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --watch --port 7709",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

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

@@ -16,17 +16,11 @@ import styleCss from "./styles/auro-checkbox-group-css.js";
 import colorCss from "./styles/colorGroup-css.js";
 import tokensCss from "./styles/tokens-css.js";
 
+import '@aurodesignsystem/auro-helptext';
+
 /**
  * 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 the validity message to the 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 +32,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 +72,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
@@ -156,7 +187,7 @@ export class AuroCheckboxGroup extends LitElement {
       composed: true,
     }));
 
-    this.validation.validate(this, true);
+    this.validate(true);
   }
 
   firstUpdated() {
@@ -242,7 +273,7 @@ export class AuroCheckboxGroup extends LitElement {
 
     this.handlePreselectedItems();
 
-    this.validation.validate(this);
+    this.validate();
   }
 
   /**
@@ -298,10 +329,18 @@ export class AuroCheckboxGroup extends LitElement {
         this.removeAttribute('aria-invalid');
       }
 
-      this.validation.validate(this, true);
+      this.validate(true);
     }
   }
 
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
   render() {
     const groupClasses = {
       'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
@@ -318,13 +357,13 @@ export class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html`
-          <p class="checkboxGroupElement-helpText" part="helpText">
+          <auro-helptext large part="helpText">
             <slot name="helpText"></slot>
-          </p>`
+          </auro-helptext>`
         : html`
-          <p class="checkboxGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
+          <auro-helptext error large role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
-          </p>`
+          </auro-helptext>`
       }
     `;
   }

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. Must be unique within an auro-checkbox-group element.
  * @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.
@@ -54,21 +48,48 @@ 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
       },
+
+      /**
+       * If set to true, the checkbox will be displayed with an error state.
+       */
       error: {
         type: Boolean,
         reflect: true
       },
-      id:       { type: String },
-      name:     { type: String },
-      value:    { type: String }
+
+      /**
+       * 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
+      }
     };
   }
 

package/components/checkbox/src/styles/colorGroup-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.checkboxGroupElement-helpText{color:var(--ds-auro-checkbox-group-helptext-color)}:host([validity]:not([validity=valid])){--ds-auro-checkbox-group-helptext-color: var(--ds-color-text-error-default, #cc1816)}`;
+export default css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/checkbox/src/styles/colorGroup.css

@@ -6,11 +6,3 @@
 :host([disabled]) {
   --ds-auro-checkbox-group-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
 }
-
-.checkboxGroupElement-helpText {
-  color: var(--ds-auro-checkbox-group-helptext-color);
-}
-
-:host([validity]:not([validity=valid])) {
-  --ds-auro-checkbox-group-helptext-color: var(--ds-color-text-error-default, #cc1816);
-}

package/components/checkbox/src/styles/colorGroup.scss

@@ -14,11 +14,3 @@
 :host([disabled]) {
   --ds-auro-checkbox-group-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
 }
-
-.checkboxGroupElement-helpText {
-  color: var(--ds-auro-checkbox-group-helptext-color);
-}
-
-:host([validity]:not([validity='valid'])) {
-  --ds-auro-checkbox-group-helptext-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
-}

package/components/checkbox/src/styles/tokens-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{--ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-helptext-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+export default css`:host{--ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;

package/components/checkbox/src/styles/tokens.css

@@ -4,6 +4,5 @@
   --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);
   --ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #2a2a2a);
   --ds-auro-checkbox-outline-color: transparent;
-  --ds-auro-checkbox-group-helptext-color: var(--ds-color-text-secondary-default, #525252);
   --ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #2a2a2a);
 }

package/components/checkbox/src/styles/tokens.scss

@@ -6,6 +6,5 @@
   --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-checkbox-outline-color: transparent;
-  --ds-auro-checkbox-group-helptext-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }

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 857ms
+created dist in 1.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 631ms
+created ./demo/ in 1.2s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 715ms
+created ./demo/ in 1s
 
-> @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
-<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>
-```
-
+<!-- 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.13.0/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.0/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.40/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.40/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.40/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.40/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 -->