@aurodesignsystem-dev/auro-formkit 0.0.0-pr1509.1 → 0.0.0-pr1510.0

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 (50) 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 +3 -3
  7. package/components/combobox/demo/getting-started.min.js +3 -3
  8. package/components/combobox/demo/index.min.js +3 -3
  9. package/components/combobox/dist/index.js +3 -3
  10. package/components/combobox/dist/registered.js +3 -3
  11. package/components/counter/demo/customize.min.js +2 -2
  12. package/components/counter/demo/index.min.js +2 -2
  13. package/components/counter/dist/index.js +2 -2
  14. package/components/counter/dist/registered.js +2 -2
  15. package/components/datepicker/demo/accessibility.md +2 -1
  16. package/components/datepicker/demo/api.md +63 -62
  17. package/components/datepicker/demo/customize.md +12 -1
  18. package/components/datepicker/demo/customize.min.js +455 -167
  19. package/components/datepicker/demo/index.min.js +455 -167
  20. package/components/datepicker/dist/index.js +455 -167
  21. package/components/datepicker/dist/registered.js +455 -167
  22. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +14 -3
  23. package/components/datepicker/dist/src/auro-calendar.d.ts +87 -5
  24. package/components/datepicker/dist/src/auro-datepicker.d.ts +73 -3
  25. package/components/dropdown/demo/customize.min.js +1 -1
  26. package/components/dropdown/demo/getting-started.min.js +1 -1
  27. package/components/dropdown/demo/index.min.js +1 -1
  28. package/components/dropdown/dist/index.js +1 -1
  29. package/components/dropdown/dist/registered.js +1 -1
  30. package/components/form/demo/customize.min.js +471 -183
  31. package/components/form/demo/getting-started.min.js +471 -183
  32. package/components/form/demo/index.min.js +471 -183
  33. package/components/form/demo/registerDemoDeps.min.js +471 -183
  34. package/components/input/demo/customize.min.js +1 -1
  35. package/components/input/demo/getting-started.min.js +1 -1
  36. package/components/input/demo/index.min.js +1 -1
  37. package/components/input/dist/index.js +1 -1
  38. package/components/input/dist/registered.js +1 -1
  39. package/components/radio/demo/customize.min.js +1 -1
  40. package/components/radio/demo/getting-started.min.js +1 -1
  41. package/components/radio/demo/index.min.js +1 -1
  42. package/components/radio/dist/index.js +1 -1
  43. package/components/radio/dist/registered.js +1 -1
  44. package/components/select/demo/customize.min.js +2 -2
  45. package/components/select/demo/getting-started.min.js +2 -2
  46. package/components/select/demo/index.min.js +2 -2
  47. package/components/select/dist/index.js +2 -2
  48. package/components/select/dist/registered.js +2 -2
  49. package/custom-elements.json +1868 -1696
  50. package/package.json +2 -1
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
1260
1260
  }
1261
1261
  }
1262
1262
 
1263
- var formkitVersion = '202606241801';
1263
+ var formkitVersion = '202606251933';
1264
1264
 
1265
1265
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1266
1266
  // See LICENSE in the project root for license information.
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
1260
1260
  }
1261
1261
  }
1262
1262
 
1263
- var formkitVersion = '202606241801';
1263
+ var formkitVersion = '202606251933';
1264
1264
 
1265
1265
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1266
1266
  // See LICENSE in the project root for license information.
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
1260
1260
  }
1261
1261
  }
1262
1262
 
1263
- var formkitVersion = '202606241801';
1263
+ var formkitVersion = '202606251933';
1264
1264
 
1265
1265
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1266
1266
  // See LICENSE in the project root for license information.
@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
1213
1213
  }
1214
1214
  }
1215
1215
 
1216
- var formkitVersion = '202606241801';
1216
+ var formkitVersion = '202606251933';
1217
1217
 
1218
1218
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1219
1219
  // See LICENSE in the project root for license information.
@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
1213
1213
  }
1214
1214
  }
1215
1215
 
1216
- var formkitVersion = '202606241801';
1216
+ var formkitVersion = '202606251933';
1217
1217
 
1218
1218
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1219
1219
  // See LICENSE in the project root for license information.
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4873
4873
  }
4874
4874
  };
4875
4875
 
4876
- var formkitVersion$2 = '202606241801';
4876
+ var formkitVersion$2 = '202606251933';
4877
4877
 
4878
4878
  let AuroElement$2 = class AuroElement extends i$3 {
4879
4879
  static get properties() {
@@ -18473,7 +18473,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18473
18473
  }
18474
18474
  };
18475
18475
 
18476
- var formkitVersion$1 = '202606241801';
18476
+ var formkitVersion$1 = '202606251933';
18477
18477
 
18478
18478
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18479
18479
  // See LICENSE in the project root for license information.
@@ -19594,7 +19594,7 @@ class AuroBibtemplate extends i$3 {
19594
19594
  }
19595
19595
  }
19596
19596
 
19597
- var formkitVersion = '202606241801';
19597
+ var formkitVersion = '202606251933';
19598
19598
 
19599
19599
  var styleCss$3 = i$6`.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}`;
19600
19600
 
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4873
4873
  }
4874
4874
  };
4875
4875
 
4876
- var formkitVersion$2 = '202606241801';
4876
+ var formkitVersion$2 = '202606251933';
4877
4877
 
4878
4878
  let AuroElement$2 = class AuroElement extends i$3 {
4879
4879
  static get properties() {
@@ -18473,7 +18473,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18473
18473
  }
18474
18474
  };
18475
18475
 
18476
- var formkitVersion$1 = '202606241801';
18476
+ var formkitVersion$1 = '202606251933';
18477
18477
 
18478
18478
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18479
18479
  // See LICENSE in the project root for license information.
@@ -19594,7 +19594,7 @@ class AuroBibtemplate extends i$3 {
19594
19594
  }
19595
19595
  }
19596
19596
 
19597
- var formkitVersion = '202606241801';
19597
+ var formkitVersion = '202606251933';
19598
19598
 
19599
19599
  var styleCss$3 = i$6`.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}`;
19600
19600
 
@@ -4888,7 +4888,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4888
4888
  }
4889
4889
  };
4890
4890
 
4891
- var formkitVersion$2 = '202606241801';
4891
+ var formkitVersion$2 = '202606251933';
4892
4892
 
4893
4893
  let AuroElement$2 = class AuroElement extends i$3 {
4894
4894
  static get properties() {
@@ -18488,7 +18488,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18488
18488
  }
18489
18489
  };
18490
18490
 
18491
- var formkitVersion$1 = '202606241801';
18491
+ var formkitVersion$1 = '202606251933';
18492
18492
 
18493
18493
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18494
18494
  // See LICENSE in the project root for license information.
@@ -19609,7 +19609,7 @@ class AuroBibtemplate extends i$3 {
19609
19609
  }
19610
19610
  }
19611
19611
 
19612
- var formkitVersion = '202606241801';
19612
+ var formkitVersion = '202606251933';
19613
19613
 
19614
19614
  var styleCss$3 = i$6`.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}`;
19615
19615
 
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4806
4806
  }
4807
4807
  };
4808
4808
 
4809
- var formkitVersion$2 = '202606241801';
4809
+ var formkitVersion$2 = '202606251933';
4810
4810
 
4811
4811
  let AuroElement$2 = class AuroElement extends LitElement {
4812
4812
  static get properties() {
@@ -18399,7 +18399,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18399
18399
  }
18400
18400
  };
18401
18401
 
18402
- var formkitVersion$1 = '202606241801';
18402
+ var formkitVersion$1 = '202606251933';
18403
18403
 
18404
18404
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18405
18405
  // See LICENSE in the project root for license information.
@@ -19520,7 +19520,7 @@ class AuroBibtemplate extends LitElement {
19520
19520
  }
19521
19521
  }
19522
19522
 
19523
- var formkitVersion = '202606241801';
19523
+ var formkitVersion = '202606251933';
19524
19524
 
19525
19525
  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}`;
19526
19526
 
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4806
4806
  }
4807
4807
  };
4808
4808
 
4809
- var formkitVersion$2 = '202606241801';
4809
+ var formkitVersion$2 = '202606251933';
4810
4810
 
4811
4811
  let AuroElement$2 = class AuroElement extends LitElement {
4812
4812
  static get properties() {
@@ -18399,7 +18399,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18399
18399
  }
18400
18400
  };
18401
18401
 
18402
- var formkitVersion$1 = '202606241801';
18402
+ var formkitVersion$1 = '202606251933';
18403
18403
 
18404
18404
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18405
18405
  // See LICENSE in the project root for license information.
@@ -19520,7 +19520,7 @@ class AuroBibtemplate extends LitElement {
19520
19520
  }
19521
19521
  }
19522
19522
 
19523
- var formkitVersion = '202606241801';
19523
+ var formkitVersion = '202606251933';
19524
19524
 
19525
19525
  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}`;
19526
19526
 
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
1099
1099
  }
1100
1100
  };
1101
1101
 
1102
- var formkitVersion$1 = '202606241801';
1102
+ var formkitVersion$1 = '202606251933';
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 = '202606241801';
5448
+ var formkitVersion = '202606251933';
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 = '202606241801';
1102
+ var formkitVersion$1 = '202606251933';
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 = '202606241801';
5448
+ var formkitVersion = '202606251933';
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 = '202606241801';
1052
+ var formkitVersion$1 = '202606251933';
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 = '202606241801';
5380
+ var formkitVersion = '202606251933';
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 = '202606241801';
1052
+ var formkitVersion$1 = '202606251933';
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 = '202606241801';
5380
+ var formkitVersion = '202606251933';
5381
5381
 
5382
5382
  let AuroElement$1 = class AuroElement extends LitElement {
5383
5383
  static get properties() {
@@ -83,7 +83,8 @@ When `range` is set, each date cell's label includes its position relative to th
83
83
  | `rangeLabelEnd` | "range end" | Announced for the range end date. |
84
84
  | `rangeLabelBeforeRange` | "before range" | Announced for dates before the range start. |
85
85
  | `rangeLabelInRange` | "in range" | Announced for dates within the selected range. |
86
- | `rangeLabelAfterRange` | "after range" | Announced for dates after the range (or after start when no end is selected). |
86
+ | `rangeLabelAfterRange` | "after range" | Announced for dates after a fully selected range. |
87
+ | `rangeLabelEndPreview` | "previewing range end" | Announced for the focused cell while picking the range end (`dateFrom` set, `dateTo` not yet selected) so AT users know Enter would commit this cell as the range end. |
87
88
 
88
89
  <auro-header level="2" id="fullscreenBehavior">Fullscreen (Modal) Behavior</auro-header>
89
90
  On smaller viewports, the calendar bib opens as a fullscreen modal dialog:
@@ -7,68 +7,69 @@ The `auro-datepicker` component provides users with a way to select a date or da
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Modifiers | Type | Default | Description |
11
- |-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|------------------------------|--------------------------------------------------|
12
- | `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
13
- | `autoPlacement` | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
14
- | `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
15
- | `blackoutLabel` | `blackoutLabel` | | `string` | "unavailable" | Label announced for blackout (disabled but in-range) date cells. |
16
- | `calendarEndDate` | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
17
- | `calendarEndDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
18
- | `calendarFocusDate` | `calendarFocusDate` | | `string` | "value" | The date that will first be visually rendered to the user in the calendar. |
19
- | `calendarFocusDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date. |
20
- | `calendarGridLabel` | `calendarGridLabel` | | `string` | "Calendar days of the month" | Accessible label for the calendar grid containing the days of the month. |
21
- | `calendarStartDate` | `calendarStartDate` | | `string` | "undefined" | The first date that may be displayed in the calendar. |
22
- | `calendarStartDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date. |
23
- | `centralDate` | `centralDate` | | `string` | | The date that determines the currently visible month. |
24
- | `centralDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date. |
25
- | `disabled` | `disabled` | | `boolean` | false | If set, disables the datepicker. |
26
- | `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. |
27
- | `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
28
- | `format` | `format` | | `string` | | Specifies the date format. The default is `mm/dd/yyyy`. |
29
- | `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. |
30
- | `hasError` | | readonly | `boolean` | | Returns `true` when the datepicker has an active validation error. |
31
- | `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
32
- | `largeFullscreenHeadline` | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
33
- | `layout` | `layout` | | `'classic' \| 'snowflake'` | "'classic'" | Sets the layout of the datepicker. |
34
- | `locale` | `locale` | | `string` | | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
35
- | `maxDate` | `maxDate` | | `string` | | Maximum date. All dates after will be disabled. |
36
- | `maxDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date. |
37
- | `minDate` | `minDate` | | `string` | | Minimum date. All dates before will be disabled. |
38
- | `minDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date. |
39
- | `monthNames` | `monthNames` | | `array` | | Names of all 12 months to render in the calendar.<br />When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`). |
40
- | `navLabelNextMonth` | `navLabelNextMonth` | | `string` | "Next month" | Accessible label for the next month navigation button. |
41
- | `navLabelPrevMonth` | `navLabelPrevMonth` | | `string` | "Previous month" | Accessible label for the previous month navigation button. |
42
- | `noFlip` | `noFlip` | | `boolean` | false | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
43
- | `noValidate` | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
44
- | `offset` | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
45
- | `onDark` | `onDark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
46
- | `placeholder` | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
47
- | `placeholderEndDate` | `placeholderEndDate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
48
- | `placement` | `placement` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
49
- | `range` | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
50
- | `rangeLabelAfterRange` | `rangeLabelAfterRange` | | `string` | "after range" | Label announced for cells after the range (or after start when no end is selected). |
51
- | `rangeLabelBeforeRange` | `rangeLabelBeforeRange` | | `string` | "before range" | Label announced for cells before the range start. |
52
- | `rangeLabelEnd` | `rangeLabelEnd` | | `string` | "range end" | Label announced for the range end date cell. |
53
- | `rangeLabelInRange` | `rangeLabelInRange` | | `string` | "in range" | Label announced for cells within the selected range. |
54
- | `rangeLabelStart` | `rangeLabelStart` | | `string` | "range start" | Label announced for the range start date cell. |
55
- | `referenceDates` | `referenceDates` | | `array` | | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of ISO date strings (`YYYY-MM-DD`). |
56
- | `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
57
- | `setCustomValidity` | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
58
- | `setCustomValidityCustomError` | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
59
- | `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
60
- | `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
61
- | `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
62
- | `shape` | | | `string` | "classic" | |
63
- | `shift` | `shift` | | `boolean` | false | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
64
- | `size` | | | `string` | "lg" | |
65
- | `stacked` | `stacked` | | `boolean` | false | Set true to make datepicker stacked style. |
66
- | `validity` | `validity` | | `string` | "undefined" | Specifies the `validityState` this element is in. |
67
- | `value` | `value` | | `string` | "undefined" | Value selected for the datepicker. |
68
- | `valueEnd` | `valueEnd` | | `string` | "undefined" | Value selected for the second datepicker when using date range. |
69
- | `valueEndObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date. |
70
- | `valueObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date. |
71
- | `values` | | readonly | `string[]` | | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
10
+ | Property | Attribute | Modifiers | Type | Default | Description |
11
+ |-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------|--------------------------------------------------|
12
+ | `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
13
+ | `autoPlacement` | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
14
+ | `blackoutDates` | `blackoutDates` | | `array` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD). |
15
+ | `blackoutLabel` | `blackoutLabel` | | `string` | "'unavailable'" | Label announced for blackout (disabled but in-range) date cells. |
16
+ | `calendarEndDate` | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
17
+ | `calendarEndDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
18
+ | `calendarFocusDate` | `calendarFocusDate` | | `string` | "value" | The date that will first be visually rendered to the user in the calendar. |
19
+ | `calendarFocusDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date. |
20
+ | `calendarGridLabel` | `calendarGridLabel` | | `string` | "'Calendar days of the month'" | Accessible label for the calendar grid containing the days of the month. |
21
+ | `calendarStartDate` | `calendarStartDate` | | `string` | "undefined" | The first date that may be displayed in the calendar. |
22
+ | `calendarStartDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date. |
23
+ | `centralDate` | `centralDate` | | `string` | | The date that determines the currently visible month. |
24
+ | `centralDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date. |
25
+ | `disabled` | `disabled` | | `boolean` | false | If set, disables the datepicker. |
26
+ | `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. |
27
+ | `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
28
+ | `format` | `format` | | `string` | | Specifies the date format. The default is `mm/dd/yyyy`. |
29
+ | `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. |
30
+ | `hasError` | | readonly | `boolean` | | Returns `true` when the datepicker has an active validation error. |
31
+ | `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
32
+ | `largeFullscreenHeadline` | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
33
+ | `layout` | `layout` | | `'classic' \| 'snowflake'` | "'classic'" | Sets the layout of the datepicker. |
34
+ | `locale` | `locale` | | `string` | | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
35
+ | `maxDate` | `maxDate` | | `string` | | Maximum date. All dates after will be disabled. |
36
+ | `maxDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date. |
37
+ | `minDate` | `minDate` | | `string` | | Minimum date. All dates before will be disabled. |
38
+ | `minDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date. |
39
+ | `monthNames` | `monthNames` | | `array` | | Names of all 12 months to render in the calendar.<br />When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`). |
40
+ | `navLabelNextMonth` | `navLabelNextMonth` | | `string` | "'Next month'" | Accessible label for the next month navigation button. |
41
+ | `navLabelPrevMonth` | `navLabelPrevMonth` | | `string` | "'Previous month'" | Accessible label for the previous month navigation button. |
42
+ | `noFlip` | `noFlip` | | `boolean` | false | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
43
+ | `noValidate` | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
44
+ | `offset` | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
45
+ | `onDark` | `onDark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
46
+ | `placeholder` | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
47
+ | `placeholderEndDate` | `placeholderEndDate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
48
+ | `placement` | `placement` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
49
+ | `range` | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
50
+ | `rangeLabelAfterRange` | `rangeLabelAfterRange` | | `string` | "'after range'" | Label announced for cells after the range (or after start when no end is selected). |
51
+ | `rangeLabelBeforeRange` | `rangeLabelBeforeRange` | | `string` | "'before range'" | Label announced for cells before the range start. |
52
+ | `rangeLabelEnd` | `rangeLabelEnd` | | `string` | "'range end'" | Label announced for the range end date cell. |
53
+ | `rangeLabelEndPreview` | `rangeLabelEndPreview` | | `string` | "'previewing range end'" | Label announced for the focused cell while previewing a range end<br />(dateFrom set, dateTo not yet selected). Tells AT users that<br />pressing Enter would commit this cell as the range end. |
54
+ | `rangeLabelInRange` | `rangeLabelInRange` | | `string` | "'in range'" | Label announced for cells within the selected range. |
55
+ | `rangeLabelStart` | `rangeLabelStart` | | `string` | "'range start'" | Label announced for the range start date cell. |
56
+ | `referenceDates` | `referenceDates` | | `array` | | Dates that the user should have for reference as part of their decision making when selecting a date.<br />This should be a JSON string array of ISO date strings (`YYYY-MM-DD`). |
57
+ | `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
58
+ | `setCustomValidity` | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
59
+ | `setCustomValidityCustomError` | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
60
+ | `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
61
+ | `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
62
+ | `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
63
+ | `shape` | | | `string` | "classic" | |
64
+ | `shift` | `shift` | | `boolean` | false | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
65
+ | `size` | | | `string` | "lg" | |
66
+ | `stacked` | `stacked` | | `boolean` | false | Set true to make datepicker stacked style. |
67
+ | `validity` | `validity` | | `string` | "undefined" | Specifies the `validityState` this element is in. |
68
+ | `value` | `value` | | `string` | "undefined" | Value selected for the datepicker. |
69
+ | `valueEnd` | `valueEnd` | | `string` | "undefined" | Value selected for the second datepicker when using date range. |
70
+ | `valueEndObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date. |
71
+ | `valueObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date. |
72
+ | `values` | | readonly | `string[]` | | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
72
73
 
73
74
  ## Methods
74
75
 
@@ -296,6 +296,7 @@
296
296
  rangeLabelBeforeRange="antes de la salida"
297
297
  rangeLabelInRange="entre vuelos"
298
298
  rangeLabelAfterRange="después del regreso"
299
+ rangeLabelEndPreview="previsualizando fecha de regreso"
299
300
  navLabelPrevMonth="Ir al mes anterior"
300
301
  navLabelNextMonth="Ir al mes siguiente"
301
302
  calendarGridLabel="Días del mes del calendario"
@@ -324,6 +325,7 @@
324
325
  rangeLabelBeforeRange="antes de la salida"
325
326
  rangeLabelInRange="entre vuelos"
326
327
  rangeLabelAfterRange="después del regreso"
328
+ rangeLabelEndPreview="previsualizando fecha de regreso"
327
329
  navLabelPrevMonth="Ir al mes anterior"
328
330
  navLabelNextMonth="Ir al mes siguiente"
329
331
  calendarGridLabel="Días del mes del calendario"
@@ -340,7 +342,7 @@
340
342
  <!-- AURO-GENERATED-CONTENT:END -->
341
343
  </auro-accordion>
342
344
  <auro-header level="5" id="localizationCalendarA11yStrings">Screen Reader Strings</auro-header>
343
- <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>
345
+ <p>Assistive-technology announcements — range descriptors (<code>rangeLabelStart</code>, <code>rangeLabelEnd</code>, <code>rangeLabelEndPreview</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>
344
346
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-screenreader-strings.html) -->
345
347
  <!-- The below content is automatically added from ./../apiExamples/localization-screenreader-strings.html -->
346
348
 
@@ -352,6 +354,7 @@
352
354
  + rangeLabelBeforeRange="vor dem Zeitraum"
353
355
  + rangeLabelInRange="im Zeitraum"
354
356
  + rangeLabelAfterRange="nach dem Zeitraum"
357
+ + rangeLabelEndPreview="Vorschau Enddatum"
355
358
  + navLabelPrevMonth="Vorheriger Monat"
356
359
  + navLabelNextMonth="Nächster Monat"
357
360
  + calendarGridLabel="Kalendertage des Monats"&gt;
@@ -412,6 +415,7 @@
412
415
  rangeLabelBeforeRange="vor dem Zeitraum"
413
416
  rangeLabelInRange="im Zeitraum"
414
417
  rangeLabelAfterRange="nach dem Zeitraum"
418
+ rangeLabelEndPreview="Vorschau Enddatum"
415
419
  navLabelPrevMonth="Vorheriger Monat"
416
420
  navLabelNextMonth="Nächster Monat"
417
421
  calendarGridLabel="Kalendertage des Monats">
@@ -433,6 +437,7 @@
433
437
  rangeLabelBeforeRange="在此期间之前"
434
438
  rangeLabelInRange="在此期间内"
435
439
  rangeLabelAfterRange="在此期间之后"
440
+ rangeLabelEndPreview="预览结束日期"
436
441
  navLabelPrevMonth="上个月"
437
442
  navLabelNextMonth="下个月"
438
443
  calendarGridLabel="本月的日历天数">
@@ -453,6 +458,7 @@
453
458
  rangeLabelBeforeRange="vor dem Zeitraum"
454
459
  rangeLabelInRange="im Zeitraum"
455
460
  rangeLabelAfterRange="nach dem Zeitraum"
461
+ rangeLabelEndPreview="Vorschau Enddatum"
456
462
  navLabelPrevMonth="Vorheriger Monat"
457
463
  navLabelNextMonth="Nächster Monat"
458
464
  calendarGridLabel="Kalendertage des Monats">
@@ -475,6 +481,7 @@
475
481
  rangeLabelBeforeRange="この期間の前"
476
482
  rangeLabelInRange="この期間内"
477
483
  rangeLabelAfterRange="この期間の後"
484
+ rangeLabelEndPreview="終了日プレビュー"
478
485
  navLabelPrevMonth="前の月"
479
486
  navLabelNextMonth="次の月"
480
487
  calendarGridLabel="カレンダーの日付">
@@ -504,6 +511,7 @@
504
511
  rangeLabelBeforeRange="vor dem Zeitraum"
505
512
  rangeLabelInRange="im Zeitraum"
506
513
  rangeLabelAfterRange="nach dem Zeitraum"
514
+ rangeLabelEndPreview="Vorschau Enddatum"
507
515
  navLabelPrevMonth="Vorheriger Monat"
508
516
  navLabelNextMonth="Nächster Monat"
509
517
  calendarGridLabel="Kalendertage des Monats"&gt;
@@ -525,6 +533,7 @@
525
533
  rangeLabelBeforeRange="在此期间之前"
526
534
  rangeLabelInRange="在此期间内"
527
535
  rangeLabelAfterRange="在此期间之后"
536
+ rangeLabelEndPreview="预览结束日期"
528
537
  navLabelPrevMonth="上个月"
529
538
  navLabelNextMonth="下个月"
530
539
  calendarGridLabel="本月的日历天数"&gt;
@@ -545,6 +554,7 @@
545
554
  rangeLabelBeforeRange="vor dem Zeitraum"
546
555
  rangeLabelInRange="im Zeitraum"
547
556
  rangeLabelAfterRange="nach dem Zeitraum"
557
+ rangeLabelEndPreview="Vorschau Enddatum"
548
558
  navLabelPrevMonth="Vorheriger Monat"
549
559
  navLabelNextMonth="Nächster Monat"
550
560
  calendarGridLabel="Kalendertage des Monats"&gt;
@@ -567,6 +577,7 @@
567
577
  rangeLabelBeforeRange="この期間の前"
568
578
  rangeLabelInRange="この期間内"
569
579
  rangeLabelAfterRange="この期間の後"
580
+ rangeLabelEndPreview="終了日プレビュー"
570
581
  navLabelPrevMonth="前の月"
571
582
  navLabelNextMonth="次の月"
572
583
  calendarGridLabel="カレンダーの日付"&gt;