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

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

@@ -1063,7 +1063,7 @@ var colorCss$b = i$h`.util_displayInline{display:inline}.util_displayInlineBlock
 
 var tokensCss$8 = i$h`:host{--ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
+var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
 var colorCss$a = i$h`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;
 
@@ -11673,12 +11673,12 @@ class AuroCalendar extends RangeDatepicker {
       ?isFullscreen="${this.isFullscreen}"
       @close-click="${this.utilCal.requestDismiss}">
 
-      <span slot="header">${this.slots.mobileHeadline}</span>
+      <span slot="header">${this.slots["bib.fullscreen.headline"]}</span>
 
       <div slot="subheader" class="mobileHeader">
         <div class="headerDateFrom">
-          <span class="mobileDateLabel">${this.slots.mobileDateLabel}</span>
-          <slot name="mobileDateFromStr"></slot>
+          <span class="mobileDateLabel">${this.slots["bib.fullscreen.dateLabel"]}</span>
+          <slot name="bib.fullscreen.fromStr"></slot>
         </div>
         <div class="headerDateTo"><slot name="mobileDateToStr"></slot></div>
       </div>
@@ -21677,8 +21677,8 @@ var inputVersion = '4.2.0';
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot helpText - Defines the content of the helpText.
- * @slot mobileHeadline - Defines the headline to display above mobileDateLabels in the mobile layout.
- * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
+ * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
+ * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
  * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
@@ -21851,7 +21851,7 @@ class AuroDatePicker extends r$c {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
@@ -22699,9 +22699,9 @@ class AuroDatePicker extends r$c {
               .monthNames="${this.monthNames}"
               part="calendar"
             >
-              <slot slot="mobileHeadline" name="mobileHeadline" @slotchange="${this.handleSlotToSlot}"></slot>
-              <slot slot="mobileDateLabel" name="mobileDateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
-              <span slot="mobileDateFromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
+              <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
+              <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
+              <span slot="bib.fullscreen.fromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
               ${this.range ? u$9`<span slot="mobileDateToStr">${this.valueEnd || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
             </auro-calendar>
           </div>

package/components/datepicker/demo/index.md

@@ -23,9 +23,9 @@ The `<auro-datepicker>` 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-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 -->
 </div>
@@ -36,9 +36,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 -->
@@ -50,10 +50,10 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
   <auro-datepicker range>
-    <span slot="mobileHeadline">Datepicker Range Headline</span>
+    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
-    <span slot="mobileDateLabel">Roundtrip</span>
+    <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -64,10 +64,10 @@ The `<auro-datepicker>` element should be used in situations where users may:
 
 ```html
 <auro-datepicker range>
-  <span slot="mobileHeadline">Datepicker Range Headline</span>
+  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
-  <span slot="mobileDateLabel">Roundtrip</span>
+  <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
 </auro-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -91,9 +91,9 @@ 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-datepicker selectedDate="06/16/2022">
-      <span slot="mobileHeadline">custom-datepicker Example</span>
+      <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
       <span slot="fromLabel">Choose a date</span>
-      <span slot="mobileDateLabel">Choose a date</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
   </custom-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -104,9 +104,9 @@ This will create a new custom element that you can use in your HTML that will fu
 
 ```html
 <custom-datepicker selectedDate="06/16/2022">
-    <span slot="mobileHeadline">custom-datepicker Example</span>
+    <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
     <span slot="fromLabel">Choose a date</span>
-    <span slot="mobileDateLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
 </custom-datepicker>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

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

@@ -804,7 +804,7 @@ var colorCss$b = i$h`.util_displayInline{display:inline}.util_displayInlineBlock
 
 var tokensCss$8 = i$h`:host{--ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
+var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
 var colorCss$a = i$h`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;
 
@@ -11414,12 +11414,12 @@ class AuroCalendar extends RangeDatepicker {
       ?isFullscreen="${this.isFullscreen}"
       @close-click="${this.utilCal.requestDismiss}">
 
-      <span slot="header">${this.slots.mobileHeadline}</span>
+      <span slot="header">${this.slots["bib.fullscreen.headline"]}</span>
 
       <div slot="subheader" class="mobileHeader">
         <div class="headerDateFrom">
-          <span class="mobileDateLabel">${this.slots.mobileDateLabel}</span>
-          <slot name="mobileDateFromStr"></slot>
+          <span class="mobileDateLabel">${this.slots["bib.fullscreen.dateLabel"]}</span>
+          <slot name="bib.fullscreen.fromStr"></slot>
         </div>
         <div class="headerDateTo"><slot name="mobileDateToStr"></slot></div>
       </div>
@@ -21418,8 +21418,8 @@ var inputVersion = '4.2.0';
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot helpText - Defines the content of the helpText.
- * @slot mobileHeadline - Defines the headline to display above mobileDateLabels in the mobile layout.
- * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
+ * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
+ * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
  * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
@@ -21592,7 +21592,7 @@ class AuroDatePicker extends r$c {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
@@ -22440,9 +22440,9 @@ class AuroDatePicker extends r$c {
               .monthNames="${this.monthNames}"
               part="calendar"
             >
-              <slot slot="mobileHeadline" name="mobileHeadline" @slotchange="${this.handleSlotToSlot}"></slot>
-              <slot slot="mobileDateLabel" name="mobileDateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
-              <span slot="mobileDateFromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
+              <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
+              <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
+              <span slot="bib.fullscreen.fromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
               ${this.range ? u$9`<span slot="mobileDateToStr">${this.valueEnd || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
             </auro-calendar>
           </div>

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

@@ -1,7 +1,7 @@
 /**
  * @slot helpText - Defines the content of the helpText.
- * @slot mobileHeadline - Defines the headline to display above mobileDateLabels in the mobile layout.
- * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
+ * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
+ * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
  * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
@@ -70,7 +70,7 @@ export class AuroDatePicker extends LitElement {
             reflect: boolean;
         };
         /**
-         * If declared, make mobileHeadline in HeadingDisplay.
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600.
          */
         largeFullscreenHeadline: {

package/components/datepicker/dist/index.js

@@ -804,7 +804,7 @@ var colorCss$b = i$h`.util_displayInline{display:inline}.util_displayInlineBlock
 
 var tokensCss$8 = i$h`:host{--ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
+var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
 var colorCss$a = i$h`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;
 
@@ -11414,12 +11414,12 @@ class AuroCalendar extends RangeDatepicker {
       ?isFullscreen="${this.isFullscreen}"
       @close-click="${this.utilCal.requestDismiss}">
 
-      <span slot="header">${this.slots.mobileHeadline}</span>
+      <span slot="header">${this.slots["bib.fullscreen.headline"]}</span>
 
       <div slot="subheader" class="mobileHeader">
         <div class="headerDateFrom">
-          <span class="mobileDateLabel">${this.slots.mobileDateLabel}</span>
-          <slot name="mobileDateFromStr"></slot>
+          <span class="mobileDateLabel">${this.slots["bib.fullscreen.dateLabel"]}</span>
+          <slot name="bib.fullscreen.fromStr"></slot>
         </div>
         <div class="headerDateTo"><slot name="mobileDateToStr"></slot></div>
       </div>
@@ -21418,8 +21418,8 @@ var inputVersion = '4.2.0';
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot helpText - Defines the content of the helpText.
- * @slot mobileHeadline - Defines the headline to display above mobileDateLabels in the mobile layout.
- * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
+ * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
+ * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
  * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
@@ -21592,7 +21592,7 @@ class AuroDatePicker extends r$c {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
@@ -22440,9 +22440,9 @@ class AuroDatePicker extends r$c {
               .monthNames="${this.monthNames}"
               part="calendar"
             >
-              <slot slot="mobileHeadline" name="mobileHeadline" @slotchange="${this.handleSlotToSlot}"></slot>
-              <slot slot="mobileDateLabel" name="mobileDateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
-              <span slot="mobileDateFromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
+              <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
+              <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
+              <span slot="bib.fullscreen.fromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
               ${this.range ? u$9`<span slot="mobileDateToStr">${this.valueEnd || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
             </auro-calendar>
           </div>

package/components/datepicker/dist/registered.js

@@ -804,7 +804,7 @@ var colorCss$b = i$h`.util_displayInline{display:inline}.util_displayInlineBlock
 
 var tokensCss$8 = i$h`:host{--ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
+var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
 var colorCss$a = i$h`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;
 
@@ -11414,12 +11414,12 @@ class AuroCalendar extends RangeDatepicker {
       ?isFullscreen="${this.isFullscreen}"
       @close-click="${this.utilCal.requestDismiss}">
 
-      <span slot="header">${this.slots.mobileHeadline}</span>
+      <span slot="header">${this.slots["bib.fullscreen.headline"]}</span>
 
       <div slot="subheader" class="mobileHeader">
         <div class="headerDateFrom">
-          <span class="mobileDateLabel">${this.slots.mobileDateLabel}</span>
-          <slot name="mobileDateFromStr"></slot>
+          <span class="mobileDateLabel">${this.slots["bib.fullscreen.dateLabel"]}</span>
+          <slot name="bib.fullscreen.fromStr"></slot>
         </div>
         <div class="headerDateTo"><slot name="mobileDateToStr"></slot></div>
       </div>
@@ -21418,8 +21418,8 @@ var inputVersion = '4.2.0';
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * @slot helpText - Defines the content of the helpText.
- * @slot mobileHeadline - Defines the headline to display above mobileDateLabels in the mobile layout.
- * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
+ * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
+ * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
  * @slot fromLabel - Defines the label content for the first input.
  * @slot date_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
@@ -21592,7 +21592,7 @@ class AuroDatePicker extends r$c {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
        */
       largeFullscreenHeadline: {
@@ -22440,9 +22440,9 @@ class AuroDatePicker extends r$c {
               .monthNames="${this.monthNames}"
               part="calendar"
             >
-              <slot slot="mobileHeadline" name="mobileHeadline" @slotchange="${this.handleSlotToSlot}"></slot>
-              <slot slot="mobileDateLabel" name="mobileDateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
-              <span slot="mobileDateFromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
+              <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
+              <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
+              <span slot="bib.fullscreen.fromStr">${this.value || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
               ${this.range ? u$9`<span slot="mobileDateToStr">${this.valueEnd || u$9`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
             </auro-calendar>
           </div>

package/components/dropdown/README.md

@@ -97,7 +97,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-dropdown@2.0.0-beta.50/dist/auro-dropdown__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>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/form/README.md

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

package/components/form/demo/working.html

@@ -76,7 +76,7 @@
       <h4>Pick a cool date</h4>
       <auro-datepicker id="date-example" name="dateExample" required>
         <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>
     </div>
 
@@ -85,7 +85,7 @@
       <auro-datepicker id="date-range" name="dateRange" required range>
         <span slot="fromLabel">Start</span>
         <span slot="toLabel">End</span>
-        <span slot="mobileDateLabel">Choose a range</span>
+        <span slot="bib.fullscreen.dateLabel">Choose a range</span>
       </auro-datepicker>
     </div>
 

package/components/input/README.md

@@ -89,7 +89,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-input@2.0.0-beta.50/dist/auro-input__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>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/menu/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-menu@2.0.0-beta.50/dist/auro-menu__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>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

package/components/radio/README.md

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

package/components/select/README.md

@@ -100,9 +100,9 @@ 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-dropdown@2.0.0-beta.50/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.50/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.50/dist/auro-select__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-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-select@2.0.0-beta.51/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

package/components/select/demo/api.md

@@ -20,7 +20,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [error](#error)                         | `error`                         | `string`  |         | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |         | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"    | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |         | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |         | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
 | [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |         | Sets multi-select mode, allowing multiple options to be selected at once. |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |         | When true, checkmark on selected option will no longer be present. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |         | If set, disables auto-validation on blur.        |

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

@@ -4987,7 +4987,7 @@ class AuroSelect extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
       largeFullscreenHeadline: {

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

@@ -4883,7 +4883,7 @@ class AuroSelect extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
       largeFullscreenHeadline: {

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

@@ -37,7 +37,7 @@ export class AuroSelect extends LitElement {
             reflect: boolean;
         };
         /**
-         * If declared, make mobileHeadline in HeadingDisplay.
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600
          */
         largeFullscreenHeadline: {

package/components/select/dist/index.js

@@ -4883,7 +4883,7 @@ class AuroSelect extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
       largeFullscreenHeadline: {

package/components/select/dist/registered.js

@@ -4883,7 +4883,7 @@ class AuroSelect extends r$9 {
       },
 
       /**
-       * If declared, make mobileHeadline in HeadingDisplay.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600
        */
       largeFullscreenHeadline: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.51",
+  "version": "2.0.0-beta.52",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {