@aurodesignsystem/auro-formkit 2.0.0-beta.8 → 2.0.0

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. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |             | If declared, make bib.fullscreen.headline 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>