@aurodesignsystem/auro-formkit 2.0.0-beta.43 → 2.0.0-beta.45

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Semantic Release Automated Changelog
 
+# [2.0.0-beta.45](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.44...v2.0.0-beta.45) (2025-02-24)
+
+
+### Bug Fixes
+
+* rename some fullscreen related props and slot names ([fb3d4e6](https://github.com/AlaskaAirlines/auro-formkit/commit/fb3d4e62e39dc48ea0c17c51257127fc09aa8462))
+
+
+### Features
+
+* make counter-group dropdown fullscreen on mobile screen ([7b23520](https://github.com/AlaskaAirlines/auro-formkit/commit/7b23520c27a2d506d839e4f7d5d1c10af3f2e27e))
+
+
+### BREAKING CHANGES
+
+* properties for the fullscreen feature are renamed
+- `mobileFullscreenBreakpoint` is now `fullscreenBreakpoint`
+- `bib.mobile.headline` is now `bib.fullscreen.headline`
+
+# [2.0.0-beta.44](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.43...v2.0.0-beta.44) (2025-02-24)
+
+
+### Performance Improvements
+
+* complete refactor of build system and components ([fd40ece](https://github.com/AlaskaAirlines/auro-formkit/commit/fd40ece429e0c0438ad5b1b9e4f7ab186d10d450)), closes [#228](https://github.com/AlaskaAirlines/auro-formkit/issues/228)
+
+
+### BREAKING CHANGES
+
+* Major architectural changes to package structure and component system
+
+- Move to monorepo workspace configuration with Turborepo
+- Add new components:
+  - auro-counter for numeric input controls
+  - auro-helptext for form field assistance
+  - auro-bibtemplate for bib/dropdown templates
+  - auro-form for form handling and validation
+  - auro-counter-group for grouped counter inputs
+- Update existing components:
+  - auro-dropdown with improved positioning and mobile support
+  - auro-select with enhanced menu API
+  - auro-combobox with fullscreen mobile view
+  - auro-datepicker with range selection support
+- Consolidate all components under auro-formkit namespace
+- New build pipeline and documentation structure
+
 # [2.0.0-beta.43](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.42...v2.0.0-beta.43) (2025-02-24)
 
 

package/components/checkbox/README.md

@@ -96,7 +96,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- 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/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.42/dist/auro-checkbox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.44/dist/auro-checkbox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-checkbox use cases

package/components/combobox/README.md

@@ -72,7 +72,7 @@ import "@aurodesignsystem/auro-formkit/auro-combobox";
 
 ```html
 <auro-combobox>
-  <span slot="bib.mobile.headline">Bib Header</span>
+  <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>
@@ -101,10 +101,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- 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.42/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.42/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.42/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.42/dist/auro-combobox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.44/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.44/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.44/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.44/dist/auro-combobox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases
@@ -131,7 +131,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ```html
 <auro-combobox>
-  <span slot="bib.mobile.headline">Bib Header</span>
+  <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>

package/components/combobox/demo/api.md

@@ -11,8 +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. |
+| [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 |
-| [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.           |
@@ -42,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
@@ -57,7 +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.mobile.headline">Bib Header</span>
+    <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>
@@ -77,7 +78,7 @@
 
 ```html
 <auro-combobox>
-  <span slot="bib.mobile.headline">Bib Header</span>
+  <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>
@@ -104,7 +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.mobile.headline">Dynamic Combobox Header</span>
+    <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
     <span slot="label">Name</span>
     <!--
       The auro-combobox element requires an empty auro-menu element
@@ -123,7 +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.mobile.headline">Dynamic Combobox Header</span>
+  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
   <span slot="label">Name</span>
   <!--
     The auro-combobox element requires an empty auro-menu element
@@ -208,7 +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.mobile.headline">Bib Header</span>
+    <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>
@@ -229,7 +230,7 @@ If set, disables the combobox.
 
 ```html
 <auro-combobox disabled>
-  <span slot="bib.mobile.headline">Bib Header</span>
+  <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>
@@ -253,7 +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.mobile.headline">noFilter Combobox Header</span>
+    <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>
@@ -273,7 +274,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="bib.fullscreen.headline">noFilter Combobox Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -296,7 +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.mobile.headline">Bib Header</span>
+    <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>
@@ -317,7 +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.mobile.headline">Bib Header</span>
+  <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>
@@ -341,7 +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.mobile.headline">noValidate Combobox Header</span>
+    <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>
@@ -362,7 +363,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="bib.fullscreen.headline">noValidate Combobox Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -386,7 +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.mobile.headline">Bib Header</span>
+    <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>
@@ -407,7 +408,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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -431,7 +432,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="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -452,7 +453,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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -487,7 +488,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="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -512,7 +513,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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -557,7 +558,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="bib.fullscreen.headline">Date Combobox Header</span>
     <span slot="label">Date</span>
     <auro-menu>
       <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -577,7 +578,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="bib.fullscreen.headline">Date Combobox Header</span>
   <span slot="label">Date</span>
   <auro-menu>
     <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -604,7 +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.mobile.headline">Bib Header</span>
+    <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>
@@ -640,7 +641,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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -665,7 +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.mobile.headline">Bib Header</span>
+    <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>
@@ -687,7 +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.mobile.headline">Bib Header</span>
+  <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>
@@ -725,7 +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.mobile.headline">Bib Header</span>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <span slot="helpText">Custom help text</span>
     <auro-menu>
@@ -747,7 +748,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="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <span slot="helpText">Custom help text</span>
   <auro-menu>
@@ -771,7 +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.mobile.headline">Loading Combobox Header</span>
+    <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>
@@ -829,7 +830,7 @@ export function auroMenuLoadingExample() {
 
 ```html
 <auro-combobox id="loadingExample">
-  <span slot="bib.mobile.headline">Loading Combobox Header</span>
+  <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>
@@ -841,17 +842,19 @@ export function auroMenuLoadingExample() {
 
 ### Dropdown with fullscreen bib
 
-You can make the dropdown open in fullscreen at a specific breakpoint by setting `mobileFullscreenBreakpoint`.
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
 
-The default value of `mobileFullscreenBreakpoint` is `sm`. 
+The default value of `fullscreenBreakpoint` is `sm`. 
 
-To support fullcreen bib, setting `mobile.bib.healine` is **STRONGLY RECOMMENDED**.
+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 mobileFullscreenBreakpoint="lg">
-    <span slot="bib.mobile.headline">Bib Header</span>
+  <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>
@@ -870,8 +873,8 @@ To support fullcreen bib, setting `mobile.bib.healine` is **STRONGLY RECOMMENDED
 <!-- The below code snippet is automatically added from ./../apiExamples/fullscreenBreakpoint.html -->
 
 ```html
-<auro-combobox mobileFullscreenBreakpoint="lg">
-  <span slot="bib.mobile.headline">Bib Header</span>
+<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>
@@ -899,7 +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.mobile.headline">Bib Header</span>
+          <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>
@@ -927,7 +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.mobile.headline">Bib Header</span>
+        <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>

package/components/combobox/demo/api.min.js

@@ -3084,7 +3084,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
 ];
 
 /**
- * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @csspart bibContainer - Apply css to the bib container.
  */
 
@@ -3458,7 +3458,7 @@ class AuroDropdown extends r$4$2 {
       /**
        * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        */
-      mobileFullscreenBreakpoint: {
+      fullscreenBreakpoint: {
         type: String,
         reflect: true
       },
@@ -3547,8 +3547,8 @@ class AuroDropdown extends r$4$2 {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
 
-    if (changedProperties.has('mobileFullscreenBreakpoint')) {
-      this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
+    if (changedProperties.has('fullscreenBreakpoint')) {
+      this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
 
     // when trigger's content is changed without any attribute or node change,
@@ -8985,6 +8985,7 @@ var styleCss$3 = i$g`.util_displayInline{display:inline}.util_displayInlineBlock
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot - Default slot for the menu content.
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @event auroCombobox-valueSet - Notifies that the component has a new value set.
@@ -9013,7 +9014,7 @@ class AuroCombobox extends r$b {
     this.optionActive = null;
     this.msgSelectionMissing = 'Please select an option.';
 
-    this.mobileFullscreenBreakpoint = 'sm';
+    this.fullscreenBreakpoint = 'sm';
 
     this.validation = new AuroFormValidation$1();
 
@@ -9166,7 +9167,7 @@ class AuroCombobox extends r$b {
        * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        * @default sm
        */
-      mobileFullscreenBreakpoint: {
+      fullscreenBreakpoint: {
         type: String,
         reflect: true
       },
@@ -9347,7 +9348,7 @@ class AuroCombobox extends r$b {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    const bibHeader = this.querySelector('[slot="bib.mobile.headline"]');
+    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
     if (bibHeader) {
       bibHeader.setAttribute('slot', 'header');
       this.bibtemplate.append(bibHeader);
@@ -9835,7 +9836,7 @@ class AuroCombobox extends r$b {
           rounded
           matchWidth
           nocheckmark
-          mobilefullscreenbreakpoint="${this.mobileFullscreenBreakpoint}"
+          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow>

package/components/combobox/demo/index.md

@@ -26,7 +26,7 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- 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="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -46,7 +46,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ```html
 <auro-combobox>
-  <span slot="bib.mobile.headline">Bib Header</span>
+  <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>
@@ -67,7 +67,7 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/airports.html) -->
   <!-- The below content is automatically added from ./../apiExamples/airports.html -->
   <auro-combobox>
-    <span slot="bib.mobile.headline">Airports</span>
+    <span slot="bib.fullscreen.headline">Airports</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="fca" id="airport-fca" suggest="fca montana kalispell">glacier park international</auro-menuoption>
@@ -207,7 +207,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ```html
 <auro-combobox>
-  <span slot="bib.mobile.headline">Airports</span>
+  <span slot="bib.fullscreen.headline">Airports</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="fca" id="airport-fca" suggest="fca montana kalispell">glacier park international</auro-menuoption>
@@ -348,7 +348,7 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withCheckmark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withCheckmark.html -->
   <auro-combobox checkmark>
-      <span slot="bib.mobile.headline">Bib Header</span>
+      <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>
@@ -368,7 +368,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ```html
 <auro-combobox checkmark>
-    <span slot="bib.mobile.headline">Bib Header</span>
+    <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>
@@ -393,7 +393,7 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
   <!-- 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="bib.fullscreen.headline">Date Combobox Header</span>
     <span slot="label">Date</span>
     <auro-menu>
       <auro-menuoption value="01/02/2020" id="option-date-0">
@@ -413,7 +413,7 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
 
 ```html
 <auro-combobox type="month-day-year" triggerIcon>
-  <span slot="bib.mobile.headline">Date Combobox Header</span>
+  <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">
@@ -436,7 +436,7 @@ This example demonstrates a static menu option that will always appears regardle
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persistent.html) -->
   <!-- The below content is automatically added from ./../apiExamples/persistent.html -->
   <auro-combobox id="persistent">
-    <span slot="bib.mobile.headline">Address Combobox</span>
+    <span slot="bib.fullscreen.headline">Address Combobox</span>
     <span slot="label">Address</span>
     <auro-menu id="customEvent">
       <auro-menuoption value="555 Address Way Seattle, WA 99999">555 Address Way Seattle, WA 99999</auro-menuoption>
@@ -453,7 +453,7 @@ This example demonstrates a static menu option that will always appears regardle
 
 ```html
 <auro-combobox id="persistent">
-  <span slot="bib.mobile.headline">Address Combobox</span>
+  <span slot="bib.fullscreen.headline">Address Combobox</span>
   <span slot="label">Address</span>
   <auro-menu id="customEvent">
     <auro-menuoption value="555 Address Way Seattle, WA 99999">555 Address Way Seattle, WA 99999</auro-menuoption>
@@ -476,7 +476,7 @@ This example illustrates using a JavaScript function attached to an auro-button
   <!-- The below content is automatically added from ./../apiExamples/swapValue.html -->
   <div id="swapExample">
     <auro-combobox id="swapExampleLeft">
-      <span slot="bib.mobile.headline">Left Combobox Header</span>
+      <span slot="bib.fullscreen.headline">Left Combobox Header</span>
       <span slot="label">Name</span>
       <auro-menu>
         <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -496,7 +496,7 @@ This example illustrates using a JavaScript function attached to an auro-button
       </auro-icon>
     </auro-button>
     <auro-combobox id="swapExampleRight">
-      <span slot="bib.mobile.headline">Right Combobox Header</span>
+      <span slot="bib.fullscreen.headline">Right Combobox Header</span>
       <span slot="label">Name</span>
       <auro-menu>
         <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -535,7 +535,7 @@ This example illustrates using a JavaScript function attached to an auro-button
 ```html
 <div id="swapExample">
   <auro-combobox id="swapExampleLeft">
-    <span slot="bib.mobile.headline">Left Combobox Header</span>
+    <span slot="bib.fullscreen.headline">Left Combobox Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -555,7 +555,7 @@ This example illustrates using a JavaScript function attached to an auro-button
     </auro-icon>
   </auro-button>
   <auro-combobox id="swapExampleRight">
-    <span slot="bib.mobile.headline">Right Combobox Header</span>
+    <span slot="bib.fullscreen.headline">Right Combobox Header</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -606,7 +606,7 @@ This will create a new custom element that you can use in your HTML that will fu
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../apiExamples/custom.html -->
   <custom-combobox>
-      <span slot="bib.mobile.headline">Bib Header</span>
+      <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>
@@ -626,7 +626,7 @@ This will create a new custom element that you can use in your HTML that will fu
 
 ```html
 <custom-combobox>
-    <span slot="bib.mobile.headline">Bib Header</span>
+    <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>