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

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

@@ -2942,7 +2942,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.
  */
 
@@ -3316,7 +3316,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
       },
@@ -3405,8 +3405,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,
@@ -8843,6 +8843,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.
@@ -8871,7 +8872,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();
 
@@ -9024,7 +9025,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
       },
@@ -9205,7 +9206,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);
@@ -9693,7 +9694,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/dist/auro-combobox.d.ts

@@ -1,5 +1,6 @@
 /**
  * @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.
@@ -122,7 +123,7 @@ export class AuroCombobox extends LitElement {
          * 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: StringConstructor;
             reflect: boolean;
         };
@@ -156,7 +157,7 @@ export class AuroCombobox extends LitElement {
     availableOptions: any[];
     optionActive: any;
     msgSelectionMissing: string;
-    mobileFullscreenBreakpoint: string;
+    fullscreenBreakpoint: string;
     validation: AuroFormValidation;
     runtimeUtils: any;
     isHiddenWhileLoading: boolean;

package/components/combobox/dist/index.js

@@ -2919,7 +2919,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.
  */
 
@@ -3293,7 +3293,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
       },
@@ -3382,8 +3382,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,
@@ -8820,6 +8820,7 @@ var styleCss = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{d
 // 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.
@@ -8848,7 +8849,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();
 
@@ -9001,7 +9002,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
       },
@@ -9182,7 +9183,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);
@@ -9670,7 +9671,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/dist/registered.js

@@ -2919,7 +2919,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.
  */
 
@@ -3293,7 +3293,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
       },
@@ -3382,8 +3382,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,
@@ -8820,6 +8820,7 @@ var styleCss = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{d
 // 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.
@@ -8848,7 +8849,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();
 
@@ -9001,7 +9002,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
       },
@@ -9182,7 +9183,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);
@@ -9670,7 +9671,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/counter/README.md

@@ -100,7 +100,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-counter@2.0.0-beta.43/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.44/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases

package/components/counter/demo/api.js

@@ -1,10 +1,11 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
 import '../src/registered.js';
+import { dropdownCounterExample } from "../apiExamples/dropdown-mobile-properties.js";
 
 export function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
-
+    dropdownCounterExample();
   } catch (err) {
     if (initialCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/counter/demo/api.md

@@ -38,14 +38,16 @@
 
 ## Properties
 
-| Property     | Attribute    | Type      | Default     | Description                                      |
-|--------------|--------------|-----------|-------------|--------------------------------------------------|
-| [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false       | Indicates if the counter group is displayed as a dropdown. |
-| [max](#max)        | `max`        | `number`  | "undefined" | The maximum value allowed for the whole group of counters. |
-| [min](#min)        | `min`        | `number`  | "undefined" | The minimum value allowed for the whole group of counters. |
-| [total](#total)      | `total`      | `number`  | "undefined" | The total value of the counters.                 |
-| [validity](#validity)   | `validity`   | `string`  | "undefined" | Reflects the validity state.                     |
-| [value](#value)      | `value`      | `object`  | "undefined" | The current individual values of the nested counters. |
+| Property               | Attribute              | Type      | Default     | Description                                      |
+|------------------------|------------------------|-----------|-------------|--------------------------------------------------|
+| [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. |
+| [isDropdown](#isDropdown)           | `isDropdown`           | `boolean` | false       | Indicates if the counter group is displayed as a dropdown. |
+| [largeMobileHeadline](#largeMobileHeadline)  | `largeMobileHeadline`  | `boolean` |             | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [max](#max)                  | `max`                  | `number`  | "undefined" | The maximum value allowed for the whole group of counters. |
+| [min](#min)                  | `min`                  | `number`  | "undefined" | The minimum value allowed for the whole group of counters. |
+| [total](#total)                | `total`                | `number`  | "undefined" | The total value of the counters.                 |
+| [validity](#validity)             | `validity`             | `string`  | "undefined" | Reflects the validity state.                     |
+| [value](#value)                | `value`                | `object`  | "undefined" | The current individual values of the nested counters. |
 
 ## Methods
 
@@ -61,12 +63,14 @@
 
 ## Slots
 
-| Name        | Description                                      |
-|-------------|--------------------------------------------------|
-| [Default](#Default)   | Slot for counter elements.                       |
-| [HelpText](#HelpText)  | Dropdown help text content. Only used when `isDropdown` is true. |
-| [Label](#Label)     | Dropdown label content. Only used when `isDropdown` is true. |
-| [ValueText](#ValueText) | Dropdown value text display. Only used when `isDropdown` is true. |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| [Default](#Default)                 | Slot for counter elements.                       |
+| [HelpText](#HelpText)                | Dropdown help text content. Only used when `isDropdown` is true. |
+| [Label](#Label)                   | Dropdown label content. Only used when `isDropdown` is true. |
+| [ValueText](#ValueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
+| `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib |
+| `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -143,4 +147,74 @@ You can also individually set the max or min value for each counter in a group.
 </auro-counter-group>
 ```
 <!-- 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**.
+You can also set `bib.fullscreen.footer` to add any additional options on fullscreen view.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+      <div slot="helpText">This is help text</div>
+      <auro-counter>
+        Adults
+        <span slot="description">18 years or older</span>
+      </auro-counter>
+      <auro-counter>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+      </auro-counter>
+      <auro-counter>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
+      </auro-counter>
+      <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+        <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+        <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+      </div>
+    </auro-counter-group>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+    <div slot="helpText">This is help text</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+    <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+      <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+      <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+    </div>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>