@aurodesignsystem-dev/auro-formkit 0.0.0-pr1497.3 → 0.0.0-pr1497.5

package/components/checkbox/demo/customize.min.js

@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/getting-started.min.js

@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -4856,7 +4856,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202606081930';
+var formkitVersion$2 = '202606082040';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -18348,7 +18348,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19473,7 +19473,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/demo/getting-started.min.js

@@ -4856,7 +4856,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202606081930';
+var formkitVersion$2 = '202606082040';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -18348,7 +18348,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19473,7 +19473,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

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

@@ -4871,7 +4871,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202606081930';
+var formkitVersion$2 = '202606082040';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -18363,7 +18363,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19488,7 +19488,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/index.js

@@ -4789,7 +4789,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202606081930';
+var formkitVersion$2 = '202606082040';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -18274,7 +18274,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19399,7 +19399,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/registered.js

@@ -4789,7 +4789,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202606081930';
+var formkitVersion$2 = '202606082040';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -18274,7 +18274,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19399,7 +19399,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

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

@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

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

@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {

package/components/counter/dist/index.js

@@ -1049,7 +1049,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/counter/dist/registered.js

@@ -1049,7 +1049,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/datepicker/demo/api.md

@@ -105,11 +105,11 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | `bib.fullscreen.fromLabel` | Defines the content to display above the first input in the mobile layout. |
 | `bib.fullscreen.headline`  | Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout. |
 | `bib.fullscreen.toLabel`   | Defines the content to display above the second input in the mobile layout when `range` is true. |
-| `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. |
+| `date_YYYY_MM_DD`          | 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. |
 | `fromLabel`                | Defines the label content for the first input.   |
 | `helpText`                 | Defines the content of the helpText.             |
 | `label`                    | Defines the label content for the entire datepicker when `layout="snowflake"`. |
-| `popover_MM_DD_YYYY`       | Defines the content to display in the auro-calendar-cell popover for the specified date. |
+| `popover_YYYY_MM_DD`       | Defines the content to display in the auro-calendar-cell popover for the specified date. |
 | `toLabel`                  | Defines the label content for the second input when the `range` attribute is used. |
 
 ## CSS Shadow Parts

package/components/datepicker/demo/css-only.md

@@ -67,7 +67,7 @@
 <auro-header level="3">Localization</auro-header>
 <p>Native <code>&lt;input type="date"&gt;</code> follows the browser's locale for display format but offers no control over month names, navigation labels, or ARIA text. <code>auro-datepicker</code> supports custom <code>monthNames</code> arrays for any language, localizable navigation labels (<code>navLabelPrevMonth</code>, <code>navLabelNextMonth</code>), localizable range position labels for screen readers, a customizable <code>blackoutLabel</code>, and a configurable date display format.</p>
 <auro-header level="3">Custom cell content</auro-header>
-<p>Native date inputs render a fixed grid of numbers, with no way to add prices, icons, or supplementary information to individual dates. <code>auro-datepicker</code> supports per-date slot content via <code>date_MM_DD_YYYY</code> slots for content rendered below each date number (e.g. flight prices) and <code>popover_MM_DD_YYYY</code> slots for content that appears on hover or focus for a specific date, enabling reference data alongside dates for decision-making.</p>
+<p>Native date inputs render a fixed grid of numbers, with no way to add prices, icons, or supplementary information to individual dates. <code>auro-datepicker</code> supports per-date slot content via <code>date_YYYY_MM_DD</code> slots for content rendered below each date number (e.g. flight prices) and <code>popover_YYYY_MM_DD</code> slots for content that appears on hover or focus for a specific date, enabling reference data alongside dates for decision-making.</p>
 <auro-header level="3">Design system integration</auro-header>
 <p>A native <code>&lt;input type="date"&gt;</code> cannot be styled to match a design system — shadow DOM browser controls resist CSS customization and the calendar popup is entirely outside author control. <code>auro-datepicker</code> is built with the Auro Design System, providing consistent visual language with other Auro form components, light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>), CSS custom properties and <code>::part()</code> selectors for targeted styling, and composition from versioned Auro sub-components (dropdown, input, button, icon).</p>
 <auro-header level="2">Summary</auro-header>

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

@@ -11987,7 +11987,7 @@ class AuroCalendarCell extends i$1 {
 
   /**
    * Checks if the current date is a referenced date.
-   * @param {Object} dateStr - The date string in MM_DD_YYYY format.
+   * @param {Object} dateStr - The date string in YYYY_MM_DD format.
    * @returns Boolean - True if the date is a referenced date.
    */
   isReferenceDate(dateStr) {
@@ -12000,13 +12000,8 @@ class AuroCalendarCell extends i$1 {
       // Guard clause: no dates in the array
       if (!Array.isArray(referenceDates) || referenceDates.length === 0) return false;
 
-      // Convert cell dateStr (MM_DD_YYYY) to ISO (YYYY-MM-DD) for comparison
-      const [
-        month,
-        day,
-        year
-      ] = dateStr.split('_');
-      const cellISO = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+      // eslint-disable-next-line require-unicode-regexp
+      const cellISO = dateStr.replace(/_/g, '-');
 
       return referenceDates.includes(cellISO);
     }
@@ -12060,7 +12055,7 @@ class AuroCalendarCell extends i$1 {
 
     const year = date.getFullYear();
 
-    this.dateStr = `${month}_${day}_${year}`;
+    this.dateStr = `${year}_${month}_${day}`;
   }
 
   /**
@@ -13442,7 +13437,7 @@ class AuroBibtemplate extends i$1 {
   }
 }
 
-var formkitVersion$2 = '202606081930';
+var formkitVersion$2 = '202606082040';
 
 let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
 `,u$6=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -14622,7 +14617,7 @@ class AuroCalendar extends RangeDatepicker {
     const mm = String(dateObj.getMonth() + 1).padStart(2, '0');
     const dd = String(dateObj.getDate()).padStart(2, '0');
     const yyyy = dateObj.getFullYear();
-    const dateStr = `${mm}_${dd}_${yyyy}`;
+    const dateStr = `${yyyy}_${mm}_${dd}`;
     const dateSlotEl = this.datepicker?.querySelector(`[slot="date_${dateStr}"]`);
     if (dateSlotEl) {
       const text = dateSlotEl.innerText?.trim();
@@ -18979,7 +18974,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion$1 = '202606081930';
+var formkitVersion$1 = '202606082040';
 
 let AuroElement$2 = class AuroElement extends i$1 {
   static get properties() {
@@ -32471,7 +32466,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion = '202606081930';
+var formkitVersion = '202606082040';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -33895,8 +33890,8 @@ const datepickerKeyboardStrategy = {
  * @slot label - Defines the label content for the entire datepicker when `layout="snowflake"`.
  * @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.
- * @slot popover_MM_DD_YYYY - Defines the content to display in the auro-calendar-cell popover for the specified date.
+ * @slot date_YYYY_MM_DD - 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.
+ * @slot popover_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell popover for the specified date.
  * @csspart dropdown - Use for customizing the style of the dropdown.
  * @csspart trigger - Use for customizing the style of the datepicker trigger.
  * @csspart input - Use for customizing the style of the datepicker inputs.

package/components/datepicker/demo/design.md

@@ -42,8 +42,8 @@
 <li>Date range highlighting when <code>range</code> is set.</li>
 <li>Disabled dates outside the <code>minDate</code>/<code>maxDate</code> bounds.</li>
 <li>Blackout dates that are focusable but not selectable.</li>
-<li>Custom cell content via the <code>date_MM_DD_YYYY</code> slot.</li>
-<li>Cell popovers via the <code>popover_MM_DD_YYYY</code> slot.</li>
+<li>Custom cell content via the <code>date_YYYY_MM_DD</code> slot.</li>
+<li>Cell popovers via the <code>popover_YYYY_MM_DD</code> slot.</li>
 </ul>
 <auro-header level="4" id="helpText">Help Text</auro-header>
 <p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers.</p>

package/components/datepicker/demo/getting-started.md

@@ -22,8 +22,8 @@
 <auro-anchorlink fluid href="#slot-bib-fullscreen-headline" class="level2 body-xs">bib.fullscreen.headline</auro-anchorlink>
 <auro-anchorlink fluid href="#slot-bib-fullscreen-fromLabel" class="level2 body-xs">bib.fullscreen.fromLabel</auro-anchorlink>
 <auro-anchorlink fluid href="#slot-bib-fullscreen-toLabel" class="level2 body-xs">bib.fullscreen.toLabel</auro-anchorlink>
-<auro-anchorlink fluid href="#slot-date" class="level2 body-xs">date_MM_DD_YYYY</auro-anchorlink>
-<auro-anchorlink fluid href="#slot-popover" class="level2 body-xs">popover_MM_DD_YYYY</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-date" class="level2 body-xs">date_YYYY_MM_DD</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-popover" class="level2 body-xs">popover_YYYY_MM_DD</auro-anchorlink>
 <auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
 <auro-anchorlink fluid href="#validity" class="level2 body-xs">Validity</auro-anchorlink>
 <auro-anchorlink fluid href="#value" class="level2 body-xs">Value</auro-anchorlink>
@@ -203,10 +203,10 @@ The `<auro-datepicker>` custom element is compatible with Svelte. See the auro-f
 <p>Defines the content to display above the first date input in the fullscreen (mobile) layout.</p>
 <auro-header level="3" id="slot-bib-fullscreen-toLabel">bib.fullscreen.toLabel</auro-header>
 <p>Defines the content to display above the second date input in the fullscreen (mobile) layout when <code>range</code> is true.</p>
-<auro-header level="3" id="slot-date">date_MM_DD_YYYY</auro-header>
-<p>Defines the content to display in the <code>auro-calendar-cell</code> for the specified date. The date format in the slot name should match <code>MM_DD_YYYY</code> (e.g. <code>slot="date_01_15_2026"</code>). Colored using the success state token when the <code>highlight</code> attribute is applied.</p>
-<auro-header level="3" id="slot-popover">popover_MM_DD_YYYY</auro-header>
-<p>Defines the content to display in the <code>auro-calendar-cell</code> popover for the specified date. The date format in the slot name should match <code>MM_DD_YYYY</code> (e.g. <code>slot="popover_01_15_2026"</code>).</p>
+<auro-header level="3" id="slot-date">date_YYYY_MM_DD</auro-header>
+<p>Defines the content to display in the <code>auro-calendar-cell</code> for the specified date. The date format in the slot name should match <code_YYYY>MM_DD</code> (e.g. <code>slot="date_2026_01_15"</code>). Colored using the success state token when the <code>highlight</code> attribute is applied.</p>
+<auro-header level="3" id="slot-popover">popover_YYYY_MM_DD</auro-header>
+<p>Defines the content to display in the <code>auro-calendar-cell</code> popover for the specified date. The date format in the slot name should match <code>YYYY_MM_DD</code> (e.g. <code>slot="popover_2026_01_15"</code>).</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>

package/components/datepicker/demo/index.md

@@ -178,7 +178,7 @@
 <p>The datepicker does not force the user to select a date. If no selection is made and the field is not <code>required</code>, the user can move past the datepicker without entering a value.</p>
 <p>If the field is <code>required</code>, moving focus away without selecting a date triggers validation and renders the <code>valueMissing</code> error state.</p>
 <auro-header level="3" id="popoverSlot">Popover slot</auro-header>
-<p>Use the <code>popover_MM_DD_YYYY</code> slot to display additional information when the user hovers over a calendar cell. This is useful for showing pricing, availability, or other contextual details for specific dates.</p>
+<p>Use the <code>popover_YYYY_MM_DD</code> slot to display additional information when the user hovers over a calendar cell. This is useful for showing pricing, availability, or other contextual details for specific dates.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-slot.html) -->
 <!-- The below content is automatically added from ./../apiExamples/popover-slot.html -->
@@ -186,20 +186,20 @@
 <span slot="bib.fullscreen.headline">Popover Slot Example</span>
 <span slot="fromLabel">Choose a date</span>
 <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-<span slot="popover_12_03_2023">Tickets for this day are sold out</span>
-<span slot="date_12_03_2023">$560</span>
-<span slot="popover_12_04_2023">34 seats available</span>
-<span slot="date_12_04_2023">$245</span>
-<span slot="popover_12_05_2023">18 seats available</span>
-<span slot="date_12_05_2023">$312</span>
-<span slot="popover_12_06_2023">Tickets for this day are sold out</span>
-<span slot="date_12_06_2023">$489</span>
-<span slot="popover_12_07_2023">52 seats available</span>
-<span slot="date_12_07_2023">$198</span>
-<span slot="popover_12_08_2023">7 seats available</span>
-<span slot="date_12_08_2023">$375</span>
-<span slot="popover_12_09_2023">41 seats available</span>
-<span slot="date_12_09_2023">$220</span>
+<span slot="popover_2023_12_03">Tickets for this day are sold out</span>
+<span slot="date_2023_12_03">$560</span>
+<span slot="popover_2023_12_04">34 seats available</span>
+<span slot="date_2023_12_04">$245</span>
+<span slot="popover_2023_12_05">18 seats available</span>
+<span slot="date_2023_12_05">$312</span>
+<span slot="popover_2023_12_06">Tickets for this day are sold out</span>
+<span slot="date_2023_12_06">$489</span>
+<span slot="popover_2023_12_07">52 seats available</span>
+<span slot="date_2023_12_07">$198</span>
+<span slot="popover_2023_12_08">7 seats available</span>
+<span slot="date_2023_12_08">$375</span>
+<span slot="popover_2023_12_09">41 seats available</span>
+<span slot="date_2023_12_09">$220</span>
 </auro-datepicker>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -211,20 +211,20 @@
   &lt;span slot="bib.fullscreen.headline"&gt;Popover Slot Example&lt;/span&gt;
   &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
   &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
-  &lt;span slot="popover_12_03_2023"&gt;Tickets for this day are sold out&lt;/span&gt;
-  &lt;span slot="date_12_03_2023"&gt;$560&lt;/span&gt;
-  &lt;span slot="popover_12_04_2023"&gt;34 seats available&lt;/span&gt;
-  &lt;span slot="date_12_04_2023"&gt;$245&lt;/span&gt;
-  &lt;span slot="popover_12_05_2023"&gt;18 seats available&lt;/span&gt;
-  &lt;span slot="date_12_05_2023"&gt;$312&lt;/span&gt;
-  &lt;span slot="popover_12_06_2023"&gt;Tickets for this day are sold out&lt;/span&gt;
-  &lt;span slot="date_12_06_2023"&gt;$489&lt;/span&gt;
-  &lt;span slot="popover_12_07_2023"&gt;52 seats available&lt;/span&gt;
-  &lt;span slot="date_12_07_2023"&gt;$198&lt;/span&gt;
-  &lt;span slot="popover_12_08_2023"&gt;7 seats available&lt;/span&gt;
-  &lt;span slot="date_12_08_2023"&gt;$375&lt;/span&gt;
-  &lt;span slot="popover_12_09_2023"&gt;41 seats available&lt;/span&gt;
-  &lt;span slot="date_12_09_2023"&gt;$220&lt;/span&gt;
+  &lt;span slot="popover_2023_12_03"&gt;Tickets for this day are sold out&lt;/span&gt;
+  &lt;span slot="date_2023_12_03"&gt;$560&lt;/span&gt;
+  &lt;span slot="popover_2023_12_04"&gt;34 seats available&lt;/span&gt;
+  &lt;span slot="date_2023_12_04"&gt;$245&lt;/span&gt;
+  &lt;span slot="popover_2023_12_05"&gt;18 seats available&lt;/span&gt;
+  &lt;span slot="date_2023_12_05"&gt;$312&lt;/span&gt;
+  &lt;span slot="popover_2023_12_06"&gt;Tickets for this day are sold out&lt;/span&gt;
+  &lt;span slot="date_2023_12_06"&gt;$489&lt;/span&gt;
+  &lt;span slot="popover_2023_12_07"&gt;52 seats available&lt;/span&gt;
+  &lt;span slot="date_2023_12_07"&gt;$198&lt;/span&gt;
+  &lt;span slot="popover_2023_12_08"&gt;7 seats available&lt;/span&gt;
+  &lt;span slot="date_2023_12_08"&gt;$375&lt;/span&gt;
+  &lt;span slot="popover_2023_12_09"&gt;41 seats available&lt;/span&gt;
+  &lt;span slot="date_2023_12_09"&gt;$220&lt;/span&gt;
 &lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -256,6 +256,7 @@
 </auro-accordion>
 <auro-header level="3" id="referenceDates">Reference dates</auro-header>
 <p>Use the <code>referenceDates</code> attribute to highlight specific dates on the calendar. Reference dates are displayed with a distinct visual treatment to draw attention to dates of interest, such as the cheapest travel dates or dates with special availability.</p>
+<p class="note"><strong>NOTE:</strong> it is recommended to provide popover slot content for reference dates to give context for why the date is marked <code>reference</code>.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reference-dates.html) -->
 <!-- The below content is automatically added from ./../apiExamples/reference-dates.html -->
@@ -264,6 +265,10 @@
 <span slot="bib.fullscreen.headline">Datepicker Headline</span>
 <span slot="fromLabel">Choose a date</span>
 <span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="popover_2025_10_05">Explanation for why this is a reference date.</span>
+<span slot="popover_2025_10_15">Explanation for why this is a reference date.</span>
+<span slot="popover_2025_10_20">Explanation for why this is a reference date.</span>
+<span slot="popover_2025_10_22">Explanation for why this is a reference date.</span>
 </auro-datepicker>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -276,6 +281,10 @@
   &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
   &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
   &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="popover_2025_10_05"&gt;Explanation for why this is a reference date.&lt;/span&gt;
+  &lt;span slot="popover_2025_10_15"&gt;Explanation for why this is a reference date.&lt;/span&gt;
+  &lt;span slot="popover_2025_10_20"&gt;Explanation for why this is a reference date.&lt;/span&gt;
+  &lt;span slot="popover_2025_10_22"&gt;Explanation for why this is a reference date.&lt;/span&gt;
 &lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>