@aurodesignsystem-dev/auro-formkit 0.0.0-pr1505.0 → 0.0.0-pr1506.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/components/checkbox/demo/customize.min.js +1 -1
  2. package/components/checkbox/demo/getting-started.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/customize.min.js +138 -266
  7. package/components/combobox/demo/getting-started.min.js +138 -266
  8. package/components/combobox/demo/index.min.js +138 -266
  9. package/components/combobox/dist/auro-combobox.d.ts +9 -0
  10. package/components/combobox/dist/index.js +138 -266
  11. package/components/combobox/dist/registered.js +138 -266
  12. package/components/counter/demo/customize.min.js +2 -2
  13. package/components/counter/demo/index.min.js +2 -2
  14. package/components/counter/dist/index.js +2 -2
  15. package/components/counter/dist/registered.js +2 -2
  16. package/components/datepicker/demo/api.md +0 -2
  17. package/components/datepicker/demo/customize.md +33 -195
  18. package/components/datepicker/demo/customize.min.js +41 -164
  19. package/components/datepicker/demo/index.min.js +40 -156
  20. package/components/datepicker/dist/index.js +40 -156
  21. package/components/datepicker/dist/registered.js +40 -156
  22. package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -2
  23. package/components/dropdown/demo/customize.min.js +1 -1
  24. package/components/dropdown/demo/getting-started.min.js +1 -1
  25. package/components/dropdown/demo/index.min.js +1 -1
  26. package/components/dropdown/dist/index.js +1 -1
  27. package/components/dropdown/dist/registered.js +1 -1
  28. package/components/form/demo/customize.min.js +351 -599
  29. package/components/form/demo/getting-started.min.js +351 -599
  30. package/components/form/demo/index.min.js +351 -599
  31. package/components/form/demo/registerDemoDeps.min.js +351 -599
  32. package/components/input/demo/customize.md +55 -56
  33. package/components/input/demo/customize.min.js +36 -147
  34. package/components/input/demo/getting-started.min.js +36 -147
  35. package/components/input/demo/index.md +2 -2
  36. package/components/input/demo/index.min.js +36 -147
  37. package/components/input/dist/base-input.d.ts +0 -48
  38. package/components/input/dist/index.js +36 -147
  39. package/components/input/dist/registered.js +36 -147
  40. package/components/radio/demo/customize.min.js +1 -1
  41. package/components/radio/demo/getting-started.min.js +1 -1
  42. package/components/radio/demo/index.min.js +1 -1
  43. package/components/radio/dist/index.js +1 -1
  44. package/components/radio/dist/registered.js +1 -1
  45. package/components/select/demo/api.md +1 -0
  46. package/components/select/demo/customize.md +71 -0
  47. package/components/select/demo/customize.min.js +133 -26
  48. package/components/select/demo/getting-started.min.js +133 -26
  49. package/components/select/demo/index.min.js +133 -26
  50. package/components/select/demo/keyboard-behavior.md +18 -0
  51. package/components/select/dist/auro-select.d.ts +38 -2
  52. package/components/select/dist/index.js +133 -26
  53. package/components/select/dist/registered.js +133 -26
  54. package/components/select/dist/selectUtils.d.ts +12 -0
  55. package/custom-elements.json +114 -274
  56. package/package.json +1 -1
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1099
1099
  }
1100
1100
  };
1101
1101
 
1102
- var formkitVersion$1 = '202606171946';
1102
+ var formkitVersion$1 = '202606192004';
1103
1103
 
1104
1104
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1105
1105
  // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
5445
5445
  }
5446
5446
  }
5447
5447
 
5448
- var formkitVersion = '202606171946';
5448
+ var formkitVersion = '202606192004';
5449
5449
 
5450
5450
  let AuroElement$1 = class AuroElement extends i$2 {
5451
5451
  static get properties() {
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1099
1099
  }
1100
1100
  };
1101
1101
 
1102
- var formkitVersion$1 = '202606171946';
1102
+ var formkitVersion$1 = '202606192004';
1103
1103
 
1104
1104
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1105
1105
  // See LICENSE in the project root for license information.
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
5445
5445
  }
5446
5446
  }
5447
5447
 
5448
- var formkitVersion = '202606171946';
5448
+ var formkitVersion = '202606192004';
5449
5449
 
5450
5450
  let AuroElement$1 = class AuroElement extends i$2 {
5451
5451
  static get properties() {
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
1049
1049
  }
1050
1050
  };
1051
1051
 
1052
- var formkitVersion$1 = '202606171946';
1052
+ var formkitVersion$1 = '202606192004';
1053
1053
 
1054
1054
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1055
1055
  // See LICENSE in the project root for license information.
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
5377
5377
  }
5378
5378
  }
5379
5379
 
5380
- var formkitVersion = '202606171946';
5380
+ var formkitVersion = '202606192004';
5381
5381
 
5382
5382
  let AuroElement$1 = class AuroElement extends LitElement {
5383
5383
  static get properties() {
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
1049
1049
  }
1050
1050
  };
1051
1051
 
1052
- var formkitVersion$1 = '202606171946';
1052
+ var formkitVersion$1 = '202606192004';
1053
1053
 
1054
1054
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1055
1055
  // See LICENSE in the project root for license information.
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
5377
5377
  }
5378
5378
  }
5379
5379
 
5380
- var formkitVersion = '202606171946';
5380
+ var formkitVersion = '202606192004';
5381
5381
 
5382
5382
  let AuroElement$1 = class AuroElement extends LitElement {
5383
5383
  static get properties() {
@@ -109,8 +109,6 @@ The `auro-datepicker` component provides users with a way to select a date or da
109
109
  | `fromLabel` | Defines the label content for the first input. |
110
110
  | `helpText` | Defines the content of the helpText. |
111
111
  | `label` | Defines the label content for the entire datepicker when `layout="snowflake"`. |
112
- | `optionalFromLabel` | Overrides the "(optional)" text rendered next to the first input's label when the datepicker is not `required`. |
113
- | `optionalToLabel` | Overrides the "(optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`. |
114
112
  | `popover_YYYY_MM_DD` | Defines the content to display in the auro-calendar-cell popover for the specified date. |
115
113
  | `toLabel` | Defines the label content for the second input when the `range` attribute is used. |
116
114
 
@@ -255,9 +255,9 @@
255
255
  <auro-header level="3" id="localization">Localization</auro-header>
256
256
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/localization.md) -->
257
257
  <!-- The below content is automatically added from ./../docs/partials/customize/localization.md -->
258
- <p>The component supports complete localization, including visible strings, screen reader announcements, and locale-based date formatting.</p>
258
+ <p>The component supports complete localization, including visible strings, screen reader announcements and locale based date formatting.</p>
259
259
  <auro-header level="4" id="localizationTrigger">Trigger</auro-header>
260
- <auro-header level="5" id="localizationTriggerVisibleStrings">Visible Strings</auro-header>
260
+ <auro-header level="4" id="localizationTriggerVisibleStrings">Trigger Visible strings</auro-header>
261
261
  <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>
262
262
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-visible-strings.html) -->
263
263
  <!-- The below content is automatically added from ./../apiExamples/localization-visible-strings.html -->
@@ -265,13 +265,13 @@
265
265
  <pre class="language-diff"><code class="language-diff"> &lt;auro-datepicker&gt;
266
266
  + &lt;span slot="fromLabel"&gt;Abreisedatum&lt;/span&gt;
267
267
  + &lt;span slot="helpText"&gt;Wählen Sie ein Datum&lt;/span&gt;
268
- + &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
268
+ + &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
269
269
  + &lt;span slot="bib.fullscreen.headline"&gt;Datum auswählen&lt;/span&gt;
270
270
  + &lt;span slot="bib.fullscreen.fromLabel"&gt;Abreisedatum&lt;/span&gt;
271
271
  &lt;/auro-datepicker&gt;</code></pre>
272
272
  <!-- AURO-GENERATED-CONTENT:END -->
273
273
  <auro-header level="4" id="localizationCalendar">Calendar</auro-header>
274
- <auro-header level="5" id="localizationCalendarVisibleStrings">Visible Strings</auro-header>
274
+ <auro-header level="4" id="localizationCalendarVisibleStrings">Visible strings</auro-header>
275
275
  <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>
276
276
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-calendar-strings.html) -->
277
277
  <!-- The below content is automatically added from ./../apiExamples/localization-calendar-strings.html -->
@@ -280,64 +280,9 @@
280
280
  + &lt;auro-datepicker monthNames='["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]'&gt;
281
281
  &lt;span slot="fromLabel"&gt;Abreisedatum&lt;/span&gt;
282
282
  &lt;span slot="helpText"&gt;Wählen Sie ein Datum&lt;/span&gt;
283
- &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
284
283
  &lt;/auro-datepicker&gt;</code></pre>
285
284
  <!-- AURO-GENERATED-CONTENT:END -->
286
- <p>The following live example sets <code>monthNames</code> imperatively on an <code>es-MX</code> picker:</p>
287
- <div class="exampleWrapper">
288
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
289
- <!-- The below content is automatically added from ./../apiExamples/localization.html -->
290
- <auro-datepicker
291
- range
292
- locale="es-MX"
293
- rangeLabelStart="fecha de salida"
294
- rangeLabelEnd="fecha de regreso"
295
- rangeLabelBeforeRange="antes de la salida"
296
- rangeLabelInRange="entre vuelos"
297
- rangeLabelAfterRange="después del regreso"
298
- navLabelPrevMonth="Ir al mes anterior"
299
- navLabelNextMonth="Ir al mes siguiente"
300
- calendarGridLabel="Días del mes del calendario"
301
- id="localizationExample">
302
- <span slot="fromLabel">Salida</span>
303
- <span slot="toLabel">Regreso</span>
304
- <span slot="helpText">Seleccione un rango de fechas</span>
305
- <span slot="optionalFromLabel">(opcional)</span>
306
- <span slot="optionalToLabel">(opcional)</span>
307
- <span slot="bib.fullscreen.headline">Seleccione fechas</span>
308
- <span slot="bib.fullscreen.fromLabel">Salida</span>
309
- <span slot="bib.fullscreen.toLabel">Regreso</span>
310
- </auro-datepicker>
311
- <!-- AURO-GENERATED-CONTENT:END -->
312
- </div>
313
- <auro-accordion alignRight>
314
- <span slot="trigger">See code</span>
315
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.html) -->
316
- <!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
317
- <pre class="language-html"><code class="language-html">&lt;auro-datepicker
318
- range
319
- locale="es-MX"
320
- rangeLabelStart="fecha de salida"
321
- rangeLabelEnd="fecha de regreso"
322
- rangeLabelBeforeRange="antes de la salida"
323
- rangeLabelInRange="entre vuelos"
324
- rangeLabelAfterRange="después del regreso"
325
- navLabelPrevMonth="Ir al mes anterior"
326
- navLabelNextMonth="Ir al mes siguiente"
327
- calendarGridLabel="Días del mes del calendario"
328
- id="localizationExample"&gt;
329
- &lt;span slot="fromLabel"&gt;Salida&lt;/span&gt;
330
- &lt;span slot="toLabel"&gt;Regreso&lt;/span&gt;
331
- &lt;span slot="helpText"&gt;Seleccione un rango de fechas&lt;/span&gt;
332
- &lt;span slot="optionalFromLabel"&gt;(opcional)&lt;/span&gt;
333
- &lt;span slot="optionalToLabel"&gt;(opcional)&lt;/span&gt;
334
- &lt;span slot="bib.fullscreen.headline"&gt;Seleccione fechas&lt;/span&gt;
335
- &lt;span slot="bib.fullscreen.fromLabel"&gt;Salida&lt;/span&gt;
336
- &lt;span slot="bib.fullscreen.toLabel"&gt;Regreso&lt;/span&gt;
337
- &lt;/auro-datepicker&gt;</code></pre>
338
- <!-- AURO-GENERATED-CONTENT:END -->
339
- </auro-accordion>
340
- <auro-header level="5" id="localizationCalendarA11yStrings">Screen Reader Strings</auro-header>
285
+ <auro-header level="4" id="localizationCalendarA11yStrings">Screen reader strings</auro-header>
341
286
  <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>
342
287
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-screenreader-strings.html) -->
343
288
  <!-- The below content is automatically added from ./../apiExamples/localization-screenreader-strings.html -->
@@ -356,11 +301,9 @@
356
301
  &lt;span slot="fromLabel"&gt;Abreise&lt;/span&gt;
357
302
  &lt;span slot="toLabel"&gt;Rückkehr&lt;/span&gt;
358
303
  &lt;span slot="helpText"&gt;Wählen Sie einen Zeitraum&lt;/span&gt;
359
- &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
360
- &lt;span slot="optionalToLabel"&gt;(freiwillig)&lt;/span&gt;
361
304
  &lt;/auro-datepicker&gt;</code></pre>
362
305
  <!-- AURO-GENERATED-CONTENT:END -->
363
- <auro-header level="4" id="localizationDateFormatting">Date Formatting</auro-header>
306
+ <auro-header level="4" id="localizationDateFormatting">Date formatting</auro-header>
364
307
  <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>
365
308
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-locale.html) -->
366
309
  <!-- The below content is automatically added from ./../apiExamples/localization-locale.html -->
@@ -369,7 +312,7 @@
369
312
  + &lt;auro-datepicker locale="de-DE"&gt;
370
313
  &lt;span slot="fromLabel"&gt;Deutsches Datum&lt;/span&gt;
371
314
  &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
372
- &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
315
+ &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
373
316
  &lt;/auro-datepicker&gt;</code></pre>
374
317
  <!-- AURO-GENERATED-CONTENT:END -->
375
318
  <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>
@@ -380,7 +323,7 @@
380
323
  &lt;auro-datepicker&gt;
381
324
  &lt;span slot="fromLabel"&gt;継承された ja-JP 日付形式&lt;/span&gt;
382
325
  &lt;span slot="helpText"&gt;ヘルプテキスト&lt;/span&gt;
383
- &lt;span slot="optionalFromLabel"&gt;(任意)&lt;/span&gt;
326
+ &lt;span slot="optionalLabel"&gt;(任意)&lt;/span&gt;
384
327
  &lt;/auro-datepicker&gt;
385
328
  + &lt;/div&gt;</code></pre>
386
329
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -393,15 +336,14 @@
393
336
  + format="mm/dd/yyyy"&gt;
394
337
  &lt;span slot="fromLabel"&gt;Deutsches Datum mit mm/dd/yyyy-Format&lt;/span&gt;
395
338
  &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
396
- &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
339
+ &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
397
340
  &lt;/auro-datepicker&gt;</code></pre>
398
341
  <!-- AURO-GENERATED-CONTENT:END -->
399
- <p>The following live example shows several locale configurations in action:</p>
400
342
  <div class="exampleWrapper">
401
343
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/locale.html) -->
402
344
  <!-- The below content is automatically added from ./../apiExamples/locale.html -->
403
345
  <div data-locale="de-DE">
404
- <p class="body-sm"><strong>de-DE</strong></p>
346
+ <auro-header level="4" >de-DE Example</auro-header>
405
347
  <auro-datepicker
406
348
  locale="de-DE"
407
349
  range
@@ -413,16 +355,11 @@
413
355
  navLabelPrevMonth="Vorheriger Monat"
414
356
  navLabelNextMonth="Nächster Monat"
415
357
  calendarGridLabel="Kalendertage des Monats">
416
- <span slot="fromLabel">Abreisedatum</span>
417
- <span slot="toLabel">Rückkehrdatum</span>
358
+ <span slot="fromLabel">Deutsches Datum</span>
418
359
  <span slot="helpText">Hilfetext</span>
419
- <span slot="optionalFromLabel">(freiwillig)</span>
420
- <span slot="optionalToLabel">(freiwillig)</span>
421
- <span slot="bib.fullscreen.headline">Datum auswählen</span>
422
- <span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
423
- <span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
360
+ <span slot="optionalLabel">(freiwillig)</span>
424
361
  </auro-datepicker>
425
- <p class="body-sm"><strong>zh-CN</strong></p>
362
+ <auro-header level="4" >zh-CN Example</auro-header>
426
363
  <auro-datepicker
427
364
  locale="zh-CN"
428
365
  range
@@ -434,16 +371,11 @@
434
371
  navLabelPrevMonth="上个月"
435
372
  navLabelNextMonth="下个月"
436
373
  calendarGridLabel="本月的日历天数">
437
- <span slot="fromLabel">出发日期</span>
438
- <span slot="toLabel">返回日期</span>
374
+ <span slot="fromLabel">中文日期</span>
439
375
  <span slot="helpText">帮助文本</span>
440
- <span slot="optionalFromLabel">(可选)</span>
441
- <span slot="optionalToLabel">(可选)</span>
442
- <span slot="bib.fullscreen.headline">选择日期</span>
443
- <span slot="bib.fullscreen.fromLabel">出发日期</span>
444
- <span slot="bib.fullscreen.toLabel">返回日期</span>
376
+ <span slot="optionalLabel">(可选)</span>
445
377
  </auro-datepicker>
446
- <p class="body-sm"><strong>Inherited de-DE (via <code>data-locale</code>)</strong></p>
378
+ <auro-header level="4">Inherited de-DE date-locale Example</auro-header>
447
379
  <auro-datepicker
448
380
  range
449
381
  rangeLabelStart="Startdatum"
@@ -454,16 +386,11 @@
454
386
  navLabelPrevMonth="Vorheriger Monat"
455
387
  navLabelNextMonth="Nächster Monat"
456
388
  calendarGridLabel="Kalendertage des Monats">
457
- <span slot="fromLabel">Abreisedatum (geerbt aus `data-locale="de-DE"`)</span>
458
- <span slot="toLabel">Rückkehrdatum</span>
389
+ <span slot="fromLabel">Nächstes `data-locale`-Attributformat (`de-DE` in diesem Fall)</span>
459
390
  <span slot="helpText">Hilfetext</span>
460
- <span slot="optionalFromLabel">(freiwillig)</span>
461
- <span slot="optionalToLabel">(freiwillig)</span>
462
- <span slot="bib.fullscreen.headline">Datum auswählen</span>
463
- <span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
464
- <span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
391
+ <span slot="optionalLabel">(freiwillig)</span>
465
392
  </auro-datepicker>
466
- <p class="body-sm"><strong>ja-JP with explicit <code>format="mm/dd/yyyy"</code></strong></p>
393
+ <auro-header level="4" >ja-JP with `mm/dd/yyyy` format Example</auro-header>
467
394
  <auro-datepicker
468
395
  locale="ja-JP"
469
396
  format="mm/dd/yyyy"
@@ -476,14 +403,9 @@
476
403
  navLabelPrevMonth="前の月"
477
404
  navLabelNextMonth="次の月"
478
405
  calendarGridLabel="カレンダーの日付">
479
- <span slot="fromLabel">出発日</span>
480
- <span slot="toLabel">帰国日</span>
406
+ <span slot="fromLabel">明示的な mm/dd/yyyy 形式の ja-JP ロケール</span>
481
407
  <span slot="helpText">ヘルプテキスト</span>
482
- <span slot="optionalFromLabel">(任意)</span>
483
- <span slot="optionalToLabel">(任意)</span>
484
- <span slot="bib.fullscreen.headline">日付を選択</span>
485
- <span slot="bib.fullscreen.fromLabel">出発日</span>
486
- <span slot="bib.fullscreen.toLabel">帰国日</span>
408
+ <span slot="optionalLabel">(任意)</span>
487
409
  </auro-datepicker>
488
410
  </div>
489
411
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -493,7 +415,7 @@
493
415
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/locale.html) -->
494
416
  <!-- The below code snippet is automatically added from ./../apiExamples/locale.html -->
495
417
  <pre class="language-html"><code class="language-html">&lt;div data-locale="de-DE"&gt;
496
- &lt;p class="body-sm"&gt;&lt;strong&gt;de-DE&lt;/strong&gt;&lt;/p&gt;
418
+ &lt;auro-header level="4" &gt;de-DE Example&lt;/auro-header&gt;
497
419
  &lt;auro-datepicker
498
420
  locale="de-DE"
499
421
  range
@@ -505,16 +427,11 @@
505
427
  navLabelPrevMonth="Vorheriger Monat"
506
428
  navLabelNextMonth="Nächster Monat"
507
429
  calendarGridLabel="Kalendertage des Monats"&gt;
508
- &lt;span slot="fromLabel"&gt;Abreisedatum&lt;/span&gt;
509
- &lt;span slot="toLabel"&gt;Rückkehrdatum&lt;/span&gt;
430
+ &lt;span slot="fromLabel"&gt;Deutsches Datum&lt;/span&gt;
510
431
  &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
511
- &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
512
- &lt;span slot="optionalToLabel"&gt;(freiwillig)&lt;/span&gt;
513
- &lt;span slot="bib.fullscreen.headline"&gt;Datum auswählen&lt;/span&gt;
514
- &lt;span slot="bib.fullscreen.fromLabel"&gt;Abreisedatum&lt;/span&gt;
515
- &lt;span slot="bib.fullscreen.toLabel"&gt;Rückkehrdatum&lt;/span&gt;
432
+ &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
516
433
  &lt;/auro-datepicker&gt;
517
- &lt;p class="body-sm"&gt;&lt;strong&gt;zh-CN&lt;/strong&gt;&lt;/p&gt;
434
+ &lt;auro-header level="4" &gt;zh-CN Example&lt;/auro-header&gt;
518
435
  &lt;auro-datepicker
519
436
  locale="zh-CN"
520
437
  range
@@ -526,16 +443,11 @@
526
443
  navLabelPrevMonth="上个月"
527
444
  navLabelNextMonth="下个月"
528
445
  calendarGridLabel="本月的日历天数"&gt;
529
- &lt;span slot="fromLabel"&gt;出发日期&lt;/span&gt;
530
- &lt;span slot="toLabel"&gt;返回日期&lt;/span&gt;
446
+ &lt;span slot="fromLabel"&gt;中文日期&lt;/span&gt;
531
447
  &lt;span slot="helpText"&gt;帮助文本&lt;/span&gt;
532
- &lt;span slot="optionalFromLabel"&gt;(可选)&lt;/span&gt;
533
- &lt;span slot="optionalToLabel"&gt;(可选)&lt;/span&gt;
534
- &lt;span slot="bib.fullscreen.headline"&gt;选择日期&lt;/span&gt;
535
- &lt;span slot="bib.fullscreen.fromLabel"&gt;出发日期&lt;/span&gt;
536
- &lt;span slot="bib.fullscreen.toLabel"&gt;返回日期&lt;/span&gt;
448
+ &lt;span slot="optionalLabel"&gt;(可选)&lt;/span&gt;
537
449
  &lt;/auro-datepicker&gt;
538
- &lt;p class="body-sm"&gt;&lt;strong&gt;Inherited de-DE (via &lt;code&gt;data-locale&lt;/code&gt;)&lt;/strong&gt;&lt;/p&gt;
450
+ &lt;auro-header level="4"&gt;Inherited de-DE date-locale Example&lt;/auro-header&gt;
539
451
  &lt;auro-datepicker
540
452
  range
541
453
  rangeLabelStart="Startdatum"
@@ -546,16 +458,11 @@
546
458
  navLabelPrevMonth="Vorheriger Monat"
547
459
  navLabelNextMonth="Nächster Monat"
548
460
  calendarGridLabel="Kalendertage des Monats"&gt;
549
- &lt;span slot="fromLabel"&gt;Abreisedatum (geerbt aus `data-locale="de-DE"`)&lt;/span&gt;
550
- &lt;span slot="toLabel"&gt;Rückkehrdatum&lt;/span&gt;
461
+ &lt;span slot="fromLabel"&gt;Nächstes `data-locale`-Attributformat (`de-DE` in diesem Fall)&lt;/span&gt;
551
462
  &lt;span slot="helpText"&gt;Hilfetext&lt;/span&gt;
552
- &lt;span slot="optionalFromLabel"&gt;(freiwillig)&lt;/span&gt;
553
- &lt;span slot="optionalToLabel"&gt;(freiwillig)&lt;/span&gt;
554
- &lt;span slot="bib.fullscreen.headline"&gt;Datum auswählen&lt;/span&gt;
555
- &lt;span slot="bib.fullscreen.fromLabel"&gt;Abreisedatum&lt;/span&gt;
556
- &lt;span slot="bib.fullscreen.toLabel"&gt;Rückkehrdatum&lt;/span&gt;
463
+ &lt;span slot="optionalLabel"&gt;(freiwillig)&lt;/span&gt;
557
464
  &lt;/auro-datepicker&gt;
558
- &lt;p class="body-sm"&gt;&lt;strong&gt;ja-JP with explicit &lt;code&gt;format="mm/dd/yyyy"&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
465
+ &lt;auro-header level="4" &gt;ja-JP with `mm/dd/yyyy` format Example&lt;/auro-header&gt;
559
466
  &lt;auro-datepicker
560
467
  locale="ja-JP"
561
468
  format="mm/dd/yyyy"
@@ -568,82 +475,13 @@
568
475
  navLabelPrevMonth="前の月"
569
476
  navLabelNextMonth="次の月"
570
477
  calendarGridLabel="カレンダーの日付"&gt;
571
- &lt;span slot="fromLabel"&gt;出発日&lt;/span&gt;
572
- &lt;span slot="toLabel"&gt;帰国日&lt;/span&gt;
478
+ &lt;span slot="fromLabel"&gt;明示的な mm/dd/yyyy 形式の ja-JP ロケール&lt;/span&gt;
573
479
  &lt;span slot="helpText"&gt;ヘルプテキスト&lt;/span&gt;
574
- &lt;span slot="optionalFromLabel"&gt;(任意)&lt;/span&gt;
575
- &lt;span slot="optionalToLabel"&gt;(任意)&lt;/span&gt;
576
- &lt;span slot="bib.fullscreen.headline"&gt;日付を選択&lt;/span&gt;
577
- &lt;span slot="bib.fullscreen.fromLabel"&gt;出発日&lt;/span&gt;
578
- &lt;span slot="bib.fullscreen.toLabel"&gt;帰国日&lt;/span&gt;
480
+ &lt;span slot="optionalLabel"&gt;(任意)&lt;/span&gt;
579
481
  &lt;/auro-datepicker&gt;
580
482
  &lt;/div&gt;</code></pre>
581
483
  <!-- AURO-GENERATED-CONTENT:END -->
582
484
  </auro-accordion>
583
- <auro-header level="4" id="localizationSnowflake">Layout Interaction</auro-header>
584
- <p>Locale-driven formatting applies across both the <code>classic</code> and <code>snowflake</code> layouts. In the snowflake layout, the localized value renders via <code>Intl.DateTimeFormat</code> using the active <code>locale</code>, so the visible date adapts automatically.</p>
585
- <p>The localized value is a compact summary — by design it uses a fixed <code>{ month: 'short', day: '2-digit' }</code> shape and does <strong>not</strong> reflect the <code>format</code> attribute. <code>format</code> governs the input mask only. To render it differently (for example, to include the year or honor a custom format), project content into the <code>displayValue</code> slot.</p>
586
- <div class="exampleWrapper--ondark">
587
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake-locale.html) -->
588
- <!-- The below content is automatically added from ./../apiExamples/snowflake-locale.html -->
589
- <p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="fr-FR"</code></strong> — derives <code>dd/mm/yyyy</code> from the locale. Mask: <code>DD/MM/YYYY</code>.</p>
590
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR">
591
- <span slot="label">Date de départ</span>
592
- <span slot="bib.fullscreen.headline">Choisir une date</span>
593
- <span slot="fromLabel">Date de départ</span>
594
- <span slot="bib.fullscreen.fromLabel">Date de départ</span>
595
- <span slot="helpText">Texte d'aide</span>
596
- </auro-datepicker>
597
- <p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="ja-JP"</code>, range</strong> — derives <code>yyyy/mm/dd</code>. Mask: <code>YYYY/MM/DD</code>.</p>
598
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="ja-JP" range>
599
- <span slot="label">出発日 / 帰国日</span>
600
- <span slot="bib.fullscreen.headline">日付を選択</span>
601
- <span slot="fromLabel">出発日</span>
602
- <span slot="toLabel">帰国日</span>
603
- <span slot="bib.fullscreen.fromLabel">出発日</span>
604
- <span slot="bib.fullscreen.toLabel">帰国日</span>
605
- </auro-datepicker>
606
- <p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="fr-FR"</code> + explicit <code>format="yyyy/mm/dd"</code></strong> — explicit format wins for the mask, but the localized value is rendered the same as the first picker (it ignores <code>format</code>).</p>
607
- <auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR" format="yyyy/mm/dd">
608
- <span slot="label">Date avec format explicite</span>
609
- <span slot="bib.fullscreen.headline">Choisir une date</span>
610
- <span slot="fromLabel">Date avec format explicite</span>
611
- <span slot="bib.fullscreen.fromLabel">Date avec format explicite</span>
612
- </auro-datepicker>
613
- <!-- AURO-GENERATED-CONTENT:END -->
614
- </div>
615
- <auro-accordion alignRight>
616
- <span slot="trigger">See code</span>
617
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake-locale.html) -->
618
- <!-- The below code snippet is automatically added from ./../apiExamples/snowflake-locale.html -->
619
- <pre class="language-html"><code class="language-html">&lt;p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"&gt;&lt;strong&gt;&lt;code&gt;locale="fr-FR"&lt;/code&gt;&lt;/strong&gt; — derives &lt;code&gt;dd/mm/yyyy&lt;/code&gt; from the locale. Mask: &lt;code&gt;DD/MM/YYYY&lt;/code&gt;.&lt;/p&gt;
620
- &lt;auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR"&gt;
621
- &lt;span slot="label"&gt;Date de départ&lt;/span&gt;
622
- &lt;span slot="bib.fullscreen.headline"&gt;Choisir une date&lt;/span&gt;
623
- &lt;span slot="fromLabel"&gt;Date de départ&lt;/span&gt;
624
- &lt;span slot="bib.fullscreen.fromLabel"&gt;Date de départ&lt;/span&gt;
625
- &lt;span slot="helpText"&gt;Texte d'aide&lt;/span&gt;
626
- &lt;/auro-datepicker&gt;
627
-
628
- &lt;p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"&gt;&lt;strong&gt;&lt;code&gt;locale="ja-JP"&lt;/code&gt;, range&lt;/strong&gt; — derives &lt;code&gt;yyyy/mm/dd&lt;/code&gt;. Mask: &lt;code&gt;YYYY/MM/DD&lt;/code&gt;.&lt;/p&gt;
629
- &lt;auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="ja-JP" range&gt;
630
- &lt;span slot="label"&gt;出発日 / 帰国日&lt;/span&gt;
631
- &lt;span slot="bib.fullscreen.headline"&gt;日付を選択&lt;/span&gt;
632
- &lt;span slot="fromLabel"&gt;出発日&lt;/span&gt;
633
- &lt;span slot="toLabel"&gt;帰国日&lt;/span&gt;
634
- &lt;span slot="bib.fullscreen.fromLabel"&gt;出発日&lt;/span&gt;
635
- &lt;span slot="bib.fullscreen.toLabel"&gt;帰国日&lt;/span&gt;
636
- &lt;/auro-datepicker&gt;
637
-
638
- &lt;p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"&gt;&lt;strong&gt;&lt;code&gt;locale="fr-FR"&lt;/code&gt; + explicit &lt;code&gt;format="yyyy/mm/dd"&lt;/code&gt;&lt;/strong&gt; — explicit format wins for the mask, but the localized value is rendered the same as the first picker (it ignores &lt;code&gt;format&lt;/code&gt;).&lt;/p&gt;
639
- &lt;auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR" format="yyyy/mm/dd"&gt;
640
- &lt;span slot="label"&gt;Date avec format explicite&lt;/span&gt;
641
- &lt;span slot="bib.fullscreen.headline"&gt;Choisir une date&lt;/span&gt;
642
- &lt;span slot="fromLabel"&gt;Date avec format explicite&lt;/span&gt;
643
- &lt;span slot="bib.fullscreen.fromLabel"&gt;Date avec format explicite&lt;/span&gt;
644
- &lt;/auro-datepicker&gt;</code></pre>
645
- <!-- AURO-GENERATED-CONTENT:END -->
646
- </auro-accordion>
647
485
  <!-- AURO-GENERATED-CONTENT:END -->
648
486
  <auro-header level="3" id="layout">Shape, Size & Layout</auro-header>
649
487
  <p>The <code>shape</code>, <code>size</code> and <code>layout</code> attributes work in collaboration to control the overall architecture of the component.</p>