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

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

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

package/components/radio/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/radio/dist/styles/groupColor-css.d.ts

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

package/components/radio/dist/styles/style-css.d.ts

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

package/components/radio/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/select/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,26 +17,11 @@ 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-select
+# Select
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. See the <auro-hyperlink href="https://auro.alaskaair.com/components/auro/menu/api">auro-menu API docs</auro-hyperlink> for additional information.
-
-## About auro-select
-
-The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
-
-## Install instructions
-
-The `<auro-select>` custom element is a combo-element using independent primitives for the most flexibility. To allow consumers the most control over the versioning their dependencies, `<auro-select>` requires the following peer dependencies along with `<auro-select>`.
-
-```shell
-$ npm i @aurodesignsystem/auro-select
-
-$ npm i @aurodesignsystem/auro-dropdown
-$ npm i @aurodesignsystem/auro-menu
-```
+`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
 <!-- 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 -->
@@ -52,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-select/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/auro-select/actions/workflows/testPublish.yml)
-[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/auro-select?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/auro-select)
-[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/auro-select?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-select
+$ 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
@@ -76,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-select>` component.
+Defining the component dependency within each component that is using the `<auro-select>` 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-select";
+import "@aurodesignsystem/auro-formkit/auro-select";
 ```
-
 <!-- 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-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -107,7 +88,7 @@ import "@auro-formkit/-formkit/-formkit/auro-select";
 ## 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-select__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-select__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.
 
@@ -115,17 +96,16 @@ 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" />
+<!-- 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@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@auro-formkit/-formkit/-formkit/auro-select@3.3.0/dist/-formkit/-formkit/auro-select__bundled.js" type="module"></script>
-```
-
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.50/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.50/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.50/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-formkit/auro-select use cases
+## auro-select use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
@@ -134,13 +114,14 @@ See description.
 
 ## API Code Examples
 
-### Default auro-formkit/auro-select
+### Default auro-select
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -193,7 +174,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-select.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-select.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/select/demo/api.js

@@ -9,7 +9,7 @@ import { auroMenuLoadingExample } from "../apiExamples/loading";
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
-import '../../menu/src/index.js';
+import '../../menu/src/registered.js';
 
 AuroSelect.register(); // registering to `auro-select`
 

package/components/select/demo/api.md

@@ -14,42 +14,48 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default     | Description                                      |
-|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled)                      | `disabled`                      | `boolean` |             | When attribute is present, element shows disabled state. |
-| [error](#error)                         | `error`                         | `string`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |             | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
-| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |             | When true, checkmark on selected option will no longer be present. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |             | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `object`  | "undefined" | Specifies the current selected menuOption.       |
-| [required](#required)                      | `required`                      | `boolean` |             | Populates the `required` attribute on the element. 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`. |
-| [validity](#validity)                      | `validity`                      | `string`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         | `string`  |             | Value selected for the component.                |
+| Property                        | Attribute                       | Type      | Default | Description                                      |
+|---------------------------------|---------------------------------|-----------|---------|--------------------------------------------------|
+| [disabled](#disabled)                      | `disabled`                      | `boolean` |         | When attribute is present, element shows disabled state. |
+| [error](#error)                         | `error`                         | `string`  |         | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |         | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
+| [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. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |         | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |         | Sets multi-select mode, allowing multiple options to be selected at once. |
+| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |         | When true, checkmark on selected option will no longer be present. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |         | If set, disables auto-validation on blur.        |
+| [optionSelected](#optionSelected)                | `optionSelected`                |           |         | Specifies the current selected menuOption.       |
+| [required](#required)                      | `required`                      | `boolean` |         | Populates the `required` attribute on the element. 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`. |
+| [validity](#validity)                      | `validity`                      | `string`  |         | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         |           |         | Value selected for the component.                |
 
 ## Methods
 
-| Method  | Type       | Description                        |
-|---------|------------|------------------------------------|
-| [reset](#reset) | `(): void` | Resets component to initial state. |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
 | Event                       | Type               | Description                                      |
 |-----------------------------|--------------------|--------------------------------------------------|
 | `auroFormElement-validated` |                    | Notifies that the `validity` and `errorMessage` values have changed. |
-| `auroSelect-valueSet`       | `CustomEvent<any>` | Notifies that the component has a new value set. |
+| `auroSelect-valueSet`       | `CustomEvent<any>` | Notifies that the component has a new value set. |
+| [input](#input)                     | `CustomEvent<any>` | Notifies every time the value prop of the element is changed. |
 
 ## 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.                |
-| [placeholder](#placeholder) | Defines the content of the placeholder to be shown when there is no value |
+| 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.                |
+| [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
 
 ## CSS Shadow Parts
 
@@ -68,6 +74,7 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -86,6 +93,7 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
 
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -112,7 +120,8 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
   <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
   <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
   <br/><br/>
-  <auro-select id="valueExample" value="price">
+  <auro-select id="valueExample" value='["price"]'>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -134,7 +143,8 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
 <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
 <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
 <br/><br/>
-<auro-select id="valueExample" value="price">
+<auro-select id="valueExample" value='["price"]'>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -155,11 +165,11 @@ export function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'arrival';
+    valueExample.value = ['arrival'];
   });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'flight course';
+    valueExample.value = ['flight course'];
   });
 }
 ```
@@ -175,6 +185,7 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
   <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -194,6 +205,7 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 
 ```html
 <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -220,6 +232,7 @@ A custom error message can be set using the `error` attribute, or it can be used
   <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
   <br /><br />
   <auro-select id="errorExample" error="Custom error message">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -242,6 +255,7 @@ A custom error message can be set using the `error` attribute, or it can be used
 <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
 <br /><br />
 <auro-select id="errorExample" error="Custom error message">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -263,6 +277,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-select disabled>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -282,6 +297,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 
 ```html
 <auro-select disabled>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -296,6 +312,42 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### multiselect <a name="multiselect"></a>
+Sets multi-select mode, allowing multiple options to be selected at once.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiselect.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/multiselect.html -->
+  <auro-select multiselect>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <label slot="placeholder">Select one or more options</label>
+    <auro-menu>
+      <auro-menuoption value="1">Option 1</auro-menuoption>
+      <auro-menuoption value="2">Option 2</auro-menuoption>
+      <auro-menuoption value="3">Option 3</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiselect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/multiselect.html -->
+
+```html
+<auro-select multiselect>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <label slot="placeholder">Select one or more options</label>
+  <auro-menu>
+    <auro-menuoption value="1">Option 1</auro-menuoption>
+    <auro-menuoption value="2">Option 2</auro-menuoption>
+    <auro-menuoption value="3">Option 3</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### flexMenuWidth <a name="flexMenuWidth"></a>
 Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-select>` element to match the width of the bib content, rather than the width of the trigger.
 
@@ -303,6 +355,7 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/flexMenuWidth.html) -->
   <!-- The below content is automatically added from ../apiExamples/flexMenuWidth.html -->
   <auro-select flexMenuWidth id="flexMenuWidthExample">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
@@ -326,6 +379,7 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
 
 ```html
 <auro-select flexMenuWidth id="flexMenuWidthExample">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
@@ -353,6 +407,7 @@ Use the `label` slot to give your users contextual information about their selec
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/label.html) -->
   <!-- The below content is automatically added from ./../apiExamples/label.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Please select a preference</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -372,6 +427,7 @@ Use the `label` slot to give your users contextual information about their selec
 
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Please select a preference</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -393,6 +449,7 @@ Use the `helptext` slot to provide additional information back to your user abou
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
   <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="helpText">Custom help text message.</span>
     <auro-menu>
@@ -413,6 +470,7 @@ Use the `helptext` slot to provide additional information back to your user abou
 
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="helpText">Custom help text message.</span>
   <auro-menu>
@@ -439,7 +497,8 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br/><br/>
-  <auro-select id="resetStateExample" required value="price">
+  <auro-select id="resetStateExample" value='["price"]'>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Name</span>
     <auro-menu>
@@ -461,7 +520,8 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br/><br/>
-<auro-select id="resetStateExample" required value="price">
+<auro-select id="resetStateExample" value='["price"]'>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Name</span>
   <auro-menu>
@@ -498,6 +558,7 @@ The following example illustrates how a user may query the `element.value` or `e
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueExtraction.html) -->
   <!-- The below content is automatically added from ./../apiExamples/valueExtraction.html -->
   <auro-select id="valueExtraction">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -518,6 +579,7 @@ The following example illustrates how a user may query the `element.value` or `e
 
 ```html
 <auro-select id="valueExtraction">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -558,6 +620,7 @@ This example programmatically adds the `error` state when a user selects an opti
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customErrorValidity.html) -->
   <!-- The below content is automatically added from ./../apiExamples/customErrorValidity.html -->
   <auro-select id="primaryError">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="1">1</auro-menuoption>
@@ -577,6 +640,7 @@ This example programmatically adds the `error` state when a user selects an opti
 
 ```html
 <auro-select id="primaryError">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="1">1</auro-menuoption>
@@ -615,6 +679,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-select id="loadingExample">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Please select a preference</span>
     <auro-menu id="loadingExampleSelectMenu">
       <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
@@ -665,6 +730,7 @@ export function auroMenuLoadingExample() {
 
 ```html
 <auro-select id="loadingExample">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Please select a preference</span>
   <auro-menu id="loadingExampleSelectMenu">
     <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
@@ -674,6 +740,53 @@ 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-select fullscreenBreakpoint="lg">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- 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-select fullscreenBreakpoint="lg">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### in Dialog
 
 The component can be in a dialog.
@@ -686,7 +799,8 @@ The component can be in a dialog.
     <auro-dialog id="select-dialog">
       <span slot="header">Select in Dialog</span>
       <div slot="content">
-        <auro-select id="valueExample" value="price">
+        <auro-select id="valueExample" value='["price"]'>
+          <span slot="bib.fullscreen.headline">Bib Headline</span>
           <span slot="label">Name</span>
           <auro-menu>
             <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -713,7 +827,8 @@ The component can be in a dialog.
   <auro-dialog id="select-dialog">
     <span slot="header">Select in Dialog</span>
     <div slot="content">
-      <auro-select id="valueExample" value="price">
+      <auro-select id="valueExample" value='["price"]'>
+        <span slot="bib.fullscreen.headline">Bib Headline</span>
         <span slot="label">Name</span>
         <auro-menu>
           <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -751,6 +866,7 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueAlert.html) -->
   <!-- The below content is automatically added from ./../apiExamples/valueAlert.html -->
   <auro-select id="valueAlert">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu id="valueAlertMenu">
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -770,6 +886,7 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
 
 ```html
 <auro-select id="valueAlert">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu id="valueAlertMenu">
     <auro-menuoption value="stops">Stops</auro-menuoption>