@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.50

package/components/checkbox/dist/styles/auro-checkbox-css.d.ts

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

package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts

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

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

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

package/components/checkbox/dist/styles/colorGroup-css.d.ts

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

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

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

package/components/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,22 +55,24 @@ 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 -->
 
 ```html
 <auro-combobox>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -93,7 +89,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 +97,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.49/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.49/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.49/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.49/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,13 +124,14 @@ 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 -->
 
 ```html
 <auro-combobox>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -188,7 +185,7 @@ The custom element API file is generated in the build and committed back to the
 ### Testing
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\-formkit/-formkit/auro-combobox.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+Automated tests are required for every Auro component. See `.\test\auro-combobox.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/demo/api.js

@@ -9,7 +9,7 @@ import { auroMenuLoadingExample } from '../apiExamples/loading';
 
 
 import { AuroCombobox } from '../src/auro-combobox.js';
-import '../../menu/src/index.js';
+import '../../menu/src/registered.js';
 
 AuroCombobox.register();
 

package/components/combobox/demo/api.md

@@ -7,27 +7,31 @@
 
 | 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`  | 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. |
-| [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`  | null        | Value selected for the dropdown menu.            |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [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. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"        | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
+| [largeMobileHeadline](#largeMobileHeadline)           | `largeMobileHeadline`           | `boolean` |             | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [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`                         |           | "undefined" | Value selected for the dropdown menu.            |
 
 ## Methods
 
-| Method  | Type       | Description                         |
-|---------|------------|-------------------------------------|
-| [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
-| [reset](#reset) | `(): void` | Resets component to initial state.  |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -38,11 +42,12 @@
 
 ## Slots
 
-| Name       | Description                          |
-|------------|--------------------------------------|
-|            | Default slot for the menu content.   |
-| [helpText](#helpText) | Defines the content of the helpText. |
-| [label](#label)    | Defines the content of the label.    |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+|                           | Default slot for the menu content.               |
+| `bib.fullscreen.headline` | Defines the headline to display above menu-options |
+| [helpText](#helpText)                | Defines the content of the helpText.             |
+| [label](#label)                   | Defines the content of the label.                |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -53,6 +58,7 @@
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-combobox>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -72,6 +78,7 @@
 
 ```html
 <auro-combobox>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -98,6 +105,7 @@ The menu in this example was populated from data from a country/city API. To kee
   <!-- HTML example file -->
   <!-- ----------------- -->
   <auro-combobox id="dynamicMenuExample" noFilter>
+    <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
     <span slot="label">Name</span>
     <!--
       The auro-combobox element requires an empty auro-menu element
@@ -116,6 +124,7 @@ The menu in this example was populated from data from a country/city API. To kee
 <!-- HTML example file -->
 <!-- ----------------- -->
 <auro-combobox id="dynamicMenuExample" noFilter>
+  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
   <span slot="label">Name</span>
   <!--
     The auro-combobox element requires an empty auro-menu element
@@ -181,7 +190,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);
   });
@@ -200,6 +209,7 @@ If set, disables the combobox.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-combobox disabled>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -220,6 +230,7 @@ If set, disables the combobox.
 
 ```html
 <auro-combobox disabled>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -243,6 +254,7 @@ If set, combobox will not do suggestion filtering of the menuoptions. This optio
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noFilter.html) -->
   <!-- The below content is automatically added from ./../apiExamples/noFilter.html -->
   <auro-combobox noFilter>
+    <span slot="bib.fullscreen.headline">noFilter Combobox Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -262,6 +274,7 @@ If set, combobox will not do suggestion filtering of the menuoptions. This optio
 
 ```html
 <auro-combobox noFilter>
+  <span slot="bib.fullscreen.headline">noFilter Combobox Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -284,6 +297,7 @@ Sets a persistent error state (e.g. an error state returned from the server).
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
   <auro-combobox error="Custom error message">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -304,6 +318,7 @@ Sets a persistent error state (e.g. an error state returned from the server).
 
 ```html
 <auro-combobox error="Custom error message">
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -327,6 +342,7 @@ Intended for use with the `required` attribute. If set, disables auto-validation
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noValidate.html) -->
   <!-- The below content is automatically added from ./../apiExamples/noValidate.html -->
   <auro-combobox required noValidate>
+    <span slot="bib.fullscreen.headline">noValidate Combobox Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -347,6 +363,7 @@ Intended for use with the `required` attribute. If set, disables auto-validation
 
 ```html
 <auro-combobox required noValidate>
+  <span slot="bib.fullscreen.headline">noValidate Combobox Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -370,6 +387,7 @@ Populates the `required` attribute on the input. Used for client-side validation
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
   <auro-combobox required>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -390,6 +408,7 @@ Populates the `required` attribute on the input. Used for client-side validation
 
 ```html
 <auro-combobox required>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -412,7 +431,8 @@ 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="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -432,7 +452,8 @@ 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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -466,7 +487,8 @@ 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="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -490,7 +512,8 @@ 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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -512,11 +535,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', () => {
@@ -534,7 +557,8 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typeMonthDayYear.html) -->
   <!-- The below content is automatically added from ./../apiExamples/typeMonthDayYear.html -->
-  <auro-combobox type="month-day-year" triggerIcon>
+  <auro-combobox type="date" triggerIcon>
+    <span slot="bib.fullscreen.headline">Date Combobox Header</span>
     <span slot="label">Date</span>
     <auro-menu>
       <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -553,7 +577,8 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
 <!-- The below code snippet is automatically added from ./../apiExamples/typeMonthDayYear.html -->
 
 ```html
-<auro-combobox type="month-day-year" triggerIcon>
+<auro-combobox type="date" triggerIcon>
+  <span slot="bib.fullscreen.headline">Date Combobox Header</span>
   <span slot="label">Date</span>
   <auro-menu>
     <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -580,6 +605,7 @@ The focus method will apply focus state to the combobox input field.
   <auro-button id="focusExampleBtn">Apply focus to combobox</auro-button>
   <br /><br />
   <auro-combobox id="focusExample">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -615,6 +641,7 @@ export function focusExample() {
 <auro-button id="focusExampleBtn">Apply focus to combobox</auro-button>
 <br /><br />
 <auro-combobox id="focusExample">
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -639,6 +666,7 @@ Use the `reset()` method to reset the `<auro-combobox>`'s `value` and `validity`
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br /><br />
   <auro-combobox id="resetStateExample" required>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -660,6 +688,7 @@ Use the `reset()` method to reset the `<auro-combobox>`'s `value` and `validity`
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br /><br />
 <auro-combobox id="resetStateExample" required>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -697,6 +726,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
   <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
   <auro-combobox>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <span slot="helpText">Custom help text</span>
     <auro-menu>
@@ -718,6 +748,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 ```html
 <auro-combobox>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <span slot="helpText">Custom help text</span>
   <auro-menu>
@@ -741,6 +772,7 @@ While content is loading, the menu can either remain empty or display a loading
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
   <!-- The below content is automatically added from ./../apiExamples/loading.html -->
   <auro-combobox id="loadingExample">
+    <span slot="bib.fullscreen.headline">Loading Combobox Header</span>
     <span slot="label">Please select a preference</span>
     <auro-menu id="loadingExampleComboboxMenu">
       <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
@@ -798,6 +830,7 @@ export function auroMenuLoadingExample() {
 
 ```html
 <auro-combobox id="loadingExample">
+  <span slot="bib.fullscreen.headline">Loading Combobox Header</span>
   <span slot="label">Please select a preference</span>
   <auro-menu id="loadingExampleComboboxMenu">
     <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
@@ -807,6 +840,55 @@ export function auroMenuLoadingExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Dropdown with fullscreen bib
+
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
+
+The default value of `fullscreenBreakpoint` is `sm`. 
+
+Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens)
+
+To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreenBreakpoint.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/fullscreenBreakpoint.html -->
+  <auro-combobox fullscreenBreakpoint="lg">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <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 -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreenBreakpoint.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/fullscreenBreakpoint.html -->
+
+```html
+<auro-combobox fullscreenBreakpoint="lg">
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <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 -->
+</auro-accordion>
+
 #### in Dialog
 
 The component can be in a dialog.
@@ -820,6 +902,7 @@ The component can be in a dialog.
       <span slot="header">Combobox in Dialog</span>
       <div slot="content">
         <auro-combobox id="focusExample">
+          <span slot="bib.fullscreen.headline">Bib Header</span>
           <span slot="label">Name</span>
           <auro-menu>
             <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -847,6 +930,7 @@ The component can be in a dialog.
     <span slot="header">Combobox in Dialog</span>
     <div slot="content">
       <auro-combobox id="focusExample">
+        <span slot="bib.fullscreen.headline">Bib Header</span>
         <span slot="label">Name</span>
         <auro-menu>
           <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>