@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.11 → 0.0.0-pr624.111

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 (148) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/index.js +1244 -95
  6. package/components/bibtemplate/dist/registered.js +1244 -95
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +54 -19
  10. package/components/checkbox/demo/api.min.js +70 -45
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.md +2 -2
  13. package/components/checkbox/demo/index.min.js +70 -45
  14. package/components/checkbox/demo/readme.html +16 -9
  15. package/components/checkbox/demo/readme.md +1 -1
  16. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  17. package/components/checkbox/dist/auro-checkbox.d.ts +6 -3
  18. package/components/checkbox/dist/index.js +69 -44
  19. package/components/checkbox/dist/registered.js +69 -44
  20. package/components/combobox/README.md +2 -0
  21. package/components/combobox/demo/api.html +16 -10
  22. package/components/combobox/demo/api.md +121 -8
  23. package/components/combobox/demo/api.min.js +3283 -963
  24. package/components/combobox/demo/index.html +16 -10
  25. package/components/combobox/demo/index.md +20 -34
  26. package/components/combobox/demo/index.min.js +3283 -963
  27. package/components/combobox/demo/readme.html +16 -9
  28. package/components/combobox/demo/readme.md +2 -0
  29. package/components/combobox/dist/auro-combobox.d.ts +59 -14
  30. package/components/combobox/dist/index.js +3024 -848
  31. package/components/combobox/dist/registered.js +3024 -848
  32. package/components/counter/demo/api.html +17 -10
  33. package/components/counter/demo/api.md +167 -21
  34. package/components/counter/demo/api.min.js +3428 -777
  35. package/components/counter/demo/index.html +17 -10
  36. package/components/counter/demo/index.md +191 -34
  37. package/components/counter/demo/index.min.js +3428 -777
  38. package/components/counter/demo/readme.html +16 -9
  39. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  40. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  41. package/components/counter/dist/auro-counter.d.ts +16 -0
  42. package/components/counter/dist/helptextVersion.d.ts +2 -0
  43. package/components/counter/dist/iconVersion.d.ts +1 -1
  44. package/components/counter/dist/index.js +3427 -776
  45. package/components/counter/dist/registered.js +3427 -776
  46. package/components/datepicker/README.md +2 -1
  47. package/components/datepicker/demo/api.html +16 -10
  48. package/components/datepicker/demo/api.md +70 -28
  49. package/components/datepicker/demo/api.min.js +7082 -3165
  50. package/components/datepicker/demo/index.html +16 -10
  51. package/components/datepicker/demo/index.md +87 -8
  52. package/components/datepicker/demo/index.min.js +7082 -3165
  53. package/components/datepicker/demo/readme.html +16 -9
  54. package/components/datepicker/demo/readme.md +2 -1
  55. package/components/datepicker/dist/auro-datepicker.d.ts +152 -12
  56. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  57. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  58. package/components/datepicker/dist/index.js +14635 -10718
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +14635 -10718
  61. package/components/dropdown/demo/api.html +16 -10
  62. package/components/dropdown/demo/api.md +89 -281
  63. package/components/dropdown/demo/api.min.js +452 -271
  64. package/components/dropdown/demo/index.html +16 -10
  65. package/components/dropdown/demo/index.md +92 -362
  66. package/components/dropdown/demo/index.min.js +452 -271
  67. package/components/dropdown/demo/readme.html +16 -9
  68. package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  70. package/components/dropdown/dist/index.js +451 -270
  71. package/components/dropdown/dist/registered.js +451 -270
  72. package/components/form/demo/api.html +16 -9
  73. package/components/form/demo/api.md +1 -1
  74. package/components/form/demo/api.min.js +3 -3
  75. package/components/form/demo/autocomplete.html +19 -3
  76. package/components/form/demo/index.html +16 -9
  77. package/components/form/demo/index.min.js +3 -3
  78. package/components/form/demo/readme.html +16 -9
  79. package/components/form/demo/working.html +19 -13
  80. package/components/form/dist/auro-form.d.ts +1 -1
  81. package/components/form/dist/index.js +2 -2
  82. package/components/form/dist/registered.js +2 -2
  83. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  84. package/components/helptext/dist/index.js +2 -4
  85. package/components/helptext/dist/registered.js +2 -4
  86. package/components/input/README.md +6 -2
  87. package/components/input/demo/api.html +16 -10
  88. package/components/input/demo/api.md +234 -136
  89. package/components/input/demo/api.min.js +1057 -299
  90. package/components/input/demo/index.html +16 -10
  91. package/components/input/demo/index.md +55 -32
  92. package/components/input/demo/index.min.js +1071 -313
  93. package/components/input/demo/readme.html +16 -9
  94. package/components/input/demo/readme.md +6 -2
  95. package/components/input/dist/auro-input.d.ts +36 -2
  96. package/components/input/dist/base-input.d.ts +47 -11
  97. package/components/input/dist/buttonVersion.d.ts +1 -1
  98. package/components/input/dist/iconVersion.d.ts +1 -1
  99. package/components/input/dist/index.js +1070 -312
  100. package/components/input/dist/registered.js +1070 -312
  101. package/components/layoutElement/dist/index.js +11 -8
  102. package/components/layoutElement/dist/registered.js +97 -0
  103. package/components/menu/demo/api.html +17 -10
  104. package/components/menu/demo/api.md +65 -8
  105. package/components/menu/demo/api.min.js +303 -64
  106. package/components/menu/demo/index.html +16 -10
  107. package/components/menu/demo/index.min.js +303 -64
  108. package/components/menu/demo/readme.html +16 -9
  109. package/components/menu/dist/auro-menu.d.ts +53 -7
  110. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  111. package/components/menu/dist/iconVersion.d.ts +1 -1
  112. package/components/menu/dist/index.js +288 -49
  113. package/components/menu/dist/registered.js +288 -49
  114. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  115. package/components/radio/demo/api.html +16 -10
  116. package/components/radio/demo/api.md +41 -9
  117. package/components/radio/demo/api.min.js +93 -95
  118. package/components/radio/demo/index.html +16 -10
  119. package/components/radio/demo/index.min.js +93 -95
  120. package/components/radio/demo/readme.html +16 -9
  121. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  122. package/components/radio/dist/auro-radio.d.ts +11 -12
  123. package/components/radio/dist/index.js +92 -94
  124. package/components/radio/dist/registered.js +92 -94
  125. package/components/select/README.md +1 -0
  126. package/components/select/demo/api.html +16 -10
  127. package/components/select/demo/api.js +0 -2
  128. package/components/select/demo/api.md +159 -125
  129. package/components/select/demo/api.min.js +2284 -729
  130. package/components/select/demo/index.html +17 -11
  131. package/components/select/demo/index.md +1074 -259
  132. package/components/select/demo/index.min.js +2286 -719
  133. package/components/select/demo/readme.html +16 -9
  134. package/components/select/demo/readme.md +1 -0
  135. package/components/select/dist/auro-select.d.ts +86 -25
  136. package/components/select/dist/index.js +2178 -755
  137. package/components/select/dist/registered.js +2178 -755
  138. package/package.json +31 -28
  139. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  140. /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
  141. /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  144. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  145. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
package/components/datepicker/README.md CHANGED
@@ -83,7 +83,8 @@ This configuration enables proper module resolution for the component's TypeScri
83
83
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
84
84
 
85
85
  ```html
86
- <auro-datepicker>
86
+ <auro-datepicker required="">
87
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
87
88
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
88
89
  <span slot="fromLabel">Choose a date</span>
89
90
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
package/components/datepicker/demo/api.html CHANGED
@@ -16,18 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-datepicker custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-datepicker</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/datepicker/demo/api.md CHANGED
@@ -16,6 +16,8 @@
16
16
  | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
17
17
  | [format](#format) | `format` | | `string` | "mm/dd/yyyy" | Specifies the date format. The default is `mm/dd/yyyy`. |
18
18
  | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />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. |
19
+ | [hasError](#hasError) | | readonly | `boolean` | | |
20
+ | [hasFocus](#hasFocus) | `hasFocus` | | `boolean` | | |
19
21
  | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
20
22
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
21
23
  | [layout](#layout) | | | `string` | "classic" | |
@@ -26,6 +28,8 @@
26
28
  | [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
27
29
  | [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
28
30
  | [onDark](#onDark) | `onDark` | | `boolean` | false | If declared, onDark styles will be applied to the trigger. |
31
+ | [placeholder](#placeholder) | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
32
+ | [placeholderEndDate](#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. |
29
33
  | [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
30
34
  | [range](#range) | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
31
35
  | [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
@@ -46,12 +50,14 @@
46
50
 
47
51
  | Method | Type | Description |
48
52
  |-------------------------------|----------------------------------------|--------------------------------------------------|
49
- | [focus](#focus) | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
50
- | [renderLayoutFromAttributes](#renderLayoutFromAttributes) | `(): TemplateResult<ResultType>` | |
51
- | [renderTempInputs](#renderTempInputs) | `(): TemplateResult` | |
53
+ | [clear](#clear) | `(): void` | Clears the current value(s) of the datepicker. |
54
+ | [focus](#focus) | `(focusInput?: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
55
+ | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. |
52
56
  | [reset](#reset) | `(): void` | Resets component to initial state. |
57
+ | [resetInputs](#resetInputs) | `(): void` | Resets values without resetting validation. |
53
58
  | [resetLayoutClasses](#resetLayoutClasses) | `(): void` | |
54
59
  | [resetShapeClasses](#resetShapeClasses) | `(): void` | |
60
+ | [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. |
55
61
  | [updateComponentArchitecture](#updateComponentArchitecture) | `(): void` | |
56
62
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
57
63
 
@@ -69,6 +75,7 @@
69
75
 
70
76
  | Name | Description |
71
77
  |----------------------------|--------------------------------------------------|
78
+ | `ariaLabel.bib.close` | Sets aria-label on close button in fullscreen bib |
72
79
  | `bib.fullscreen.dateLabel` | Defines the content to display above selected dates in the mobile layout. |
73
80
  | `bib.fullscreen.headline` | Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout. |
74
81
  | `date_MM_DD_YYYY` | Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot. |
@@ -97,7 +104,8 @@
97
104
  <div class="exampleWrapper">
98
105
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
99
106
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
100
- <auro-datepicker>
107
+ <auro-datepicker required="">
108
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
101
109
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
102
110
  <span slot="fromLabel">Choose a date</span>
103
111
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -110,7 +118,8 @@
110
118
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
111
119
 
112
120
  ```html
113
- <auro-datepicker>
121
+ <auro-datepicker required="">
122
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
114
123
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
115
124
  <span slot="fromLabel">Choose a date</span>
116
125
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -126,7 +135,8 @@ When used, the datepicker will display two inputs and the component will support
126
135
  <div class="exampleWrapper">
127
136
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
128
137
  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
129
- <auro-datepicker range>
138
+ <auro-datepicker range minDate="07/08/2025">
139
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
130
140
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
131
141
  <span slot="fromLabel">Departure</span>
132
142
  <span slot="toLabel">Return</span>
@@ -140,7 +150,8 @@ When used, the datepicker will display two inputs and the component will support
140
150
  <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
141
151
 
142
152
  ```html
143
- <auro-datepicker range>
153
+ <auro-datepicker range minDate="07/08/2025">
154
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
144
155
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
145
156
  <span slot="fromLabel">Departure</span>
146
157
  <span slot="toLabel">Return</span>
@@ -904,7 +915,8 @@ Sets the label used for the input. When the `range` attribute is used this is th
904
915
  <div class="exampleWrapper">
905
916
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
906
917
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
907
- <auro-datepicker>
918
+ <auro-datepicker required="">
919
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
908
920
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
909
921
  <span slot="fromLabel">Choose a date</span>
910
922
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -917,7 +929,8 @@ Sets the label used for the input. When the `range` attribute is used this is th
917
929
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
918
930
 
919
931
  ```html
920
- <auro-datepicker>
932
+ <auro-datepicker required="">
933
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
921
934
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
922
935
  <span slot="fromLabel">Choose a date</span>
923
936
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -965,7 +978,8 @@ To view this demo, set your window to a mobile screen size.
965
978
  <div class="exampleWrapper">
966
979
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
967
980
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
968
- <auro-datepicker>
981
+ <auro-datepicker required="">
982
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
969
983
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
970
984
  <span slot="fromLabel">Choose a date</span>
971
985
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -978,7 +992,8 @@ To view this demo, set your window to a mobile screen size.
978
992
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
979
993
 
980
994
  ```html
981
- <auro-datepicker>
995
+ <auro-datepicker required="">
996
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
982
997
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
983
998
  <span slot="fromLabel">Choose a date</span>
984
999
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -994,7 +1009,8 @@ Only for use with the `range` attribute. Sets the label for the second input.
994
1009
  <div class="exampleWrapper">
995
1010
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
996
1011
  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
997
- <auro-datepicker range>
1012
+ <auro-datepicker range minDate="07/08/2025">
1013
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
998
1014
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
999
1015
  <span slot="fromLabel">Departure</span>
1000
1016
  <span slot="toLabel">Return</span>
@@ -1008,7 +1024,8 @@ Only for use with the `range` attribute. Sets the label for the second input.
1008
1024
  <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
1009
1025
 
1010
1026
  ```html
1011
- <auro-datepicker range>
1027
+ <auro-datepicker range minDate="07/08/2025">
1028
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
1012
1029
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
1013
1030
  <span slot="fromLabel">Departure</span>
1014
1031
  <span slot="toLabel">Return</span>
@@ -1462,26 +1479,51 @@ The component may be restyled using the following code sample and changing the v
1462
1479
  ```scss
1463
1480
  /* stylelint-disable color-function-notation */
1464
1481
 
1465
- @import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
1466
- @import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
1482
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
1483
+
1484
+ :host(:not([ondark])) {
1485
+ // datepicker
1486
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
1487
+ --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
1488
+ --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1489
+
1490
+ // calendar
1491
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1492
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1493
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1494
+ --ds-auro-calendar-nav-btn-border-color: transparent;
1495
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1496
+ --ds-auro-calendar-nav-btn-container-color: transparent;
1497
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1498
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1499
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1500
+ --ds-auro-calendar-cell-border-color: transparent;
1501
+ --ds-auro-calendar-cell-container-color: transparent;
1502
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1503
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1504
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1505
+ }
1506
+
1507
+ :host([ondark]) {
1508
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
1509
+ --ds-auro-datepicker-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
1510
+ --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
1467
1511
 
1468
- :host {
1469
- --ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1470
- --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
1471
- --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
1472
- --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
1473
- --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
1512
+ // calendar
1513
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1514
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1515
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1474
1516
  --ds-auro-calendar-nav-btn-border-color: transparent;
1475
- --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
1517
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1476
1518
  --ds-auro-calendar-nav-btn-container-color: transparent;
1477
- --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
1478
- --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
1479
- --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1519
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1520
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1521
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1480
1522
  --ds-auro-calendar-cell-border-color: transparent;
1481
1523
  --ds-auro-calendar-cell-container-color: transparent;
1482
- --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{$ds-advanced-color-shared-background-muted});
1483
- --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1484
- --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1524
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1525
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1526
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1485
1527
  }
1486
1528
  ```
1487
1529
  <!-- AURO-GENERATED-CONTENT:END -->