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

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

@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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

@@ -853,7 +853,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -876,7 +876,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -4856,7 +4856,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605271944';
+var formkitVersion$2 = '202606031858';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -18114,7 +18114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19231,7 +19231,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605271944';
+var formkitVersion = '202606031858';
 
 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

@@ -853,7 +853,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -876,7 +876,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -4856,7 +4856,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605271944';
+var formkitVersion$2 = '202606031858';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -18114,7 +18114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19231,7 +19231,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605271944';
+var formkitVersion = '202606031858';
 
 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

@@ -868,7 +868,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -891,7 +891,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -4871,7 +4871,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605271944';
+var formkitVersion$2 = '202606031858';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -18129,7 +18129,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19246,7 +19246,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605271944';
+var formkitVersion = '202606031858';
 
 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/keyboard-behavior.md

@@ -30,7 +30,7 @@
 </thead>
 <tbody>
 <tr>
-<td rowspan="6">ArrowDown</td>
+<td rowspan="8">ArrowDown</td>
 <td rowspan="2">-</td>
 <td>Collapsed, list options have been populated</td>
 <td>
@@ -51,12 +51,17 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
 </td>
-<td>Opens the bib.</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -71,7 +76,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
@@ -91,7 +96,32 @@
 </td>
 </tr>
 <tr>
-<td rowspan="6">ArrowUp</td>
+<td rowspan="2">Control</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+              Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+              Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="8">ArrowUp</td>
 <td rowspan="2">-</td>
 <td>Collapsed, list options have been populated</td>
 <td>
@@ -112,12 +142,17 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
 </td>
-<td>Opens the bib.</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -132,7 +167,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Input element, <strong>NOT</strong> the input clear button
@@ -152,6 +187,31 @@
 </td>
 </tr>
 <tr>
+<td rowspan="2">Control</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+              Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
 <td>End</td>
 <td>-</td>
 <td>Expanded</td>

package/components/combobox/dist/index.js

@@ -810,7 +810,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -833,7 +833,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -4789,7 +4789,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605271944';
+var formkitVersion$2 = '202606031858';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -18040,7 +18040,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19157,7 +19157,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605271944';
+var formkitVersion = '202606031858';
 
 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

@@ -810,7 +810,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -833,7 +833,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -4789,7 +4789,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605271944';
+var formkitVersion$2 = '202606031858';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -18040,7 +18040,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19157,7 +19157,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605271944';
+var formkitVersion = '202606031858';
 
 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 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 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 = '202605271944';
+var formkitVersion$1 = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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 = '202605271944';
+var formkitVersion = '202606031858';
 
 // 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

@@ -22,12 +22,13 @@ The `auro-datepicker` component provides users with a way to select a date or da
 | `disabled`                        | `disabled`                        |           | `boolean`                                        | false                                            | If set, disables the datepicker.                 |
 | `dvInputOnly`                     | `dvInputOnly`                     |           | `boolean`                                        | false                                            | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
 | `error`                           | `error`                           |           | `string`                                         |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| `format`                          | `format`                          |           | `string`                                         | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |
+| `format`                          | `format`                          |           | `string`                                         |                                                  | Specifies the date format. The default is `mm/dd/yyyy`. |
 | `fullscreenBreakpoint`            | `fullscreenBreakpoint`            |           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"                                           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
 | `hasError`                        |                                   | readonly  | `boolean`                                        |                                                  |                                                  |
 | `inputmode`                       | `inputmode`                       |           | `string`                                         |                                                  | Exposes inputmode attribute for input.           |
 | `largeFullscreenHeadline`         | `largeFullscreenHeadline`         |           | `boolean`                                        | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | `layout`                          | `layout`                          |           | `'classic' \| 'snowflake'`                       | "'classic'"                                      | Sets the layout of the datepicker.               |
+| `locale`                          | `locale`                          |           | `string`                                         |                                                  | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
 | `maxDate`                         | `maxDate`                         |           | `string`                                         |                                                  | Maximum date. All dates after will be disabled.  |
 | `maxDateObject`                   |                                   | readonly  | `Date \| undefined`                              |                                                  |                                                  |
 | `minDate`                         | `minDate`                         |           | `string`                                         |                                                  | Minimum date. All dates before will be disabled. |

package/components/datepicker/demo/customize.md

@@ -19,7 +19,7 @@
 <auro-anchorlink fluid href="#customValidation" class="level2 body-xs">Custom Validation</auro-anchorlink>
 <auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validation</auro-anchorlink>
 <auro-anchorlink fluid href="#minMaxDate" class="level2 body-xs">Min/Max Date</auro-anchorlink>
-<auro-anchorlink fluid href="#localization" class="level2 body-xs">Localization</auro-anchorlink>
+<auro-anchorlink fluid href="#regionalDate" class="level2 body-xs">Regional Date</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -694,27 +694,64 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="localization">Localization</auro-header>
-<p>Use the <code>centralDate</code>, locale, and related attributes to configure the datepicker for different regions and languages.</p>
+<auro-header level="4" id="regionalDate">Regional Date</auro-header>
+<p>When the <code>locale</code> attribute is set, the component automatically derives the correct date format for that region — no need to set <code>format</code> manually. For example, <code>locale="en-US"</code> produces <code>mm/dd/yyyy</code>, <code>locale="de-DE"</code> produces <code>dd.mm.yyyy</code>, and <code>locale="ja-JP"</code> produces <code>yyyy/mm/dd</code>.</p>
+<p>If <code>format</code> is explicitly set alongside <code>locale</code>, <code>format</code> always wins. Use this when a specific format is required regardless of region.</p>
+<p>If no <code>locale</code> attribute is set on the element, the component walks up the DOM looking for the nearest ancestor with a <code>data-locale</code> attribute and uses that value. If none is found, it defaults to <code>en-US</code>.</p>
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization.html -->
-<auro-datepicker format="yyyy/mm/dd" id="localizationExample">
-<span slot="bib.fullscreen.headline">Localization Headline</span>
-<span slot="fromLabel">Choose a date</span>
-<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/locale.html) -->
+<!-- The below content is automatically added from ./../apiExamples/locale.html -->
+<div data-locale="de-DE">
+<auro-datepicker locale="en-US">
+<span slot="fromLabel">en-US Date</span>
+<span slot="helpText">Help Text</span>
+</auro-datepicker>
+<auro-datepicker locale="de-DE">
+<span slot="fromLabel">de-DE Date</span>
+<span slot="helpText">Help Text</span>
+</auro-datepicker>
+<auro-datepicker locale="zh-CN">
+<span slot="fromLabel">zh-CN Date</span>
+<span slot="helpText">Help Text</span>
+</auro-datepicker>
+<auro-datepicker>
+<span slot="fromLabel">Nearest `data-locale` attribute format (`de-DE` in this case)</span>
+<span slot="helpText">Help Text</span>
+</auro-datepicker>
+<auro-datepicker locale="ja-JP" format="mm/dd/yyyy">
+<span slot="fromLabel">ja-JP locale with explicit mm/dd/yyyy format</span>
+<span slot="helpText">Help Text</span>
 </auro-datepicker>
+</div>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/locale.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/locale.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-datepicker format="yyyy/mm/dd" id="localizationExample"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Localization 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;/auro-datepicker&gt;</code></pre>
+<pre class="language-html"><code class="language-html">&lt;div data-locale="de-DE"&gt;
+  &lt;auro-datepicker locale="en-US"&gt;
+    &lt;span slot="fromLabel"&gt;en-US Date&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+  &lt;auro-datepicker locale="de-DE"&gt;
+    &lt;span slot="fromLabel"&gt;de-DE Date&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+  &lt;auro-datepicker locale="zh-CN"&gt;
+    &lt;span slot="fromLabel"&gt;zh-CN Date&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+  &lt;auro-datepicker&gt;
+    &lt;span slot="fromLabel"&gt;Nearest `data-locale` attribute format (`de-DE` in this case)&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+  &lt;auro-datepicker locale="ja-JP" format="mm/dd/yyyy"&gt;
+    &lt;span slot="fromLabel"&gt;ja-JP locale with explicit mm/dd/yyyy format&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 </section>

package/components/datepicker/demo/index.md

@@ -10,6 +10,7 @@
 <auro-anchorlink fluid href="#selectRange" class="level2 body-xs">Select a Range</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
 <auro-anchorlink fluid href="#skipSelection" class="level2 body-xs">Skip Selection</auro-anchorlink>
+<auro-anchorlink fluid href="#regionalDateFormat" class="level2 body-xs">Regional Date</auro-anchorlink>
 <auro-anchorlink fluid href="#viewportSize" class="level2 body-xs">Viewport Size</auro-anchorlink>
 </auro-nav>
 </nav>
@@ -167,6 +168,28 @@
 <auro-header level="3" id="skipSelection">Skip selection</auro-header>
 <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="regionalDateFormat">Regional date format support</auro-header>
+<p>People around the world write dates differently. A traveler in the United States expects to see <strong>12/25/2025</strong>, while someone in Germany expects <strong>25.12.2025</strong>, and someone in Japan expects <strong>2025/12/25</strong>. Showing the wrong format causes confusion and mistakes.</p>
+<p>When the datepicker knows the user's region via the <code>locale</code> attribute, it automatically displays dates in the format that looks natural to them — no extra setup required.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/locale-single.html) -->
+<!-- The below content is automatically added from ./../apiExamples/locale-single.html -->
+<auro-datepicker locale="zh-CN">
+<span slot="fromLabel">zh-CN Date</span>
+<span slot="helpText">Help Text</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/locale-single.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/locale-single.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker locale="zh-CN"&gt;
+  &lt;span slot="fromLabel"&gt;zh-CN Date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 <auro-header level="3" id="viewportSize">Viewport size</auro-header>
 <p>The datepicker automatically adapts its presentation based on viewport size. On larger screens, the calendar opens in a floating popover anchored to the trigger. On smaller screens, the calendar opens in a fullscreen dialog.</p>
 <p>The breakpoint at which the fullscreen behavior activates is controlled by the <code>fullscreenBreakpoint</code> attribute. The default value is <code>sm</code>. Supported values are <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>disabled</code>.</p>