@aurodesignsystem/auro-formkit 2.0.0-beta.40 → 2.0.0-beta.42

package/components/combobox/demo/api.md

@@ -11,6 +11,8 @@
 | [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. |
+| [largeMobileHeadline](#largeMobileHeadline)           | `largeMobileHeadline`           | `boolean` |             | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [mobileFullscreenBreakpoint](#mobileFullscreenBreakpoint)    | `mobileFullscreenBreakpoint`    | `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. |
 | [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.           |
@@ -55,6 +57,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -74,6 +77,7 @@
 
 ```html
 <auro-combobox>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -100,6 +104,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.mobile.headline">Dynamic Combobox Header</span>
     <span slot="label">Name</span>
     <!--
       The auro-combobox element requires an empty auro-menu element
@@ -118,6 +123,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.mobile.headline">Dynamic Combobox Header</span>
   <span slot="label">Name</span>
   <!--
     The auro-combobox element requires an empty auro-menu element
@@ -202,6 +208,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -222,6 +229,7 @@ If set, disables the combobox.
 
 ```html
 <auro-combobox disabled>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -245,6 +253,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.mobile.headline">noFilter Combobox Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -264,6 +273,7 @@ If set, combobox will not do suggestion filtering of the menuoptions. This optio
 
 ```html
 <auro-combobox noFilter>
+  <span slot="bib.mobile.headline">noFilter Combobox Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -286,6 +296,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -306,6 +317,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.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -329,6 +341,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.mobile.headline">noValidate Combobox Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -349,6 +362,7 @@ Intended for use with the `required` attribute. If set, disables auto-validation
 
 ```html
 <auro-combobox required noValidate>
+  <span slot="bib.mobile.headline">noValidate Combobox Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -372,6 +386,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -392,6 +407,7 @@ Populates the `required` attribute on the input. Used for client-side validation
 
 ```html
 <auro-combobox required>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -415,6 +431,7 @@ Use the `value` attribute to programmatically set the value of the combobox.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
   <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
   <auro-combobox>
+    <span slot="bib.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -435,6 +452,7 @@ Use the `value` attribute to programmatically set the value of the combobox.
 
 ```html
 <auro-combobox>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -469,6 +487,7 @@ Note: using a value that does not match a menu option will reset the combobox va
   <auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
   <br/><br/>
   <auro-combobox id="valueExample">
+    <span slot="bib.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -493,6 +512,7 @@ Note: using a value that does not match a menu option will reset the combobox va
 <auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
 <br/><br/>
 <auro-combobox id="valueExample">
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -537,6 +557,7 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
   <!-- 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>
+    <span slot="bib.mobile.headline">Date Combobox Header</span>
     <span slot="label">Date</span>
     <auro-menu>
       <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -556,6 +577,7 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
 
 ```html
 <auro-combobox type="month-day-year" triggerIcon>
+  <span slot="bib.mobile.headline">Date Combobox Header</span>
   <span slot="label">Date</span>
   <auro-menu>
     <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -582,6 +604,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -617,6 +640,7 @@ export function focusExample() {
 <auro-button id="focusExampleBtn">Apply focus to combobox</auro-button>
 <br /><br />
 <auro-combobox id="focusExample">
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -641,6 +665,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -662,6 +687,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.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -699,6 +725,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.mobile.headline">Bib Header</span>
     <span slot="label">Name</span>
     <span slot="helpText">Custom help text</span>
     <auro-menu>
@@ -720,6 +747,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 ```html
 <auro-combobox>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <span slot="helpText">Custom help text</span>
   <auro-menu>
@@ -743,6 +771,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.mobile.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>
@@ -800,6 +829,7 @@ export function auroMenuLoadingExample() {
 
 ```html
 <auro-combobox id="loadingExample">
+  <span slot="bib.mobile.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>
@@ -809,6 +839,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 `mobileFullscreenBreakpoint`.
+
+The default value of `mobileFullscreenBreakpoint` is `sm`. 
+
+To support fullcreen bib, setting `mobile.bib.healine` 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 mobileFullscreenBreakpoint="lg">
+    <span slot="bib.mobile.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 mobileFullscreenBreakpoint="lg">
+  <span slot="bib.mobile.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.
@@ -822,6 +899,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.mobile.headline">Bib Header</span>
           <span slot="label">Name</span>
           <auro-menu>
             <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -849,6 +927,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.mobile.headline">Bib Header</span>
         <span slot="label">Name</span>
         <auro-menu>
           <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>