@aurodesignsystem/auro-formkit 2.0.0-beta.50 → 2.0.0-beta.52

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Semantic Release Automated Changelog
 
+# [2.0.0-beta.52](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.51...v2.0.0-beta.52) (2025-02-28)
+
+
+### Bug Fixes
+
+* rename `mobileHeadline` and `mobileDateLabel` to follow `bib.fullscreen.*` pattern ([26a28e8](https://github.com/AlaskaAirlines/auro-formkit/commit/26a28e849fce9bd2ba79721cd1097b4c4cbab943))
+
+
+### BREAKING CHANGES
+
+* `mobileDateLabel` slot is renamed to `bib.fullscreen.dateLabel`
+
+# [2.0.0-beta.51](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.50...v2.0.0-beta.51) (2025-02-28)
+
+
+### Bug Fixes
+
+* rename `largeMobileHeadline` to `largeFullscreenHeadline` ([ff7ee2e](https://github.com/AlaskaAirlines/auro-formkit/commit/ff7ee2e21a4e0b7f640898e3221c80a2bcc4a41f))
+
+
+### Features
+
+* add fullscreen bib features on select [#360](https://github.com/AlaskaAirlines/auro-formkit/issues/360) ([7b9a3ff](https://github.com/AlaskaAirlines/auro-formkit/commit/7b9a3ffae0e029be71e81c8dd2a02e9c37cbdd6d))
+
 # [2.0.0-beta.50](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.49...v2.0.0-beta.50) (2025-02-27)
 
 

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.49/dist/auro-checkbox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.51/dist/auro-checkbox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-checkbox use cases

package/components/combobox/README.md

@@ -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.49/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.49/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.49/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.49/dist/auro-combobox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.51/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.51/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.51/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.51/dist/auro-combobox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases

package/components/combobox/demo/api.md

@@ -12,7 +12,7 @@
 | [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 |
+| [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.           |

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

@@ -11686,10 +11686,10 @@ class AuroCombobox extends r$b {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -12409,7 +12409,7 @@ class AuroCombobox extends r$b {
 
           <div class="menuWrapper"></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           </${this.bibtemplateTag}>
 
           <p slot="helpText">

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

@@ -11544,10 +11544,10 @@ class AuroCombobox extends r$b {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -12267,7 +12267,7 @@ class AuroCombobox extends r$b {
 
           <div class="menuWrapper"></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           </${this.bibtemplateTag}>
 
           <p slot="helpText">

package/components/combobox/dist/auro-combobox.d.ts

@@ -111,10 +111,10 @@ export class AuroCombobox extends LitElement {
             hasChanged: typeof arrayOrUndefinedHasChanged;
         };
         /**
-         * If declared, make mobileHeadline in HeadingDisplay.
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600
          */
-        largeMobileHeadline: {
+        largeFullscreenHeadline: {
             type: BooleanConstructor;
             reflect: boolean;
         };

package/components/combobox/dist/index.js

@@ -11521,10 +11521,10 @@ class AuroCombobox extends r$b {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -12244,7 +12244,7 @@ class AuroCombobox extends r$b {
 
           <div class="menuWrapper"></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           </${this.bibtemplateTag}>
 
           <p slot="helpText">

package/components/combobox/dist/registered.js

@@ -11521,10 +11521,10 @@ class AuroCombobox extends r$b {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -12244,7 +12244,7 @@ class AuroCombobox extends r$b {
 
           <div class="menuWrapper"></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           </${this.bibtemplateTag}>
 
           <p slot="helpText">

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

package/components/counter/demo/api.md

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

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

@@ -5948,10 +5948,10 @@ class AuroCounterGroup extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -6211,7 +6211,7 @@ class AuroCounterGroup extends r$9 {
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>

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

@@ -5948,10 +5948,10 @@ class AuroCounterGroup extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -6211,7 +6211,7 @@ class AuroCounterGroup extends r$9 {
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>

package/components/counter/dist/auro-counter-group.d.ts

@@ -56,10 +56,10 @@ export class AuroCounterGroup extends LitElement {
             type: ObjectConstructor;
         };
         /**
-         * If declared, make mobileHeadline in HeadingDisplay.
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600
          */
-        largeMobileHeadline: {
+        largeFullscreenHeadline: {
             type: BooleanConstructor;
             reflect: boolean;
         };

package/components/counter/dist/index.js

@@ -5948,10 +5948,10 @@ class AuroCounterGroup extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -6211,7 +6211,7 @@ class AuroCounterGroup extends r$9 {
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>

package/components/counter/dist/registered.js

@@ -5948,10 +5948,10 @@ class AuroCounterGroup extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
-      largeMobileHeadline: {
+      largeFullscreenHeadline: {
         type: Boolean,
         reflect: true
       },
@@ -6211,7 +6211,7 @@ class AuroCounterGroup extends r$9 {
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>

package/components/datepicker/README.md

@@ -72,9 +72,9 @@ import "@aurodesignsystem/auro-formkit/auro-datepicker";
 
 ```html
 <auro-datepicker>
-  <span slot="mobileHeadline">Datepicker Headline</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
-  <span slot="mobileDateLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -94,10 +94,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.49/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.49/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.49/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.49/dist/auro-datepicker__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.51/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.51/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.51/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.51/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases
@@ -119,9 +119,9 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ```html
 <auro-datepicker>
-  <span slot="mobileHeadline">Datepicker Headline</span>
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
-  <span slot="mobileDateLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->