@aurodesignsystem-dev/auro-formkit 0.0.0-pr1483.11 → 0.0.0-pr1483.12

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

@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion$2 = '202606051947';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -16312,27 +16312,17 @@ class AuroInputUtilities {
    * Converts a model value to a display value for the input element.
    * For full date formats, converts an ISO model value to the configured display format.
    * @private
-   * @param {string} value - The model value (ISO string for date types).
    * @param {Date|undefined} valueObject - Date object representation of value.
    * @param {string} format - The date format string.
-   * @returns {string}
+   * @returns {string | undefined}
    */
-  toFormattedValue(value, valueObject, format) {
-    if (!this.isFullDateFormat('date', format) || !value) {
-      return value;
-    }
-
-    if (!dateFormatter.isValidDate(value)) {
-      // For ISO-pattern strings that fail range validation (e.g. '2024-99-99'),
-      // return '' so inputElement stays empty and format-based validation is not triggered.
-      return (/^\d{4}-\d{2}-\d{2}$/u).test(value) ? '' : value;
-    }
-
+  toFormattedValue(valueObject, format) {
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
-      return value;
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
+      return undefined;
     }
 
     return maskOptions.format(valueObject);
@@ -17250,7 +17240,17 @@ class BaseInput extends AuroElement$1 {
         this.hasValue = false;
       }
 
-      const formattedValue = this.type === 'date' ? this.util.toFormattedValue(this.value, this.valueObject, this.format) : this.value;
+      let formattedValue = this.value;
+      if (this.type === 'date') {
+        const formattedDate = this.util.toFormattedValue(this.valueObject, this.format);
+        if (!formattedDate) {
+          // if user entered unrecognized date format that cannot be parsed into a Date object,
+          // keep the raw value in the input so they can edit it instead of overwriting with an empty string
+          formattedValue = this.value;
+        } else {
+          formattedValue = formattedDate;
+        }
+      }
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
@@ -18114,7 +18114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion$2 = '202606051947';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -16312,27 +16312,17 @@ class AuroInputUtilities {
    * Converts a model value to a display value for the input element.
    * For full date formats, converts an ISO model value to the configured display format.
    * @private
-   * @param {string} value - The model value (ISO string for date types).
    * @param {Date|undefined} valueObject - Date object representation of value.
    * @param {string} format - The date format string.
-   * @returns {string}
+   * @returns {string | undefined}
    */
-  toFormattedValue(value, valueObject, format) {
-    if (!this.isFullDateFormat('date', format) || !value) {
-      return value;
-    }
-
-    if (!dateFormatter.isValidDate(value)) {
-      // For ISO-pattern strings that fail range validation (e.g. '2024-99-99'),
-      // return '' so inputElement stays empty and format-based validation is not triggered.
-      return (/^\d{4}-\d{2}-\d{2}$/u).test(value) ? '' : value;
-    }
-
+  toFormattedValue(valueObject, format) {
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
-      return value;
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
+      return undefined;
     }
 
     return maskOptions.format(valueObject);
@@ -17250,7 +17240,17 @@ class BaseInput extends AuroElement$1 {
         this.hasValue = false;
       }
 
-      const formattedValue = this.type === 'date' ? this.util.toFormattedValue(this.value, this.valueObject, this.format) : this.value;
+      let formattedValue = this.value;
+      if (this.type === 'date') {
+        const formattedDate = this.util.toFormattedValue(this.valueObject, this.format);
+        if (!formattedDate) {
+          // if user entered unrecognized date format that cannot be parsed into a Date object,
+          // keep the raw value in the input so they can edit it instead of overwriting with an empty string
+          formattedValue = this.value;
+        } else {
+          formattedValue = formattedDate;
+        }
+      }
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
@@ -18114,7 +18114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion$2 = '202606051947';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -16327,27 +16327,17 @@ class AuroInputUtilities {
    * Converts a model value to a display value for the input element.
    * For full date formats, converts an ISO model value to the configured display format.
    * @private
-   * @param {string} value - The model value (ISO string for date types).
    * @param {Date|undefined} valueObject - Date object representation of value.
    * @param {string} format - The date format string.
-   * @returns {string}
+   * @returns {string | undefined}
    */
-  toFormattedValue(value, valueObject, format) {
-    if (!this.isFullDateFormat('date', format) || !value) {
-      return value;
-    }
-
-    if (!dateFormatter.isValidDate(value)) {
-      // For ISO-pattern strings that fail range validation (e.g. '2024-99-99'),
-      // return '' so inputElement stays empty and format-based validation is not triggered.
-      return (/^\d{4}-\d{2}-\d{2}$/u).test(value) ? '' : value;
-    }
-
+  toFormattedValue(valueObject, format) {
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
-      return value;
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
+      return undefined;
     }
 
     return maskOptions.format(valueObject);
@@ -17265,7 +17255,17 @@ class BaseInput extends AuroElement$1 {
         this.hasValue = false;
       }
 
-      const formattedValue = this.type === 'date' ? this.util.toFormattedValue(this.value, this.valueObject, this.format) : this.value;
+      let formattedValue = this.value;
+      if (this.type === 'date') {
+        const formattedDate = this.util.toFormattedValue(this.valueObject, this.format);
+        if (!formattedDate) {
+          // if user entered unrecognized date format that cannot be parsed into a Date object,
+          // keep the raw value in the input so they can edit it instead of overwriting with an empty string
+          formattedValue = this.value;
+        } else {
+          formattedValue = formattedDate;
+        }
+      }
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
@@ -18129,7 +18129,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion$2 = '202606051947';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -16238,27 +16238,17 @@ class AuroInputUtilities {
    * Converts a model value to a display value for the input element.
    * For full date formats, converts an ISO model value to the configured display format.
    * @private
-   * @param {string} value - The model value (ISO string for date types).
    * @param {Date|undefined} valueObject - Date object representation of value.
    * @param {string} format - The date format string.
-   * @returns {string}
+   * @returns {string | undefined}
    */
-  toFormattedValue(value, valueObject, format) {
-    if (!this.isFullDateFormat('date', format) || !value) {
-      return value;
-    }
-
-    if (!dateFormatter.isValidDate(value)) {
-      // For ISO-pattern strings that fail range validation (e.g. '2024-99-99'),
-      // return '' so inputElement stays empty and format-based validation is not triggered.
-      return (/^\d{4}-\d{2}-\d{2}$/u).test(value) ? '' : value;
-    }
-
+  toFormattedValue(valueObject, format) {
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
-      return value;
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
+      return undefined;
     }
 
     return maskOptions.format(valueObject);
@@ -17176,7 +17166,17 @@ class BaseInput extends AuroElement$1 {
         this.hasValue = false;
       }
 
-      const formattedValue = this.type === 'date' ? this.util.toFormattedValue(this.value, this.valueObject, this.format) : this.value;
+      let formattedValue = this.value;
+      if (this.type === 'date') {
+        const formattedDate = this.util.toFormattedValue(this.valueObject, this.format);
+        if (!formattedDate) {
+          // if user entered unrecognized date format that cannot be parsed into a Date object,
+          // keep the raw value in the input so they can edit it instead of overwriting with an empty string
+          formattedValue = this.value;
+        } else {
+          formattedValue = formattedDate;
+        }
+      }
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
@@ -18040,7 +18040,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion$2 = '202606051947';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -16238,27 +16238,17 @@ class AuroInputUtilities {
    * Converts a model value to a display value for the input element.
    * For full date formats, converts an ISO model value to the configured display format.
    * @private
-   * @param {string} value - The model value (ISO string for date types).
    * @param {Date|undefined} valueObject - Date object representation of value.
    * @param {string} format - The date format string.
-   * @returns {string}
+   * @returns {string | undefined}
    */
-  toFormattedValue(value, valueObject, format) {
-    if (!this.isFullDateFormat('date', format) || !value) {
-      return value;
-    }
-
-    if (!dateFormatter.isValidDate(value)) {
-      // For ISO-pattern strings that fail range validation (e.g. '2024-99-99'),
-      // return '' so inputElement stays empty and format-based validation is not triggered.
-      return (/^\d{4}-\d{2}-\d{2}$/u).test(value) ? '' : value;
-    }
-
+  toFormattedValue(valueObject, format) {
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
-      return value;
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
+      return undefined;
     }
 
     return maskOptions.format(valueObject);
@@ -17176,7 +17166,17 @@ class BaseInput extends AuroElement$1 {
         this.hasValue = false;
       }
 
-      const formattedValue = this.type === 'date' ? this.util.toFormattedValue(this.value, this.valueObject, this.format) : this.value;
+      let formattedValue = this.value;
+      if (this.type === 'date') {
+        const formattedDate = this.util.toFormattedValue(this.valueObject, this.format);
+        if (!formattedDate) {
+          // if user entered unrecognized date format that cannot be parsed into a Date object,
+          // keep the raw value in the input so they can edit it instead of overwriting with an empty string
+          formattedValue = this.value;
+        } else {
+          formattedValue = formattedDate;
+        }
+      }
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
@@ -18040,7 +18040,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion$1 = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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 = '202606051831';
+var formkitVersion = '202606051947';
 
 // 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/customize.md

@@ -19,8 +19,8 @@
 <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="#regionalDate" class="level2 body-xs">Regional Date</auro-anchorlink>
 <auro-anchorlink fluid href="#monthNames" class="level2 body-xs">Month Names</auro-anchorlink>
+<auro-anchorlink fluid href="#localization" class="level2 body-xs">Localization</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -710,26 +710,35 @@ datepicker.monthNames = [
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/locale.html) -->
 <!-- The below content is automatically added from ./../apiExamples/locale.html -->
-<div data-locale="de-DE">
+<div data-locale="de-DE">
+<auro-header level="4" >en-US Example</auro-header>
 <auro-datepicker locale="en-US">
 <span slot="fromLabel">en-US Date</span>
 <span slot="helpText">Help Text</span>
 </auro-datepicker>
+<auro-header level="4" >de-DE Example</auro-header>
 <auro-datepicker locale="de-DE">
-<span slot="fromLabel">de-DE Date</span>
-<span slot="helpText">Help Text</span>
+<span slot="fromLabel">Deutsches Datum</span>
+<span slot="helpText">Hilfetext</span>
+<span slot="optionalLabel">(freiwillig)</span>
 </auro-datepicker>
+<auro-header level="4" >zh-CN Example</auro-header>
 <auro-datepicker locale="zh-CN">
-<span slot="fromLabel">zh-CN Date</span>
-<span slot="helpText">Help Text</span>
+<span slot="fromLabel">中文日期</span>
+<span slot="helpText">帮助文本</span>
+<span slot="optionalLabel">（可选）</span>
 </auro-datepicker>
+<auro-header level="4">Inherited de-DE date-locale Example</auro-header>
 <auro-datepicker>
-<span slot="fromLabel">Nearest `data-locale` attribute format (`de-DE` in this case)</span>
-<span slot="helpText">Help Text</span>
+<span slot="fromLabel">Nächstes `data-locale`-Attributformat (`de-DE` in diesem Fall)</span>
+<span slot="helpText">Hilfetext</span>
+<span slot="optionalLabel">(freiwillig)</span>
 </auro-datepicker>
+<auro-header level="4" >ja-JP with `mm/dd/yyyy` format Example</auro-header>
 <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>
+<span slot="fromLabel">明示的な mm/dd/yyyy 形式の ja-JP ロケール</span>
+<span slot="helpText">ヘルプテキスト</span>
+<span slot="optionalLabel">（任意）</span>
 </auro-datepicker>
 </div>
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -739,26 +748,35 @@ datepicker.monthNames = [
 <!-- 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;div data-locale="de-DE"&gt;
+<pre class="language-html"><code class="language-html">&lt;div data-locale="de-DE"&gt;
+  &lt;auro-header level="4" &gt;en-US Example&lt;/auro-header&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-header level="4" &gt;de-DE Example&lt;/auro-header&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;span slot="fromLabel"&gt;Deutsches Datum&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
+    &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
   &lt;/auro-datepicker&gt;
+  &lt;auro-header level="4" &gt;zh-CN Example&lt;/auro-header&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;span slot="fromLabel"&gt;中文日期&lt;/span&gt;
+    &lt;span slot="helpText"&gt;帮助文本&lt;/span&gt;
+    &lt;span slot="optionalLabel"&gt;（可选）&lt;/span&gt;
   &lt;/auro-datepicker&gt;
+  &lt;auro-header level="4"&gt;Inherited de-DE date-locale Example&lt;/auro-header&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;span slot="fromLabel"&gt;Nächstes `data-locale`-Attributformat (`de-DE` in diesem Fall)&lt;/span&gt;
+    &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
+    &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
   &lt;/auro-datepicker&gt;
+  &lt;auro-header level="4" &gt;ja-JP with `mm/dd/yyyy` format Example&lt;/auro-header&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;span slot="fromLabel"&gt;明示的な mm/dd/yyyy 形式の ja-JP ロケール&lt;/span&gt;
+    &lt;span slot="helpText"&gt;ヘルプテキスト&lt;/span&gt;
+    &lt;span slot="optionalLabel"&gt;（任意）&lt;/span&gt;
   &lt;/auro-datepicker&gt;
 &lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->