@aurodesignsystem-dev/auro-formkit 0.0.0-pr1500.0 → 0.0.0-pr1501.0

package/components/datepicker/demo/customize.md

@@ -18,7 +18,6 @@
 <auro-anchorlink fluid href="#forceError" class="level2 body-xs">Force Error State</auro-anchorlink>
 <auro-anchorlink fluid href="#inputMode" class="level2 body-xs">Input Mode</auro-anchorlink>
 <auro-anchorlink fluid href="#minMaxDate" class="level2 body-xs">Min/Max Date</auro-anchorlink>
-<auro-anchorlink fluid href="#monthNames" class="level2 body-xs">Month Names</auro-anchorlink>
 <auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validation</auro-anchorlink>
 <auro-anchorlink fluid href="#requireSelection" class="level2 body-xs">Require Selection</auro-anchorlink>
 </auro-nav>
@@ -414,8 +413,7 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/locale.html) -->
-<!-- The below code snippet is automatically added from ./../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;
   &lt;auro-header level="4" &gt;de-DE Example&lt;/auro-header&gt;
   &lt;auro-datepicker
@@ -481,7 +479,7 @@
     &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>
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -822,444 +820,6 @@
 &lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<auro-header level="3" id="localization">Localization</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/localization.md) -->
-<!-- The below content is automatically added from ./../docs/partials/customize/localization.md -->
-<p>The component supports complete localization, including visible strings, screen reader announcements and locale based date formatting.</p>
-<auro-header level="4" id="localizationTrigger">Trigger</auro-header>
-<auro-header level="4" id="localizationTriggerVisibleStrings">Trigger Visible strings</auro-header>
-<p>The visible strings rendered in the input, trigger, and fullscreen bib are not derived from <code>locale</code> — they are projected through named slots so each language can supply its own translation. Pass a <code>&lt;span&gt;</code> with the matching <code>slot</code> attribute for every string you need to localize.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-visible-strings.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization-visible-strings.html -->
-
-<pre class="language-diff"><code class="language-diff">  &lt;auro-datepicker&gt;
-+   &lt;span slot="fromLabel"&gt;Abreisedatum&lt;/span&gt;
-+   &lt;span slot="helpText"&gt;Wählen Sie ein Datum&lt;/span&gt;
-+   &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
-+   &lt;span slot="bib.fullscreen.headline"&gt;Datum auswählen&lt;/span&gt;
-+   &lt;span slot="bib.fullscreen.fromLabel"&gt;Abreisedatum&lt;/span&gt;
-  &lt;/auro-datepicker&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="4" id="localizationCalendar">Calendar</auro-header>
-<auro-header level="4" id="localizationCalendarVisibleStrings">Visible strings</auro-header>
-<p>By default, the calendar weekday names rendered above the day grid and the month names rendered in the calendar header are derived from the active <code>locale</code> using the browser's <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank">Intl</auro-hyperlink> API, so they update automatically when <code>locale</code> changes. Use the <code>monthNames</code> attribute to override the derived month names — for example, to supply a translation the browser does not produce or to support a locale the browser does not recognize.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-calendar-strings.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization-calendar-strings.html -->
-
-<pre class="language-diff"><code class="language-diff">- &lt;auro-datepicker&gt;
-+ &lt;auro-datepicker monthNames='["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]'&gt;
-    &lt;span slot="fromLabel"&gt;Abreisedatum&lt;/span&gt;
-    &lt;span slot="helpText"&gt;Wählen Sie ein Datum&lt;/span&gt;
-  &lt;/auro-datepicker&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="4" id="localizationCalendarA11yStrings">Screen reader strings</auro-header>
-<p>Assistive-technology announcements — range descriptors (<code>rangeLabelStart</code>, <code>rangeLabelEnd</code>, <code>rangeLabelBeforeRange</code>, <code>rangeLabelInRange</code>, <code>rangeLabelAfterRange</code>), month navigation labels (<code>navLabelPrevMonth</code>, <code>navLabelNextMonth</code>), and the calendar grid label (<code>calendarGridLabel</code>) — are exposed as individual attributes so they can be translated independently of the visible UI. These strings are not derived from <code>locale</code>; supply translated values for every language you support.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-screenreader-strings.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization-screenreader-strings.html -->
-
-<pre class="language-diff"><code class="language-diff">  &lt;auro-datepicker
-    locale="de-DE"
-    range
-+   rangeLabelStart="Startdatum"
-+   rangeLabelEnd="Enddatum"
-+   rangeLabelBeforeRange="vor dem Zeitraum"
-+   rangeLabelInRange="im Zeitraum"
-+   rangeLabelAfterRange="nach dem Zeitraum"
-+   navLabelPrevMonth="Vorheriger Monat"
-+   navLabelNextMonth="Nächster Monat"
-+   calendarGridLabel="Kalendertage des Monats"&gt;
-    &lt;span slot="fromLabel"&gt;Abreise&lt;/span&gt;
-    &lt;span slot="toLabel"&gt;Rückkehr&lt;/span&gt;
-    &lt;span slot="helpText"&gt;Wählen Sie einen Zeitraum&lt;/span&gt;
-  &lt;/auro-datepicker&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="4" id="localizationDateFormatting">Date formatting</auro-header>
-<p>The <code>locale</code> attribute drives the date format used by the input and the calendar. Setting <code>locale</code> automatically selects the regional format (for example <code>en-US</code> → <code>mm/dd/yyyy</code>, <code>de-DE</code> → <code>dd.mm.yyyy</code>, <code>ja-JP</code> → <code>yyyy/mm/dd</code>), derived from the browser's <code>Intl</code> API, so <code>format</code> does not need to be set manually.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-locale.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization-locale.html -->
-
-<pre class="language-diff"><code class="language-diff">- &lt;auro-datepicker&gt;
-+ &lt;auro-datepicker locale="de-DE"&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;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<p>If no <code>locale</code> attribute is present, the component walks up the DOM looking for the nearest ancestor with a <code>data-locale</code> attribute; if none is found, it defaults to <code>en-US</code>.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-locale-inherited.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization-locale-inherited.html -->
-
-<pre class="language-diff"><code class="language-diff">+ &lt;div data-locale="ja-JP"&gt;
-    &lt;auro-datepicker&gt;
-      &lt;span slot="fromLabel"&gt;継承された 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 -->
-<p>If <code>format</code> is set alongside <code>locale</code>, <code>format</code> always wins.</p>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-locale-formatted.html) -->
-<!-- The below content is automatically added from ./../apiExamples/localization-locale-formatted.html -->
-
-<pre class="language-diff"><code class="language-diff">  &lt;auro-datepicker
-+   locale="de-DE"
-+   format="mm/dd/yyyy"&gt;
-    &lt;span slot="fromLabel"&gt;Deutsches Datum mit mm/dd/yyyy-Format&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;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<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">
-<auro-header level="4" >de-DE Example</auro-header>
-<auro-datepicker
-    locale="de-DE"
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats">
-<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"
-    range
-    rangeLabelStart="开始日期"
-    rangeLabelEnd="结束日期"
-    rangeLabelBeforeRange="在此期间之前"
-    rangeLabelInRange="在此期间内"
-    rangeLabelAfterRange="在此期间之后"
-    navLabelPrevMonth="上个月"
-    navLabelNextMonth="下个月"
-    calendarGridLabel="本月的日历天数">
-<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
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats">
-<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"
-    range
-    rangeLabelStart="開始日"
-    rangeLabelEnd="終了日"
-    rangeLabelBeforeRange="この期間の前"
-    rangeLabelInRange="この期間内"
-    rangeLabelAfterRange="この期間の後"
-    navLabelPrevMonth="前の月"
-    navLabelNextMonth="次の月"
-    calendarGridLabel="カレンダーの日付">
-<span slot="fromLabel">明示的な mm/dd/yyyy 形式の ja-JP ロケール</span>
-<span slot="helpText">ヘルプテキスト</span>
-<span slot="optionalLabel">（任意）</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/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;
-  &lt;auro-header level="4" &gt;de-DE Example&lt;/auro-header&gt;
-  &lt;auro-datepicker
-    locale="de-DE"
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats"&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"
-    range
-    rangeLabelStart="开始日期"
-    rangeLabelEnd="结束日期"
-    rangeLabelBeforeRange="在此期间之前"
-    rangeLabelInRange="在此期间内"
-    rangeLabelAfterRange="在此期间之后"
-    navLabelPrevMonth="上个月"
-    navLabelNextMonth="下个月"
-    calendarGridLabel="本月的日历天数"&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
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats"&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"
-    range
-    rangeLabelStart="開始日"
-    rangeLabelEnd="終了日"
-    rangeLabelBeforeRange="この期間の前"
-    rangeLabelInRange="この期間内"
-    rangeLabelAfterRange="この期間の後"
-    navLabelPrevMonth="前の月"
-    navLabelNextMonth="次の月"
-    calendarGridLabel="カレンダーの日付"&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 -->
-</auro-accordion>
-<!-- AURO-GENERATED-CONTENT:END -->
-<pre><code>// Override month names (all 12 required, starting with January)
-datepicker.monthNames = [
-  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-];</code></pre>
-<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">
-<auro-header level="4" >de-DE Example</auro-header>
-<auro-datepicker
-    locale="de-DE"
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats">
-<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"
-    range
-    rangeLabelStart="开始日期"
-    rangeLabelEnd="结束日期"
-    rangeLabelBeforeRange="在此期间之前"
-    rangeLabelInRange="在此期间内"
-    rangeLabelAfterRange="在此期间之后"
-    navLabelPrevMonth="上个月"
-    navLabelNextMonth="下个月"
-    calendarGridLabel="本月的日历天数">
-<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
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats">
-<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"
-    range
-    rangeLabelStart="開始日"
-    rangeLabelEnd="終了日"
-    rangeLabelBeforeRange="この期間の前"
-    rangeLabelInRange="この期間内"
-    rangeLabelAfterRange="この期間の後"
-    navLabelPrevMonth="前の月"
-    navLabelNextMonth="次の月"
-    calendarGridLabel="カレンダーの日付">
-<span slot="fromLabel">明示的な mm/dd/yyyy 形式の ja-JP ロケール</span>
-<span slot="helpText">ヘルプテキスト</span>
-<span slot="optionalLabel">（任意）</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/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;
-  &lt;auro-header level="4" &gt;de-DE Example&lt;/auro-header&gt;
-  &lt;auro-datepicker
-    locale="de-DE"
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats"&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"
-    range
-    rangeLabelStart="开始日期"
-    rangeLabelEnd="结束日期"
-    rangeLabelBeforeRange="在此期间之前"
-    rangeLabelInRange="在此期间内"
-    rangeLabelAfterRange="在此期间之后"
-    navLabelPrevMonth="上个月"
-    navLabelNextMonth="下个月"
-    calendarGridLabel="本月的日历天数"&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
-    range
-    rangeLabelStart="Startdatum"
-    rangeLabelEnd="Enddatum"
-    rangeLabelBeforeRange="vor dem Zeitraum"
-    rangeLabelInRange="im Zeitraum"
-    rangeLabelAfterRange="nach dem Zeitraum"
-    navLabelPrevMonth="Vorheriger Monat"
-    navLabelNextMonth="Nächster Monat"
-    calendarGridLabel="Kalendertage des Monats"&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"
-    range
-    rangeLabelStart="開始日"
-    rangeLabelEnd="終了日"
-    rangeLabelBeforeRange="この期間の前"
-    rangeLabelInRange="この期間内"
-    rangeLabelAfterRange="この期間の後"
-    navLabelPrevMonth="前の月"
-    navLabelNextMonth="次の月"
-    calendarGridLabel="カレンダーの日付"&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 -->
-</auro-accordion>
-<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>
-<auro-header level="4" id="rangeLabels">Screen Reader Labels</auro-header>
-<p>The following attributes customize the labels announced by screen readers when navigating the calendar. Range labels apply when the <code>range</code> attribute is set; navigation labels apply to all configurations.</p>
-<auro-table>
-<table>
-<thead>
-<tr>
-<th>Attribute</th>
-<th>Default</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td><code>rangeLabelStart</code></td>
-<td>"range start"</td>
-<td>Announced on the departure/start date cell.</td>
-</tr>
-<tr>
-<td><code>rangeLabelEnd</code></td>
-<td>"range end"</td>
-<td>Announced on the return/end date cell.</td>
-</tr>
-<tr>
-<td><code>rangeLabelBeforeRange</code></td>
-<td>"before range"</td>
-<td>Announced on cells before the start date.</td>
-</tr>
-<tr>
-<td><code>rangeLabelInRange</code></td>
-<td>"in range"</td>
-<td>Announced on cells between the start and end dates.</td>
-</tr>
-<tr>
-<td><code>rangeLabelAfterRange</code></td>
-<td>"after range"</td>
-<td>Announced on cells after the end date (or after start when no end is selected).</td>
-</tr>
-<tr>
-<td><code>navLabelPrevMonth</code></td>
-<td>"Previous month"</td>
-<td>Accessible label for the previous month navigation button.</td>
-</tr>
-<tr>
-<td><code>navLabelNextMonth</code></td>
-<td>"Next month"</td>
-<td>Accessible label for the next month navigation button.</td>
-</tr>
-<tr>
-<td><code>calendarGridLabel</code></td>
-<td>"Calendar days of the month"</td>
-<td>Accessible label for the calendar grid containing the days of the month.</td>
-</tr>
-</tbody>
-</table>
-</auro-table>
 <auro-header level="3" id="minMaxDate">Min/Max Date</auro-header>
 <p>Use the <code>minDate</code> and <code>maxDate</code> attributes to constrain the selectable date range.</p>
 <div class="exampleWrapper">