@aurodesignsystem-dev/auro-formkit 0.0.0-pr1510.2 → 0.0.0-pr1511.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 (128) hide show
  1. package/components/checkbox/demo/customize.js +22 -0
  2. package/components/checkbox/demo/customize.min.js +1 -1
  3. package/components/checkbox/demo/demo-support.js +1 -0
  4. package/components/checkbox/demo/getting-started.js +22 -0
  5. package/components/checkbox/demo/getting-started.min.js +1 -1
  6. package/components/checkbox/demo/index.js +8 -0
  7. package/components/checkbox/demo/index.min.js +1 -1
  8. package/components/checkbox/demo/styles.scss +1 -0
  9. package/components/checkbox/dist/index.js +1 -1
  10. package/components/checkbox/dist/registered.js +1 -1
  11. package/components/combobox/demo/customize.js +24 -0
  12. package/components/combobox/demo/customize.min.js +4 -3
  13. package/components/combobox/demo/demo-support.js +1 -0
  14. package/components/combobox/demo/getting-started.js +21 -0
  15. package/components/combobox/demo/getting-started.min.js +4 -3
  16. package/components/combobox/demo/index.js +23 -0
  17. package/components/combobox/demo/index.min.js +4 -3
  18. package/components/combobox/demo/styles.scss +1 -0
  19. package/components/combobox/dist/index.js +4 -3
  20. package/components/combobox/dist/registered.js +4 -3
  21. package/components/counter/demo/customize.js +21 -0
  22. package/components/counter/demo/customize.min.js +3 -2
  23. package/components/counter/demo/demo-support.js +1 -0
  24. package/components/counter/demo/index.js +21 -0
  25. package/components/counter/demo/index.min.js +3 -2
  26. package/components/counter/demo/styles.scss +1 -0
  27. package/components/counter/dist/index.js +3 -2
  28. package/components/counter/dist/registered.js +3 -2
  29. package/components/datepicker/demo/accessibility.md +1 -2
  30. package/components/datepicker/demo/api.md +62 -63
  31. package/components/datepicker/demo/customize.js +17 -0
  32. package/components/datepicker/demo/customize.md +1 -12
  33. package/components/datepicker/demo/customize.min.js +207 -601
  34. package/components/datepicker/demo/demo-support.js +1 -0
  35. package/components/datepicker/demo/index.js +23 -0
  36. package/components/datepicker/demo/index.min.js +207 -601
  37. package/components/datepicker/demo/styles.scss +1 -0
  38. package/components/datepicker/dist/index.js +207 -601
  39. package/components/datepicker/dist/registered.js +207 -601
  40. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +3 -14
  41. package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +6 -90
  42. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +5 -78
  43. package/components/dropdown/demo/customize.js +9 -0
  44. package/components/dropdown/demo/customize.min.js +2 -1
  45. package/components/dropdown/demo/demo-support.js +1 -0
  46. package/components/dropdown/demo/getting-started.js +9 -0
  47. package/components/dropdown/demo/getting-started.min.js +2 -1
  48. package/components/dropdown/demo/index.js +16 -0
  49. package/components/dropdown/demo/index.min.js +2 -1
  50. package/components/dropdown/demo/styles.scss +1 -0
  51. package/components/dropdown/dist/index.js +2 -1
  52. package/components/dropdown/dist/registered.js +2 -1
  53. package/components/form/demo/customize.js +28 -0
  54. package/components/form/demo/customize.min.js +355 -670
  55. package/components/form/demo/demo-support.js +1 -0
  56. package/components/form/demo/getting-started.js +9 -0
  57. package/components/form/demo/getting-started.min.js +355 -670
  58. package/components/form/demo/index.js +5 -0
  59. package/components/form/demo/index.min.js +355 -670
  60. package/components/form/demo/registerDemoDeps.js +23 -0
  61. package/components/form/demo/registerDemoDeps.min.js +355 -670
  62. package/components/form/demo/styles.scss +1 -0
  63. package/components/input/demo/customize.js +25 -0
  64. package/components/input/demo/customize.min.js +1 -1
  65. package/components/input/demo/demo-support.js +1 -0
  66. package/components/input/demo/getting-started.js +8 -0
  67. package/components/input/demo/getting-started.min.js +1 -1
  68. package/components/input/demo/index.js +8 -0
  69. package/components/input/demo/index.min.js +1 -1
  70. package/components/input/demo/styles.css +974 -0
  71. package/components/input/demo/styles.scss +1 -0
  72. package/components/input/dist/index.js +1 -1
  73. package/components/input/dist/registered.js +1 -1
  74. package/components/menu/demo/demo-support.js +1 -0
  75. package/components/menu/demo/index.js +25 -0
  76. package/components/menu/demo/styles.scss +1 -0
  77. package/components/radio/demo/customize.js +22 -0
  78. package/components/radio/demo/customize.min.js +1 -1
  79. package/components/radio/demo/demo-support.js +1 -0
  80. package/components/radio/demo/getting-started.js +24 -0
  81. package/components/radio/demo/getting-started.min.js +1 -1
  82. package/components/radio/demo/index.js +8 -0
  83. package/components/radio/demo/index.min.js +1 -1
  84. package/components/radio/demo/styles.scss +1 -0
  85. package/components/radio/dist/index.js +1 -1
  86. package/components/radio/dist/registered.js +1 -1
  87. package/components/select/demo/customize.js +11 -0
  88. package/components/select/demo/customize.min.js +132 -55
  89. package/components/select/demo/demo-support.js +1 -0
  90. package/components/select/demo/getting-started.js +26 -0
  91. package/components/select/demo/getting-started.min.js +132 -55
  92. package/components/select/demo/index.js +11 -0
  93. package/components/select/demo/index.min.js +132 -55
  94. package/components/select/demo/keyboard-behavior.md +18 -4
  95. package/components/select/demo/styles.scss +1 -0
  96. package/components/select/dist/auro-select.d.ts +20 -8
  97. package/components/select/dist/index.js +132 -55
  98. package/components/select/dist/registered.js +132 -55
  99. package/custom-elements.json +25 -311
  100. package/package.json +2 -6
  101. package/components/datepicker/dist/blackoutUtils.d.ts +0 -43
  102. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  103. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  104. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  105. /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
  106. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  107. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  108. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  109. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  110. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  111. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  112. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  113. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  114. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  115. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  116. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  117. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  118. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  119. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  120. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  121. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  122. /package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +0 -0
  123. /package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +0 -0
  124. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  125. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  126. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
  127. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
  128. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
@@ -7,69 +7,68 @@ 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 a fully selected range (both<br />`dateFrom` and `dateTo` are set). While a range is still being<br />picked (`dateFrom` set, `dateTo` unset), focused cells past the<br />start use `rangeLabelEndPreview` instead. |
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". |
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". |
73
72
 
74
73
  ## Methods
75
74
 
@@ -0,0 +1,17 @@
1
+ import { AuroDatePicker } from '../src/auro-datepicker.js';
2
+
3
+ AuroDatePicker.register();
4
+
5
+ export function initExamples(initCount) {
6
+ initCount = initCount || 0;
7
+
8
+ try {
9
+ } catch {
10
+ if (initCount <= 20) {
11
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
12
+ setTimeout(() => {
13
+ initExamples(initCount + 1);
14
+ }, 100);
15
+ }
16
+ }
17
+ }
@@ -296,7 +296,6 @@
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"
300
299
  navLabelPrevMonth="Ir al mes anterior"
301
300
  navLabelNextMonth="Ir al mes siguiente"
302
301
  calendarGridLabel="Días del mes del calendario"
@@ -325,7 +324,6 @@
325
324
  rangeLabelBeforeRange="antes de la salida"
326
325
  rangeLabelInRange="entre vuelos"
327
326
  rangeLabelAfterRange="después del regreso"
328
- rangeLabelEndPreview="previsualizando fecha de regreso"
329
327
  navLabelPrevMonth="Ir al mes anterior"
330
328
  navLabelNextMonth="Ir al mes siguiente"
331
329
  calendarGridLabel="Días del mes del calendario"
@@ -342,7 +340,7 @@
342
340
  <!-- AURO-GENERATED-CONTENT:END -->
343
341
  </auro-accordion>
344
342
  <auro-header level="5" id="localizationCalendarA11yStrings">Screen Reader Strings</auro-header>
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>
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>
346
344
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-screenreader-strings.html) -->
347
345
  <!-- The below content is automatically added from ./../apiExamples/localization-screenreader-strings.html -->
348
346
 
@@ -354,7 +352,6 @@
354
352
  + rangeLabelBeforeRange="vor dem Zeitraum"
355
353
  + rangeLabelInRange="im Zeitraum"
356
354
  + rangeLabelAfterRange="nach dem Zeitraum"
357
- + rangeLabelEndPreview="Vorschau Enddatum"
358
355
  + navLabelPrevMonth="Vorheriger Monat"
359
356
  + navLabelNextMonth="Nächster Monat"
360
357
  + calendarGridLabel="Kalendertage des Monats"&gt;
@@ -415,7 +412,6 @@
415
412
  rangeLabelBeforeRange="vor dem Zeitraum"
416
413
  rangeLabelInRange="im Zeitraum"
417
414
  rangeLabelAfterRange="nach dem Zeitraum"
418
- rangeLabelEndPreview="Vorschau Enddatum"
419
415
  navLabelPrevMonth="Vorheriger Monat"
420
416
  navLabelNextMonth="Nächster Monat"
421
417
  calendarGridLabel="Kalendertage des Monats">
@@ -437,7 +433,6 @@
437
433
  rangeLabelBeforeRange="在此期间之前"
438
434
  rangeLabelInRange="在此期间内"
439
435
  rangeLabelAfterRange="在此期间之后"
440
- rangeLabelEndPreview="预览结束日期"
441
436
  navLabelPrevMonth="上个月"
442
437
  navLabelNextMonth="下个月"
443
438
  calendarGridLabel="本月的日历天数">
@@ -458,7 +453,6 @@
458
453
  rangeLabelBeforeRange="vor dem Zeitraum"
459
454
  rangeLabelInRange="im Zeitraum"
460
455
  rangeLabelAfterRange="nach dem Zeitraum"
461
- rangeLabelEndPreview="Vorschau Enddatum"
462
456
  navLabelPrevMonth="Vorheriger Monat"
463
457
  navLabelNextMonth="Nächster Monat"
464
458
  calendarGridLabel="Kalendertage des Monats">
@@ -481,7 +475,6 @@
481
475
  rangeLabelBeforeRange="この期間の前"
482
476
  rangeLabelInRange="この期間内"
483
477
  rangeLabelAfterRange="この期間の後"
484
- rangeLabelEndPreview="終了日プレビュー"
485
478
  navLabelPrevMonth="前の月"
486
479
  navLabelNextMonth="次の月"
487
480
  calendarGridLabel="カレンダーの日付">
@@ -511,7 +504,6 @@
511
504
  rangeLabelBeforeRange="vor dem Zeitraum"
512
505
  rangeLabelInRange="im Zeitraum"
513
506
  rangeLabelAfterRange="nach dem Zeitraum"
514
- rangeLabelEndPreview="Vorschau Enddatum"
515
507
  navLabelPrevMonth="Vorheriger Monat"
516
508
  navLabelNextMonth="Nächster Monat"
517
509
  calendarGridLabel="Kalendertage des Monats"&gt;
@@ -533,7 +525,6 @@
533
525
  rangeLabelBeforeRange="在此期间之前"
534
526
  rangeLabelInRange="在此期间内"
535
527
  rangeLabelAfterRange="在此期间之后"
536
- rangeLabelEndPreview="预览结束日期"
537
528
  navLabelPrevMonth="上个月"
538
529
  navLabelNextMonth="下个月"
539
530
  calendarGridLabel="本月的日历天数"&gt;
@@ -554,7 +545,6 @@
554
545
  rangeLabelBeforeRange="vor dem Zeitraum"
555
546
  rangeLabelInRange="im Zeitraum"
556
547
  rangeLabelAfterRange="nach dem Zeitraum"
557
- rangeLabelEndPreview="Vorschau Enddatum"
558
548
  navLabelPrevMonth="Vorheriger Monat"
559
549
  navLabelNextMonth="Nächster Monat"
560
550
  calendarGridLabel="Kalendertage des Monats"&gt;
@@ -577,7 +567,6 @@
577
567
  rangeLabelBeforeRange="この期間の前"
578
568
  rangeLabelInRange="この期間内"
579
569
  rangeLabelAfterRange="この期間の後"
580
- rangeLabelEndPreview="終了日プレビュー"
581
570
  navLabelPrevMonth="前の月"
582
571
  navLabelNextMonth="次の月"
583
572
  calendarGridLabel="カレンダーの日付"&gt;