@aurodesignsystem/auro-formkit 1.6.0-beta.10

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

@@ -0,0 +1,118 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable selector-class-pattern, order/properties-order, no-descending-specificity */
+
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  .label {
+    color: var(--ds-auro-checkbox-label-color);
+  }
+
+  .label--cbx {
+    &:after {
+      background-color: var(--ds-auro-checkbox-container-color);
+      border-color: var(--ds-auro-checkbox-border-color);
+      outline-color: var(--ds-auro-checkbox-outline-color);
+    }
+
+    &:hover {
+      --ds-auro-checkbox-container-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default});
+    }
+  }
+
+  .svg--cbx {
+    color: var(--ds-auro-checkbox-checkmark-color);
+  }
+  
+}
+
+:host(:focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+  --ds-auro-checkbox-outline-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+}
+
+:host([checked]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
+  --ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-default-default, #{$ds-color-container-ui-primary-default-default});
+
+  .label--cbx {
+    &:hover {
+      --ds-auro-checkbox-border-color: var(--ds-color-border-ui-hover-default, #{$ds-color-border-ui-hover-default});
+      --ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #{$ds-color-container-ui-primary-hover-default});
+    }
+  }
+}
+
+:host([checked]:focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #{$ds-color-border-subtle-default});
+
+  .label--cbx {
+    &:hover {
+      --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #{$ds-color-border-subtle-default});
+      --ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #{$ds-color-container-ui-primary-hover-default});
+    }
+  }
+}
+
+:host([disabled]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+  --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-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+
+  .label--cbx {
+    &:hover {
+      --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+      --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+    }
+  }
+}
+
+:host([disabled][checked]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+  --ds-auro-checkbox-checkmark-color: var(--ds-color-icon-ui-primary-disabled-default, #{$ds-color-icon-ui-primary-disabled-default});
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+
+  .label--cbx {
+    &:hover {
+      --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+      --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+    }
+  }
+}
+
+:host([error]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+}
+
+:host([error]:not([checked]):focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-active-default, #{$ds-color-border-ui-active-default});
+  --ds-auro-checkbox-outline-color: var(--ds-color-border-ui-active-default, #{$ds-color-border-ui-active-default});
+}
+
+:host([error][checked]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+  --ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+
+  .label--cbx {
+    &:hover {
+      --ds-auro-checkbox-border-color: var(--ds-color-container-error-inverse, #{$ds-color-container-error-inverse});
+      --ds-auro-checkbox-container-color: var(--ds-color-container-error-inverse, #{$ds-color-alert-error-default});
+    }
+  }
+}
+
+:host([error][checked]:focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #{$ds-color-border-subtle-default});
+
+  .label--cbx {
+    &:hover {
+      --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #{$ds-color-border-subtle-default});
+      --ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+    }
+  }
+}

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

@@ -0,0 +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)}`;

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

@@ -0,0 +1,16 @@
+/* stylelint-disable selector-class-pattern */
+: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);
+}

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

@@ -0,0 +1,24 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable selector-class-pattern */
+
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  color: var(--ds-auro-checkbox-group-text-color);
+}
+
+: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

@@ -0,0 +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)}`;

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

@@ -0,0 +1,9 @@
+: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);
+}

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

@@ -0,0 +1,11 @@
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default});
+  --ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #{$ds-color-icon-emphasis-inverse});
+  --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/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@auro-formkit/config/stylelint"
+}

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

@@ -0,0 +1,46 @@
+
+> @auro-formkit/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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+7 │ @import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import '../libSupport/manageScope';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+7 │ @import '../utilityVariables/important';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @aurodesignsystem/webcorestylesheets/src/utilityClasses/_displayProperties.scss 7:9  @import
+    src/styles/style.scss 7:9                                                            root stylesheet
+

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

@@ -0,0 +1,160 @@
+
+> @auro-formkit/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
+> 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
+
+> @auro-formkit/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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+7 │ @import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import '../libSupport/manageScope';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+7 │ @import '../utilityVariables/important';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @aurodesignsystem/webcorestylesheets/src/utilityClasses/_displayProperties.scss 7:9  @import
+    src/styles/style.scss 7:9                                                            root stylesheet
+
+
+> @auro-formkit/auro-combobox@2.1.4 bundler
+> rollup -c node:@auro-formkit/config/rollup
+
+
+./src/index.js → dist...
+created dist in 825ms
+
+./demo/index.js → ./demo/...
+created ./demo/ in 747ms
+
+./demo/api.js → ./demo/...
+created ./demo/ in 577ms
+
+> @auro-formkit/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 
+  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md 
+  ⁕ 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/partials/useCases.md 
+  ⁕ CODE:src=./apiExamples/basic.html 
+  ⁕ CODE:src=./apiExamples/basic.html 
+
+✔ /demo/index.md Updated
+ Transforms run
+  ⁕ FILE:src=./../docs/partials/description.md 
+  ⁕ FILE:src=./../docs/partials/useCases.md 
+  ⁕ FILE:src=./../apiExamples/basic.html 
+  ⁕ FILE:src=./../apiExamples/airports.html 
+  ⁕ FILE:src=./../apiExamples/withCheckmark.html 
+  ⁕ FILE:src=./../apiExamples/typeMonthDayYear.html 
+  ⁕ FILE:src=./../apiExamples/persistent.html 
+  ⁕ FILE:src=./../apiExamples/swapValue.html 
+  ⁕ FILE:src=./../apiExamples/custom.html 
+  ⁕ CODE:src=./../apiExamples/basic.html 
+  ⁕ CODE:src=./../apiExamples/airports.html 
+  ⁕ CODE:src=./../apiExamples/withCheckmark.html 
+  ⁕ CODE:src=./../apiExamples/typeMonthDayYear.html 
+  ⁕ CODE:src=./../apiExamples/persistent.html 
+  ⁕ CODE:src=./../apiExamples/swapValue.html 
+  ⁕ CODE:src=./../apiExamples/custom.html 
+
+✔ /demo/api.md Updated
+ Transforms run
+  ⁕ FILE:src=./../docs/api.md 
+  ⁕ FILE:src=./../apiExamples/basic.html 
+  ⁕ FILE:src=./../apiExamples/dynamicMenu.html 
+  ⁕ FILE:src=./../apiExamples/disabled.html 
+  ⁕ FILE:src=./../apiExamples/noFilter.html 
+  ⁕ FILE:src=./../apiExamples/error.html 
+  ⁕ FILE:src=./../apiExamples/noValidate.html 
+  ⁕ FILE:src=./../apiExamples/required.html 
+  ⁕ FILE:src=./../apiExamples/programmaticValue.html 
+  ⁕ FILE:src=./../apiExamples/value.html 
+  ⁕ FILE:src=./../apiExamples/typeMonthDayYear.html 
+  ⁕ FILE:src=./../apiExamples/focus.html 
+  ⁕ FILE:src=./../apiExamples/helpText.html 
+  ⁕ FILE:src=./../apiExamples/loading.html 
+  ⁕ FILE:src=./../apiExamples/inDialog.html 
+  ⁕ CODE:src=./../apiExamples/basic.html 
+  ⁕ CODE:src=./../apiExamples/dynamicMenu.html 
+  ⁕ CODE:src=./../apiExamples/dynamicMenu.js 
+  ⁕ CODE:src=./../apiExamples/disabled.html 
+  ⁕ CODE:src=./../apiExamples/noFilter.html 
+  ⁕ CODE:src=./../apiExamples/error.html 
+  ⁕ CODE:src=./../apiExamples/noValidate.html 
+  ⁕ CODE:src=./../apiExamples/required.html 
+  ⁕ CODE:src=./../apiExamples/programmaticValue.html 
+  ⁕ CODE:src=./../apiExamples/value.html 
+  ⁕ CODE:src=./../apiExamples/value.js 
+  ⁕ CODE:src=./../apiExamples/typeMonthDayYear.html 
+  ⁕ CODE:src=./../apiExamples/focus.js 
+  ⁕ CODE:src=./../apiExamples/focus.html 
+  ⁕ CODE:src=./../apiExamples/helpText.html 
+  ⁕ CODE:src=./../apiExamples/loading.js 
+  ⁕ CODE:src=./../apiExamples/loading.html 
+  ⁕ CODE:src=./../apiExamples/inDialog.html 
+  ⁕ CODE:src=./../apiExamples/inDialog.js 
+
+Docs processed successfully for combobox
+
+> @auro-formkit/auro-combobox@2.1.4 types
+> tsc --project tsconfig.json
+

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

@@ -0,0 +1,5 @@
+
+> @auro-formkit/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

@@ -0,0 +1,10 @@
+
+> @auro-formkit/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.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+Complete!

package/components/combobox/README.md

@@ -0,0 +1,200 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+
+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.
+
+The following sections are editable by making changes to the following files:
+
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
+| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+-->
+
+# Formkit/auro-combobox
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+`<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
+<!-- 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
+
+<!-- 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)
+
+```shell
+$ npm i @auro-formkit/-formkit/-formkit/auro-combobox
+```
+
+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
+
+<!-- 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).
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### 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.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+
+```js
+import "@auro-formkit/-formkit/-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 -->
+
+```html
+<auro-combobox>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## 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.
+
+**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 -->
+
+### 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:END -->
+
+## auro-formkit/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 -->
+The `<auro-combobox>` element should be used in situations where users may:
+
+* Search
+  * Airports: user looks for a specific airport by searching for the city name or airport code
+  * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
+* Filter
+  * Options: user chooses filters for their search by using combobox
+* Select
+  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Code Examples
+
+### Default auro-formkit/auro-combobox
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+
+```html
+<auro-combobox>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- 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.
+
+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 -->
+
+### 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
+```
+
+Open [localhost:8000](http://localhost:8000/)
+
+If running separate sessions is preferred, please run the following commands in individual terminal shells.
+
+```shell
+$ npm run build:watch
+
+$ npm run serve
+```
+
+<!-- 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\-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.
+
+<!-- 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 -->